有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下。
1)新的语义标签 footer header 等等 2)增强型表单 表单2.0 3)音频和视频 4)canvas 绘图 5) SVG绘图 6)地理定位 7) 拖放API 8)web worker 用来执行耗时任务 9)web Storage 在浏览器端存储大量数据 10)web Socket 一种持续性的连接(非http协议)
(一)新型的语义标签就不说了,
例如<footer></footer>
(二)增强型表单 表单2.0
一、
1)新的input type h4和h5对比!
H4中input type :text /password /radio /checkbox/ sybmit/ reset / file /hidden / image/
H5中的input type :email/url/number/tel/search /range /color/month/week /date
2)新的表单元素
H4中表单元素 :input/textarea/select,option/label
H5中新增的表单元素:datalist /progress/meter/output
二、h5中 新增的表单元素 -- datalist 建议列表
请输入您需要的午餐:<input type="text" name="lunch" list="lunchList"/>
四、h5中 新增的表单元素 -- progress 进度条
有两种形式:
bootstrap里面有progress插件样式
五、h5中 新增的表单元素 -- meter
meter:度量衡/刻度尺/,用于标示一个所处的范围:不可接受(红色)/可以接受(黄色)/非常优秀(绿色)
<meter min="可取的最小值" max="可取的最大值" low="合理的下限值" high="合理的上限值" optimum="最佳值" value="当前值" ></meter>
3) 表单元素的新属性
一、H4中表单元素的属性:<input>
id/class/title/type/value/name/style/readonly/disabled/checked/
H5中表单元素的新属性
1)placeholder:占位字符 作为提示不可提交
<input value=“tom” placeholder=“请输入用户名”/>
2)autofocus:自动获取输入焦点 (不用点一下就可以输入只第一个input设置的才有效)
<input autofocus>
3) multiple : 允许输入框中出现多个输入值用逗号分隔 a@dn.com,b@dn.com
<input type="email" name="emails" multiple>
4)form :用于把输入域放置到FORM外部
<form id="f5"></from>
<input form="f5">
=================输入验证相关的新属性==================================
例子查看input验证相关的属性/yz.html
5)required :必填项,内容不能为空
6)maxlength:指定字符串的最大长度
7)minlength:指定字符串的最小长度
8)max:指定数字的最大值
9)min:指定数字的最小值
10)pattern:指定输入必须符合的正则表达式
上述验证属性会影响表单元素对应的js对象的validity属性,validity属性是验证的属性。
(三) video 视频和音频
1.flash被H5取代体现在哪些方面?
flash 绘图(AS/FLEX) =>Canvas/SVG
flash 动画 => 定时器+Canvas
视频和音频播放 => VIDEO/AUDIO
flash 客户端存储 => WebStorage
2.H5新特性 ——视频播放器 (是个行内块元素。可以给宽高)
H5提供了一个新的标签用于播放视频:
您的浏览器不支持VIDEO播放!
</video> 它本身是一个300*150的行内块元素 备注:写多行source是为了兼容各个浏览器。因为浏览器对视频格式支持不统一,有些浏览器例如有些浏览器支持mp4格式,那么它就播放第一个mp4格式的视频,如果它不支持就检查是不是支持下面的ogg视频,如果支持就播放,不支持的话继续向下,下面没有source了,那么就显示“您的浏览器不支持VIDEO播放!”。
VIDEO标签/对象常用的成员:
成员属性:
<video id="v2" src="" autoplay controls loop muted poster="2.jpg" preload="auto"></video>
autoplay:false, 是否自动播放 默认false controls:false,是否显示播放控件,默认为false loop:false ,是否循环播放,默认为false muted:false,是否静音播放,默认为false poster:'',在播放第一帧之前显示的海报,可以是图片。默认为空没有 preload:视频预加载策略,可取值: auto:预加载视频的元数据以及缓冲一定时长,绝对不可以在手机端使用 (尺寸/时长。第一帧内容,缓冲时长)(预加载浪费流量) metadata:仅预加载视频的元数据(尺寸/时长,第一帧内容,)没有缓冲时长,适合手机 none:不预加载任何数据
----------------------------------------------------------------- id v2的属性 用法例如:
v2.playbackRate=3;
currentTime:当前播放的时长 duration:总时长 paused:true,当前视频是否处于暂停状态 true是暂停,false是播放 volume:1 默认值是1,当前音量 playbackRate:1 ,回放速率 大于1表快放,小于1表慢放
id v2的方法:
play():播放视频 pause ():暂停播放 成员事件: onplay:当视频开始播放时触发的事件 onpause:当视频暂停时触发的事件 练习:不使用video自带的controls,自定义播放/暂停按钮 鼠标移出视频区域隐藏按钮;鼠标移入显示按钮 例如:视频音频、canvas/video.html 当暂停就显示广告,播放就隐藏广告
3、H5新特性 ——音频播放器
属性方法和视频一样,只不过没有海报属性 ***判断复选框是否√选
(四)、canvas
每个画布上有且只有一个“画笔”对象 ———称为“绘图上下文”对象——使用该对象进行绘图!
var ctx = canvas.getContext('2d') //现在只有2d的 得到画布上的画布对象
canvas绘图 ---难点 !!!
1)SVG绘图:矢量绘图技术,2000年出现,后纳入H5标准 2)Canvas绘图:位图绘图技术,H5提出的绘图技术 3)WebGL绘图:3D绘图技术,尚未纳入H5标准
canvas绘图技术 canvas:画布,H5实现2D绘图技术
<canvas width="500" height="400">您的浏览器不支持canvas</canvas>
canvas标签在浏览器默认是300*150的inline-block。画布的宽高只能使用HTML/JS属性来赋值,不能使用css样式赋值! 每个画布上有且只有一个“画笔”对象 ———称为“绘图上下文”对象——使用该对象进行绘图! var ctx = canvas.getContext('2d') //现在只有2d的 得到画布上的画布对象
1)使用canvas绘制矩形
绘制矩形
2)使用canvas绘制文本
一段文字的定位点在其文本基线的起点
3)使用canvas绘制路径
path:类似于ps中的“钢笔工具”,由多个坐标点组成的任意形状,路径不可见,可用于“描边”、 “填充”,“裁剪”。
角度制:360 = 弧度制:2PI 180 = 1PI 例如
4)使用canvas绘制图像
canvas属于客户端技术,图片在服务器中,所以浏览器必须先下载要绘制的图片, 且等待图片异步加载完成:
监听鼠标在画布上方移动事件
2、canvas绘图中渐变
线性渐变:linearGradient 径向渐变:radialGradient 可以参考ps中渐变效果、
难点:坐标系坐标轴 、单词比较多
3、绘图变形
(五)SVG绘图
先来了解一下什么是位图和矢量图。简单了解一下就可以。
位图:由一个又一个像素点组成,每个点各有自己的颜色,色彩细腻。 矢量图:由一个又一个线条组成,每个线条可以指定颜色,方向,可以无限缩放,但颜色细节不够丰富
一、SVG绘图 使用标签进行绘图,可以直接绑定事件监听
二、如何js创建一个svg标签!
三、svg创建椭圆
四、svg创建直线
注:stroke-linecap="square"有多出来的方形 ,stroke-linecap="round"多出来圆形的区域,stroke-linecap="butt"不出来多方形 (也就是说你创建的直线设置这些属性头尾有区别!自己试一下就知道了!细节很重要!)
五、svg创建折线
六、地理定位 (以后不用客户端,我们也可以自己定位咯!)
Geolocation:地理定位,使用JS获取当前浏览器所在的地理坐标(经度,维度,海拔,速度) 数据,用于实现LBS应用(Location Based Service),如饿了么,高德导航...
手机浏览器如何获得定位信息:
1)首选手机中的GPS芯片与卫星通信,定位精度在米 2)次选手机基站进行定位获取,定位精度在公里 (违法的) PC浏览器如何获得定位信息: 1)通过IP地址进行反向解析,定位精度取决于IP地址库的大小
HTML5中提供了一个新的对象,用于获取当前浏览器的定位信息:
2、扩展:在网页中如何嵌入百度地图
1)注册百度开发者账号 map.baidu.com ---> lbsyun.baidu.com 2)创建一个网站;登录百度地图,为网站申请一个地图的AccessKey 3)在自己的网页中嵌入百度地图提供的API,嵌入百度地图
这里不多讲这个如何嵌入了!(要记住用百度地图必须注册账号,然后引用人家的库就对了!)
七、拖放API
前面有讲过拖放:小伙伴们自己往前找一下以前的博客。
八 存储
存储主要就是cookie和session(前面一找一大堆的写法我讲一下区别吧还有注意事项) :要记住session是关了浏览器就消失的,cookie是关了浏览器也不消失的!注意注意:cookie存储时候必须加时间、不加时间的话关闭浏览器之后同样消失!这浏览器存储利用起来解决了很多功能问题比如记住密码等功能!!
九 web Socket
这个东西说不说呢。。。。。还是稍微简单的讲一下吧,全靠领悟啊~~
web socket 是一个可以在服务器与客户端之间建立一个非http的双向连接!
这个连接是实时的,也是永久的。
服务器可以主动推送消息。
服务器不在需要轮询客户端的请求,服务器与客户端之间通信无需重新建立连接。
也就是可持续性的 来回通讯。
如何创建呢?一段代码搞定
总结
以上所述是小编给大家介绍的html5新特性与用法大全,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对VeVb武林网网站的支持!
新闻热点
疑难解答