原文: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],但是现在还只是草案,且没有任何浏览器采用它。

上标和下标

标记一个文本的上标和下标部分,可以使用<sup>和<sub>。

一些语言需要使用这两个元素,来正确的表示缩写。少量的数学表达式也可以采用<sub>和<sup>元素标记,而不用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>标记,然后将<span>定义为块元素。

可以采用以下方式来标记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/>。

水平线

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

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

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

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

和<br>一样,当你编写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。

[翻译]HTML中不知名的语义标签的更多相关文章

  1. html5中的一些新语义标签

    <header> <nav> <ul> <li><a href="">栏目1</a></li> ...

  2. Html5 中的新语义标签

    1.1 语义标签对于我们并不陌生,如<p>表示一个段落.<ul>表示一个无序列表<h1> ~ <h6>表示一系列标题等,在此基础上HTML5增加了大量更 ...

  3. HTML5中的语义标签兼容IE8以及更低版本的浏览器

    看某教程,说让HTML5的这些语义标签能够兼容低版本的浏览器,原文是“你可以设置css的display属性为block”.很好理解,就设置css样式为block嘛,那就直接设置咯: header, s ...

  4. 浏览器中常见的html语义化标签

    html标签默认在浏览器中展示的样式,html标签的用途:语义化(明白每个标签的用途,在什么情况下使用此标签合理);标签语义化好处:1.更容易被搜索引擎收录2.更容易让屏幕阅读器读出网页内容. 网页上 ...

  5. 【Web前端HTML5&CSS3】03-字符实体与语义标签

    笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版 目录 字符实体与语义标签 1. 字符实体 2. meta标签 3. 语义标签 4. 块元素与行内元素 块元素(bloc ...

  6. HTML5之语义标签

    在HTML5标准中,新加了几个用于增添页面语义的标签,这些标签有:article.section.nav和aside等.与别的大多数标签不 同,浏览器在解释渲染这些标签的时候仅仅把它作为普通的div块 ...

  7. HTML5 十大新特性(一)——语义标签

    说语义标签前先来理解下什么叫语义化,当下html是靠div+css来铸造页面的整体框架和结构的,通篇大量的div可读性极低,因此诞生了这些特殊的标签,简单地说就是见名知义,使页面更清晰,方便维护和开发 ...

  8. html5-7 html5语义标签和视频

    html5-7  html5语义标签和视频 一.总结 一句话总结:设计网站的时候要兼顾早期浏览器的话,最新技术要缓着用,自己可以先尝试. 1.html5所有标签共有属性有哪四种? 1.id2.clas ...

  9. 在thinkphp中,写的博文标签多对多关系的标签频率统计算法

    常常看到别人的博客里面,或者网站里面有这样随机颜色,但字体大小与标签出现频率有关的标签云,于是自己就想写一个.至于颜色的随机显示,那就很简单了,这里就不列代码. 因为正在学thinkphp,所以数据查 ...

随机推荐

  1. c# 计算一个整型数组的平均

    一个整型数组的平均: class Program { static void Main(string[] args) { ,,,,,,,,,}; double avg= GetAvg(array); ...

  2. Android 如何设置默认语言

    前言          欢迎大家我分享和推荐好用的代码段~~ 声明          欢迎转载,但请保留文章原始出处:          CSDN:http://www.csdn.net        ...

  3. OTP【转】

    转自:http://baike.baidu.com/link?url=58z3oZfEMvNRiDUmWrxtzfDhv--UZ1jaW4rBHg1d9kIWd6HQaYZ96DH8QAFopSZBK ...

  4. hbase-0.94.16 在hadoop-1.2.1的安装配置

    1. ZooKeeper的安装: ZooKeeper是一个分布式的服务框架.可用于处理分布式的一些数据管理问题,如统一命名服务.状态同步服务.集群管理.分布式应用配置项的管理等. 步骤如下: a. 准 ...

  5. Newtonsoft.Json高级用法 1.忽略某些属性 2.默认值的处理 3.空值的处理 4.支持非公共成员 5.日期处理 6.自定义序列化的字段名称

    手机端应用讲究速度快,体验好.刚好手头上的一个项目服务端接口有性能问题,需要进行优化.在接口多次修改中,实体添加了很多字段用于中间计算或者存储,然后最终用Newtonsoft.Json进行序列化返回数 ...

  6. UTC的相互转换(java)

      SimpleDateFormat foo = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss"); System.out.println(& ...

  7. core--线程同步

    [同步(tóng bù)synchronous;sync;synchronism;synchronization 指两个或两个以上随时间变化的量在变化过程中保持一定的相对关系.]这是百度百科对&quo ...

  8. 一些纯css3写的公司logo

      随着对css3了解得越深入,越来越发现了css3的强大.css3不但能完成一些基本的特效如圆角阴影等,还能借助动画技术实现一些复杂的动画,能替代很多以前js才能完成的工作,css3的作用还不止于此 ...

  9. Java 碰撞的球 MovingBall (整理)

    package demo; /** * Java 碰撞的球 MovingBall (整理) * 声明: * 这份源代码没有注释,已经忘记了为什么要写他了,基本上应该是因为当时觉得好玩吧. * 有时候想 ...

  10. 工作流Activiti5流程变量 任务变量 setVariables 跟 setVariablesLocal区别

    工作流Activiti5流程变量 任务变量 setVariables 和 setVariablesLocal区别 因为网上的资料比较少.结合源码把相关API写下来. 设置流程级别变量: runtime ...