H5新增标签

H5新增含义语义化的标签

理解HTML语义化

什么是HTML语义化？

基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等，根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

为什么要语义化？

1. 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构；
2. 用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
3. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
4. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
5. 便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

写HTML代码时应注意什么？

1. 尽可能少的使用无语义的标签div和span；
2. 在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
3. 不要使用纯样式标签，如：b、font、u等，改用css设置。
4. 需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
5. 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
6. 表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
7. 每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=Id来让说明文本和相对应的input关联起来。

H5常用语义化标签

前言

H5新增的标签有语义的：(块状元素) 有语意的div会对浏览器的搜索引擎有好

做移动端的时候要合理运用这些H5新增标签(PC端浏览器兼容不是很好)

H5新增的标签有语义的(搜索引擎会认得这些标签，这些新增的标签都是有权重的会提上你的网页排名)

HTML权重分值表  

小丑SEO(HTML权重分值表)

H5新增的标签：(块状元素) 有语意的div

1. <header> 标记定义一个页面或一个区域的头部。
2. <nav> 标记定义导航链接。
3. <footer> 标记定义一个页面或一个区域的底部。
4. <aside> 标记定义页面内容部分的侧边栏。
5. <article> 标记定义一篇文章。
6. <section> 标记定义一个区域（类似div）。

div，section，article的区别和使用：

1）div在html早期版本就支持了，section和article是html5提出的两个语义化标签。如果只是针对一个块内容做样式化，三者并无区别。
2）作为语义化标签，section 应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。一般来说，当元素内容明确地出现在文档大纲中时，section 就是适用的。
3）对于article标签来说，无论从结构上还是内容上来说，article 本身就是独立的、完整的。有个最简单的判断方法是看这段内容脱离了所在的语境，是否还是完整的、独立的，如果是，则应该用article标签。
4）div section article ，语义是从无到有，逐渐增强的。div 无任何语义，仅仅用作样式化或者脚本化，对于一段主题性的内容，则就适用 section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用 article。原则上来说，能使用 article 的时候，也是可以使用 section 的，但是实际上，假如使用 article 更合适，那么就不要使用 section 。

 figure和figcaption标签

HTML5中figure和figcaption标签一般都是配套使用的，先了解下两者的基本定义，然后结合实例来说明两者的用法。

<figure>

<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。

figure元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。它是一种元素的组合，可带有标题（可选）。figure标签用来表示网页上一块独立的内容，将其从网页上移除后不会对网页上的其他内容产生影响。

figure有一个子标签：figcaption。

<figcaption>

<figcaption> 标签定义 figure 元素的标题（caption）。
"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

OK，关于figure和figcaption标签就介绍完了，接下用几个实例来应用它们。如下：

案例1：

不带有标题的figure元素：

<figure>
    <img alt="花生" src="logo.png"/>
</figure>

案例2：

带有标题的figure元素：

<figure>
    <img alt="花生" src="logo.png"/>
    <figcaption>花生，专注Web前端，HTML5、CSS3、JavaScript、JQuery、等技术</figcaption>
</figure>

案例3：

多个图片，同一个标题的figure元素：

<figure>
    <img alt="花生" src="logo.png"/>
    <img alt="花生" src="logo.png"/>
    <img alt="花生" src="logo.png"/>
    <figcaption>花生，专注Web前端，HTML5、CSS3、JavaScript、JQuery、等技术</figcaption>
</figure>

总结

1. <figure>     标记定义一组媒体内容以及它们的标题 
2. <figcaption>     标签定义 figure 元素的标题。

多媒体标签

<video>   页面中插入视频内容

<audio>   页面中插入音频内容

了解更多

绘图标签

<canvas>   绘制图片

<svg>   矢量图

WEB运用标签

<meter>

使用 meter 元素来度量给定范围（gauge）内的数据：

<meter value="3" min="0" max="10">十分之三</meter>

<meter value="0.6">60%</meter> 
<!- <meter>	状态标签，温度等 -->

定义和用法

<meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。

例子：磁盘用量、查询结果的相关性，等等。

注释：<meter> 标签不应用于指示进度（在进度条中）。如果标记进度条，请使用 <progress> 标签。

属性

high	number	规定被视作高的值的范围。
low	number	规定被视作低的值的范围。
max	number	规定范围的最大值。
min	number	规定范围的最小值。
optimum	number	规定度量的优化值。
value	number	必需。规定度量的当前值。

progress

正在进行的下载：

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

<progress> 标签标示任务的进度（进程）是进度条的意思。

属性

max	number	规定任务一共需要多少工作。
value	number	规定已经完成多少任务。

<datalist> 

下面是一个 input 元素，datalist 中描述了其可能的值：

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

定义和用法

<datalist> 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。

datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。

请使用 input 元素的 list 属性来绑定 datalis元素的 id属性。

总结

1. <meter>  状态标签，温度等
2. <progress>  进度条
3. <datalist>为input定义下拉列表   模糊搜索

查看一些标签兼容的问题请看这个网站

了解SEO看这个博客(小丑)

了解SEO请看这个网站(光头强)

了解SEO请看这个博客(小纯)