html文本格式化标签

在网页中，有时需要为文字设置粗体、斜体、下划线或上下标等效果，这时就需要用到 HTML 中的文本格式化标签(也叫文本标签)。

常用文本格式化标签

名称	标签
粗体标签	strong(推荐)、b
斜体标签	em(推荐)、i、cite
中划线标签	del(推荐)、s
下划线标签	ins(推荐)、u
上标标签	sup
下标标签	sub
大字号标签	big
小子号标签	small

一、粗体标签

粗体标签顾名思义，就是文字加粗。Html粗体标签有两种，一个是，一个是,两种标签用法上都没有区别，浏览器都支持这两种标签。

下面看一个例子

<!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>

运行浏览器后得到的效果如图

附加说明：标签更加符合新的HTML标准的要求，标签却渐渐被淘汰，所有建议大家尽量使用标签来给文字加粗。

二、斜体标签

标签、、<cite>标签显示斜体文本效果。它告诉浏览器将包含其中的文本以斜体字（italic）或者倾斜（oblique）字体显示。

斜体标签在文档中的应用

<!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>

运行浏览器后得到的效果如图

附加说明：这三个斜体标签虽然效果都一致，但在使用中要明白标签定义文字为斜体。<cite>标签可以指明对某作品的引用，例如戏剧名，歌曲名，电影名等等。标签告诉浏览器把其中的文本表示为强调的内容。

三、中划线标签

中划线标签（删除线标签）<s>、<del>。<s> 标签是 <strike> 标签的缩写版本。

<!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>来替代它！

四、下划线标签

实例使用 、<ins> 标签为文本添加下划线：

<!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>标签一同使用，来描述文档中的更新和修正。例如下面的示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>4.4 文本格式化标签</title></head><body><p>本班实际人数<del>四十</del> <ins>三十八</ins> 人。</p></body>
</html>

运行浏览器后得到的效果如图

五、上标标签

在html中，标签是使用来定义上标文本的，所谓上标文本就是显示在当前文本的右上角，而且比当前文本更小的文本内容。标签可以使用来添加脚注、添加数学中的n次方等。

<!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>

运行浏览器后得到的效果如图

附加说明： 中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。这个标签在向文档添加脚注以及表示方程式中的指数值时非常有用。

六、下标标签

标签是使用来定义下标，和相反。sub标签可以用来表示一些化学式，比如：“水”化学式中的下标“2”，就可以使用该标签来实现。

<!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> 标签将不起任何作用。

<!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验证也是会提示错误的。所以不推荐使用。大家可以对此节做一个了解就行了。

八、小字号标签

标签呈现小号字体效果。 标签和它所对应的 <big> 标签一样，但它是缩小字体而不是放大。如果被包围的字体已经是字体模型所支持的最小字号，那么 标签将不起任何作用。

<!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> 标签类似， 标签也可以嵌套，从而连续地把文字缩小。每个 标签都把文本的字体变小一号，直到达到下限的一号字。例如下面的案例

<!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页面整体架构上用得还是比较少的。此章节可以作为一个简单的了解即可。

html文本格式化标签相关推荐

021_html文本格式化标签
1. 标签显示斜体文本效果. 2. 标签规定粗体文本. 3. 标签 3.1. 标签告诉浏览器把其中的文本表示为强调的内容.对 ...
HTML 文本格式化标签
本文参考学习菜鸟教程,链接:菜鸟教程 HTML 文本格式化标签 HTML "计算机输出" 标签 HTML 引文, 引用, 及标签定义 HTML 空元素即为没有内容的 HTML 元素 ...
html文本打印lt;igt;字段,Web前端学习第九课，使用文本格式化标签
1.如何给元素添加样式? 通过前面的学习大家知道,在web前端中,元素所显示出来样子称为表现,专业处理元素长什么样子的技术主要是CSS(层叠样式表). 不过在HTML语言中,你可以用以下两种方式先进行 ...
html字符实体标签语法,HTML字符实体与文本格式化标签
HT环行进端处触码通法果泉位可近境其行框理发ML 字符实体/HTML 中的预留字符必须被替换为字符实体,一些在键盘上找不到的字符也可以使用字符实体来览页些求时是过解些这确如目前例总站回广随能4果泉时标 ...
html中的文本格式化标签+多媒体标签+关于IE浏览器兼容的问题（干货！）
https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记让这个可爱的宝藏女孩在努力的道路上与你一起同行! 如有转载,请 ...
html文本格式化意思,HTML文本格式化标签（Formatting）
粗体文本计算机代码强调文本斜体文本键盘输入预格式化文本更小的文本重要的文本 (缩写) (联系信息) (文字方向) (从另一个源引用的部分) (工作的名称) (删除的文本) (下标文本) ...
从零开始学前端：HTML的一些文本格式化标签、快捷键、和特殊符号 --- 今天你学习了吗？（CSS：Day02）
从零开始学前端:程序猿小白也可以完全掌握!- 今天你学习了吗?(CSS) 复习:从零开始学前端: HTML框架和VS Code安装 - 今天你学习了吗?(CSS:Day01) 文章目录从零开始学前端 ...
HTML的基本知识（四）——文本格式化标签
文本格式化标签 加粗bold倾斜 italic下划线 underline<del ...
HTML参考系列(1)－文本格式化标签
经常使用html标签来布局页面,要记住这些标签还是挺麻烦的,所以在此整理出来形成系列以备查询之用,用不着东拉西扯的找资料了.今天先整理文本格式化标签如下,以后再加入功能演示: 标签和属性功能说明 & ...
文本格式化标签（HTML）
文本格式化标签(HTML) <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...

html文本格式化标签

常用文本格式化标签

html文本格式化标签相关推荐

最新文章

热门文章