HTML5就是对HTML4得升级，在HTML5中标签更加语义化，我们之前常用的标签有div,h1-h6,p,ul,ol,li,dl,dt,dd,span,strong,em,i,img,a,input,textarea,select,这些标签有特定的语义化，如：
列表：
ul(无序列表常用于新闻、导航)
ol（有序列表 --如用于排行榜）
标题：
h系列的
一段文字：
p标签
以前做一个导航我们常用
<div>
<ul>
<li></li>
...
</ul>
</div>
现在用nav就能语义化一个导航，如：
<nav>
<ul>
<li></li>
...
</ul>
</nav>
很明显虽然里面的列表部分相同，但是外面的nav比起div更加语义化。类似这样的新的语义化标签还有很多，如：以前做一个主体内容我们或许会这么做
<div class="main></div>
现在只需要一个mian标签就能更加语义化的将要表达的主体内容表现出来
<main>我是主题内容</main>
以前我们一张图配一段文字可以通过这样的方式来：
<div class="box">
<img src="" alt="" />
<p>这是图片的说明</p>
</div>
现在可以通过一个figure标签就能更加语义化的表现出来
<figure>
<img src="" alt=""/>
<figcaption>这是figure的标题，需要配合figure来使用</figcaption>
</figure>
同样新增的常用标签还有section，这个标签常用来定义文档中的某一个区块，但是他的作用并不是用来代替div的。section所指的区块是，如常见的新闻列表,如红色部分标注的这样的小块
8941207-d401c11ae8227bc8.png
<section>
定义文档中的某一区块，官方建议只出现标题和h1-h6,和内容p,还可以出现img,他无法替代div,div没有语义，section有语义，一般用于展示性的列表如，有标题和段落，或者有标题和段落图片
</section>
还有常用的如datalist标签，可以用在如百度搜索的这样的案例中，和input搭配使用，类似余label和input的搭配，如：
<input type="text" list="baidu"/>
<datalist id="baidu">
<option value="100">一班</option>
<option value="101">二班</option>
<option value="102">三班</option>
<option value="103">四班</option>
<option value="104"></option>
</datalist>
这样输入对应的value,就会自动联想。
当然上面提到的都是最基础的标签，当然还有一些特殊的标签，如vidio,以前在网页上播放视屏是通过flash的方式，优酷播放视屏就是这样方式来播放的，手机上一般是通过html5来制作的，也就是vidio标签。类似的还有一个播放音频的audio标签，如：
<audio src="演员.mp3" controls autoplay muted loop preload></audio>
controls属性用来展示浏览器自带的控制条，既然是浏览器自带的，就会有不同的展示效果,autoplay属性表示自动播放，不需要点开始按钮就能播放，muted属性表示的是静音, loop属性表示的循环播放，类似与单曲循环,preload属性表示的是预加载，当然也可以写成如下的形式
<audio controls autoplay muted loop preload>
<source src="演员.ogg" type="audio/ogg"></source>
<source src="演员.mp3" type="audio/mpeg"></source>
<source src="演员.wav" type="audio/wav"></source>
</audio>
通过source指定支持的类型。
由此可见html5新增的标签只是增强了标签的语义化。但是必须注意的是这些新增的标签在低版本浏览器里面并不支持，但是却有补丁能够让这些标签在低版本浏览器里同样兼容，这个补丁就是htmlshiv.min.js,我们可以通过条件注释的方式来引入：
<!--[if lt IE 9]>
<script src="html5shiv.min.js"></script>
<![endif]-->
当然如果是纯粹的移动端应用，这个脚本就没必要引入。
html5出来新增标签外，还扩展了input标签的type,如：
<input type="date"/>
<input type="number" min="0" max="100" step="1"/> number在pc端带上下箭头，可以设置最大最小值，在移动端可以调出数字键盘
<input type="range" min="0" max="100" step="5" value="50"/>
<input type="search"/>可以用在移动端的搜索
网友评论