HTML5 文本语义元素

文本语义元素

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

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

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

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

em元素

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

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

1）没有任何强调：

Cats are cute animals.

2）强调Cats：

Cats are cute animals.

3）强调are：

Cats are cute animals.

4）强调cute：

Cats are cute animals.

5）强调animals：

Cats are cute animals.

6）强调整句话：

Cats are cute animals.

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

图2-16 改变强调位置

HTML5 文本语义元素相关推荐

HTML5 结构语义元素的标题h1～h6元素
h1-h6元素所谓语义元素,就是为元素(标签)赋予了某种意义,元素的名称就能能清晰表达元素的作用. 使用结构语义元素,可以使页面结构清晰.易于维护,有助于屏幕阅读器和其他辅助工具的读取,有利于搜索引 ...
html5中语义元素的是,在html5中语义元素应用分析
在H5新增加的语义元素,本来是帮助人们更好的理解代码的,但是部分元素却又引起了选择困难,,, HTML5 提供了新的语义元素来明确一个Web页面的不同部分: 在这里让人容易产生困惑的是这个标签元素标 ...
html5用语义元素做旅游网站,HTML5语义元素
语义元素 article,aside,nav,section,header,footer 上面这些语义元素不会给页面内容造成任何视觉上的改变,它们只是提供html文档的结构,供计算机和开发者读取和阅读 ...
html5文本缩进元素,CSS属性参考 | text-indent
CSS text-indent 属性用于指定一段文本的第一行之前有多少个水平空格.也就是通常所说的首行文本缩进. 在中文的文章排版中,通常每一个段落的第一行都会有2个文字距离的缩进,这样不但样式美观, ...
HTML5语义元素的使用
传统页面的构造方法 <div class="Header"> <h1>因为痛,所以叫青春</h1> <p class="Teas ...
edu--Web程序设计基础2021秋--【结构元素】【交互元素】【页面结点元素】【文本层次语义元素】【分组元素】
Educoder – Web程序设计基础2021秋 --实训作业全总结 web程序设计基础R实验报告 2021年 -太原理工大学文章目录一. 结构元素第1关:文档结构元素相关概念第2关:hea ...
下列不属于html5语义元素,HTML5 新的语义元素
HTML5 提供了新的语义元素来明确一个Web页面的不同部分: HTML5中新的语义元素 HTML5 元素标签定义文档中的节(section.区段).比如章节.页眉.页脚或文档中的其他部分. 根据W ...
html中无语义的标签,HTML5 语义元素
HTML5 语义元素语义= 意义语义元素 = 有意义的元素什么是语义元素? 一个语义元素能够清楚的描述其意义给浏览器和开发者. 无语义元素实例: 和 - 无需考虑内容. 语义元素实例: , 浏 ...
前端学习13：HTML响应式设计、计算机代码、语义元素
目录 HTML响应Web设计一.什么是响应式Web设计? 1.流体网格 2.媒体查询 3.响应媒体 4.视口元标记二.使用Bootstrap HTML计算机代码元素 HTML 语义元素一.什么是 ...

HTML5 文本语义元素

文本语义元素

em元素

HTML5 文本语义元素相关推荐

最新文章

热门文章