语义化 | 乐趣区

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>的语义更明显。 ...