让标签语义化成为一种习惯
一直以来对语义化的理解是模模糊糊的，说实话就是不知道它到底有什么用，今天终于认认真真的看了下，长了见识！总结过来大家一块学习学习！我们得让让标签语义化成为一种习惯！
语义化的通俗理解：
1、在网页设计过程中，我们经常听到语义化这个名词，HTML标签语义化的设计思维就是给一段代码内容加上一个最恰当最合适的标签，这样一来，不管是谁都可以看懂这段内容是什么。
2、初学者可以把语义化理解为让开发人员和机器更容易读懂代码所做的标识！
3、切记语义化的目的是为了方便机器和开发人员的读取，而不是为了改变页面样式！
语义化的举例理解：
一个网页就好像是一栋房子，HTML结构就是一面面的墙(或框架)，而标签则是一块块的砖，砖要摆放有序，整整齐齐，墙才会牢固。最后css则是装饰材料，美不美就靠她了。因此，一个优秀的网页，既要提供一个干净、结构清晰的HTML，更需要CSS的极致美化。
从上面也说明标签语义化极其重要，HTML每个标签都有自己的语义，都有自己适用的范围。但往往会被我们忽略或者被我们滥用，举个例子：在一个页面中<div>用了几十个甚至上百个，这是个无意义的标签，只是表示一个层而已，非常不利于后期的维护；所以需要我们语义化的编辑和使用标签，使一个页面的结构框架更加合理化、坚固化，使之井井有条、易于维护！
让你语义化 HTML 结构的无数条理由：
1、去掉或样式丢失的时候能让页面呈现清晰的结构。
HTML 本身是没有表现的，我们看到例如 <h1> 是粗体，字体大小 2em；<strong> 是加粗的， 不要误会这是HTML的表现，这些其实是 HTML 默认的 CSS 样式在起作用。所以去掉或样式丢失的时候,也能让页面呈现清晰的结构，增强页面的可读性。
2、（如果访客有视障）屏幕阅读器会完全根据你的标记来“读”你的网页，会根据标签的语义自动解析。如果你使用的含语义的标记，屏幕阅读器会根据你的标签来判断网页的内容，而不是一个字母一个字母的拼写出来。
3、PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（因为这些设备对 CSS 的支持较弱）使用语义标记可以确保这些设备以一种有意义的方式来渲染网页。理想情况下，观看设备的任务是符合设备本身的条件来渲染网页。
4、搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。搜索引擎的爬虫也是网站的“访客”，现在它们是极其宝贵的用户。没有他们的话，搜索引擎将无法索引你的网站，然后一般用户将很难过来访问。
5、便于团队开发和维护在团队中大家都遵循同一个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。
6、.............................
HTML标签语义汇总
为了更快更好的运用标签语义化，下面的表单列出了所有的HTML标签以及标签的描述。以下列表按字母顺序排列，其中 new :为 HTML5 中的新标签。
| 标签 | 描述 |
|---|---|
| <!–…–> | 定义注释。 |
| <!DOCTYPE> | 定义文档类型。 |
| <a> | 定义超链接。 |
| <abbr> | 定义缩写。 |
| <acronym> | HTML 5 中不支持。定义首字母缩写。 |
| <address> | 定义地址元素。 |
| <applet> | HTML 5 中不支持。定义 applet。 |
| <area> | 定义图像映射中的区域。 |
| <article> | 定义 article。 |
| <aside> | 定义页面内容之外的内容。 |
| <audio> | 定义声音内容。 |
| <b> | 定义粗体文本。 |
| <base> | 定义页面中所有链接的基准 URL。 |
| <basefont> | HTML 5 中不支持。请使用 CSS 代替。 |
| <bdi> | 定义文本的文本方向，使其脱离其周围文本的方向设置。 |
| <bdo> | 定义文本显示的方向。 |
| <big> | HTML 5 中不支持。定义大号文本。 |
| <blockquote> | 定义长的引用。 |
| <body> | 定义 body 元素。 |
| <br> | 插入换行符。 |
| <button> | 定义按钮。 |
| <canvas> | 定义图形。 |
| <caption> | 定义表格标题。 |
| <center> | HTML 5 中不支持。定义居中的文本。 |
| <cite> | 定义引用。 |
| <code> | 定义计算机代码文本。 |
| <col> | 定义表格列的属性。 |
| <colgroup> | 定义表格列的分组。 |
| <command> | 定义命令按钮。 |
| <datalist> | 定义下拉列表。 |
| <dd> | 定义定义的描述。 |
| <del> | 定义删除文本。 |
| <details> | 定义元素的细节。 |
| <dfn> | 定义定义项目。 |
| <dir> | HTML 5 中不支持。定义目录列表。 |
| <div> | 定义文档中的一个部分。 |
| <dl> | 定义定义列表。 |
| <dt> | 定义定义的项目。 |
| <em> | 定义强调文本。 |
| <embed> | 定义外部交互内容或插件。 |
| <fieldset> | 定义 fieldset。 |
| <figcaption> | 定义 figure 元素的标题。 |
| <figure> | 定义媒介内容的分组，以及它们的标题。 |
| <font> | HTML 5 中不支持。 |
| <footer> | 定义 section 或 page 的页脚。 |
| <form> | 定义表单。 |
| <frame> | HTML 5 中不支持。定义子窗口（框架）。 |
| <frameset> | HTML 5 中不支持。定义框架的集。 |
| <h1> to <h6> | 定义标题 1 到标题 6。 |
| <head> | 定义关于文档的信息。 |
| <header> | 定义 section 或 page 的页眉。 |
| <hgroup> | 定义有关文档中的 section 的信息。 |
| <hr> | 定义水平线。 |
| <html> | 定义 html 文档。 |
| <i> | 定义斜体文本。 |
| <iframe> | 定义行内的子窗口（框架）。 |
| <img> | 定义图像。 |
| <input> | 定义输入域。 |
| <ins> | 定义插入文本。 |
| <keygen> | 定义生成密钥。 |
| <isindex> | HTML 5 中不支持。定义单行的输入域。 |
| <kbd> | 定义键盘文本。 |
| <label> | 定义表单控件的标注。 |
| <legend> | 定义 fieldset 中的标题。 |
| <li> | 定义列表的项目。 |
| <link> | 定义资源引用。 |
| <map> | 定义图像映射。 |
| <mark> | 定义有记号的文本。 |
| <menu> | 定义菜单列表。 |
| <meta> | 定义元信息。 |
| <meter> | 定义预定义范围内的度量。 |
| <nav> | 定义导航链接。 |
| <noframes> | HTML 5 中不支持。定义 noframe 部分。 |
| <noscript> | 定义 noscript 部分。 |
| <object> | 定义嵌入对象。 |
| <ol> | 定义有序列表。 |
| <optgroup> | 定义选项组。 |
| <option> | 定义下拉列表中的选项。 |
| <output> | 定义输出的一些类型。 |
| <p> | 定义段落。 |
| <param> | 为对象定义参数。 |
| <pre> | 定义预格式化文本。 |
| <progress> | 定义任何类型的任务的进度。 |
| <q> | 定义短的引用。 |
| <rp> | 定义若浏览器不支持 ruby 元素显示的内容。 |
| <rt> | 定义 ruby 注释的解释。 |
| <ruby> | 定义 ruby 注释。 |
| <s> | HTML 5 中不支持。定义加删除线的文本。 |
| <samp> | 定义样本计算机代码。 |
| <script> | 定义脚本。 |
| <section> | 定义 section。 |
| <select> | 定义可选列表。 |
| <small> | 将旁注 (side comments) 呈现为小型文本。 |
| <source> | 定义媒介源。 |
| <span> | 定义文档中的 section。 |
| <strike> | HTML 5 中不支持。定义加删除线的文本。 |
| <strong> | 定义强调文本。 |
| <style> | 定义样式定义。 |
| <sub> | 定义下标文本。 |
| <summary> | 定义 details 元素的标题。 |
| <sup> | 定义上标文本。 |
| <table> | 定义表格。 |
| <tbody> | 定义表格的主体。 |
| <td> | 定义表格单元。 |
| <textarea> | 定义 textarea。 |
| <tfoot> | 定义表格的脚注。 |
| <th> | 定义表头。 |
| <thead> | 定义表头。 |
| <time> | 定义日期/时间。 |
| <title> | 定义文档的标题。 |
| <tr> | 定义表格行。 |
| <track> | 定义用在媒体播放器中的文本轨道。 |
| <tt> | HTML 5 中不支持。定义打字机文本。 |
| <u> | HTML 5 中不支持。定义下划线文本。 |
| <ul> | 定义无序列表。 |
| <var> | 定义变量。 |
| <video> | 定义视频。 |
| <xmp> | HTML 5 中不支持。定义预格式文本。 |
推荐链接：
