Appearance
4. HTML文本标签（网页文字展示，基础中的基础）
4.1 标题标签：h1-h6
基本用法
标题标签用于定义页面的标题，从 <h1> 到 <h6>，其中 <h1> 级别最高，<h6> 级别最低。
html
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>SEO重点
<h1>标签：一个页面最好只使用一个<h1>标签，用于页面的主标题，搜索引擎会给予较高的权重- 标题层级：应该按照层级顺序使用标题标签，不要跳过层级
- 语义化：标题应该准确反映内容的层次结构
4.2 段落标签：p标签
基本用法
<p> 标签用于定义段落，每个 <p> 标签会自动在前后添加空白。
html
<p>这是一个段落。</p>
<p>这是另一个段落。</p>换行与缩进
- 换行：在HTML中，连续的空格和换行都会被浏览器视为单个空格，要实现换行效果，可以使用
<br>标签 - 缩进：可以使用CSS的
text-indent属性来设置段落缩进
4.3 文本格式化标签
常用格式化标签
| 标签 | 描述 | 示例 |
|---|---|---|
<strong> | 加粗文本（语义化） | <strong>重要内容</strong> |
<em> | 斜体文本（语义化） | <em>强调内容</em> |
<del> | 删除线文本 | <del>已删除内容</del> |
<u> | 下划线文本 | <u>带下划线的内容</u> |
<mark> | 标记文本（高亮） | <mark>高亮内容</mark> |
<small> | 小号文本 | <small>小号内容</small> |
<sup> | 上标文本 | 2<sup>2</sup>=4 |
<sub> | 下标文本 | H<sub>2</sub>O |
4.4 换行与水平线
换行标签：br
<br> 标签用于在文本中插入换行，是一个自闭合标签。
html
<p>这是第一行<br>这是第二行</p>水平线标签：hr
<hr> 标签用于在页面中插入水平线，是一个自闭合标签。
html
<p>这是上面的内容</p>
<hr>
<p>这是下面的内容</p>4.5 特殊字符
常用特殊字符
在HTML中，有些字符有特殊含义，需要使用转义字符来表示。
| 特殊字符 | 转义序列 | 描述 |
|---|---|---|
| 空格 | | 不换行空格 |
| < | < | 小于号 |
| > | > | 大于号 |
| & | & | 和号 |
| " | " | 双引号 |
| ' | ' | 单引号 |
| © | © | 版权符号 |
| ® | ® | 注册商标符号 |
| ™ | ™ | 商标符号 |
4.6 实战：编写一篇带标题、段落、格式化文本的文章页面
实战目标
创建一个包含标题、段落、格式化文本的文章页面，适配SEO文本布局。
代码示例
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML文本标签实战</title>
</head>
<body>
<!-- 页面主标题 -->
<h1>HTML文本标签的使用方法</h1>
<!-- 文章作者和日期 -->
<p><small>作者：张三 | 发布日期：2026-04-01</small></p>
<hr>
<!-- 章节标题 -->
<h2>一、标题标签</h2>
<p>HTML提供了6级标题标签，从 <code><h1></code> 到 <code><h6></code>，用于定义页面的层次结构。</p>
<h3>1.1 标题标签的使用</h3>
<p>标题标签应该按照层级顺序使用，不要跳过层级。<strong>一个页面最好只使用一个 <h1> 标签</strong>，用于页面的主标题。</p>
<h2>二、段落标签</h2>
<p>使用 <code><p></code> 标签可以创建段落，每个段落会自动在前后添加空白。</p>
<p>如果需要在段落中换行，可以使用 <code><br></code> 标签。例如：</p>
<p>这是第一行<br>这是第二行</p>
<h2>三、文本格式化</h2>
<p>HTML提供了多种文本格式化标签，用于强调或标记文本：</p>
<ul>
<li><strong>加粗文本</strong>：使用 <strong> 标签</li>
<li><em>斜体文本</em>：使用 <em> 标签</li>
<li><del>删除线文本</del>：使用 <del> 标签</li>
<li><u>下划线文本</u>：使用 <u> 标签</li>
<li><mark>高亮文本</mark>：使用 <mark> 标签</li>
</ul>
<h2>四、特殊字符</h2>
<p>在HTML中，有些字符有特殊含义，需要使用转义字符来表示，例如：</p>
<ul>
<li>空格： </li>
<li>小于号：<</li>
<li>大于号：></li>
<li>和号：&</li>
</ul>
<hr>
<p>通过合理使用HTML文本标签，可以创建结构清晰、语义化的网页内容，提升用户体验和SEO效果。</p>
</body>
</html>小结
HTML文本标签是网页开发的基础，通过合理使用标题、段落、文本格式化等标签，可以创建结构清晰、语义化的网页内容。同时，注意SEO优化，合理使用 <h1> 标签和语义化标签，提升页面的搜索引擎排名。