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

笔记说明

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

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

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

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

案例网址：

en.wikipedia.org/wiki/World_…

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

static001.geekbang.org/static/time…

说明：本文图片由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的建议：“你可以尽量只用自己熟悉的语义标签，并且只在有把握的场景引入语义标签。这样，我们才能保证语义标签不被滥用，造成更多的问题。”

转载于:https://juejin.im/post/5cc57c876fb9a031ed20c38c