HTML5 文本语义元素

文本语义元素

HTML中，根据逻辑来划分和识别文本在网页中所起的作用，给文本添加内涵，即所谓文本语义元素。

除了标题元素之外，HTML还提供了许多其他的元素，来为内容作上标记，以便能够识别它们在网页中所起的作用。其中最常见的有表示文本段落的 p 元素，表示换行的 br 元素等。还有其他鲜为人知的，用来表示非常特殊的网页内容的元素，如，kbd表示由键盘输入的文本。

HTML5中的文本语义元素及其功能描述和示例见表表 2‑1：

表 2‑1 文本语义元素caption

元素	功能描述及示例
q	定义一段比较短的引用内容（q 是 quote 的缩写），浏览器默认会该引用的内容加上双引号 The judge said You can drink water from the fish tank but advised against it.
dfn	定义一个术语（dfn 是 defining instance 的缩写），浏览器会渲染为斜体 The term organic food refers to food produced without synthetic chemicals.
abbr	定义一个缩写文本（abbr 是 abbreviation 的缩写），建议在 abbr 的 title属性中描述缩写的全称，当鼠标悬停在缩写上，会提示其全称 Organic food in Ireland is certified by the IOFGA.
code	定义计算机代码片段（如果需要保留空格、换行等可以在 code 外面包一层 pre） The fruitdb program can be used for tracking fruit production.
var	定义程序中的变量，浏览器会渲染为斜体，pre code var 可以结合使用 If there are n fruit in the bowl, at least n÷2 will be ripe.
samp	定义由程序输出的示例文本（samp 是 sample 的缩写） The computer said Unknown error -3.
kbd	定义由键盘输入的文本（kbd 是 keyboard 的缩写） Hit F1 to continue.
i	替代文本，浏览器会渲染为斜体Lemonade consists primarily of Citrus limon.
b	定义关键字，浏览器会渲染为粗体 Take a lemon and squeeze it with a juicer.
u	定义注释文本，浏览器会在文本下面添加下划线 The mixture of apple juice and eldeflower juice is very pleasant.
bdi	定义用于双向文本格式（bdi 是 bi-directional isolate 的缩写） The recommended restaurant is My Juice Café (At The Beach)
bdo	定义文本排列的方向（bdo 是 bi-directional orientation的缩写） The proposal is to write English, but in reverse order. "Juice" would become "Juice"
span	定义行内元素 In French we call it sirop de sureau
wbr	定义换行的时机（wbr 是 word break 的缩写），处理字符型语言时，显示一段没有空格的字符串时，无论其多长都不会换行，如果有 wbr 标签，则字符串会在浏览器宽度不够时主动换行 www.simplyorangejuice.com

em元素

em表示强调（em 是 emphasis 的缩写），用于定义局部强调的文本，来改变句子或段落的侧重点。

就像说话时强调某些词语一样，对于相同的一句话，em 在句子中的位置，会影响句子的含义。即便是相同的一句话，强调的位置不同，所表示的含义往往不同。如：

1）没有任何强调：

1. Cats are cute animals.

2）强调Cats：

1. Cats are cute animals.

3）强调are：

1. Cats are cute animals.

4）强调cute：

1. Cats are cute animals.

5）强调animals：

1. Cats are cute animals.

6）强调整句话：

1. Cats are cute animals.

默认情况下，浏览器都会把强调文本显示为斜体。为了突出显示强调位置的变化，这里特意将强调文本使用红色显示，请读者体会强调位置对同一句话的影响。运行结果如图 2‑16 所示：

图2-16 改变强调位置

版权声明：本文出自 歪脖网 的《HTML5宝典》，欢迎在线阅读，并提出宝贵意见。