H5语义化标签

前端项目还在大片使用div+css来构建页面的时候，可读性极低，也导致维护成本很高，所以有了语义化标签。

下面从例子中总结语义化标签的意义。

比较标签：<b>VS<strong>    <i>VS<em>
首先两组标签在页面中的呈现都是相同的效果，第一组显示出来都是文本加粗，第二组则都是显示为斜体，那到底有什么不同呢？
<b>与<i>这两个标签可以被称为物理标签，即浏览器对标签中的内容物理上添加：加粗或者倾斜的样式，并没有任何的意思，只是让内容bold或者italic。
<strong>与<em>这两个标签可以称之为逻辑标签，即浏览器读到这个标签时了解到强调的意思，强调标签中的内容需要加粗来强调，或者斜体来强调其中的内容。它们是强调文档逻辑，而不仅仅只是告诉浏览器应该怎么做。

语义化标签的意义：

 

1. 利于网站的SEO；各大网站在抓取网页时，语义化标签更清楚的表达网站的逻辑与内容，搜索引擎更加友好，更利于解析上下文环境，抓取各个关键字的权重
2. 方便其他设备的解析，比如屏幕阅读器、盲人阅读器、移动设备，能有意义的渲染网页，清晰的表达网页的上下文内容以及强调部分等
3. 布局的语义化标签，会使得项目在没有css的情况下，页面也能呈现出更好的结构
4. 代码的可读性与可维护性更强；比较以往的div布局来说，越来越多的语义化标签使得代码更加就见名之意的，带给开发者更好的体验。

HTML 5 中的语义化标签：

1. <header> 网页或section的头部
    <asider> 网页的侧边栏内容
    <nav> 定义页面的主要导航部分
    <article> 独立完整的内容模块，通常用在博客、论坛、新闻、评论等，区别于section这种分段的标签
    <section> 网页文档中的段、节，通常子元素包括标题：h1-h6
    <footer> 网页或section底部的内容，可能包括：作者或者版权信息等；

    借用一张图：

2. <details> 

标签用于描述文档或文档某个部分的细节,summary是details元素的标题

<details>
    <summary>这是一个标题</summary>
    <p>详细描述...</p>
</details>

3. <canvas>

　用来进行canvas绘图,该标签为图形容器，通过js找到标签的操作对象来画图

<canvas id="canvas" style="width:300px;height:300px"></canvas>
<script>
    var canvas=document.getElementById('canvas');
    var ctx=canvas.getContext('2d');
    ctx.fillStyle='#ddd';
    ctx.fillReact(x,y,width,height)
</script>

 

4. 嵌入<svg>

 

使用XML技术绘制可缩放矢量图形的语言，可使用扩展名.svg的xml定义，也可以内嵌在html中

//html中内嵌标签  绘制圆形
<svg style="width:300px;height:300px">
    <circle cx="50" cy="50" r="50"></circle>
</svg>

5. <video></video>

定义电影片段或者其他视频流,支持三种类型的视频： Ogg、MPEG4、WebM

<video src='**.mp4' controls>
    您的浏览器暂不支持video标签，请更新浏览器版本。
</video>

6.<audio></audio>

定义音频,可以支持多个source（媒介标签，这里没有写错，这个标签可以省略/）,浏览器默认将第一个能识别的格式进行播放（所以，使用source实际是解决个大厂的兼容性问题）

<audio>
    <source src='***.ogg' type='audio/ogg'>
    <source src='***.mp3' type='audio/mp3'>
    您的浏览器暂不支持audio标签，请更新浏览器版本。
</audio>

7.<datalist>

与input配合使用可制作输入值的下拉列表，与select不同的是datalist即可下拉选择，也可以输入值，还有模糊匹配的功能。

<input list="users"/>
<datalist id='users'>
    <option>Jamse</option>
    <option>Jack</option>
    <option>Mary</option>
</datalist>

8.<mark>

在视觉上向那些想要突出的文字，比如搜索结果中向用户高亮显示搜索关键词

9.<meter>

数据区间中绘制一个值的占比与状态，注意区别与进度条progress标签，meter最典型的应用场景有磁盘使用量等。
meter的属性：min max low high optimum(最优值) value
渲染规则是：

• optimum在min-low区间中，value值如果在min-low显示为绿色，low-high显示为黄色，high以上显示为红色
• optimum在low-high段，value值如果在min-low显示为黄色，low-high显示为绿色，high以上显示为黄色
• optimum大于或等于high，value值如果在min-low显示为红色，low-high显示为黄色，high以上显示为绿色

所以，最佳值optimum与value在同一个区间段渲染为绿色，不同区间段向optimum左右两边分别渲染：黄、红色，这里的区间段是指经过low,high属性指定后的四个段。

// min默认是0
<meter max='3000' high='2000' low='1000' optimum="2001" value='999'>
    您的浏览器不支持meter标签，请升级。
</meter>

10.<progress>

进度条，运行中、加载中的进度。

<progress value="50" max="100"></progress> 

11.<time></time>

定义日期或者时间

<time datatime='2018-01-01'>今天元旦</time>