html语义在wiki网页中的应用
以此 wikipedia 文章为例
你可以在电脑上,打开这个页面:https://en.wikipedia.org/wiki/World_Wide_Web
或者是备用地址: http://static001.geekbang.org/static/time/quote/World_Wide_Web-Wikipedia.html
本文借鉴了 winer 老师的 文章
页面剖析
-
aside
- 左侧侧边栏,根据语义,这里属于
aside
内容,是导航性质的工具内容。 - aside: aside标识跟主题文章不那么相关的部分,它可能是导航、广告、等工具性质的内容
- 左侧侧边栏,根据语义,这里属于
-
article
- 主题部分具有明确的独立性,所以可以用article来包裹
- article是一种特别的结构,表示具有一定独立性之的文章。和body具有相似的结构,一个html中可以有多个article。
- article表示一片独立的文章。section表示某一块内容,可以是一段,一节文字,也可以是页面上某一部分其他内容。article中可以包含多个 section。section中根据情况可以包含article。(类比: div 和 li)
-
hgroup, h1, h2
- hgroup 是标题组,可以包含一组标题
- h1 是一级标题,h2是二级标题
- 以上代码可能类似这样:
<hgroup> <h1>World Wide Web </h1> <h2>From Wikipedia, the free encyclopedia</h2> </hgroup>
-
abbr
- 考虑到 www 是 world wide web的缩写,所以文中出现www的地方都应该应abbr标签
- abbr 标签表示缩写。
- 类似这样
<abbr title="World Wide Web">WWW</abbr>.
-
hr
- hr 表示故事走向的转变或话题的转变,显然此处并非这种关系
- 这里使用 css border来把它当做纯视觉的效果
-
p
- 这里有三段“note”,也就是注记。它在文章中用作额外的注释。
- html中没有note相关的语义,所以用普通的 p 标签 ,加上 class="note"来实现。
- 对于普通的段落,多数使用 p 标签实现
-
strong
- 这里“World Wide Web(WWW)”和“the Web” 使用了黑体呈现,在上下文中表示这个很重要
- strong: 表示强调,在上下文中 很重要
- em: em标签 表示重音, stong 表示在上下文中很重要
- 示例代码:
我吃了一个<em>苹果</em>。 <strong>党和国家</strong>保证了我们幸福的生活。
-
blockquote, q, cite
- 这在论文中很常见的用法,“引述”
注意看这里的【1】,鼠标放上去的时候,出现引述的相关信息interlinked by hypertext links,, and accessible via the Internet.[1]
What is difference between ……July 2015. ```
- html中有三个跟引述有关的标签:
- blockquote : 表示段落级的引述内容
- q 表示行内的引述内容
- cite 表示引述的作品名。
- 这在论文中很常见的用法,“引述”
-
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-06">16 July 2015</time>.
-
figure,figcaption
- figure 表示这种插入文章的内容,不仅限图片、代码、表格等。只要具有一定自包含性的内容都可以用figure。
- figcaption 表示内容的标题,也可以没有标题。
-
dfn
- 我们看这一句
The terms nternet and World Wide Web are often used without much distinction. However, the two are not the same. The Internet is a global system of interconnected computer networks. In contrast, the World Wide Web is a global collection of documents and other resources, linked by hyperlinks and URIs. Web resources are accessed using HTTP or HTTPS, which are application-level Internet protocols that use the Internet's transport protocols.[34]
分别定义了 Internet 和 World Wide Web,我们应该使用dfn标签。
- dfn 标签 是用来包裹被定义的名词
-
nav, ol, ul
- 这个目录链接到文章各个章节,我们可以使用nav。因为这里的目录顺序不能随意变化,所以我们这里使用多级 ol.
- 示例代码:
<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
- 文重嵌入了一些代码和一些预编写好的段落。我们在“Function”小结中有一段背景是灰色的文字。
GET /home.html HTTP/1.1 Host: www.example.org
- 这是一段http协议的内容描述,因为这段非常严格,所以我们不需要浏览器帮我们自动换行,因此我们使用 pre 标签。
pre: 表示这部分内容是预先排过版的,不需要浏览器进行排版 - 又因为是一段计算机程序的输出,所以我们使用 samp标签
<pre><samp> GET /home.html HTTP/1.1 Host: www.example.org </samp></pre>
- 接下来在 wiki中有一段html代码,我们同样不希望浏览器自动换行。
<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>
因为这一段是 html代码,所以我们还需要加上 code标签。 最后是 pre 标签报过了 code ,code标包裹了 html 代码。
<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>