语义化HTML:i、b、em和strong标签

简介:

一、前言                          

  在HTML4.1中i和b作为表象标签分别表示斜体和粗体样式,而强调样式与内容分离的XHTML中则出现样式效果相同的em和strong表义标签,此时我们会建议避免使用i和b标签,应该改用em和strong标签。

  但在HTML5对i和b赋予新的语义,本文将再一次认识它们!

 

二、元素语义                        

  1. i标签

  W3C草案:

The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose (content whose typical typographic presentation is italicized).W3C specification

  语义化的 <i>元素 可以用来表示:外文单词、生物分类、科技术语、船名、剧本舞台方位、乐谱、三个代表思想或手写文字。建议通过class特性标识具体语义,若为表示外文单词则采用lang特性标识具体的语言种类。示例:

  滑板介绍

  滑板的基本动作名为豚跳(ollie)





<h3>滑板介绍</h3>
<p>
滑板的基本动作名为<i class="skateboard">豚跳</i>(<i lang="en_us">ollie</i>)
</p>

 2. b标签

   W3C草案:

The <b> element represents a span of text offset from its surrounding content without conveying any extra importance; for example, keywords in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is bold text.
W3C specification

  语义化的 <b>元素 用于表示:局部范围内不重要但需要突出的内容,如概要中的关键字、评论中的名词等。建议通过class特性标识具体语义。示例:

  滑板构造概要

  滑板由轮子板面磨砂纸支架(truck)组成。

<h3>滑板构造概要</h3>
<p>
滑板由<b class="compent">轮子</b>、<b class="component">板面</b>、<b class="component">磨砂纸</b>和<b class="component">支架</b>(<i lang="en_us>"truck</i>)组成。
</p>

  3. em标签

    W3C草案:

The em element represents a span of text with emphatic stress.

W3C specification

   语义化的 <em>元素 表示:局部范围内强调的内容,用于改变句子或段落的侧重点。注意其作用范围为局部,也就是阅读到某段落或句子时才会注意到。示例:

   ollie教学

   后脚踏板的同时前脚提起,并向斜前方跳起。

   后脚踏板的同时前脚提起,并向斜前方跳起

   第一句强调 前脚提起,第二句强调 向斜前方跳起。

  4. strong标签

    W3C草案:

The strong element represents a span of text with strong importance.

W3C specification

    语义化的<strong>元素表示:全部范围内强调的内容,随意无序扫描全文时能突出的关键内容。

 

三、总结                          

  理解语义化HTML确实不易啊,继续努力吧!

目录
相关文章
|
17天前
HTML中的<iframe>标签及其属性
HTML中的<iframe>标签及其属性
24 5
|
17天前
HTML中的<br>、<hr>和<pre>标签使用指南
HTML中的<br>、<hr>和<pre>标签使用指南
17 2
|
7天前
|
移动开发 JavaScript Java
关于Android中如何过滤HTML标签
关于Android中如何过滤HTML标签
13 0
|
8天前
|
搜索推荐 前端开发 SEO
SEO需要了解的8大html标签
SEO需要了解的8大html标签
16 2
|
7天前
HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)
HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)
17 0
HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)
|
17天前
|
JavaScript UED
HTML中的<a>标签使用指南
HTML中的<a>标签使用指南
22 6
|
17天前
|
存储 前端开发 UED
HTML中的<img>标签使用指南
HTML中的<img>标签使用指南
24 3
|
18天前
|
前端开发 JavaScript 搜索推荐
HTML标签是如何定义网页内容的显示方式的?
【6月更文挑战第28天】HTML标签是如何定义网页内容的显示方式的?
15 2
|
17天前
|
Web App开发 移动开发 搜索推荐
HTML <meta> 标签及其属性介绍
HTML <meta> 标签及其属性介绍
23 1
|
17天前
|
算法 前端开发 JavaScript
HTML中的文本标签:微观排版的艺术
HTML中的文本标签:微观排版的艺术
15 1