HTML入门：02HTML文本标记

Corone

已于 2024-02-11 16:40:18 修改

阅读量897

点赞数 23

分类专栏： # HTML 文章标签： html 前端

于 2024-01-20 14:56:32 首次发布

本文链接：https://blog.csdn.net/ZYB1300704781/article/details/135715658

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

HTML入门：02HTML文本标记

1 文本标签
2 文本块标签
3 列表标签
- 3.1 有序列表
- 3.2 无序列表

一个网页的内容像一篇文档一样，需要控制格式，使内容看起来美观紧凑。本文将学习HTML文本及格式控制方面的标记。

1 文本标签

b是将标签之间的文本内容显示为粗体；
```
<b>加粗</b>
```
i将标签之间的文本内容显示为斜体；
```
<i>斜体</i>
```
u将标签之间的文本内容显示为加下滑线；
```
<u>下划线</u>
```
s将标签之间的文本内容显示为删除线；
```
<s>删除线</s>
```
sup将标签之间的文本内容显示为上标签；
```
上标x<sup>2</sup>
```
sub将标签之间的文本内容显示为下标签；
```
下标x<sub>2</sub>
```
font标签指定文本的字形、大小、颜色；但这个标签在HTML5中一般不用了，用span标签来替代；
```
<font face="宋体" size="5" color="#003366">字体字型字号以及颜色设置</font>
```

下图是上述代码在浏览器中的显示效果。

请添加图片描述

HTML中使用h1~h6的标签来标记文本中的标题，标签使用的数字越大，则字体越小；
该标签默认是左对齐，可以使用align属性修改对齐方式，其值可以是left、center、right；

下面的代码将h1标题居中对齐，h2标题右对齐，h3标题默认左对齐；
```
<h1 align="center">h1的标题居中对齐</h1>
<h2 align="right">h2的标题右对齐</h2>
<h3>h3的标题默认左对齐</h3>
```
p标签为网页段落标签。浏览器会自动在段落的前后添加空行；
br标签为换行标签，相当于按一次回车键所产生的效果；

该标签单独使用无结束标签；

pre标签为预格式化标签，可以将标签中的文本内容按原有的格式显示；

当需要多次使用br进行换行或者使用nbsp加入空格时，可以考虑使用pre标签来提高效率；

<!doctype html>
<html>
<head>
    <meta charset='UTF-8' />
    <title>HTML入门</title>
</head>
<body>
    <p>HTML入门：02HTML文本及格式标记</p>
    CSDN <br>
    专业开发者社区
    <font size="4">
        <pre>
CSDN是全球知名中文IT技术交流平台,
创建于1999年,包含原创博客、精品问答、
职业培训、技术论坛、资源下载等产品服务,
提供原创、优质、完整内容的专业IT技术开发社区。
        </pre>
    </font>
</body>
</html>

下面是上述代码的网页效果：p标签产生一个段落，并且上下有段落间距，br标签仅产生换行，pre标签以代码中的原格式效果显示。

请添加图片描述

2 文本块标签

在格式化文本块时，还有两个常用的容器标签div和span。

div定义文档中的分区或节，浏览器会自动在div所标记区域前后自动放置一个换行符；
span是定义文档中的一行的一部分。
```
<!doctype html>
<html>
<head>
    <meta charset='UTF-8'  />
    <title>HTML入门</title>
</head>
<body>
    <div>标题</div>
    <div>段落</div>
    <span>文本1</span>
    <span>文本2</span>
</body>
</html>
```
下图为上述代码的显示效果，div标签属于块内元素，两个div表示两个块区域，宽度为页面的100%，并且后面带有换行符；

span是行内元素，没有固定的宽度，所以两个span的内容连续。

通常情况下。div和span标签与css结合可以呈现出不同的页面效果。

3 列表标签

列表分为有序列表和无序列表。

3.1 有序列表

有序列表是指包含有顺序内容的列表，可以用来表示连续的信息，一般用阿拉伯数字、英文字母或罗马数字等编号。

有序列表包含在标签ol和/ol中，列表项用li标签来定义，ol的type属性值决定了编号的形式：

当type值省略时，列表以阿拉伯数字编号；
当设置为A，列表以大写英文字母编号，a则是以小写英文字母编号；

设置为I，列表以罗马字母编号，i则会变成小写。

<!doctype html>
<html>
<head>
    <meta charset='UTF-8'  />
    <title>HTML入门</title>
</head>
<body>
    <ol> 
        <li>第一章</li>
        <li>第二章</li>
    </ol>

    <ol type='A'> 
        <li>第一章</li>
        <li>第二章</li>
    </ol>
    <ol type='a'> 
        <li>第一章</li>
        <li>第二章</li>
    </ol>

    <ol type="I">
        <li>第一章</li>
        <li>第二章</li>
    </ol>
    <ol type="i">
        <li>第一章</li>
        <li>第二章</li>
    </ol>
</body>
</html>

请添加图片描述

3.2 无序列表

无序列表是指包含的内容项没有指定顺序，无序列表的每一项不再用编号表示，而是用某种类型的标志表示，类似于word中的项目符号。

无序列表包含在标签ul和/ul中，列表项仍用li标记来定义，type属性值省略，浏览器中的显示列表符号为黑色的小圆点。

type属性取值：disc、circle、square

<!doctype html>
<html>
<head>
    <meta charset='UTF-8'  />
    <title>HTML入门</title>
</head>
<body>
    <ul> 
        <li>第一章</li>
        <li>第二章</li>
    </ul>

    <ul type='disc'> 
        <li>第一章</li>
        <li>第二章</li>
    </ul>

    <ul type="circle">
        <li>第一章</li>
        <li>第二章</li>
    </ul>
    
    <ul type="square">
        <li>第一章</li>
        <li>第二章</li>
    </ul>
</body>
</html>