再学前端三 html语义

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
1. 左侧侧边栏，根据语义，这里属于aside内容，是导航性质的工具内容。
2. aside： aside标识跟主题文章不那么相关的部分，它可能是导航、广告、等工具性质的内容
article
1. 主题部分具有明确的独立性，所以可以用article来包裹
2. article是一种特别的结构，表示具有一定独立性之的文章。和body具有相似的结构，一个html中可以有多个article。
3. article表示一片独立的文章。section表示某一块内容，可以是一段，一节文字，也可以是页面上某一部分其他内容。article中可以包含多个 section。section中根据情况可以包含article。（类比： div 和 li）
hgroup， h1, h2
1. hgroup 是标题组，可以包含一组标题
2. h1 是一级标题，h2是二级标题
3. 以上代码可能类似这样：
```
	<hgroup>
	<h1>World Wide Web </h1>
	<h2>From Wikipedia, the free encyclopedia</h2>
	</hgroup>
```
abbr
1. 考虑到 www 是 world wide web的缩写，所以文中出现www的地方都应该应abbr标签
2. abbr 标签表示缩写。
3. 类似这样
```
	<abbr title="World Wide Web">WWW</abbr>.
```
hr
1. hr 表示故事走向的转变或话题的转变，显然此处并非这种关系
2. 这里使用 css border来把它当做纯视觉的效果
p
1. 这里有三段“note”，也就是注记。它在文章中用作额外的注释。
2. html中没有note相关的语义，所以用普通的 p 标签，加上 class="note"来实现。
3. 对于普通的段落，多数使用 p 标签实现
strong
1. 这里“World Wide Web（WWW）”和“the Web” 使用了黑体呈现，在上下文中表示这个很重要
2. strong：表示强调，在上下文中很重要
3. em： em标签表示重音, stong 表示在上下文中很重要
4. 示例代码：
```
我吃了一个<em>苹果</em>。

<strong>党和国家</strong>保证了我们幸福的生活。
```
blockquote, q, cite
1. 这在论文中很常见的用法，“引述”
```
interlinked by hypertext links,, and accessible via the Internet.[1]
```
  注意看这里的【1】，鼠标放上去的时候，出现引述的相关信息
```
		What is difference between ……July 2015.
  ```
```
2. 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
1. figure 表示这种插入文章的内容，不仅限图片、代码、表格等。只要具有一定自包含性的内容都可以用figure。
2. 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
1. 文重嵌入了一些代码和一些预编写好的段落。我们在“Function”小结中有一段背景是灰色的文字。
```
GET /home.html HTTP/1.1
Host: www.example.org
```
1. 这是一段http协议的内容描述，因为这段非常严格，所以我们不需要浏览器帮我们自动换行，因此我们使用 pre 标签。
  pre：表示这部分内容是预先排过版的，不需要浏览器进行排版
2. 又因为是一段计算机程序的输出，所以我们使用 samp标签
```
<pre><samp>
GET /home.html HTTP/1.1
Host: www.example.org
</samp></pre>
```
1. 接下来在 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>
&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>
```

补充其他的语义标签

在这里插入图片描述

再学前端三 html语义

html语义在wiki网页中的应用

页面剖析

补充 其他的语义标签

猜你喜欢

补充其他的语义标签