HTML语义

# HTML语义

# 一、语义类标签

使用原则：用错不如不用，不用不如用对。

ruby、rt、rp：注释。
em：表强调，消歧义。

# 二、运用语义标签来呈现wiki网页

一篇文档会有一个树形的目录结构，它由各个级别的标题组成，但这个树形结构可能不会跟HTML元素的嵌套关系一致。
- hgroup：h1主标题，h2副标题。但是html5规范已删除它，但仍保留在WHATWG 的 HTML 版本，只有部分老版的浏览器支持。
- section的嵌套会使得其中的h1-h6下降一级。
```
<h1>我才是真正的老大</h1>
<section>
	<h1>被降成老二了</h1>
</section>
```
  1
  2
  3
  4
作为整体结构的语义类标签
- header：表示导航或介绍性的内容。
- footer：包含一些作者信息、相关链接、版权信息。
- aside：包含导航、广告等工具性质的内容。侧边栏是aside，但aside不一定是侧边栏。
- address：并非像date一样，表示一个给机器阅读的地址，而是表示“文章（作者）的联系方式”，明确地只关联到article和body。
- abbr：表示缩写。考虑到WWW是World Wide Web的缩写，所以文中所有出现的WWW，都应该使用abbr标签。
```
<abbr title="World Wide Web">WWW</abbr>
```
  1
- hr：表示故事走向的转变或者话题的转变。两个标题间的横线显然并非这种关系，所以我们应该使用CSS的border来把它当作纯视觉效果来实现。
- 有三段“note”，也就是注记。它在文章中用作额外注释。HTML中并没有note相关的语义，所以，我们用普通的p标签，加上class="note"来实现。
- 这里 “World Wide Web (WWW)” 和 “the Web” 使用了黑体呈现，从上下文来看，这里表示这个词很重要，所以我们使用strong标签。
- 在HTML中，有三个跟引述相关的标签blockquote表示段落级引述内容，q表示行内的引述内容，cite表示引述的作品名。
- 为了让机器阅读更加方便，可以加上time标签。
```
<time datetime="2015-07-09">9 July 2015</time>
```
  1
- figure：用于表示与主文章相关的图像、照片等流内容。
```
<figure>
 <img src="https://.....440px-NeXTcube_first_webserver.JPG"/>
 <figcaption>The NeXT Computer used by Tim Berners-Lee at CERN.</figcaption>
</figure>
```
  1
  2
  3
  4
- dfn：包裹被定义的名词，会出现斜体的效果。
- 文章的目录链接到文章的各章节，且顺序不可随意变化，故使用nav+ol。
- pre：表示这部分内容是预先排版过的，不需要浏览器进行排版。例如，HTTP协议的内容描述的换行是非常严格的。
- samp：表示这是一段计算机程序的示例输出。
```
<pre><samp>
GET /home.html HTTP/1.1
Host: www.example.org
</samp></pre>
```
  1
  2
  3
  4
- 一段HTML代码，我们同样不希望浏览器做自动换行。因为同时是代码，我们还需要加上code标签。
```
<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>
```
1
2
3
4
5
6
7
8
9
10

# 三、更多的语义类标签

small：之前表示字体缩小的废弃标签，HTML5救回来表示补充评论。
s：之前表示划线的废弃标签，HTML5救回来表示错误的内容，常用于电商领域表示打折前的价格。
b：之前表示黑体的废弃标签，HTML5救回来表示关键字。
data：跟time标签类似，给机器阅读的内容，意义广泛，可以自由定义。
var：变量，多用于计算机和数学领域。
kbd：用户输入，表示键盘按键居多。
sub：下标。（sup：上标。）
bdi，bdo：用于多语言混合时指定语言或者书写方向（左到右或右到左）。
mark：表示高亮。
wbr：表示可以换行的位置。主要是英文等文字不允许单词中间换行，这个标签一般在把多个单词粘成很长的单词时使用。
menu：ul的变体，用于功能菜单时使用。

dl,dd,dt：一般出现在较为严肃的文章，对一些术语进行定义。

<dl>
  <dt>Firefox</dt>
  <dd>A free, open source, cross-platform, graphical web browser
      developed by the Mozilla Corporation and hundreds of volunteers.</dd>
  <!-- other terms and definitions -->
</dl>

1
2
3
4
5
6

main：整个页面只出现一个，表示页面的主要内容，可以理解成特殊的div。

HTML元信息类标签 Algorithm Part

LinHuijuan's Blog

Choose mode

HTML语义

# HTML语义

# 一、语义类标签

# 二、运用语义标签来呈现wiki网页

# 三、更多的语义类标签