HTML基础复习——语义化

时间 2019-12-05

标签 html 基础复习语义栏目 HTML 繁體版

原文原文链接

HTML语义化

概念

官方解释：
语义化是指用合理的HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器能够理解。html

个人理解：
在个人理解中语义化就是让咱们写的每一行代码都有其意义，不只仅是程序实现和功能上而言，还必须能被人和机器很好的理解。简单的说就是你写的代码应该是一箭双鵰的，既要让人读懂也要让机器读懂。在HTML中就是告诉你们，每个标签都是有它独特的意义的和应用场景的，而不是随便想用就用，想用什么替换就用什么替换。程序员

我认为最好的理解就是将office中的Word与其对比。Word中从头部页眉、标题、正文再到页脚都有单独的样式和设置，因此HTML也大同小异，就是为了将网页内容经过这些设置来呈现出来。包括我如今写的文章是用Markdown来完成的，也是语义化的体现。浏览器

我将HTML的语义化分为两部分，一个是结构语义化，一个是标签语义化，虽然这样分会有点问题，但更有利于理解。ide

结构语义化

先从网页的整个结构来讲，最先的网页就是来展示最基础的新闻、文章之类的，只是如今的网页设计更厉害了，在样式上看着更加炫酷和多样化，但本质上都是从最基本的结构作起的。能够先看看世界上最先的网页是什么样子：布局

通常来讲咱们网页的结构大体上能够从下面这个图来理解（固然布局是能够改变的）：
网站

代码展示：搜索引擎

<body>
    <!-- 头部 -->
    <header></header>
    <!-- 头部 -->

    <!-- 导航 -->
    <nav></nav>
    <!-- 导航 -->

    <!-- 主体内容 -->
    <main>
    
        <!-- 正文内容 -->
        <article>
            <!-- 章节 -->
            <section>
                <p></p>
            </section>
            <!-- 章节 -->
        </article>
        <!-- 正文内容 -->

        <!-- 正文以外内容 -->
        <aside></aside>
        <!-- 正文以外内容 -->
        
    </main>
    <!-- 主体内容 -->

    <!-- 底部 -->
    <footer></footer>
    <!-- 底部 -->
</body>

标签语义化

结构语义化不也就是将标签语义化吗？是的，可是单独拉出来讲是由于除了整个网页结构，其余更多的细节咱们须要注意语义化。举个例子,下面是腾讯某新闻版块的网页：spa

如今咱们去掉其全部样式后是这样的：
设计

再看看它的源代码：
code

不难发现，在咱们将其网页的全部样式都去掉以后，仍是能清晰地读完整篇文章，而且是井井有条的。这就是为何要将标签语义化。能够看到文章的标题用到了<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> 定义 HTML 标题。
<p> 定义段落。
<address> 定义文档做者或拥有者的联系信息。
<blockquote> 定义长的引用。
<mark> 定义有记号的文本。
<q> 定义短的引用。
<time> 定义日期/时间。
<figure> 定义媒介内容的分组，以及它们的标题。

更多请参考W3C：http://www.w3school.com.cn/ta...

好处

让咱们的网页结构更加清晰，让电脑和浏览器轻易地识别哪一部分是导航，哪一部分是正文，即便在没有CSS修饰的状况下，咱们也能清楚地看到整个网页的结构。
对于SEO更加友好，利于搜索引擎对网站的收录和评分。
利于人更好地理解代码意思，由于是W3C标准，只要你按照语义化使用标签，全球任何国家的程序员都能看懂。

总结

践行HTML语义化最好的方法就是秉承如下两点：

若是没有CSS样式，网站内容是否能完整且清晰地展示出来，并准确表达各部分的意思。
若是看代码的人不是我本身，别人是否能看懂我写的标签都是什么意思。