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:[email protected]">发送邮件</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íngtiān míngtiā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íngtiā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> 标签来解决的。