HTML-中的字体格式化标签（文本级标签）span、font、b、strong、i、em、u、s、ins、del、sub、sup、br、hr

川长思鸟来 2023-10-09 11:08 42阅读 0赞

## 文本级标签（行内元素） ##

*  并不独占一行，多个行内元素时并排显示
 *  依附于其他块级元素存在，如果只有内联元素，则依附body存在（body 为块级元素）
 *  默认 宽，高，内、外边距无效
 *  `display` 属性默认为 inline
 *  行内元素中只能包含行内元素，不能包含块级元素（a 标签除外）

#### `` ####

`span` 通用行内元素；该标签没有固定的格式表现，默认没有样式，当对它应用样式时便会产生视觉上的变化；`span`里面只能放置文字、图片、表单元素

普通文本span标签默认没有样式效果

![在这里插入图片描述][2019092511453719.png]

#### `` ####

`font` 标签用于设置被包裹文本的字体大小、字体尺寸、字体颜色（HTML5 中已弃用）

一般标签中的属性了解即可，在开发过程中很少用到，通常使用 `CSS` 样式表来设置样式

*  标签属性：
    
     *  `color` 文本颜色；其对应的属性值可以使用 `rgb(x, x, x)`、可以使用十六进制 `#xxxxxx`、也可以使用颜色单词例如：red、green、blue 等
     *  `face` 设置字体的样式，其值有 SimHei（黑体）、SimSun（宋体）、KaiTi（楷体）等；该属性的属性值可以有多个，多个值之间用英文逗号隔开；使用时将最希望显示的字体放在字体列表的第一个，当第一个字体不可用时，会使用后边的备选字体，通用的字体放在最后
     *  `size` 字体大小，其值为从 1 到 7 的数字，浏览器中默认值是 3，值越大显示的文字就越大

示例：

font标签1
 font标签2
 font标签3

![在这里插入图片描述][20190925094858682.png]

#### `` ####

`b` （bold）用于对文字进行加粗，没有强调作用

普通文本
 加粗的文本

![在这里插入图片描述][2019092510003326.png]

#### `` ####

`strong` 用于强调文本，文本会被加粗

strong 标签

![在这里插入图片描述][20190925100644198.png]

#### `` ####

`i` （italic）显示斜体文本，无强调作用

i标签的效果

![在这里插入图片描述][20190925101138477.png]

#### `` ####

`em`（emphasis）强调内容并倾斜显示文本

em标签效果

\-![在这里插入图片描述][20190925101530835.png]

#### `` ####

`u`（underline）为文本添加下划线

u标签效果

![在这里插入图片描述][20190925103843235.png]

#### `<s></s>` ####

`s`（strike through）为文本添加删除线效果

<s>s标签效果</s>

![在这里插入图片描述][20190925104159229.png]

#### `<ins></ins>` ####

`ins`（inserted）定义已经被插入文档中的文本(下划线效果)；常与 `del` 标签结合使用，用来描述文档中的更新和修正

<ins>ins标签效果</ins>

![在这里插入图片描述][20190925105012854.png]

#### `<del></del>` ####

`del` （delete）定义文档中已被删除的文本（删除线效果）

<del>del标签效果</del>

![在这里插入图片描述][20190925105332228.png]

#### `` ####

`sub` （subscript）定义下标文本；标签中的内容会以当前文本流中字符高度的一半来显示，但是字体和字号与当前文本流中的文字是一样的

普通文本下标

![在这里插入图片描述][20190925105630235.png]

#### `` ####

`sup`（superscript）定义上标文本

普通文本上标

![在这里插入图片描述][20190925110121785.png]

#### ` ` ####

`br` （line break）在文档中插入换行符，实现换行效果

一段普通文本 普通文本

![在这里插入图片描述][20190925112421581.png]

#### `<hr />` ####

`hr` （horizontal rule）用于创建一条水平线，默认通栏

相关属性：

*  `width` 设置水平线的长度
 *  `align` 对齐方式；属性值 center（居中）、left（左对齐）、right（右对齐），默认居中对齐
 *  `size` 设置水平线的高度；属性值为数值型，大小表示像素点
 *  `color` 可以通过该属性设置颜色
 *  `noshade` 无阴影，颜色呈现为纯色

![在这里插入图片描述][20190925113818296.png]

[2019092511453719.png]: https://img-blog.csdnimg.cn/2019092511453719.png
[20190925094858682.png]: https://img-blog.csdnimg.cn/20190925094858682.png
[2019092510003326.png]: https://img-blog.csdnimg.cn/2019092510003326.png
[20190925100644198.png]: https://img-blog.csdnimg.cn/20190925100644198.png
[20190925101138477.png]: https://img-blog.csdnimg.cn/20190925101138477.png
[20190925101530835.png]: https://img-blog.csdnimg.cn/20190925101530835.png
[20190925103843235.png]: https://img-blog.csdnimg.cn/20190925103843235.png
[20190925104159229.png]: https://img-blog.csdnimg.cn/20190925104159229.png
[20190925105012854.png]: https://img-blog.csdnimg.cn/20190925105012854.png
[20190925105332228.png]: https://img-blog.csdnimg.cn/20190925105332228.png
[20190925105630235.png]: https://img-blog.csdnimg.cn/20190925105630235.png
[20190925110121785.png]: https://img-blog.csdnimg.cn/20190925110121785.png
[20190925112421581.png]: https://img-blog.csdnimg.cn/20190925112421581.png
[20190925113818296.png]: https://img-blog.csdnimg.cn/20190925113818296.png