|
标签 |
说明 |
|
<i> |
用于表现因某些原因需要区分普通文本的一系列文本 |
|
<b> |
用于吸引读者的注意到该元素的内容上（如果没有另加特别强调） |
|
<u> |
定义下划线文本，请尽量避免为文本加下划线 - 用户会把它混淆为一个超链接 |
|
<em> |
标记出需要用户着重阅读的内容 |
|
<strong> |
表示文本十分重要，一般用粗体显示 |
|
<small> |
將使文本的字体变小一号，定义为表示边注释和附属细则，包括版权和法律文本。 |
|
<sub> |
定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更低并且更小 |
|
<sup> |
义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更高并且更小 |
|
<del> |
定义文档中已被删除的文本。 |
|
<pre> |
定义预格式文本。 |
|
<bdo> |
改写了文本的方向性，使文本以不同的方向渲染呈现出来 |
斜体标签 <i>
- <i> 标签用于表现因某些原因需要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等，它的内容通常以斜体显示。
实例
|
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> </head>
<body> <p>The Latin phrase <i class="latin">Veni, vidi, vici</i> is often mentioned in music, art, and literature</p> </body>
</html> |
浏览器运行结果如下：
粗体标签<b>
- <b> 标签用于吸引读者的注意到该元素的内容上（如果没有另加特别强调）
- 这个元素过去被认为是粗体（Boldface）元素，并且大多数浏览器仍然将文字显示为粗体
实例
|
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> </head>
<body> <p> It explains their usage in an <b>HTML</b> document. </p> </body>
</html> |
浏览器运行结果如下：
注
- 摘要中的关键字、评论中的产品名称，或其他典型的应该加粗显示的文字（除此之外无其它特别强调）。
下划线标签 <u>
- <u> 标签表示一个需要标注为非文本化的内联文本域。默认情况下渲染为一个实线下划线
实例
|
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> </head>
<body> <p>This paragraph includes a <u class="spelling">wrnogly</u> spelled word. </p> </body>
</html> |
浏览器运行结果如下：
注
- <u> 标签在 HTML 4 中废弃，但是在 HTML 5 中恢复了一个新的语义，意思是：将文本标记为应用了某种形式的非文本注释
强调标签 <em>
- <em> 标签具有重音强调的文本。元素可以嵌套，每个嵌套级别都表示更大的重点。
通常，此元素以斜体显示
实例
|
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> </head>
<body> <p>The important part of the text is highlighted by the <em> in italic</em>.</p> </body>
</html> |
浏览器运行结果如下：
注
该元素适用于与周围文本相比具有强调的单词，后者通常仅限于句子中的一个或多个单词，并影响句子本身的含义
加粗标签 <strong>
- <strong> 标签表示文本十分重要，一般用粗体显示。
- 在 HTML4 时， Strong 简单地表示一个更强的强调 (emphasis)，而在 HTML5 中，这个元素被描述为表征 “内容强烈的重要性（类似于警告）
实例
|
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> </head>
<body> <p>When doing x it is <strong>imperative</strong> to do y before proceeding.</p> </body>
</html> |
浏览器运行结果如下：
文本缩小标签 <small>
- <small> 标签將使文本的字体变小一号。(例如从大变成中等，从中等变成小，从小变成超小)。
- 在 HTML5 中，除了它的样式含义，这个元素被重新定义为表示边注释和附属细则，包括版权和法律文本
实例
|
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> </head>
<body> <p>This is the first sentence. <small>This whole sentence is in small letters.</small></p> </body>
</html>
|
浏览器运行结果如下：
文本下标 <sub>
- 定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更低并且更小
实例
|
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> </head>
<body> <p>The chemical formula of water: H<sub>2</sub>O</p> </body>
</html>
|
浏览器运行结果如下：
注
- 这个元素应该只用于排版目的，也就是改变文本的位置会改变含义
文本上标 <sup>
- 元素定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更高并且更小
实例
|
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> </head>
<body> <p>This text is <sup>superscripted</sup></p> </body>
</html> |
浏览器运行结果如下：
注
- 这个元素应该只用于排版目的，也就是改变文本的位置会改变含义
删除线标签 <del>
- <del> 标签表示一些被从文档中删除的文字内容。比如可以在需要显示修改记录或者源代码差异的情况使用这个标签
- 这个标签通常在文字上显示删除线。
|
属性 |
描述 |
|
cite |
提供一个 URI，其中的资源解释作出修改的原因（比如：根据某次会议讨论） |
|
datetime |
这个属性说明修改的时间和日期，这里的时间和日期格式要符合规范。如果设置的值不符合该规范，那么它将没有任何意义。 |
实例
|
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> </head>
<body> <p><del>This text has been deleted</del>, here is the rest of the paragraph.</p> </body>
</html> |
浏览器运行结果如下：
预处文本标签 <pre>
- <pre> 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。(紧跟在 <pre> 开始标签后的换行符也会被省略)
实例
|
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> </head>
<body> <pre> ___________________________ < I'm an expert in my field. > --------------------------- \ ^__^ \ (oo)\_______ (__)\ )\/\ ||----w | || || </pre> </body>
</html> |
浏览器运行结果如下：
双向文本替代标签 <bdo>
- <bdo> 标签改写了文本的方向性，使文本以不同的方向渲染呈现出来
|
属性 |
描述 |
|
dir |
在此元素内容中呈现文本的方向。可能的值是：
|
实例
|
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> </head>
<body> <p>This text will go left to right.</p> <p> <bdo dir="rtl">This text will go right to left.</bdo> </p> </body>
</html> |
浏览器运行结果如下：
