别再纠结了！尽管把你的烦恼交给我们吧，我们会将问题转化为一整套解决方案提供给你！方案的前期咨询根本不需你花一分钱。还不马上咨询？
或许一套通用软件就能让你从烦恼中解脱出来，那就先到我们的软件产品仓库中选一款吧！我们还可以为你提供现有软件的扩展定制，即客户化定制。
购买软件与汉堡包不同，软件产品和软件实施相结合才能发挥作用！没有良好的软件实施，必败！而采用我们的方案或产品，免费获得软件实施支持。
坚持用心建站！ 您只需告知所需要到达的终点，我们将带你一起穿越网站策划、平面设计、页面制作、程序开发和后期维护，享受全程的贴心服务。
何必专门招人负责网站维护呢？你可能反驳招人能兼干其他工作，但是这样就不够专注。而我们提供的网站后期维护更专业，更专注，更划算。21. 罕为人知的语义元素
- 详细资料
- 发布于 2012年9月18日
- 点击数：6063
序言
在本篇文章中，我将向你们介绍一些更隐晦、罕为人知且极少用到的 HTML 语义元素。我将介绍有关标记程序代码、与计算机的交互、引用与缩略语，以及对文档所做的改动等内容。在本文的结尾部分，我还将介绍 HTML 5 草案中对新定义的额外语义元素的一些提议。
附注：在每个代码示例后面，都有一个“查看源文件”的链接，通过点击链接你将看到源代码在浏览器中的实际渲染效果，这些效果包含在一个不同的文件中——这样你就可以一边看着源代码，一边看着它们在浏览器中是如何被渲染的实际例子。
强调显示联系信息
address 元素也许是 HTML 中命名最不当、最被人误解的元素。乍看之下，由于其名称为“地址”，似乎就是用来封装地址、电子邮件地址、邮政地址等内容的元素，但这并不完全对。
address 元素的实际含义是提供其所在网页或该网页主要部分的作者或作者们的联系信息。可采用的形式包括姓名、电子邮件地址、邮政地址，或指向另一个包含更多联系信息的页面的链接。例如：
<address> <span>Mark Norman Francis</span>, <span class="tel">1-800-555-4865</span> </address>
在下面这个示例中，地址包含在页脚段落中，并链接到网站的另一个网页上。这个链接所指向的网页可包含更为详细的联系信息，如此一来就可以避免在整个网站的每个页面上都重复显示联系信息。
<p class="footer">© Copyright 2008</p> <address> <a href="/contact/">Mark Norman Francis</a> </address>
当然，如果网站的作者不止一人，也可采用同样的方式来显示联系信息，只要把不同的作者链接到不同的联系信息页面就可以了。
使用 address 元素来标示其它任何类型的地址都是*不正确*的，以下就是一个不正确的例子：
<p> Our company address: </p>
<address>
Opera Software ASA,
Waldemar Thranes gate 98,
NO-0175 OSLO,
NORWAY
</address>
（当然，如果 Opera 公司要为本文承担集体责任的话，那么即使只有我而不是 Opera 公司的全体员工，是这个特别的网页的作者，以上这种做法就是正确的）。
对于一般的地址，你可以使用一种叫做“微格式”的东西来表示某一段落中包含一个地址。在 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>
对于占据多行的较大代码示例，你可以使用预格式化的代码块，就如标记 HTML 中的文本内容一文中所描述的那样。
尽管没有定义过的方法来指明 code 元素中包含的是何种编程语言或代码，你也可以使用 class 属性来指明。通常的习惯（见 HTML 5 草案）是使用前缀 language-，后边再跟上编程语言的名称。如此以上那段代码就将变为：
<p>It is bad form to use event handlers like <code class="language-javascript">onclick</code> directly in the HTML.</p>
某些编程语言的名称难以用 class 来表示，如 C#（C-Sharp）。书写 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 元素指明的是用户在与计算机进行交互时的输入。尽管交互传统上是指键盘输入（kbd 是 keyboard 的缩写），但是其它类型的输入，如语音输入，也应用 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 和 acronym 元素用于指明哪些词语是缩略语，并提供了一种不需要地打断该文档流而对它们进行展开的方法。
作为缩略语的文字应被包裹在 abbr 元素中，而缩略语的全称则放在 title 属性中，就像这样：
<p>Styling is added to <abbr title="Hypertext Markup Language">HTML</abbr> documents using <abbr title="Cascading Style Sheets">CSS</abbr>.</p>
首字母缩写词是缩略语的一种，与一般缩略语的区别在于它被公认如同一般的单词一样，它的发音也是如此。比如说 scuba 就是一个首字母缩写词，它是由“self-contained underwater breathing apparatus”（自给式水中呼吸器）缩写而成。尽管 HTML 4.01 规范允许既使用 abbr 元素，又使用 acronym，但在实际使用中还是会遇到一些问题……
Internet Explorer 浏览器（ IE7 及其更早的版本并未像其它浏览器一样为缩略语提供点状下划线）不认 abbr 元素，而只认 acronym 元素。不幸的是，acronym（首字母缩写词）只是 abbreviation（缩略语）的一个子集，因此使用 acronym 元素来标记“HTML”这样的缩略语是不正确的做法。
此外，由于任何首字母缩写词都是一个有效的缩略语，在 HTML 5 规范草案中，为了支持标准化，acronym 元素被舍弃了，而用 abbr 元素来同时表示缩略语和首字母缩写词。
因此，最好的做法是避免使用 acronym 元素，而在你的代码中自始至终只使用 abbr 元素。如果你需要为 abbr 元素添加一些视觉上的样式，可以在其中放入一个 span 元素，并代替 abbr 在其上添加样式，这样所有的浏览器都将应用该视觉样式。随后的“样式化文本”一文将详细介绍这方面的内容。
定义实例
关于如何恰当地使用 dfn 元素，存在一些易于混淆之处，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 这个术语出现后，紧接着就是这个术语的定义，这就很适合使用 dfn 元素。你应当在一个页面中只使用一次 dfn 元素，即在术语第一次被定义时使用，由于术语本来就不需要重复定义，因此这倒也不会太麻烦。
这样使用 dfn 元素好倒是好，但仅举一个孤立的例子并不全面——当某个缩略语在一个网页中多次出现时也建议使用 dfn 元素。例如，在前面的 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>”而后用户代理就可以让用户用某种方式去检索这个缩略语的定义实例。但不幸的是，目前还没有一种用户代理可以做到这一点，包括屏幕阅读器。因此更好的做法是同时也使用 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 的全称出现了重复，这对使用屏幕阅读器的用户可能成为问题。不过如果省略掉全称的话，对视力正常的用户而言，会使文档的可用性降低，毕竟网站的用户群中视力正常的用户还是占大多数。
我建议某个页面中如果只有一两个术语需要定义的话，那么这种权衡是值得接受的。（如果网页中有大量术语需要定义，最好在页面中创建一个词汇表章节或另建一个页面，在这个页面中就可以使用更为严谨的定义列表标记）。如果你非常重视这个问题，可以使用以下代码：
<p><abbr title="HyperText Markup Language">HTML</abbr> (<dfn>HyperText Markup Language</dfn>) is a language to describe the contents of web documents.</p>
尽管如此，用户代理还是得提供一些方法，来将定义实例与页面内出现的被定义的术语联系在一起。虽然对于 CSS 来说，它仍然是一个可以用来进行样式化的不错的钩子，但目前还没有一种浏览器能有效地支持 dfn 元素。以上我提出的已经是目前最好的解决办法了。
现有的 HTML 规范对 dfn 元素应该如何使用并没有明确的规定，已有的规定可能也不是基于该元素在实际运用中的做法——不然的话应该会有将术语和其完整描述或定义结合在一起的方法。HTML 5 规范中对如何使用 dfn 元素有详细的描述，但该规范尚在草拟之中，目前还不适于将该规范用在网络上。
上标和下标
要将某些文本的一部分标记为上标文本或下标文本（即相对于该文本的其它部分略微升高或下降），你可以使用 sup 和 sub 元素。
为了正确使用缩略语，一些语言需要用到这些元素，此外，在标记一小段数学内容时，也可以使用这两种元素，而不必使用 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 对空格的定义方式，在写入文本时如果仅按回车键，是无法控制文本的换行的（例如将一个邮政地址标记为一个段落，但在实际显示时地址的各个部分都显示在单独的一行上）。
可以使用 br 元素在文档中插入换行符。不过该元素应只在需要时作强制换行之用，绝不应被用于为段落之间设置更多的垂直间距——这里应该使用 CSS 更合适。
有时候使用预格式化的文本块可能比插入 br 元素更为方便。或者，如果某些文本的某个特殊部分需要自成一行，而这又只是样式问题，那可以将它们放在 span 元素中，并设置为按块级元素显示。
举个例子，你们可以将在前面讨论 address 元素的部分中看到过的 Opera 公司的联系地址以如下代码表示：
<p>Our company address: </p> <address> Opera Software ASA,<br>Waldemar Thranes gate 98,<br> NO-0175 OSLO,<br>NORWAY </address>
如果你是在编写 XHTML 文档而不是 HTML 文档，那么 br 元素就必须是自闭合的，像这样：<br />.
水平线
在 HTML 中可使用 hr 元素来创建水平线。该元素会在文档中插入一根水平线，用以表示文档不同部分的分界线。
尽管有人认为 hr 元素是一个不能被继承的非语义元素，而只是一个创造视觉和表象效果的元素，但在文献中使用这个元素是有一些先例的。在书籍的某一章（也可以说成是书籍的一部分）中，发生在不同时间和/或地点的场景间就常常出现水平线。此外，诗歌中也可以使用装饰性的断行将不同的小节分隔开来。
hr 元素是公认的在文档各部分之间制造分界线的标记，而不是一个新的头部元素。
hr 元素没有特别的属性，如果你对其默认样式感到不满意的话，应该使用 CSS 来对其进行样式化。
同样的，就如同换行符一样，如果你是在编写 XHTML 文档而不是 HTML 文档，就必须采用自闭合的形式——<hr />.
文档的改动（插入与删除）
如果某个文档在首次上线之后有所改动，你可以标注出这些改动，这样那些网站回头客或自动化程序就可以知道文档在何时做了哪些改动。
新文本（插入部分）应当被包裹在 ins 元素中，而已被移除的文本（删除部分）应当被包裹在 del 元素中。如果在文档中同一个地方既有删除又有插入，正确的做法是将被删除的文本放在前面，然后才是新插入的文本。
ins 元素和 del 元素都可以带有两个属性，这些属性可以给文档编辑赋以更多的意义。
如果文档改动的原因在该页面上或网上其它地方已有指明，你就应该在 cite 属性中链接到那个文档或片段。这实际上就等于宣示：“因为这个原因才做出了这个改动。”
你还可以使用 datetime 属性指明改动发生的时间。该属性的值必须是一个符合 ISO 标准的时间戳，格式一般为 “YYYY-MM-DD HH:MM:SS ±HH:MM”（更多信息可查阅维基百科）。
下面是一个用到了这两个属性的代码示例：
<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>
一些将在未来引入的 HTML 元素
我们在本文和其它一些文章中都已提到 HTML 5 规范 目前正在起草中。HTML 5 将是自 HTML 推出以来修正最大的一个新版本。通过实际研究目前网上对 HTML 的使用方式，而不是空想什么对人们可能有帮助，HTML 5 有望将目前只能算是约定的语义元素直接写入规范之中。
一些可以改善我们编写文档代码和使用文档方式的示例元素将被引入 HTML ，其中包括：
header——包含页面的顶部区域（页头），通常由logo和网页标题组成，还可以包含一个简短的“about”（简介）和全站导航，以及登录/退出/公司简介文档链接等。footer——包含页面的底部区域（页脚），通常由站内链接、版权声明和其它法律信息组成。nav——包含网页的主要导航链接。article——包含页面内主内容区域的部分，但不包括其它所有页面元素，如导航、页头、页脚等。aside——包含页面特定区域上的侧边栏信息，还可用于标记主要内容之中的重要引述或注释。
你们可以通过查阅 HTML 5 规范了解更多新引入的元素。
总结
在本篇文章中，我讲述了 HTML 中罕为人知、鲜为人用的一些语义元素。在下一篇文章中，我们将进一步讨论如何使用 HTML 中两个语义中性的元素，div 和 span 元素。
