过一遍HTML标签（三）

文字形式

a（行内）

HTML 中的 < a>元素用于定义一个超链接到同一页上的某个位置，或者在网络上的任何其它页面。

属性：

• download（HTML5）：规定被下载的超链接目标。
  在 < a> 标签中必须设置 href 属性。
  download属性也可以设置一个值来规定下载文件的名称。所允许的值没有限制，浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, 等等)。

• href：这是一个必需属性，为锚定义一个超文本链接来源。
  表示链接目标的URL或URL片段。

  • URL片段是由一个＃开头，指定一个在当前文档中的目标的id。
  • URL不限于网页（HTTP）的文件。URL可能使用浏览器所支持的任何协议。

您可以使用”top”特殊词来创建一个链接返回到页面顶部;
例如<a href="#top">返回顶部</ a>的这种行为在HTML5上被指定。

• hreflang：该属性用于指定被链接文档的语言。
  仅在使用 href 属性时才可以指定 hreflang 属性。

  • 和 lang 属性类似，hreflang 属性的值也是 ISO 标准的双字符语言代码。
  • 和 lang 属性不同的是，hreflang 属性不会指定标签中的内容所使用的语言，而是指定被 href 属性调用的文档所使用的语言。

• media（HTML5）：该属性指定目标链接的媒介类型。
  它的值必须是 媒体查询. 这个属性主要是允许用户代理挑选最适合的设备，在链接到外部样式表时非常有用。

• ping（HTML5）：用户追踪超链接将会发送的资源的URL的ping通知

• referrer：指示在获取资源时应该使用哪个提交者 (referer) 的字符串

• rel：规定当前文档与被链接文档之间的关系。
  该值是空格分隔的列表关系值。 该值和语义可能将会被一些权威文档编者赋予不同的含义。
  在默认的情况下，如果没有其它定义，是无效的，只有在 href 存在的情况下，使用该属性。

• target：该属性指定在何处打开链接的资源。

  • _self: 在当前页面加载。此值是默认的。
  • _blank: 新窗口打开
  • _ parent: 加载到当前框架的HTML4父框架或当前的HTML5浏览上下文的父浏览上下文。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self。
  • _ top: 加载响应进入顶层浏览上下文（即，浏览上下文，它是当前的一个的祖先，并且没有parent）。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self。

只有在href属性存在才能使用该属性。

• type：规定被链接文档的的 MIME 类型。
  只有在href属性存在才能使用该属性。

以下是被废弃的属性：

• charset：定义链接资源的字符编码
• coords：规定链接的坐标。
• name：用于定义在页面中锚点的目标位置，但现在已经改用id
• rev： 该属性用于指定当前文档与被链接文档的关系。
  rel 和 rev 分别表示源文档与目标文档之间正式的关系和方向。
• shape：规定链接的形状。

以下代码能够创建一个email链接，将用户的电子邮件程序打开，让他们发送新邮件。
这是通过一个mailto链接完成的：

<a href="mailto:[e-mail]">Send email to nowhere</a>

em（行内）

代表强调文字

< em> 元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读。
通常的，该元素会被浏览器展示为斜体文本

• i标签和em标签的不同
  虽然二者的视觉效果相同，都为斜体。但是语义是不同的：
  
  • em标签标示着重强调
  • i标签则表示从正常的文本中区分出的文本。

strong（行内）

代表特别重要文字，一般用粗体显示

• b标签和strong标签的不同：
  
  • strong表示一个逻辑状态，内容和表现是分离的。表示这段文字非常重要，但样式不一定是粗体，还可以规定成其他形式。
  • b则表示一个物理状态，没有区分内容和表现。只是加粗了文本。
• em标签和strong标签的不同：
  
  • strong表示一个更强的强调，或内容强烈的重要性。
  • em表示重要和强调的等级没有strong高，往往只是强调一个文本片段的意思。

Strong和Em都可以分别通过嵌套来增加重要性或强调的相对强度。

small（行内）

代表注释 ，如免责声明、版权声明等，对理解文档不重要。

<small> 标签呈现小号字体效果。
<small> 标签和它所对应的 <big> 标签一样，但它是缩小字体而不是放大。
如果被包围的字体已经是字体模型所支持的最小字号，那么 <small> 标签将不起任何作用。

与 <big> 标签类似，<small> 标签也可以嵌套，从而连续地把文字缩小。每个 <small> 标签都把文本的字体变小一号，直到达到下限的一号字。

虽然small、b、i标签可能违背了表现和结构分离的原则，但这三个标签在HTML5中都是合理的。作者可以根据具体情况来判断是使用small标签还是CSS。

s（行内）

代表不准确或不相关的内容。

s标签将会为文本添加删除线的样式。
但是，s标签在指示文档编辑时并没有那么适用，最好只用del和ins元素。

cite（行内）

HTML引用标签表示一个作品的引用。它一般包含引用作品的符合简写格式的标题或者URL。

q（行内）

代表内联的引用。

这个标签是用来引用短的文本，所以请不要引入换行符; 对于长的文本的引用请使用 <blockquote> 替代.

属性：

• cite：
  这个属性的值是URL，意在指出被引用的文本的源文档或者源信息.

<p>Everytime Kenny is killed, Stan will announce    <q cite="http://en.wikipedia.org/wiki/Kenny_McCormick#Cultural_impact">     Oh my God, you/they killed Kenny!   </q>.</p>

Everytime Kenny is killed, Stan will announce Oh my God, you/they killed Kenny! .

dfn（行内）

HTML 定义元素表示术语的一个定义。

abbr（行内）

代表省略 或缩写 ，其完整内容在 title 属性中。

data（HTML5）

time（HTML5）

用来标注日期和时间信息。

<p>The concert starts at <time>20:00</time>.</p>

属性：

• datetime：该属性表示此元素的时间和日期，并且属性值必须是一个有效的日期格式。

<p>The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.</p>

• pubdate：如果当前内容对应一个发表日期，则可以使用这个属性。

<p>This article was created on <time pubdate>2011-01-28</time>.</p>

code（行内）

HTML <code> 元素呈现一段计算机代码.
默认情况下, 它以浏览器的默认等宽字体显示.

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

CSS 规则可以覆盖浏览器默认的 code 标签字体样式. 但用户设置的浏览器字体选项可能会超过 CSS 的优先级, 使之无效.

var（行内）

代表代码中的变量 。

默认样式是：

var {  font-style: italic; }

<p> A simple equation: <var>x</var> = <var>y</var> + 2 </p>

samp（行内）

代表程序或电脑的输出 。
通常使用浏览器缺省的 monotype 字体

<p>Regular text. <samp>This is sample text.</samp> Regular text.</p>

kbd（行内）

代表用户输入 ，一般从键盘输出，但也可以代表其他输入，如语音输入。
以浏览器的默认monospace字体显示。

• 当<kbd>元素处于<samp>元素之中时，它代表着被系统回显的输入。

• 当<kbd>元素中包含<samp>元素时，该输入是基于系统输出的，比如调用某个菜单项。

• 当<kbd>元素处于另一个<kbd>元素之中时，它代表了一个实际的按键，或是该输入机制下的某个单位输入。

sub、sup（行内）

分别代表下标和上标

i（行内）

代表一段 不同性质 的文字，如技术术语、外文短语等。
它的内容通常以斜体显示。

在较早版本的HTML技术参数声明中, <i> 标签只是一个用于将文本显示为斜体的表示性元素， 很像 <b>标签被用来将文本显示为粗体。
现在情况不再是这样了，因为这些标签现在定义了更多的语义而不只是排版外观。<i>标签应表现一系列带有不同语义的文本，而它的典型样式显示为斜体。

该元素只在没有更适合的语义元素表示时使用。例如：

• 使用<em> 表示强调或重读。
• 使用 <strong> 表示重要性。
• 使用 <mark> 表示相关性。
• 使用<cite> 标记著作名，如一本书、剧本或是一首歌。
• 使用 <dfn> 标记术语的定义实例。

b（行内）

HTML <b> 元素表示相对于普通文本字体上的区别，但不表示任何特殊的强调或者关联。
一般显示为粗体

• 不要将 <b> 元素和 <strong>、<em> 以及 <mark> 元素混淆。
  
  • <strong> 元素明确表示文本很重要
  • <em> 元素在文本上添加强调
  • <mark> 元素明确表示文本的相关性。
    <b> 元素并不包含这些特殊的语义信息，应当仅仅当其他元素都不合适时使用它。
• 类似的，也不要用 <b> 元素来标记标题。如果需要表示标题，请使用 <h1> 到 <h6> 标签。此外，可以通过样式表来改变这些元素的的默认样式，结果就是它们并不一定都是粗体。
• 通过在 <b> 元素上添加 class 属性来表示额外的语义信息是一个很好的方式（例如 <b class="lead"> 来表示段落中的第一句）。这使得网页文档的样式开放变得轻松，并且不用修改 HTML 代码。
• 以前 <b> 元素的意思就是让文本变成粗体。但从 HTML4 开始，不赞成标签表示样式信息，于是 <b> 元素的含义发生了变化。
• 如果不是出于语义目的而使用 <b> 元素，那么让文本显示粗体更好的方式是使用 css 属性 font-weight 并且设置值为 bold。

u（行内）

代表一段需要下划线呈现的文本注释

mark（HTML5）

代表突出显示的文字。

浏览器会给mark中的文本添加黄色背景。

• 不要为了语法高亮而用 <mark> 元素; 你应该用 <strong> 元素来实现这个目的（语法高亮）。
• 不要把 <mark> 元素和 <strong> 元素搞混淆. <strong> 元素用来表示文本在上下文的重要型的， 而 <mark> 元素是用来表示上下文的关联性的.

<p>The &lt;mark&gt; element is used to <mark>highlight</mark> text</p>

ruby（HTML5）

用来展示东亚文字注音或字符注释。

rt（HTML5）

代表ruby 注释 ，如中文拼音。

rp（HTML5）

代表 ruby 注释两边的额外插入文本 ，用于在不支持 ruby 注释显示的浏览器中提供友好的注释显示。

以上三个标签通常一起使用：

<ruby>  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>  字 <rp>(</rp><rt>ji</rt><rp>)</rp></ruby>

<ruby>  明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp></ruby>

bdi（HTML5）

代表需要脱离父元素文本方向的一段文本。
它允许嵌入一段不同或未知文本方向格式的文本。

<p dir="ltr">This arabic word <bdi>ARABIC_PLACEHOLDER</bdi> is automatically displayed right-to-left.</p>

bdo（行内）

指定子元素的文本方向 ，显式地覆盖默认的文本方向。

属性：

• dir：这个标签包含文本的文本方向.属性值可为:
  
  • ltr: 从左往右写，与现代汉语的书写习惯相同.
  • rtl: 从右往左写，与古代汉语书写习惯相同.
  • auto: 自动，由浏览器决定文字的排列方向.

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

span（行内）

代表一段没有特殊含义的文本，当其他语义元素都不适合文本时候可以使用该元素。
应该在没有其他合适的语义元素时才使用它。<span> 与 <div> 元素很相似，但 <div> 是一个 块元素 而 <span> 则是 行内元素 .

br（行内）

代表换行

Mozilla Foundation<br>1981 Landings Drive<br>Building K<br>Mountain View, CA 94043-0801<br>USA

wbr（HTML5）

代表建议换行 ，当文本太长需要换行时将会在此处添加换行符。

<p>http://this<wbr>.is<wbr>.a<wbr>.really<wbr>.long<wbr>.example<wbr>.com/With<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages</p>