HTML5新特性

1.语义化标签

　　语义化标签使得页面的内容结构化，见名知义

标签	描述
	定义了文档的头部区域
	定义了文档的尾部区域
	定义文档的导航
	定义文档中的节（section、区段）
	定义页面独立的内容区域
	定义页面的侧边栏内容
	用于描述文档或文档某个部分的细节
	标签包含 details 元素的标题
	定义对话框，比如提示框

2.增强型表单

HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证。

输入类型	描述
color	主要用于选取颜色
date	从一个日期选择器选择一个日期
datetime	选择一个日期（UTC 时间）
datetime-local	选择一个日期和时间 (无时区)
email	包含 e-mail 地址的输入域
month	选择一个月份
number	数值的输入域
range	一定范围内数字值的输入域
search	用于搜索域
tel	定义输入电话号码字段
time	选择一个时间
url	URL 地址的输入域
week	选择周和年

用户名：<input type="text" name="userName"> <br>
密码：<input type="password" name="userPwd"> <br>
<!--email提供了默认的电子邮箱的完整验证：要求必须包含@符号，同时必须包含服务器名称，如果不能满足验证，则会阻止当前的数据提交-->
邮箱：<input type="email"> <br>
<!--tel它并不是来实现验证。它的本质目的是为了能够在移动端打开数字键盘。意味着数字键盘限制了用户只能输入数字。  如何查看效果：qq发送文件>>手机端使用qq来接收>>使用手机浏览器查看-->
电话：<input type="tel"> <br>
<!--验证只能输入合法的网址：必须包含http://-->
网址：<input type="url"> <br>
<!--number：只能输入数字(包含小数点)，不能输入其它的字符
max:最大值
min:最小值
value:默认值-->
数量：<input type="number" value="60" max="100" min="0"> <br>
<!--search：可以提供更人性化的输入体验-->
请输入商品名称：<input type="search"> <br>
<!--range:范围-->
范围：<input type="range" max="100" min="0" value="50"> <br>
颜色：<input type="color"> <br>
<!--日期时间相关-->
<!--time:时间：时分秒-->
时间：<input type="time"> <br>
<!--date：日期：年月日-->
日期：<input type="date"> <br>
<!--datetime:大多数浏览器不能支持datetime.用于屏幕阅读器-->
日期时间：<input type="datetime"><br>
<!--datetime-local:日期和时间-->
日期时间：<input type="datetime-local" value="2017-06-30T00:00"> <br>
月份：<input type="month"> <br>
星期：<input type="week">
<!--提交-->
<input type="submit">

3.视频和音频

<audio controls autoplay="autoplay">
    <source src="./mp3/aa.mp3">   

    <source src="./mp3/aa.wav">   

    <source src="./mp3/aa.ogg"> 

    您的浏览器不支持音频播放功能    

</audio>

<video controls autoplay width="600px" height="400px">

    <source src="./mp3/mp4.mp4"/>

    <source src="./mp3/mp4.ogg"/>

    您的浏览器不支持视频播放功能  

</video>

4.dom元素扩展

​ classList 元素的样式的集合

a) Node.classList.add('class') 添加class    

b) Node.classList.remove('class') 移除class    

c) Node.classList.toggle('class') 切换class，有则移除，无则添加    

d) Node.classList.contains('class')检测是否存在class

5. 本地存储

​ sessionStorage的使用：存储数据到本地。存储的容量5mb左右。

​ 1.这个数据本质是存储在当前页面的内存中-意味着新开的页面和新开的浏览器无法获取数据

​ 2.它的生命周期为关闭当前页面，关闭页面，数据会自动清除

​ 3.如果当前页面显示的内容发生改变之后，sessionStorage数据仍然在

​ setItem(key,value):存储数据，以键值对的方式存储

​ getItem(key):获取数据，通过指定名称的key获取对应的value值

​ removeItem(key):删除数据，通过指定名称key删除对应的值

​ clear():清空所有存储的内容

​ localStorage的使用： 存储的内容大概20mb 不同浏览器不能共享数据。但是在同一个浏览器的不同窗口中可以共享数据 永久生效，它的数据是存储在硬盘上，并不会随着页面或者浏览器的关闭而清除.如果想清除，必须手动清除

​ setItem(key,value):存储数据，以键值对的方式存储

​ getItem(key):获取数据，通过指定名称的key获取对应的value值

​ removeItem(key):删除数据，通过指定名称key删除对应的值

​ clear():清空所有存储的内容

​ sessionStorage 和 localStorage在存和取的时候操作的都是字符串

赞赏

感谢鼓励