HTML5（H5）新增属性和标签

一 H5的特点

H5就是在之前HTML的版本上新增了一些标签，所以用起来没有太多变化 文章源自小温Talk.听闻 | 小温Talk-https://azureyun.azurewebsites.net/1273.html

01 H5的网页骨架非常简洁 文章源自小温Talk.听闻 | 小温Talk-https://azureyun.azurewebsites.net/1273.html

02 H5的语法极其松散，很多标签可以省略，也可以只写开始不写结束 文章源自小温Talk.听闻 | 小温Talk-https://azureyun.azurewebsites.net/1273.html

03 H5中新增的标签具有很强的语义化，利于网页优化 文章源自小温Talk.听闻 | 小温Talk-https://azureyun.azurewebsites.net/1273.html

04 H5是向下兼容的一个版本，在它里面可以书写任意之前用过的HTML标签 文章源自小温Talk.听闻 | 小温Talk-https://azureyun.azurewebsites.net/1273.html

05 H5目前并没有达到所有浏览器都支持，从IE9+之后开始部分支持。 文章源自小温Talk.听闻 | 小温Talk-https://azureyun.azurewebsites.net/1273.html

Chrome Firefox 这些标准浏览器最新版本基本都支持了 文章源自小温Talk.听闻 | 小温Talk-https://azureyun.azurewebsites.net/1273.html

二 H5新增结构标签

01 <header> </header>: 表示头部内容 文章源自小温Talk.听闻 | 小温Talk-https://azureyun.azurewebsites.net/1273.html

02 <nav></nav> : 导航标签 文章源自小温Talk.听闻 | 小温Talk-https://azureyun.azurewebsites.net/1273.html

03 <section> </section>: 和div 类似，可以表示一个完整的区域

04 <aside></aside> ： 侧边栏

05 <article></article> : 文字区域

06 <footer></footer>: 底部区域

1. <time></time> : 时间标签
   

三 H5新增input 属性

01 placeholder: 代替 value 属性可以实现类似于 focus blur 焦点的事件操作

02 autofocus: 具有该属性的Input 会自动获取到焦点

03 required: 具有该属性的input 为必填项

04 autocomplete: on autocomplete: off 分别表示开启和关闭自动补全功能，该input 必须具有 name 属性。

四 H5新增下拉列表

    <input type="text" list="id名">

<datalist id="名称">

    <option value="值1">值</option>

    .......

</datalist>

五 H5新增 type 类型

01 email : 验证邮箱格式

02 url : 需要写入完整的网址 例 http://www.baidu.com

03 number: 只能输入数值

04 search : 一般用来做搜索框

05 range : 显示为一个滑块

06 color : 调用当前设备下自带的拾色器

07 datetime-local: 本地的详细时间信息

08 month: 设置当前为一年的第多少个月

09 week :第***周

10 date : 设置当前是多少号

1. ime: 设置具体的****分
   

六 音频标签

<audio autoplay controls loop >

    对不起，您的浏览器不支持该标签    

    <source src="音频的路径" />

    ............

</audio>

01 利用 audio 标签可以在 html 页面中引入相应的声音资源，但是到目前为止没有哪一种格式的声音是被所有浏览器都支持的。

02 source 标签就是专门用来引入不同格式声音资源的

03 为了兼容低版本浏览器，可以在 audio 中写出相应文字，在不支持audio 标签的浏览器中可以看到这段文字

04 autoplay="autoplay" 设置自动播放 可以缩写为autoplay

05 controls="controls" 调用设备自带播放控件 可以缩写为controls

1. loop="loop" 设置循环播放 可以缩写为loop
   

七 视频标签

<video autoplay controls loop>

    <source src="视频路径" />

    ..............

</video>

01 用法和 audio 极其相似，可以设置宽高属性，和图片差不多，设置一边另一边会自动缩放。

02 onpause 和 onplay 分别是JS中提供给 video标签用监测当前视频是暂停还是播放的二个事件。

八 H5新增的本地存储方案

本地存储是相对于将数据存放在服务器端而言，H5中新增了几种方案可以直接在浏览器本地存放数据。

01 localStorage 和 sessionStorage : 两个全局对象，身上具有 存、取、删数据的操作方法

02 setItem( '键名'，'键值' ) ：按着某个名字来存放数据。

03 getItem( '键名' )： 获取某个键名的值

04 removeItem('键名' ):删除某个键名的值

localStorage 和 sessionStorage 存数据的区别就在于 localStorage 存放的数据在页面关闭之后仍然保存在浏览器中，而 sessionStorage存放的数据在页面关闭之后自动清除再次打开页面时就没了。