文本格式化标签
常用文本格式化标签
| 名称 | 标签 |
|---|---|
| 粗体标签 | strong(推荐)、b |
| 斜体标签 | em(推荐)、i、cite |
| 中划线标签 | del(推荐)、s |
| 下划线标签 | ins(推荐)、u |
| 上标标签 | sup |
| 下标标签 | sub |
| 大字号标签 | big |
| 小子号标签 | small |
一、粗体标签
粗体标签顾名思义，就是文字加粗。Html粗体标签有两种，一个是<strong>，一个是<b>,两种标签用法上都没有区别，浏览器都支持这两种标签。
下面看一个例子
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14 |
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>4.4 文本格式化标签</title> </head> <body> <h2>木兰花·拟古决绝词</h2> <p>人生若只如<b>初见</b>，何事<strong>秋风</strong>悲画扇。</p> <p>等闲变却故人心，却道故人心易变。</p> <p>骊山语罢清宵半，泪雨零铃终不怨。</p> <p>何如薄幸锦衣郎，比翼连枝当日愿。</p> </body></html> |
运行浏览器后得到的效果如图
附加说明：<strong>标签更加符合新的HTML标准的要求，<b>标签却渐渐被淘汰，所有建议大家尽量使用<strong>标签来给文字加粗。
二、斜体标签
标签<em>、<i>、<cite>标签显示斜体文本效果。它告诉浏览器将包含其中的文本以斜体字（italic）或者倾斜（oblique）字体显示。
斜体标签在文档中的应用
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14 |
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>4.4 文本格式化标签</title> </head> <body> <h2>木兰花·拟古决绝词</h2> <p><em>人生</em>若只如初见，何事秋风悲画扇。</p> <p>等闲变却故<i>人心</i>，却道故人心易变。</p> <p>骊山语罢清宵半，泪雨零铃终不怨。</p> <p>何如薄幸锦衣郎，<cite>比翼连枝</cite>当日愿。</p> </body></html> |
运行浏览器后得到的效果如图
附加说明：这三个斜体标签虽然效果都一致，但在使用中要明白<i>标签定义文字为斜体。<cite>标签可以指明对某作品的引用，例如戏剧名，歌曲名，电影名等等。<em>标签告诉浏览器把其中的文本表示为强调的内容。
三、中划线标签
中划线标签（删除线标签）<s>、<del>。<s> 标签是 <strike> 标签的缩写版本。
|
1
2
3
4
5
6
7
8
9
10
11
12 |
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>4.4 文本格式化标签</title> </head> <body> <h2>《木兰花·拟古决绝词》</h2> <p><s>原价120元</s>，现价50元！</p> <p><del>原价120元</del>，现价50元！</p> </body></html> |
运行浏览器后得到的效果如图
附加说明：虽然<s>标签还能在文档中使用，但在 HTML 4 和 XHTML 中已经不再赞成使用<s>了，所以以后要遇到用这种删除线的文本就请使用 <del>来 替代它！
四、下划线标签
实例 使用 <u>、<ins> 标签为文本添加下划线：
|
1
2
3
4
5
6
7
8
9
10
11 |
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>4.4 文本格式化标签</title> </head> <body> <p>如果文本不是超链接，就不要<u>对其使用下划线</u>。</p> <p><ins>使用ins标签实现的下划线效果</ins></p> </body></html> |
运行浏览器后得到的效果如图
附加说明：请尽量避免为文本加下划线 ,因为用户会把它混淆为一个超链接！当用户去点的时候发现没有链接，这样的用户体验就不好。<ins>通常应连同<del>标签一同使用，来描述文档中的更新和修正。例如下面的示例：
|
1
2
3
4
5
6
7
8
9
10 |
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>4.4 文本格式化标签</title> </head> <body> <p>本班实际人数<del>四十</del> <ins>三十八</ins> 人。</p> </body></html> |
运行浏览器后得到的效果如图
五、上标标签
在html中，<sup>标签是使用来定义上标文本的，所谓上标文本就是显示在当前文本的右上角，而且比当前文本更小的文本内容。<sup>标签可以使用来添加脚注、添加数学中的n次方等。
|
1
2
3
4
5
6
7
8
9
10
11 |
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>4.4 文本格式化标签</title> </head> <body> <h3>sup标签演示</h3> <p>2<sup>1</sup>+3<sup>2</sup>=11</p> </body></html> |
运行浏览器后得到的效果如图
附加说明：<sup> 中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。这个标签在向文档添加脚注以及表示方程式中的指数值时非常有用。
六、下标标签
<sub>标签是使用来定义下标，和<sup>相反。sub标签可以用来表示一些化学式，比如：“水”化学式中的下标“2”，就可以使用该标签来实现。
|
1
2
3
4
5
6
7
8
9
10
11
12
13 |
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>4.4 文本格式化标签</title> </head> <body> <h3>sub标签演示</h3> <p>水的化学式是：H<sub>2</sub>O</p> <p>双氧水的化学式：H<sub>2</sub>O<sub>2</sub></p> <p>氧气的化学式：O<sub>2</sub></p> </body></html> |
运行浏览器后得到的效果如图
七、大字号标签
<big> 标签呈现大号字体效果。使用 <big> 标签可以很容易地放大字体。这简直不能再简单了：浏览器显示包含在 <big> 标签和其相应的 </big> 标签之间的文字时，其字体比周围的文字要大一号。但是，如果文字已经是最大号字体，这个 <big> 标签将不起任何作用。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14 |
<!DOCTYPE html><html lang="zh"> <head> <meta charset="utf-8"> <title>4.3 段落标签</title> </head> <body> <h2>木兰花·拟古决绝词</h2> <p>人生若只如初见，何事秋风悲画扇。</p> <p><big>等闲变却故人心，却道故人心易变。</big></p> <p>骊山语罢清宵半，泪雨零铃终不怨。</p> <p>何如薄幸锦衣郎，比翼连枝当日愿。</p> </body></html> |
运行浏览器后得到的效果如图
附加说明：<big>用于配置字体增大的标签，但兼容性不好，在HTML5中再也不用big标签元素，W3C验证也是会提示错误的。所以不推荐使用。大家可以对此节做一个了解就行了。
八、小字号标签
<small> 标签呈现小号字体效果。<small> 标签和它所对应的 <big> 标签一样，但它是缩小字体而不是放大。如果被包围的字体已经是字体模型所支持的最小字号，那么 <small> 标签将不起任何作用。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14 |
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>4.3 段落标签</title> </head> <body> <h2>木兰花·拟古决绝词</h2> <p>人生若只如初见，何事秋风悲画扇。</p> <p><small>等闲变却故人心，却道故人心易变。</small></p> <p>骊山语罢清宵半，泪雨零铃终不怨。</p> <p>何如薄幸锦衣郎，比翼连枝当日愿。</p> </body></html> |
运行浏览器后得到的效果如图
附加说明：与 <big> 标签类似，<small> 标签也可以嵌套，从而连续地把文字缩小。每个 <small> 标签都把文本的字体变小一号，直到达到下限的一号字。例如下面的案例
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14 |
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>4.3 段落标签</title> </head> <body> <h2><small>木兰<small>花</small></small>·拟古决绝词</h2> <p>人生若只如初见，何事秋风悲画扇。</p> <p>等闲变却故人心，却道故人心易变。</p> <p>骊山语罢清宵半，泪雨零铃终不怨。</p> <p>何如薄幸锦衣郎，比翼连枝当日愿。</p> </body></html> |
运行浏览器后得到的效果如图
总结
本章节大致就是这些内容了，这八大标签在文本编辑中涉及到比较多，但在我们的html页面整体架构上用得还是比较少的。此章节可以作为一个简单的了解即可。
你觉得文章内容怎么样