HTML 基础标签梳理：结构、格式与交互元素

最新推荐文章于 2025-11-25 15:30:00 发布

原创最新推荐文章于 2025-11-25 15:30:00 发布 · 1.0k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

HTML 专栏收录该内容

3 篇文章

订阅专栏

HTML（HyperText Markup Language）是构建网页的基础语言，通过各类标签定义网页结构、内容格式与交互逻辑。本文基于示例代码，系统梳理 HTML 核心基础标签，涵盖标题段落、字体格式化、容器、图像、超链接及注释特殊字符，帮助初学者掌握网页搭建的核心要素。

一、文档结构与基础设置

HTML 文档需遵循固定结构，确保浏览器正确解析，核心组成如下：

<!DOCTYPE html> <!-- 声明文档类型为HTML5 -->
<html lang="en"> <!-- 根标签，lang指定页面语言（en为英文，zh-CN为中文） -->
<head> <!-- 头部：存放页面元信息，不直接显示在页面 -->
    <meta charset="UTF-8"> <!-- 字符编码：UTF-8支持所有字符，避免乱码 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 响应式配置：适配移动端 -->
    <title>标题</title> <!-- 网页标题：显示在浏览器标签栏 -->
</head>
<body> <!-- 主体：页面所有可见内容（文字、图片、链接等）都放在此处 -->
    <!-- 页面内容标签 -->
</body>
</html>

二、文本内容标签：标题、段落与滚动文字

文本是网页最基础的内容，通过专用标签控制文本层级与展示效果。

1. 标题标签（`<h1>`~`<h6>`）

功能：定义文本标题，层级从h1（最高级，最大）到h6（最低级，最小），每个标题独占一行；
场景：页面主标题、章节标题等，示例中用于划分内容模块（如 “1.1 各种标题，段落的使用”）；

特殊用法：通过id="顶部"给标题设置唯一标识，用于锚点链接跳转（如 “返回顶部” 功能）。

<h1 id="顶部">1.1各种标题，段落的使用</h1> <!-- 一级标题，带锚点ID -->
<h1>1.1.1一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<!-- ...h4~h6同理，层级依次降低 -->

2. 段落与换行标签（`<p>`、`<br />`）

<p>：定义段落，段落间会自动换行并保留间距，示例中用于包裹大段文本；

<br />：强制换行标签（单标签，需加/闭合），用于段落内手动换行，不产生段落间距。

<p>我是段落</p> <!-- 完整段落 -->
<p>我是第二段,乃速度比u白蛋白USB覅u比u发罢赛风波ibfui不封闭<br />打手犯规按施工方法发</p> <!-- 段落内换行 -->

3. 滚动文字标签（`<marquee>`）

功能：实现文字滚动效果，属于 HTML 早期标签，目前虽不推荐用于复杂场景，但简单需求可快速使用；
核心属性：
- behavior="scroll"：滚动方式（scroll = 循环滚动，slide = 滚动一次停止）；
- direction="left"：滚动方向（left = 左，right = 右，up = 上，down = 下）；
- scrollamount="20"：滚动速度（数值越大越快）。
```
<marquee behavior="scroll" direction="left" scrollamount="20">哈哈哈哈</marquee> 
```

4. 水平线标签（`<hr />`）

功能：在页面插入一条水平线，用于分隔不同内容模块；
属性：width="100%"（宽度，支持百分比或像素）、height="100px"（高度，控制线条粗细）。
```
<hr width="100%" ,height="100px"> 
```

三、字体格式化标签：控制文本样式

通过专用标签快速设置文本的视觉效果，无需额外 CSS，常见标签如下：

标签	功能	示例
`<strong>`	文字加粗（语义化标签，推荐）	`<p>我是<strong>加粗</strong>的文字</p>`
`<em>`	文字倾斜（语义化标签，推荐）	`<p>我是<em>倾斜</em>的文字</p>`
`<del>`	文字加删除线	`<p>我是<del>删除线</del>的文字</p>`
`<ins>`	文字加下划线	`<p>我是<ins>下划线</ins>的文字</p>`

注：<b>（加粗）、<i>（倾斜）与<strong>、<em>功能类似，但前者仅控制样式，后者含语义（如强调内容），推荐使用语义化标签，利于搜索引擎解析。

四、容器标签：`<div>`与`<span>`

无固定语义，仅用于 “包裹内容、划分区域”，是布局的核心基础，二者区别如下：

标签	特点	适用场景
`<div>`	块级元素，独占一行（宽度默认 100%）	大区域划分（如页面头部、主体、底部）
`<span>`	行内元素，不独占一行（宽度由内容决定）	小范围包裹（如文字中的某部分、商品价格 / 名称）

<div>我是一个div标签，我一个人占一行</div> <!-- 块级容器 -->
<span>这是价格</span>
<span>这是商品</span>
<span>这是活动</span> <!-- 三个span在同一行显示 -->

五、图像标签（`<img>`）

用于在页面插入图片，是单标签（需加/闭合），核心属性决定图片的显示效果，必须掌握以下属性：

属性	功能	说明
`src`	图片路径（必须属性）	指定图片的存储位置，决定图片能否显示
`alt`	替换文本	图片加载失败时显示的文字（如路径错误、网络问题），提升可访问性
`title`	提示文本	鼠标 hover 到图片上时显示的文字
`width`/`height`	宽度 / 高度	控制图片尺寸，单位默认像素（仅设置一个时，图片会按比例缩放，避免变形）
`border`	边框	给图片加边框，单位支持像素（如`border="15px"`）

关键：`src`路径的写法

图片路径分 “相对路径” 和 “绝对路径”，日常开发以相对路径为主（灵活，避免路径失效）：

同一级目录：图片与 HTML 文件在同一个文件夹，直接写图片名，如src="1.jpg"；
下一级目录：图片在 HTML 文件所在文件夹的子文件夹（如image文件夹），写法：src="image/1.jpg"（文件夹名 +/+ 图片名）；
上一级目录：图片在 HTML 文件所在文件夹的父文件夹，写法：src="../1.jpg"（../表示返回上一级，多级则叠加../../）；

绝对路径：完整的本地路径（如C:\Users\XXX\1.jpg）或网络 URL（如https://xxx.com/1.jpg），本地绝对路径灵活性差（文件夹移动后失效），推荐网络图片用 URL。

<!-- 示例：不同属性组合的图像标签 -->
<img src="1.jpg"> <!-- 基础：仅指定路径 -->
<img src="11.jpg" alt="这是一个图片"> <!-- 加载失败显示替换文本 -->
<img src="1.jpg" alt="这是一个图片" title="帅哥" width="250"> <!-- 带提示文本+固定宽度 -->
<img src="1.jpg" alt="这是一个图片" title="帅哥" height="500" border="15px"> <!-- 带边框+固定高度 -->

六、超链接标签（`<a>`）

用于实现 “页面跳转、下载文件、锚点定位”，是交互的核心标签，格式为<a href="目标" target="打开方式">链接文本/图像</a>。

1. 核心属性

href：目标地址（必须属性），决定点击后做什么；
target：打开方式，默认_self（当前窗口打开），_blank（新窗口打开，推荐外部链接使用，避免跳转后丢失原页面）。

2. 链接分类（6 种常见场景）

根据href的目标不同，超链接分为以下类型，覆盖日常开发需求：

类型	功能	示例
外部链接	跳转到其他网站	`<a href="http://www.baidu.com" target="_blank">百度</a>`（需加`http://`或`https://`）
内部链接	跳转到同一网站的其他页面	`<a href="第一个网页.html" target="_blank">第一个网页</a>`（仅写页面文件名，需确保页面在对应路径）
空链接	暂未指定目标，点击无跳转	`<a href="#" target="_blank">空连接</a>`（`#`表示空目标，常用于 “待开发的按钮”）
下载链接	点击下载文件	`<a href="1.rar">下载链接</a>`（`href`指向文件 / 压缩包，浏览器会自动触发下载）
网页元素链接	给图片、按钮等元素加链接	`<a href="vs1.html" target="_blank"><img src="1.jpg"></a>`（将图像包裹在`<a>`内，点击图片跳转）
锚点链接	跳转到当前页面的指定位置	1. 目标位置加`id`：`<h1 id="顶部">...</h1>`； 2. 链接`href`设为`#id`：`<a href="#顶部">返回顶部</a>`（常用于长页面快速定位）

七、注释与特殊字符

1. 注释（``）

功能：在 HTML 代码中添加说明文字，浏览器不会解析注释内容（不显示在页面）；
作用：方便自己 / 他人理解代码（如标注模块功能），或临时隐藏代码（调试时用）；

快捷键：Ctrl+/（选中内容后按快捷键，快速添加 / 取消注释）。

<!-- 这是一段注释，浏览器不会显示 -->
<!-- <p>这段文字被注释了，页面看不到</p> -->

2. 特殊字符

HTML 中部分字符（如空格、<、>）有特殊含义（如<是标签开始符号），直接输入会导致解析错误，需用 “字符实体” 替代，常见特殊字符如下：

特殊字符	字符实体	说明
空格	` `	普通空格在 HTML 中会被压缩为 1 个，多个空格需用` `（一个` `代表一个空格）
小于号（<）	`<`	避免被解析为标签开始
大于号（>）	`>`	避免被解析为标签结束
版权符号（©）	`©`	用于标注版权信息

<p>拍&nbsp;&nbsp;&nbsp;场&Alpha;</p> <!-- 三个空格+希腊字母Alpha -->
<p>空格：&nbsp; 小于号：&lt; 大于号：&gt;</p>

八、总结

HTML 基础标签是搭建网页的 “积木”，核心需掌握：

文档结构：html、head、body的固定层级，meta标签的编码与响应式配置；
文本控制：标题（h1~h6）、段落（p）、换行（br）、格式化（strong/em 等）；
布局容器：div（块级）与span（行内）的区别与用法；
多媒体：图像标签（img）的路径与核心属性；
交互链接：超链接（a）的 6 种场景，尤其是锚点链接与元素链接；
辅助功能：注释的写法、特殊字符的实体替代。

掌握这些基础后，可进一步学习 CSS（美化样式）、JavaScript（交互逻辑），逐步构建完整的网页应用。

特殊字符	字符实体	说明
空格	` `	普通空格在 HTML 中会被压缩为 1 个，多个空格需用` `（一个` `代表一个空格）
小于号（<）	`<`	避免被解析为标签开始
大于号（>）	`>`	避免被解析为标签结束
版权符号（©）	`©`	用于标注版权信息

特殊字符	字符实体	说明
空格	` `	普通空格在 HTML 中会被压缩为 1 个，多个空格需用` `（一个` `代表一个空格）
小于号（<）	`<`	避免被解析为标签开始
大于号（>）	`>`	避免被解析为标签结束
版权符号（©）	`©`	用于标注版权信息

HTML 基础标签梳理：结构、格式与交互元素

一、文档结构与基础设置

二、文本内容标签：标题、段落与滚动文字

1. 标题标签（<h1>~<h6>）

2. 段落与换行标签（<p>、<br />）

3. 滚动文字标签（<marquee>）

4. 水平线标签（<hr />）