浅谈语义化

 

 

浅谈语义化

什么是语义化？

        为什么我们提倡书写语义化的代码？

① 语义化的代码，结构清晰，具有良好的可读性，利于维护。

        试想一下，当你回顾几个月前甚至是几年前写的代码，如果结构混乱，那重新梳理的过程是十分麻烦，效率十分低下的；当你接手别人写的代码、阅读别人写的代码的时候，如果他的代码没有很好的按照语义化的标准，那么，面对这一大片由各种字符组合成的、编译器识别良好的代码，在你的眼里，就不是那么容易的梳理了，浪费时间、效率低下。

        语义化的代码，不仅机器能够识别，对人也友好，不仅能够方便代码的阅读，对代码的后期维护也有很大帮助，更容易维护，提高效率。

② 对搜索引擎友好，利于搜索引擎的抓取。

        语义化的代码，可以让搜索小蜘蛛遇到你的时候，能快速的识别出你的网页是什么类型、什么方向的内容，网页的结构、内容由什么组成，小蜘蛛能够更容易的爬到你的网页上。

③ 更容易让一些特殊设备识别、利于特殊终端的阅读。

        语义化很好的代码，不仅可以在浏览器里很好的显示，也可以被一些阅读器识别，比如说有的人视力模糊、甚至是看不见，这样，他肯定是要让阅读器读给他听，而当我们在网页的某个位置放了一张图片，如果我们给这个img标签加一个alt属性，alt=“这是什么什么的图片”，这样，就算是那些眼睛看不到、看不清楚的人群，但也能够通过语音阅读设备知道这里是一张图片，并且知道图片表达的是什么内容。

怎样书写语义化的代码、遵循语义化标准？

① 了解标签属性的语义；

        尽量用有结构含义的，少用无语义的，如 <span>，<div> 无意义，看不出是什么东西，可是<address>一看就知道这里面的是地址，<em>标签一看就知道这个是强调的内容，区分于普通内容。

② 统一规范；

③ 样式留给css；

④ 手写，避免使用生成工具；

⑤ 命名遵循行业标准(微格式 •hcard/vcard 间隔符•h-product 下划线 驼峰命名)

一些语义化标签

① article标签装载显示一个独立的文章内容。例如一篇完整的论坛帖子，一则网站新闻，一篇博客文章等等，一个用户评论等等。 artilce可以嵌套，则内层的artilce对外层的article标签有隶属的关系。例如，一个博客文章，可以用article显示，然后一些评论可以以article的形式嵌入其中。

② section 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

③ aside 用来装载非正文类的内容。例如广告，成组的链接，侧边栏等等。

④ hgroup 标签用于对网页或区段的标题元素（h1-h6）进行组合。例如，在一个区段中你有连续的h系列的标签元素，则可以用hgroup将他们括起来。

⑤ header 标签定义文档的页面组合，通常是一些引导和导航信息。

⑥ footer 标签定义 section 或 document 的页脚。在典型情况下，该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。

⑦ nav 标签定义显示导航链接不是所有的成组的超级链接都需要放在nav标签里。nav标签里应该放入一些当前页面的主要导航链接。 例如在页脚显示一个站点的导航链接（如首页，服务信息页面，版权信息页面等等），就可以使用nav标签，当然，这不是必须的。

⑧ time 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。该元素能够以机器可读的方式对日期和时间进行编码，这样， 举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。

<p>我们在每天早上 <time>9:00</time> 开始营业。</p> <p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>

⑨ mark 标签定义带有记号的文本。请在需要突出显示文本时使用 <mark> 标签。

⑩ figure标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

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

⑫ contextmenu 添加到系统右键菜单

本文转载自：  http://www.cnblogs.com/xsilence/p/6050468.html

什么是语义化？

        为什么我们提倡书写语义化的代码？

① 语义化的代码，结构清晰，具有良好的可读性，利于维护。

        试想一下，当你回顾几个月前甚至是几年前写的代码，如果结构混乱，那重新梳理的过程是十分麻烦，效率十分低下的；当你接手别人写的代码、阅读别人写的代码的时候，如果他的代码没有很好的按照语义化的标准，那么，面对这一大片由各种字符组合成的、编译器识别良好的代码，在你的眼里，就不是那么容易的梳理了，浪费时间、效率低下。

        语义化的代码，不仅机器能够识别，对人也友好，不仅能够方便代码的阅读，对代码的后期维护也有很大帮助，更容易维护，提高效率。

② 对搜索引擎友好，利于搜索引擎的抓取。

        语义化的代码，可以让搜索小蜘蛛遇到你的时候，能快速的识别出你的网页是什么类型、什么方向的内容，网页的结构、内容由什么组成，小蜘蛛能够更容易的爬到你的网页上。

③ 更容易让一些特殊设备识别、利于特殊终端的阅读。

        语义化很好的代码，不仅可以在浏览器里很好的显示，也可以被一些阅读器识别，比如说有的人视力模糊、甚至是看不见，这样，他肯定是要让阅读器读给他听，而当我们在网页的某个位置放了一张图片，如果我们给这个img标签加一个alt属性，alt=“这是什么什么的图片”，这样，就算是那些眼睛看不到、看不清楚的人群，但也能够通过语音阅读设备知道这里是一张图片，并且知道图片表达的是什么内容。

怎样书写语义化的代码、遵循语义化标准？

① 了解标签属性的语义；

        尽量用有结构含义的，少用无语义的，如 <span>，<div> 无意义，看不出是什么东西，可是<address>一看就知道这里面的是地址，<em>标签一看就知道这个是强调的内容，区分于普通内容。

② 统一规范；

③ 样式留给css；

④ 手写，避免使用生成工具；

⑤ 命名遵循行业标准(微格式 •hcard/vcard 间隔符•h-product 下划线 驼峰命名)

一些语义化标签

① article标签装载显示一个独立的文章内容。例如一篇完整的论坛帖子，一则网站新闻，一篇博客文章等等，一个用户评论等等。 artilce可以嵌套，则内层的artilce对外层的article标签有隶属的关系。例如，一个博客文章，可以用article显示，然后一些评论可以以article的形式嵌入其中。

② section 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

③ aside 用来装载非正文类的内容。例如广告，成组的链接，侧边栏等等。

④ hgroup 标签用于对网页或区段的标题元素（h1-h6）进行组合。例如，在一个区段中你有连续的h系列的标签元素，则可以用hgroup将他们括起来。

⑤ header 标签定义文档的页面组合，通常是一些引导和导航信息。

⑥ footer 标签定义 section 或 document 的页脚。在典型情况下，该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。

⑦ nav 标签定义显示导航链接不是所有的成组的超级链接都需要放在nav标签里。nav标签里应该放入一些当前页面的主要导航链接。 例如在页脚显示一个站点的导航链接（如首页，服务信息页面，版权信息页面等等），就可以使用nav标签，当然，这不是必须的。

⑧ time 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。该元素能够以机器可读的方式对日期和时间进行编码，这样， 举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。

<p>我们在每天早上 <time>9:00</time> 开始营业。</p> <p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>

⑨ mark 标签定义带有记号的文本。请在需要突出显示文本时使用 <mark> 标签。

⑩ figure标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

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

⑫ contextmenu 添加到系统右键菜单

本文转载自：  http://www.cnblogs.com/xsilence/p/6050468.html

转载于:https://www.cnblogs.com/gh0408/p/6057052.html