行内文本
行内文本主要包括打标记的文本、被删除的文本、不再准确的文本、插入的文本、带下划线的文本、小号文本、粗体文本、斜体文本,Bootstrap 会为这些文本添加特殊的样式。
1.打标记的文本
HTML中的 <mark> 标签用来为文本打上标记,通常是在文本中高亮显示某个或某几个字符,旨在引起用户的特别注意。如:
<p>
You can use the mark tag to <mark>highlight</mark> text.
</p>
Bootstrap 会为 <mark> 标签标记的文本添加一个 #fcf8e3 的背景颜色。效果如图 2‑14所示:
图2-14 高亮显示的文本
2.被删除的文本
HTML中的 <del> 标签用来标记已经从文档中删除的文本。如:
<p>
<del>This line of text is meant to be treated as deleted text.</del>
</p>
Bootstrap 会为 <del> 标签标记的文本添加一条删除线。效果如图 2‑15所示:
图2-15 被删除的文本
3.不再准确的文本
HTML中的 <s> 标签用来标记不再准确或不再相关的文本。如:
<p>
<s>This line of text is meant to be treated as no longer accurate.</s>
</p>
Bootstrap 也会为 <s> 标签标记的文本添加一条删除线。效果如图 2‑16所示:
图2-16 不再准确的文本
4.插入的文本
HTML中的 <ins> 标签用来标记向文档中额外插入的文本。如:
<p>
<ins>This line of text is meant to be treated as an addition to the document.</ins>
</p>
Bootstrap 会为 <ins> 标签标记的文本添加一条下划线。效果如图 2‑17所示:
图2-17 插入的文本
5.带下划线的文本
HTML中的 <u> 标签用来标记添加非文本注解的文本。如:
<p>
<u>This line of text will render as underlined</u>
</p>
Bootstrap 也会为 <u> 标签标记的文本添加一条下划线。效果如图 2‑18所示:
图2-18 带下划线的文本
6.小号文本
HTML中的 <small>标签用来标记不需要强调的文本,对于不需要强调的inline或block类型的文本,建议包裹在 <small>标签中。标题元素中嵌套的<small>元素被设置不同的font-size。你还可以为行内元素赋予.small类,以代替任何<small>元素。如:
<p>
<small>This line of text is meant to be treated as fine print.</small>
</p>
Bootstrap 将 <small> 标签标记的文本缩小到原来字体大小的 85% 显示。效果如图 2‑19所示:
图2-19 小号文本
7.粗体文本
HTML中的 <strong> 标签用来标记从语义上强调的文本。如:
<p>
The following snippet of text is <strong>rendered as bold text.</strong>
</p>
Bootstrap 将 <strong> 标签标记的文本加粗显示,即给文本应用 font-weight:bold; 样式。效果如图 2‑20所示:
图2-20 强调内容加粗显示
8.斜体文本
HTML中的 <em> 标签用来标记从语义上强调的文本,它们一般会被渲染为斜体。如:
<p>
The following snippet of text is <em>rendered as italicized text.</em>
</p>
Bootstrap 将 <em> 标签标记的文本以斜体显示,即给文本应用 font-style: italic; 样式。效果如图 2‑21所示:
图2-21 强调内容斜体显示
说明:
有人可能要问,为什么不使用 <b> 或 <i>,而非要用 <strong> 和 <em> 呢?
在 HTML5 中,<b> 的语义是仅仅突出显示某些词或短语,但不代表它们更重要,比如一些关键词或人名。而 <i> 主要用于表示不同的语言、技术术语、内部对话等。
关于作者
歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。