重学前端-总结：04、如何运用语义类标签来呈现Wiki网页？
文章目录
重学前端-总结：04、如何运用语义类标签来呈现Wiki网页？
前言
相信大多数的前端开发者是没有专门了解html的语义标签，估计是html上手快，需要用到就去查阅文档，大多数人只会用div span ul h1 去进行排版页面，却忽略了html语义标签的重要性和严谨性。
标签介绍
分析一篇 wiki 的文章用到的语义类标签，来进一步帮你理解语义的概念。打开这个页面：https://en.wikipedia.org/wiki/World_Wide_Web
aside-导航性质内容
article-文章主体部分
hgroup, h1, h2-标题组
<hgroup>
<h1>World Wide Web </h1>
<h2>From Wikipedia, the free encyclopedia</h2>
</hgroup>
abbr-表示缩写
<abbr title="World Wide Web">WWW</abbr>.
hr-横向分隔
hr 表示故事走向的转变或者话题的转变，显然此处两个标题并非这种关系，所以我们应该使用 CSS 的 border 来把它当作纯视觉效果来实现，所以这里是不需要用 hr 的。
p-普通的段落
HTML 中并没有 note 相关的语义，所以，我们用普通的 p 标签，加上class="note"来实现。后面的多数自然段都是普通的段落，我们用 p 标签来实现。
strong-加粗强调
<p>
A global map of the web index for countries in 2014
<strong>The World Wide Web (WWW)</strong>, also called <strong>the Web</strong>
</p>
blockquote, q, cite-文字引用
用法“引述”。
interlinked by hypertext links, and accessible via the Internet.[1]
注意看这里的 [1]，当我们把鼠标放上去的时候，出现了引述的相关信息：
What is the difference between the Web and the Internet?”. W3C Help and FAQ. W3C. 2009. Archived from the original on 9 July 2015. Retrieved 16 July 2015.
在 HTML 中，有三个跟引述相关的标签 blockquote 表示段落级引述内容，q 表示行内的引述内容，cite 表示引述的作品名。
这里的作品名称 “What is the difference between the Web and the Internet?”，应当使用 cite 标签。
<cite>"What is the difference between the Web and the Internet?"</cite>. W3C Help and FAQ. W3C. 2009. Archived from the original on 9 July 2015. Retrieved 16 July 2015.
time-时间描述
这里除了引用的文章外，还出现了日期，为了让机器阅读更加方便，可以加上 time 标签：
<cite>"What is the difference between the Web and the Internet?"</cite>. W3C Help and FAQ. W3C. 2009. Archived from the original on <time datetime="2015-07-09">9 July 2015</time>. Retrieved <time datetime="2015-07-16">16 July 2015</time>
figure, figcaption-表示与主文章相关的图像、照片等流内容
<figure> <img src="https://.....440px-NeXTcube_first_webserver.JPG"/> <figcaption>The NeXT Computer used by Tim Berners-Lee at CERN.</figcaption></figure>
dfn-包裹被定义的名词
分别定义了 Internet 和 World Wide Web，我们应该使用 dfn 标签。
The terms Internet and World Wide Web are often used without much distinction. However, the two are not the same. The <dfn>Internet</dfn> is a global system of interconnected computer networks.In contrast, the <dfn>World Wide Web</dfn> is a global collection of documents and other resources, linked by hyperlinks and URIs.
nav, ol, ul-无序列表、有序列表
目录链接到文章的各个章节，使用 nav 标签。目录顺序不可随意变化，用多级的 ol 结构。
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>
pre, samp, code-换行标签、
<pre><samp>
GET /home.html HTTP/1.1
Host: www.example.org
</samp></pre>
pre 标签:
不需要浏览器进行排版，避免换行
samp 标签:
玉米渣
code 标签：
<html>
<head>
<title>Example.org – The World Wide Web</title>
</head>
<body>
<p>The World Wide Web, abbreviated as WWW and commonly known ...</p>
</body>
</html>
加上 code 标签改成：
<pre><code>
<html>
<head>
<title>Example.org – The World Wide Web</title>
</head>
<body>
<p>The World Wide Web, abbreviated as WWW and commonly known ...</p>
</body>
</html>
</code></pre>
总结
wiki页面对于语义标签的使用时很严谨的，没讲到的标签，我们这里稍微做一下简要的补充说明。