WEB语义化（待完善）

目的：

最简单的讲就是：语义网是让机器可以理解数据

HTML5：

html5的新标签们，就是为了推进语义化的进程，通过使用含有语义的标签来逐渐形成一种机器和人类都能够读懂的文本。

语义化的标签们：

title属性：
title元素是最重要的 HTML 元素之一。它的主要功能是描述网页的内容。虽然是不可见的部分，但非常重要，因为它在搜索引擎列表、窗口的标题栏、用户的书签中都是可见的。
article元素：
一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。论坛帖子、报纸文章、博客条目、用户评论……
section元素：
section 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。有cite属性（url），如果内容来自web的话；
一个简单的评判标准：当你希望这个元素的内容体现在文档的提纲 (outline) 中时，用 section 是合适的。
nav元素：
nav标签定义导航链接的部分。可以帮助用户设备迅速获得导航内容，例如读屏器可以省去很多渲染直接跳到导航位置。
aside元素：
表示与周围内容关系不太密切的内容 (eg. 广告、侧边栏)。
h1–h6 元素：
h1-h6元素用来描述网页中最上层的标题，咱别乱用来加大字体。
header 元素：
标签定义文档的页眉，用来描述最近的父级区块，通常可以有一些h1标签之类的，毕竟就是父级区块的头部。
footer 元素：
footer标签定义文档或节的页脚，代表最近的父级区块内容的页脚。内容通常有作者、版权信息、使用条款链接、联系信息等等。
address 元素：
address标签定义文档或文章的作者/拥有者的联系信息。如果 address 元素位于 body 元素内，则它表示文档联系信息。如果 address 元素位于 article 元素内，则它表示文章的联系信息。
代表与最近父级 article 或整个文档关联的联系人信息
hr 元素：
原意为「horizontal rule」(水平分隔线)
HTML5 中重定义为不同主题内容间的分隔符
(eg. 故事场景的转换)
区块内容之间不需要用 hr 元素分隔
em 元素：
表示侧重点的强调
strong 元素：
把文本定义为语气更强的强调的内容。
blockquote元素：
标签定义块引用
i 元素：
不再只是「斜体」，表示另一种叙述方式
small 元素：
不再只是「小字」，免责声明 、 许可证声明 、 注意事项
s 元素：
不再只是「带删除线的文字」，表示不再准确或不再相关的内容，与 del 元素含义不同
cite 元素：
标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。它可以使你或者其他人从文档中自动摘录参考书目。
abbr 元素：
abbr标签指示简称或缩写。通过对缩写进行标记，您能够为浏览器、拼写检查和搜索引擎提供有用的信息。title属性来对他进行完整说明。
time 元素：
time标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。该元素能够以机器可读的方式对日期和时间进行编码。datetime属性日期/时间，不然就会解读标签内的内容。pubdate属性标识此时间是文章（article）或者的发布日期
dfn 元素：
code, samp, kbd 元素：
代码片段、计算机程序的输出、用户输入的内容 / 按键
mark 元素：
在引用的文字中使用，表示在当前文档中需要引起注意但原文中并没有强调的含义
ruby, rt, rp 元素：
ruby标签定义 ruby 注释（中文注音或字符）。ruby 元素由一个或多个字符（需要一个解释/发音）和一个提供该信息的 rt 元素组成，还包括可选的 rp 元素，定义当浏览器不支持 “ruby” 元素时显示的内容。

<ruby>
和<rp>(</rp><rt>hé</rt><rp>)</rp>谐<rp>(</rp><rt>xié</rt><rp>)</rp>社<rp>(</rp><rt>shè</rt><rp>)</rp>会<rp>(</rp><rt>huì</rt><rp>)</rp>
</ruby>

效果：

img 元素：
src, alt 属性决定了图片的含义

我们应逐渐避免的：

1. 使用id属性来语义，并达不到语义化的目的，还是只能让人懂；
2. 让表达内容的html与表现样式的CSS完全分开，不去使用诸如strong、em、b标签去仅仅只是为了加粗字体
3. 准确的使用各个标签，特别是section、article、address、footer、nav标签等，可使文档拥有良好的文档结构（outline）

感觉写的太少，摘抄的比较多。。。要更好的链接清楚估计的去看w3c的文档吧。。。(′д｀ )…彡…彡

参考：
1. http://www.w3school.com.cn
2. http://justineo.github.io/slideshows/semantic-html/#/