内容简介：官方解释：语义化是指用合理的HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解。我的理解：
HTML语义化
概念
官方解释：
语义化是指用合理的HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解。
我的理解：
在我的理解中语义化就是让我们写的每一行代码都有其意义，不仅仅是程序实现和功能上而言，还必须能被人和机器很好的理解。简单的说就是你写的代码应该是两全其美的，既要让人读懂也要让机器读懂。在HTML中就是告诉大家，每一个标签都是有它独特的意义的和应用场景的，而不是随便想用就用，想用什么替换就用什么替换。
我认为最好的理解就是将office中的Word与其对比。Word中从头部页眉、标题、正文再到页脚都有单独的样式和设置，所以HTML也大同小异，就是为了将网页内容通过这些设置来呈现出来。包括我现在写的文章是用Markdown来完成的，也是语义化的体现。
我将HTML的语义化分为两部分，一个是结构语义化，一个是标签语义化，虽然这样分会有点问题，但更有利于理解。
结构语义化
先从网页的整个结构来说，最早的网页就是来展现最基础的新闻、文章之类的，只是现在的网页设计更厉害了，在样式上看着更加炫酷和多样化，但本质上都是从最基本的结构做起的。可以先看看世界上最早的网页是什么样子：
一般来说我们网页的结构大致上可以从下面这个图来理解（当然布局是可以改变的）：
代码展现：
<body>
<!-- 头部 -->
<header></header>
<!-- 头部 -->
<!-- 导航 -->
<nav></nav>
<!-- 导航 -->
<!-- 主体内容 -->
<main>
<!-- 正文内容 -->
<article>
<!-- 章节 -->
<section>
<p></p>
</section>
<!-- 章节 -->
</article>
<!-- 正文内容 -->
<!-- 正文之外内容 -->
<aside></aside>
<!-- 正文之外内容 -->
</main>
<!-- 主体内容 -->
<!-- 底部 -->
<footer></footer>
<!-- 底部 -->
</body>
标签语义化
结构语义化不也就是将标签语义化吗？是的，但是单独拉出来说是因为除了整个网页结构，其他更多的细节我们需要注意语义化。举个例子,下面是 腾讯 某新闻版块的网页：
现在我们 去掉其所有样式 后是这样的：
再看看它的 源代码 ：
不难发现，在我们将其网页的所有样式都去掉之后，还是能清晰地读完整篇文章，并且是层次分明的。这就是为什么要将标签语义化。可以看到文章的标题用到了 <h1> 标签，全文就这一个大标题。然后整篇文章用 <p> 标签将文段分开，没有用 <div> ，因为 <p> 就代表一个段落，而 <div> 什么都不代表。强调的部分用了 <strong> 标签。大家知道CSS中的 font-wight 也可以加粗文字，HTML的 <b> 标签也可以加粗文字，但是腾讯都没有使用。因为CSS在没有样式的时候就不管用了， <b> 标签没有强调的意思，而 <strong> 的语义更明显。
这样的例子还有很多很多，比如W3C的官方网站，在去掉所有CSS样式之后，还是能清楚地找到网页的各个部分，浏览所需的内容，这就是一个优秀的网站应该做到的。
常用的语义化标签（大部分拥有 文本格式化 的作用）：
<em> <strong> <dfn> <samp> <kbd> <var> <cite> <h1> to <h6> <p> <address> <blockquote> <mark> <q> <time> <figure>
更多请参考W3C： http://www.w3school.com.cn/ta...
好处
- 让我们的网页结构更加清晰，让电脑和浏览器轻易地识别哪一部分是导航，哪一部分是正文，即使在没有CSS修饰的情况下，我们也能清楚地看到整个网页的结构。
- 对于SEO更加友好，利于搜索引擎对网站的收录和评分。
- 利于人更好地理解代码意思，因为是W3C标准，只要你按照语义化使用标签，全球任何国家的 程序员 都能看懂。
总结
践行HTML语义化最好的方法就是秉承以下两点：
- 如果没有CSS样式，网站内容是否能完整且清晰地展现出来，并准确表达各部分的意思。
- 如果看代码的人不是我自己，别人是否能看懂我写的标签都是什么意思。
以上所述就是小编给大家介绍的《HTML基础复习——语义化》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Web Form Design
Luke Wroblewski / Rosenfeld Media / 2008-5-2 / GBP 25.00
Forms make or break the most crucial online interactions: checkout, registration, and any task requiring information entry. In Web Form Design, Luke Wroblewski draws on original research, his consider......一起来看看 《Web Form Design》 这本书的介绍吧!
