html5新特性与用法大全

有好多小伙伴私聊我问我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 建议列表

<datalist id="lunchList">
    <option>京酱肉丝</option>
    <option>锅包肉</option>
    <option>鱼香肉丝</option>
    <option>青椒肉丝</option>
    <option>地三鲜</option>
</datalist>

请输入您需要的午餐:<input type="text" name="lunch" list="lunchList"/>

四、h5中 新增的表单元素 -- progress 进度条

    有两种形式:  

                bootstrap里面有progress插件样式

<form>
    网络连接中<progress></progress>
    <br/>
    <!-- 0-1之间 -->
    下载进度 <progress id="p3" value=http://www.cppcns.com/web/html5/"0">
    

 

 五、h5中 新增的表单元素 -- meter

<body>
    机油含量:<meter id="m1" min="0" max="100" low="30" high="70" optimum="40" value=http://www.cppcns.com/web/html5/"50">
    PM值:
 

meter:度量衡/刻度尺/,用于标示一个所处的范围:不可接受(红色)/可以接受(黄色)/非常优秀(绿色)

    <meter min="可取的最小值" max="可取的最大值" low="合理的下限值" high="合理的上限值" optimum="最佳值" value=http://www.cppcns.com/web/html5/"当前值" >

 3) 表单元素的新属性

    一、H4中表单元素的属性:<input>  

                id/class/title/type/value/name/style/readonly/disabled/checked/                 

H5中表单元素的新属性    

1)placeholder:占位字符 作为提示不可提交                

<input value=http://www.cppcns.com/web/html5/“tom” placeholder=“请输入用户名”/>     

2)autofocus:自动获取输入焦点 (不用点一下就可以输入只第一个input设置的才有效)                 

 

html5新特性与用法大全

扫一扫手机访问