[翻译]HTML中不知名的语义标签

原文：http://docs.webplatform.org/wiki/tutorials/Lesser_-_known_semantic_elements

HTML5中比较常用的语义元素有header,nav,footer,这篇文章主要讲了一些不知名的语义元素。第一次翻译英文原文，措辞难免不准确，不清楚的地方，可参考原文。

简介：

今天我们通过这篇文章，来了解一下HTML中一些意义模糊和不知名的语义元素。我们将探讨标记程序代码、计算机交互、引用和缩写词和文本的更新等的元素。

高亮显示联系人信息

<address>或许是命名最不合理且最容易让人误解的HTML标签了。因为命名为“address”，第一眼看到它，似乎就只是用于标记地址，邮件地址，邮编或者类似信息。但是，这仅仅只是部分情况。

<address>实际上用于表示页面的作者，或者页面内的主要部分。表现形式可以是名字，邮件地址，通讯地址或者包含更多联系信息的另一个页面的链接地址。例如：

<address> 
  <span>Mark Norman Francis</span>, 
  <span class="tel">1-800-555-4865</span>
</address>

在下面的示例中，地址信息包含在<footer>中，并且是另一页面的链接地址。链接地址的目标页面包含更加详细的联系地址，来避免在整个网站中不断重复地址信息。

<footer>
<p>© Copyright 2011</p>
<address>
<a href="/contact/">Mark Norman Francis</a>
</address>
</footer>

当然，如果一个网站包含多个作者，也可以采用相同的方式，链接到不同作者的联系信息页面。

使用<address>来表示任何其他类型的地址，都是错误的，例如：

<p> Our company address: </p>
  <address>
    Opera Software ASA,
    Waldemar Thranes gate 98,
    NO-0175 OSLO,
    NORWAY
  </address>

（当然，如果Opera对本文承担责任，这样写也是正确的，即时Opera不是本文的作者）——呵呵，开玩笑的

对于任何通用地址，可以使用“microformat”来表示一个段落中包含一个地址。详细请参考more information on Microformats on dev.opera.com。

编程语言和代码

<code>元素表示程序代码或者编程语言，例如PHP，JavaScript，CSS和XML等。对于包含在一个句子中简短的编程语言，可以仅仅将元素包含在<code>标记中，如下所示：

<p>It is bad form to use event handlers like
<code>onclick</code> directly in the HTML.</p>

对于包含缩进的多行代码，可以使用 up textual content in HTML文章中采用的格式化的块。

虽然没有定义<code>中包含的编程语言或代码的方法，但是可以使用class属性。一般采用“<language->+编程语言名”的格式，如下所示：

<p>It is bad form to use event handlers like 
<code class="language-javascript">onclick</code>
directly in the HTML.</p>

一些编程语言的名字不易用class表示，如C#，表示形式为 “<class='language-c\#'>”，但是容易误解。我建议class只包含字母和连字符，可以采用编程语言的英文读法。因此，可以采用 “<class='language-csharp'>”来代替。

显示计算机交互

<samp>和<kbd>可以用于表示与计算机的输入和输出交互。例如：

<p>One common method of determining if a computer is connected
to the internet is to use the computer program <code>ping</code>
to see if a computer likely to be running is reachable.</p>

<pre><samp class="prompt">kittaghy%</samp> <kbd>ping -o google.com</kbd>
  <samp>PING google.com (64.233.187.99): 56 data bytes
  64 bytes from 64.233.187.99: icmp_seq=0 ttl=242 time=108.995 ms

  --- google.com ping statistics ---
  1 packets transmitted, 1 packets received, 0% packet loss
  round-trip min/avg/max/stddev = 108.995/108.995/108.995/0.000 ms
  </samp></pre>

<samp>表示计算机程序的输出示例，如上所示，不同的输出类型，采用不同的class属性。然而，针对class的取值，还没有广泛被接受的约定规则。

<kbd>表示用户和计算机的输入交互。虽然习惯上是指键盘输入，但是也可以用于表示其他类型的输入，如声音。

变量

<var>表示文本内容中的变量。包括代数表达式或者程序代码，例如：

<p>The value of <var>x</var> in
 3<var>x</var>+2=14 is 4.</p>
    
<pre><code class="language-perl">
my <var>$welcome</var> = "Hello world!";
</code></pre>

引用

<cite>用于表示附近内容的来源——当引用一个人，一本书或其他类型的出版物，或者提示人们另一来源时，该来源必须采用<cite>包含，例如:

<p>The saying <q>Everything should be made as simple as possible,
but not simpler</q> is often attributed to <cite>Albert
Einstein</cite>, but it is actually a paraphrasing of a quote which
is much less easy to understand.</p>

缩写词

<abbr>用于表示出现的缩写词，并提供了一种不中断文本流，并扩展它们的方法。

缩写词包含在<abbr>中，全称采用title属性表示，例如：

<p>Styling is added to 
<abbr title="Hypertext Markup Language">HTML</abbr> documents
using <abbr title="Cascading Style Sheets">CSS</abbr>.</p>

注意：HTML4中有一个标签<acronym>，和<abbr>功能相同，只是<acronym>用于首字母缩略词。HTML5中去除了<acronym>，因为这两个标签功能的差别并不足以需要两个不同的标签来表示。

问题在于IE的支持，IE（IE7以下，包括IE7不提供其他浏览器已实现的采用下划线强调缩写的功能）不识别<abbr>标签，但是识别<acronym>。为了保证IE识别<abbr>，需要采用javascript新建<abbr>标签，将下面的代码放在页面的<head>标签中：

<script type="text/javascript">document.createElement('abbr');</script>

想了解为什么这样可行，可以阅读HTML structural elements#HTML5_element_support。当然，你也可以采用<acronym>，直到你想使用HTML5时。

定义实例

<dfn>的使用有些模糊，HTML规格中对它的定义是”定义封闭的实例“，这非常接近<dt>标签（定义术语）用于定义列表的思想。

区别在于<dfn>并不需要作为列表的一部分，并且可以用于普通文本内容，甚至是会话风格的散文。我们现在来看一下<dfn>的使用示例：

<p><dfn>HTML</dfn>: HTML stands for "HyperText Markup Language". This is 
the language used to describe the contents of web documents.</p>

术语HTML后面，紧接着的是HTML的定义，因此，这是一个使用<dfn>的理想位置。在一个页面上，你应该只在第一次定义术语的时候使用，但是术语在一个页面，也只需要定义一次，所以不会很麻烦。

建议当一个缩写词在一个页面多次出现时，使用<dfn>，例如，在文章The basics of HTML 中，HTML出现了40多次。每次都采用 “<abbr title="HyperText Markup Language">HTML</abbr>”表示，将浪费带宽，产生视觉疲劳，而且对于使用屏幕阅读器的用户，将对每次重复的扩展HTML感觉十分厌烦，即使他们已经被告知它代表什么。相反，将以下代码插入HTML第一次定义的地方：

<p><dfn><abbr>HTML</abbr></dfn> ("HyperText Markup Language") is 
a language to describe the contents of web documents.</p>

接下来，无论什么时候使用HTML，都仅仅被标记为 “<abbr>HTML</abbr>”。一个用户代理可以通过某种方法来获取HTML缩写的定义。

不幸的是，目前还没有任何用户代理可以实现这个，包括屏幕阅读器。采用title属性来提供这些信息会更好：

<p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> ("HyperText Markup Language") is a language to describe the contents of web documents.</p>

但是这样做，HTML的定义重复了，将对屏幕阅读器用户带来问题。而且，保留可见的HTML扩展将不利于视觉可见的用户，而视觉可见的用户才是最广大的用户群。

我建议当只有一个到两个术语需要定义时，可以接受这种方式（当一个页面需要定义大量的术语时，最好创建一个词汇或页面，以便于采用更加严格的定义）。如果你很注重这个，可以采用以下代码：

<p><abbr title="HyperText Markup Language">HTML</abbr> 
(<dfn>HyperText Markup Language</dfn>) is a language to 
describe the contents of web documents.</p>

用户代理仍然需要一些方法来将术语和术语定义联系起来。目前没有浏览器针对<dfn>进行处理，尽管它对CSS很有用。

这是一个不幸的例子,已经创建了规范却没有明确的对一个元素应该如何使用的指导方针，并且可能不是基于任何实际使用的场景——然而，这是一个联系术语和它的完整定义的方法。HTML5规格中有详细描述，[detail about how dfn is to be used]，但是现在还只是草案，且没有任何浏览器采用它。

上标和下标

标记一个文本的上标和下标部分，可以使用和。

一些语言需要使用这两个元素，来正确的表示缩写。少量的数学表达式也可以采用和元素标记，而不用MathML（一个特定的，相当重要的数学标记语言，为标记重要的数学公式而创建）。如下所示：

<p>The chemical formula for water is H<sub>2</sub>O, and it
is also known as hydrogen hydroxide.</p>
<p>The famous formula for mass-energy equivalence as derived
by Albert Einstein is E=mc<sup>2</sup> — energy 
is equal to the mass multiplied by the speed of light 
squared.</p>

换行符

因为HTML定义空格的方式，无法通过回车符来控制一行本文在哪里换行（例如将一个通讯地址标记为一个段落，希望每个小的部分在单独的一行显示）。

换行符可以用 标记。但是，它只能在需要的时候强制换行，不能用于增加两个段落间的间隔——间隔一般用CSS实现。

有时候采用格式化文本块可能比插入 更简单。如果一段文本中，有某一部分需要单独一行显示，可以采用标记，然后将定义为块元素。

可以采用以下方式来标记Opera的通讯地址：

<p>Our company address: </p>
<address>
Opera Software ASA,<br>Waldemar Thranes gate 98,<br>
NO-0175 OSLO,<br>NORWAY
</address>

当然，如果你编写的是XHTML而非HTML，则需要写为 。

水平线

HTML中的水平线采用<hr>标记。它将在文档中插入一行，代表文档中不同部分的边界。

有人认为，这种非语义的，纯粹视觉的显示效果，文学中也存在先例。在一个段落内，水平线将出现不同的次数和在不同的位置。同样，诗歌也可以使用装饰性的分隔符来分开不同的小节。

水平线不能用于证明一个新标题元素的存在，一般用于标记文档不同部分的边界。

<hr>没有特有的属性，当默认样式无法满足需求时，需要采用CSS定义样式。

和 一样，当你编写XHTML时，需要采用<hr/>。

文档的更改（插入，删除和过期）

当文档在它的原始版本上进行了更改，你需要在文档上标记出相对于原始版本更新的部分内容。

新增部分采用<ins>标记。已被删除的部分采用<del>标记。如果某一个部分同时进行新增和删除，一般建议先删除，再新增。

<ins>和<del>都包含两个属性，来赋予编辑更丰富的意义。

如果网页上声明了更新的原因，需要采用<cite>标记更新内容，表示“因为这个原因而更新文档”。

可以采用datetime属性，声明更新的时间。datetime的值必须是ISO标准时间戳，采用“YYYY-MM-DD HH:MM:SS ±HH:MM” (more information is available on wikipedia)。

如下所示：

<p>We should only solve problems that actually arise. As
  <cite><del datetime="2008-03-25 18:26:55 Z"
  cite="/changes.html#revision-4">Donald Knuth</del><ins
  datetime="2008-03-25 18:26:55 Z"
  cite="/changes.html#revision-4">C. A. R. Hoare</ins></cite>
  said: <q>premature optimization is the root of all 
  evil</q>.</p>

此外，我们可以采用<s>标记过期的内容，如果你想表示该内容已经更新或删除，例如：

<p><s>The president of the USA is currently George W. Bush</s>.</p>

总结

在这篇文章中，我们探讨了HTML中一些不知名，使用频率低的语义化标签。

注：原文最早发布作为Opera Web Standards Curriculum的一部分，作者是Mark Norman Francis。

posted @ 2014-03-24 11:22 yuki.idesign 阅读(694) 评论(0) 编辑收藏举报

刷新页面返回顶部

云淡风轻

专注前端开发技术，分享学习资源