HTML 行内语义化标签 (inline semantic elements)

17 Jul 2017 , 5887 words

文中所列的标签元素都来自 MDN。中间加进了别处看到的资料，希望可以作为一个比较全面的速查参考。

<span>

行内元素里最 generic 的一个。把一部分内容包含在一起，方便调整样式（也可能是具有某种共同属性）。 没什么可说的，跟语义也没有什么关系。

<a>

常见的锚点标签。之所以不叫 link，可能是因为它应用的更加广泛。除了其他页面，还可以用来链接至当前页面的其他位置，及邮件、电话等可以用 URL 表示的地址。 也可以使用 download 属性，使它变成下载链接。

<a href="targeg">链接到本页 id 为 target 的元素</a>
<a href="mailto:someone@sample.com">发送邮件</a>
链接到本页 id 为 target 的元素 发送邮件

<abbr>

缩写标签。为它添加 title 属性后，用户可以把鼠标悬停在上面看到缩写所代表的全文。

<abbr title="Another Bad Pun">ABP</abbr> 是一个很随意的博客……
ABP 是一个很随意的博客……

<b> 与 <strong>

<b> 代表 bold，本身其实没有任何语义。而 <strong> 则正如其名字所表示的，应该用来强调重要的内容。虽然目前浏览器都是把 <strong> 渲染成粗体和 <b> 看上去没什么区别，但完全可以通过 CSS 设置 <strong> 样式来换一种视觉上强调的方式（比如换成其他颜色）。

<strong>明天下午三点</strong>我们的发布会正式开始。<!-- 强调时间 -->
下面是关于 <b>WWDC</b> 的最新报道。<!-- 不含强调，只是为了突出显示 -->
明天下午三点我们的发布会正式开始。 下面是关于 WWDC 的最新报道。

个人认为 <strong> 应该更加常用。如果它不适用的时候再考虑 <b>。

<i> 与 <em>

他们的关系和 <b> <strong> 类似。 <i> italic 本身只是为了显示上和其他内容区分开来，而 <em> emphasis 则含有强调的语义。

另外， <em> 与 <strong> 都是表强调，区别很微妙。一个 rule of thumb 就是，如果是想强调某句话念出来重音应落在某个字，而非其他字上，那这个字就应该用 <em>。

<u>

underline 下划线。没有特定的语义。

    <u>像这样</u>
像这样

<small>

缩小字体，一般用于版权信息、额外声明等内容。

	<small>本文章欢迎以一切形式转载</small>
本文章欢迎以一切形式转载

<small><b><i><u> 这几个标签语义功能很弱，只想到一些极其特殊的语境才会用到，大部分时候用 CSS 可能更合适吧

<s>

strikethrough，即用线划掉。这个标签用来表示已经不再适用的内容。

Steam 夏促开始了，我看着钱包想<s>买点什么好呢？</s> 钱都去哪了呢？
Steam 夏促开始了，我看着钱包想买点什么好呢？ 钱都去哪了呢？

需要注意的是，如果是为了展现一部分内容被编辑删改的过程，那么采用 <del> 和 <ins> 更合适。

I have a pen. I have <del>a</del><ins>an</ins> apple.
I have a pen. I have aan apple.

<sub> 与 <sup>

用于上下标文字。

log<sub>5</sub> 5 <sup>2</sup> = 2
log5 5 2 = 2

初看上去 sub 和 sup 也是在说样式，但是他们特指内容本身决定的上下标。如果只是为了样式考虑，应使用 CSS 中的 vertical-align。

<mark>

将文本高亮。与 <strong> 的区别在于，它一般用来标记出引用内容中的重点，而不是当前内容本身的重点（后者用 <strong>）。

<strong>拉丁文</strong>是另一个英文的重要源头。 这篇文章中举例说，<mark>「安慰疗法」的英文单词 Placebo 来自拉丁文</mark>——「我会让你满意」。
拉丁文是另一个英文的重要源头。 这篇文章中举例说，「安慰疗法」的英文单词 Placebo 来自拉丁文——「我会让你满意」。

<cite>

用在引用或提及的书籍、电影等作品名称上 （而非用于引用的内容本身）。不能用于人名。

根据 <cite>WHATWG Standard</cite> 的说法，这个标签不能用于人名。
根据 WHATWG Standard 的说法，这个标签不能用于人名。

需要注意的是，这个标签不是用于引用内容本身，而是引用的来源。 对比下面的 <q> 标签就清楚了。

<q>

引用标签，用于较短的行内引用。一般浏览器会自动给这部分内容加上引号。

如果是较长的需要独立成段的引用应使用 <blockquote> 标签。

<q> 标签是用于引用的内容本身的，它可以与上面提到的 <cite> 配合使用。。

<cite>《心理学原理》</cite>中说 <q>对一个人最残忍的惩罚是给他自由，让他在社会上逍遥；却又视之无物，不给他丝毫的关注</q>。
《心理学原理》中说 对一个人最残忍的惩罚是给他自由，让他在社会上逍遥；却又视之无物，不给他丝毫的关注。

同时 <q> 标签自己也有一个 cite 属性用于给出引用来源的 URL，不过这个 URL 并不会在网页上显示出来。

<code> <kbd> <samp>

这三个标签都是用在计算机相关的网页上。 三个标签的内容都会使用默认的等宽字体显示。

其中

  • <code> 就是由于行内的代码；
  • <kbd> 专门用于表示 keyboard 键盘输入内容；
  • <samp> 代表 sample, 用来表示程序的输出。
在本地运行 Jekyll 的时候可以设置端口，如 <code>jekyll serve --port 4001</code>。然后按 <kbd>Enter</kbd> 运行 Jekyll 本地服务器，接下来你可能看到如下结果：<samp>Server address: http://127.0.0.1:4001</samp>
在本地运行 Jekyll 的时候可以设置端口，如 jekyll serve --port 4001。然后按 Enter 运行 Jekyll 本地服务器，接下来你可能看到如下结果：Server address: http://127.0.0.1:4001

<time>

今天是<time datetime="2017-07-03">七月三日</time>。
今天是。

时间标签到目前为止支持的并不好。 W3C 规范中该标签的 datetime 时间戳属性，目前主要浏览器里只有 firefox 和 edge 支持。 另外规范中认为如果不含 datetime 属性，则从文本中获取 dateTime 值，这个应该是没有任何一个浏览器实现。

<data>

同样是一个支持很差的标签，目前只有 firefox 和 edge 支持。 它的作用是携带一个给机器用的 value 属性。这样用户看到的内容就可以更加易读。

总价是 <data value="10"> 2 + 4 + 4 共十</data>块钱。 <!-- 虽然读者看上去只是一个汉字十，但在浏览器中用 console 可以查看到 value = 10 -->
总价是 2 + 4 + 4 共十块钱。

<var>

该标签用于变量，一般会斜体显示。在跟编程或数学相关的网页上会比较常用。

<html>
	我们这里有 <var>n</var> 个物体
</html>
我们这里有 n 个物体

<br>

换行。如果不使用这个标签，则即使 HTML 源码换行，实际网页显示时还在同一行里。

如果
<br>
你要
<br>
写一首诗
<br>
或者
<br>
一个地址
如果
你要
写一首诗
或者
一个地址

<wbr>

word break，即告诉浏览器此处可以折行。这个应该很少用到，尤其是中文网页中。 WHATWG 里举了下面这个例子。为了突出喊叫的急迫，这里整个一句话是作为一个连在一起的词写出来的，中间没有空格。但是这么长的单词很可能需要折行。为了防止把一个单词拆到两行，可以在单词中间用 <wbr> 隔开。这样浏览器就会从标记 <wbr> 的地方折行。

So then she pointed at the tiger and screamed "there<wbr />is<wbr />no<wbr />way<wbr />you<wbr />are<wbr />ever<wbr />going<wbr />to<wbr />catch<wbr />me"!
So then she pointed at the tiger and screamed "thereisnowayyouareevergoingtocatchme"!

试着缩小浏览器窗口宽度就会发现，只会在单词间折行，单词不会被拆开。

<bdi>

bidi-isolate 的作用是把一部分文本从它周围的其他文字中隔离出来，让它可以按自己的方向渲染。这在需要支持阿拉伯语、希伯来语等自右向左阅读语言的网站上会很有用。需要时参考这篇文章即可。

<bid> 取代了原来 HTML 版本中的 <bdo>

<ruby><rb><rt><rtc>

最后是主要为东亚语言设计的 ruby 注释系列标签。这里的 ruby 注释跟编程语言没什么关系，而是特指汉字旁边的注音或注义，包括日文假名、中文注音符号，还有国人最熟悉的拼音。 在这套标签里，<ruby> 是最外层的标签，表示里边的内容中含有注释。<rt> 必不可少,里含注音内容。

	<ruby><rb>明</rb><rt>míng</rt><rb>天</rb><rt>tiān</rt></ruby>

	<!-- <rb> 后紧跟 <rt> 时，<rb> 可以省略 -->	
	<ruby>明<rt>míng</rt>天<rt>tiān</rt></ruby>
明míng天tiān 明míng天tiān 
<ruby>明儿<rt>míngr</rt></ruby><!-- 也可以给一个词整体注音 -->
明儿míngr

<rtc>是为了提供注义，用法和 <rt> 类似:

<ruby>明<rt>míng</rt><rtc>tomorrow</rtc></ruby>
明míngtomorrow

这里有个小问题：如果我们想给「明天」两个字单独注音，但作为一个词注义，那么前边这种省略 <rb> 的写法就比较难办了：

<!-- tomorrow 会出现在它紧跟的字，也就是「天」上-->
<ruby>明<rt>míng</rt>天<rt>tiān</rt><rtc>tomorrow</rtc></ruby>
明míng天tiāntomorrow

这时候就需要把 <rb> 标签用上，并且把作为整体注义的字放在一起。跟在它们后边的 <rt> <rtc> 会自动匹配：

<ruby><rb>明</rb><rb>天</rb><rt>míng</rt><rt>tiān</rt><rtc>tomorrow</rtc></ruby>
明天míngtiāntomorrow

略有点诡异的是，每个 <rt> 是会自动匹配一个 <rb> 的，但 <rtc> 却是匹配前边一组 <rb>，实际使用时候应该比较容易出错。好在如果需要注释的结果比较复杂，总是可以拆分成多个 <ruby> 标签来解决的。