Web前端之HTML常用标记

最新推荐文章于 2025-06-24 14:36:11 发布

原创最新推荐文章于 2025-06-24 14:36:11 发布 · 3.5k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html

前端笔记专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了HTML中的文本标记，包括标题标记、字体标记、段落标记、换行标记、预格式化标记、转义字符以及文字修饰标记的使用方法和示例，帮助理解如何在网页中设置文本样式和格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.4.1 文本标记

1.标题标记

<hn align="对齐方式"> 标题文本</hn>

HTML中提供了6级标题，为<h1>至<h6>,其中<h1>字号最大，<h6>字号最小 。标题为块级元素，浏览器会自动在标题前后加上空行。

align属性是可选属性，用于指定标题的对齐方式，其取值3种：left,center,right,分别表示左对齐、居中对齐和右对齐。

2.字体标记

默认情况下，中文网页中的文字以黑色、宋体、3号字效果显示。如要改变，可以使用<font>字体标记及其相应属性进行设置。字体标记语法如下：

<font face="字体名称" size="字号" color="字体颜色">文字</font>

其中，face属性设置字体的类型，中文默认字体为宋体；size属性指定文字的大小，其中取值范围1--7（文字的显示从小到大，默认字号是3）；color属性设定文字颜色，颜色的表示可以用1.3.2HTML颜色定义中3种方法表示，默认颜色是黑色。

浏览器显示如下：

代码如下：

<!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>字体标记使用</title>
</head>
<body>
    <font size="7" face="隶书" color="red">银川科技学院</font>
    <font face="黑体" size="6" color="green">信息工程学院</font>
    <font face="楷体" size="5" color="blue">计算机科学与技术专业</font>
    
</body>
</html>

3.段落标记

在HTML中创建一个段落的标记是<p>。在HTML中可以使用单标记，也可以使用双标记。二者相同点为：都能创建一个段落。不同点：单标记创建的段落会与上文产生一个空行间隔；双标记创建的段落则与上下文同时有一个空行的间隔。

与标题字一样，段落标记也有对齐方式，使用属性为align属性。

<p align="对齐方式">段落内容</p>

<p>标记是块级元素，浏览器会自动在<p>标记的前后加上一定的空白。

4.换行标记

换行标记是<br>，该标签是一个单标记，把结束标记放在开始标记中，也就是<br/>等效于一个段落换行标记。

效果如下：

代码如下：

<!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>换行标记的使用</title>
</head>
<body>
    <font size="5" color="blue" face="隶书">
        <p>《登鹳雀楼》</p>白日依山尽,<br/>黄河入海流。<br/>欲群千里目，<br/>跟上一层楼。
    </font>
    
</body>
</html>

5.预格式化标记

所谓的预格式化指某些格式可以在源码中预先设置，这些预先设置好的格式在浏览器解析源代码时被保留下来，即源代码执行后的效果与源代码中预先设置好的效果几乎完全一样。预格式化标记为：<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>预格式化标记</title>
</head>
<body>
    <font size="6" color="blue" face="楷书">
        <pre>
            《登鹳雀楼》
        白日依山尽, 黄河入海流。
        欲群千里目，更上一层楼。</pre>
    </font>
    
</body>
</html>

对比可以看出，源代码中的格式效果与浏览器中的效果是一样的。

6.转义字符

定义：一些字符无法通过键盘输入，这些字符对于网页来说是特殊字符。要想在网页中展示，必须使用转义字符的方式进行输入。

组成：转义字符由三部分组成，第一部分“&”，第二部分是实体名字或者“#”加上实体编号；第三部分是分号，表示转义字符结束。

转义字符结构如下：

&实体名称;

例如，“<”可以使用“<”表示，“>”可以使用“>”表示，空格可以使用“ ”表示。常用特殊字符与对应字符实体如下表1-1。

显示结果	描述	实体名称
	空格
<	小于号	<
>	大于号	>
&	和号	&
"	引号	"
,	撇号	&apot;(IE不支持）
￠	分（cent）	¢
t	镑（pound）	£
¥	元（yen）	¥
€	欧元（euro）	€
§	小节	§
©	版权(copyright)	©
®	注册商标	®
™	商标	™
×	乘号	×
÷	除号	÷

表1-1常用的特殊字符与对应的字符实体。

注：同一个符号既可以使用实体名称，例如，“<”也可以使用实体编号，例如，“<”,这两种都表示符号“<”。

7.文字修饰标记

使用文字修饰标记可以设置文字为粗体，倾斜，下划线等格式。

常用文字修饰表如下：

常用文字修饰标记表
标记	描述
<b>...<b/>	加粗。如：<b>HTML文件<b/>
<i>...<i/>	斜体。如：<i>文本<i/>
<u>...<u/>	下划线。如:<u>HTML<u/>
<s>...<s/>	删除线
<sup>...<sup/>	上标
<sub>...<sub/>	下标