重学前端学习笔记五如何运用语义类标签来呈现Wiki网页

笔记说明

重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天 10 分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入 winter 的专栏学习【原文有 winter 的语音】，如有侵权请联系我，邮箱：kaimo313@foxmail.com。

HTML 语义：如何运用语义类标签来呈现 Wiki 网页？

通过 wiki 网页案例来学习语义类标签

HTML 最初的设计场景就是“超文本”，早期 HTML 工作组的专家都是出版界书籍排版的专家。

案例网址：

https://en.wikipedia.org/wiki/World_Wide_Web

打不开上面这个网址的，（winter 很贴心）提供了副本网址：

http://static001.geekbang.org/static/time/quote/World_Wide_Web-Wikipedia.html

说明：本文图片由 winter 专栏提供，觉得不错的可以去订阅 winter 的专栏学习全文。

1、aside

标记的这块区域属于 aside 内容主要就是起到导航作用。

2、article

标记的这块区域文章的主体部分可使用 article，具有明确的独立性。

3、hgroup,h1,h2

标记的部分可以像下面这样解析：

• hgroup 是标题组
• h1 是一级标题：World Wide Web
• h2 是二级标题：From Wikipedia, the free encyclopedia

代码的话就类似这样：

<hgroup>
<h1>World Wide Web </h1>
<h2>From Wikipedia, the free encyclopedia</h2>
</hgroup>

4、abbr

说实话这个标签我没有见过，有点惭愧，我特意查了一下 w3c 的 abbr 标签的定义和用法：

• <abbr> 标签指示简称或缩写，比如 “WWW” 或 “NATO”。
• 通过对缩写进行标记，您能够为浏览器、拼写检查和搜索引擎提供有用的信息。
• <abbr> 标签最初是在 HTML 4.0 中引入的，表示它所包含的文本是一个更长的单词或短语的缩写形式。

浏览器支持情况：

• 所有浏览器都支持 <abbr> 标签
• 注释：IE 6 或更早版本的 IE 浏览器不支持 <abbr> 标签。

实列：标记一个缩写

The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.

通过这些介绍，winter 这里提的 WWW 就很好理解了：

<abbr title="World Wide Web">WWW</abbr>.

5、hr

你们一开始是不是觉得这里是不是用 hr 吗？

我一开始认为就是用 hr，但被 winter 打脸了_(:3」∠)_.

答案是不用。

解释如下：

winter: hr 表示故事走向的转变和话题的转变，显然这里是两个标题，并没有这种关系，应该通过 css 的 border 来实现

<hr>注意的几个点

• 修改颜色使用 background-color 属性
• hr 标签是块级标签，有边框
• 设置它自身的边框为 0，然后在设置 height。

6、p

标记的部分有三个注记（note），它在文章中的作用就是额外的注释，但是 html 中并没有 note 相关的语义，这时可以使用 p 标签进行相关实现。

7、strong

如果上下文中某些词很重要我们可以用 strong 标签

比如代码：

<p>
    hello winter
    <strong>The World Wide Web (WWW)</strong>
</p>

8、blockquote,q,cite

关于“引述”标签的用法

• blockquote：表示段落引述内容
• q：表示行内引述内容
• cite：表示引述的作品名

这个我基本很少用，为了弄的更清楚一点，我又去查 W3C 关于 blockquote，q，cite 的定义跟用法：

1）、w3c 关于 blockquote 标签

定义和用法：

<blockquote> 标签定义块引用。<blockquote>与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。

浏览器支持情况：

所有主流的浏览器均支持 <blockquote> 标签，注释：没有浏览器能够正确地显示 cite 属性。

例子：

<blockquote>
    Here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation.
</blockquote>

提示：

如需把页面作为 strict XHTML 进行验证，那么 <blockquote> 元素必须包含块级元素，比如这样：

<blockquote>
    <p>here is a long quotation here is a long quotation</p>
</blockquote>

2）、w3c 关于 q 标签

定义和用法：

cite 属性规定引用的来源。该属性的值是一个包含在引号中并指向联机文档的 URL，以及（如果有可能的话）引用在该文档中的确切位置。

浏览器支持情况：

主流浏览器均不支持 cite 属性。不过，搜索引擎可能会使用该属性获得更多有关引用的信息。

语法：

<q cite="URL">

例子：

下面这个 q 元素中的 cite 属性指定了引用的来源：

<p>
    WWF's goal is to:
    <q cite="http://www.wwf.org">
        build a future where people live in harmony with nature
    </q> we hope they succeed.
</p>

3）、w3c 关于 cite 标签

定义和用法:

• <cite>标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。按照惯例，引用的文本将以斜体显示。
• 更多可以参考 w3c 网址 …

浏览器支持情况：

所有浏览器都支持 <cite> 标签。

例子：

比如作品名：What is the difference between the Web and the Internet?

<cite>What is the difference between the Web and the Internet?</cite>

9、time

图片标记划线部分为日期，为了让机器阅读更加方便，我们可以添加 time 标签

代码如下：

Retrieved <time datetime="2015-07-16">16 July 2015</time>.

10、figure,figcaption

如图所示标记部分：图文的结合组成了一个 figure 的语法现象，figure标签用于表示与主文章相关的图像 … 等内容

例子：

用作文档中插图的图像：

<figure>
  <p> 黄浦江上的的卢浦大桥 </p>
  <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

figcaption标签用作文档中插图的图像，带有一个标题，代码如下：

<figure>
  <figcaption> 黄浦江上的的卢浦大桥 </figcaption>
  <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

11、dfn

我刚开始看的时以为是 dnf（大笑），这又是我没见过的_(:3」∠)_，于是我先查了一下 w3c 关于 dfn 标签，感觉介绍很少

dfn 标签 定义和用法：

<dfn>标签可标记那些对特殊术语或短语的定义。现在流行的浏览器通常用斜体来显示 <dfn>中的文本。将来，<dfn>还可能有助于创建文档的索引或术语表。

图片划线部分就有 Internet 和 WWW 的定义，例子代码如下：

The <dfn>Internet</dfn> is a global system of interconnected computer networks.

12、nav,ol,ul

如图这个可以导航并且有顺序，代码如下：

<nav>
  <h2>Contents</h2>
  <ol>
    <li><a href="...">History</a></li>
    <li><a href="...">Function</a>
      <ol>
        <li><a href="...">Linking</a></li>
        <li><a href="...">Dynamic updates of web pages</a></li>
        ...
      </ol>
    </li>
    ...
  </ol>
</nav>

13、pre,samp,code

这三个标签的定义和用法:

• pre：元素可定义预格式化的文本。被包围在 pre元素中的文本通常会保留空格和换行符。常见应用就是用来表示计算机的源代码。
• samp：表示一段用户应该对其没有什么其他解释的文本字符
• code：标签用于表示计算机源代码或者其他机器可以阅读的文本内容。

例子代码：

<pre>
    <samp>
        GET /home.html HTTP/1.1
        Host: www.example.org
    </samp>
</pre>

<pre>
    <code>
        &lt;html&gt;
            &lt;head&gt;
                &lt;title&gt;Example.org – The World Wide Web&lt;/title&gt;
            &lt;/head&gt;
            &lt;body&gt;
                &lt;p&gt;The World Wide Web, abbreviated as WWW and commonly known ...&lt;/p&gt;
            &lt;/body&gt;
        &lt;/html&gt;
    </code>
</pre>

补充说明

上面 winter 已经讲了大概 20 来个标签，下面这些是没讲到的，winter 做了一下整理补充

个人总结

通过 winter 的这个案例梳理，我感觉自己对 html 认识深那么一点，html 知识也稍微拓展了一点，也希望大家对 html 有不一样的认识，winter 的建议：“你可以尽量只用自己熟悉的语义标签，并且只在有把握的场景引入语义标签。这样，我们才能保证语义标签不被滥用，造成更多的问题。”