【读书笔记】——《HTML5移动开发》语义化的短语元素

使用更语义化的元素

短语元素

短语元素，或者称为短语标签，是专门为特定语义环境设计的标签，虽然其中一些标签的显示方式类似其他基本标签，如 <b>, <i>, <pre>和 <tt>。
下文将展示所有的短语标签，在语义化的环境中，你需要使用<strong>而不是<b>,使用<em>而不是 <i>，这样的书写格式能在未来更好的支持形形色色的浏览器、阅读器或其他载体。

1.加粗[Strong Text]

<p>The following word uses a <strong>strong</strong> typeface.</p>

The following word uses a strong typeface.

2.强调[Emphasized Text]

<p>The following word uses a <em>emphasized</em> typeface.</p>

The following word uses a emphasized typeface.

3.标记[Marked Text]

<p>The following word has been <mark>marked</mark> with yellow</p>

The following word has been marked with yellow

4.省略[Text Abbreviation]

<p>My best friend's name is  <abbr title="Abhishek">Abhy</abbr>.</p>

My best friend’s name is Abhy.把鼠标放在有省略表示的位置可查看效果

5.首字母缩略词[Acronym Element]

<p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>

This chapter covers marking up text in XHTML.看起来没什么用，各项浏览器暂不支持，可灵活运用Text Abbreviation，如下

My first Web language is HTML.

6.书写方向[Text Direction]

<p><bdo dir="rtl">This text will go right to left.</bdo></p>

This text will go left to right.

This text will go right to left.

dir属性控制书写方向，默认左至右ltr，右至左rtl。

7.专业术语[Special Terms]

<p>The following word is a <dfn>special</dfn> term.</p>

The following word is a special term.看起来有点像斜体，最好专用于特定的专业术语，更加语义化

8.长引用[Quoting Text]

<p>The following description of XHTML is taken from the W3C Web site:</p>

<blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML, following on from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>

The following description of XHTML is taken from the W3C Web site:

XHTML 1.0 is the W3C’s first Recommendation for XHTML, following on from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.

根据浏览器内核不同，会给blockquote元素换行和加外边距或其他样式，多用于大篇幅引用。

9.短引用[Short Quotations]

<p>Amit is in Spain, <q>I think I am wrong</q>.</p>

Amit is in Spain, I think I am wrong.明显的语义化标签，用来表示引号

10.文献引用[Text Citations]

<p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.</p>

This HTML tutorial is derived from W3 Standard for HTML.此处直接引用文献名称,引用应为斜体字

11.代码片段[Computer Code]

<p>Regular text. <code>This is code.</code> Regular text.</p>

Regular text. This is code. Regular text.用来表示计算机可识别的代码，就像Markdown里面的代码引用

12.键盘键入[Keyboard Text]

<p>Regular text. <kbd>This is inside kbd element</kbd> Regular text.</p>

Regular text. This is inside kbd element Regular text.专门用来表达需要用键盘键入的内容

13.变量[Programming Variables]

<p><code>document.write("<var>user-name</var>")</code></p>

document.write("user-name")

这个元素通常与code元素或pre元素联合使用，声明这个元素是一个变量

14.变量[Program Output]

<p>Result produced by the program is <samp>Hello World!</samp></p>

Result produced by the program is Hello World!

这个元素用来声明程序或脚本的输出内容

15.地址[Address Text]

<address>388A, Road No 22, Jubilee Hills -  Hyderabad</address>

388A, Road No 22, Jubilee Hills - Hyderabad

语义化标签的典范，address元素，通常为斜体字

参考文献

HTML Phrase Tags