这份手册将从零基础开始，全面、详细地讲解 HTML 的核心知识点、语法规则和实际应用，适合入门学习者系统掌握 HTML，也可作为开发人员的参考手册。

目录

  1. HTML 基础概述
  2. HTML 文档基本结构
  3. HTML 核心文本与格式标签
  4. HTML 列表标签
  5. HTML 链接标签
  6. HTML 媒体元素（图片、音频、视频）
  7. HTML 表单与表单控件
  8. HTML 布局元素（传统布局与 HTML5 语义化布局）
  9. HTML 全局属性
  10. HTML 注释
  11. HTML 实用技巧与注意事项

1. HTML 基础概述

1.1 什么是 HTML

HTML（HyperText Markup Language，超文本标记语言）是用于构建网页结构的标记语言，它不是编程语言（无逻辑执行能力），而是通过一系列标记标签来定义网页的各个组成部分。

1.2 HTML 的核心作用

1.3 HTML 与 CSS、JavaScript 的关系

1.4 HTML 的版本

目前主流版本为 HTML5（推荐使用），相比旧版本（HTML4、XHTML），HTML5 新增了语义化布局标签、原生媒体支持、表单增强等特性，兼容性更好，开发更便捷。

2. HTML 文档基本结构

HTML 文档有固定的骨架结构，所有内容都嵌套在这个骨架中，浏览器会按照该结构解析网页。

2.1 完整的最小 HTML5 文档

html
 
预览
 
 
 
 
<!DOCTYPE html>
<!-- 声明文档类型为HTML5，必须放在文档最顶部 -->
<html lang="zh-CN">
<!-- 根元素，lang属性指定文档语言（zh-CN为中文简体） -->

<head>
    <!-- 头部区域：用于设置网页元信息，不直接显示在页面上 -->
    <meta charset="UTF-8">
    <!-- 声明文档字符编码为UTF-8（支持所有中文及特殊字符，避免乱码） -->
    <title>我的第一个HTML页面</title>
    <!-- 网页标题：显示在浏览器标签栏上 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 移动端适配：设置视口宽度为设备宽度，初始缩放比例1.0（可选，推荐添加） -->
</head>

<body>
    <!-- 主体区域：网页的可见内容都放在这里 -->
    <h1>欢迎学习HTML</h1>
    <p>这是我的第一个HTML页面内容</p>
</body>

</html>
 

2.2 各核心标签说明

标签 作用说明 是否必须
<!DOCTYPE html> 声明 HTML5 文档类型，告诉浏览器按 HTML5 规则解析 是
<html> 文档根元素，包裹所有其他 HTML 标签 是
<head> 头部区域，存放元信息、标题、样式、脚本等 是
<meta charset="UTF-8"> 声明字符编码，避免中文乱码 是
<title> 设置网页标题，显示在浏览器标签栏 是
<body> 主体区域，存放网页可见内容 是

2.3 文档保存与运行

  1. 将上述代码复制到文本编辑器（如 VS Code、记事本、Sublime）
  2. 保存文件，后缀名为 .html（如 index.html，注意不要保存为 .txt）
  3. 双击保存后的文件，会自动用默认浏览器打开并显示内容

3. HTML 核心文本与格式标签

文本是网页的基础内容，HTML 提供了一系列标签用于定义文本的层级和格式。

3.1 标题标签（<h1> - <h6>）

用于定义网页中的标题层级，从 <h1>（一级标题，最大最醒目）到 <h6>（六级标题，最小），一个页面建议只使用一个 <h1>（利于搜索引擎优化）。
html
 
预览
 
 
 
 
<h1>一级标题（页面主标题）</h1>
<h2>二级标题（章节标题）</h2>
<h3>三级标题（小节标题）</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
 

3.2 段落标签（<p>）

用于定义一个独立的文本段落，浏览器会自动在段落前后添加默认间距，区分不同段落。
html
 
预览
 
 
 
 
<p>这是第一个文本段落。HTML是构建网页结构的核心语言，
即使换行输入，浏览器也会自动合并为一行显示，
除非使用专门的换行标签。</p>
<p>这是第二个文本段落，与第一个段落之间有默认间距。</p>
 

3.3 换行与水平线标签

html
 
预览
 
 
 
 
<p>这是第一行文本<br>这是换行后的第二行文本（仍在同一个段落内）</p>
<hr>
<p>这是水平线下方的新段落</p>
 

3.4 文本格式化标签

用于对文本进行样式修饰（加粗、斜体、删除线等），分为语义化标签（推荐使用，帮助搜索引擎理解内容）和非语义化标签（仅用于样式，不推荐优先使用）。
标签 作用 类型 示例
<strong> 加粗文本（强调重要性） 语义化 <strong>重要内容</strong>
<b> 加粗文本（仅样式） 非语义化 <b>加粗文本</b>
<em> 斜体文本（强调语气） 语义化 <em>强调语气</em>
<i> 斜体文本（仅样式） 非语义化 <i>斜体文本</i>
<del> 删除线文本（表示删除） 语义化 <del>已删除的内容</del>
<s> 删除线文本（仅样式） 非语义化 <s>删除线文本</s>
<ins> 下划线文本（表示插入） 语义化 <ins>新增的内容</ins>
<u> 下划线文本（仅样式） 非语义化 <u>下划线文本</u>
<sup> 上标文本 功能标签 2<sup>2</sup>=4（2²=4）
<sub> 下标文本 功能标签 H<sub>2</sub>O（H₂O）
html
 
预览
 
 
 
 
<p>这是<strong>语义化加粗</strong>，这是<b>非语义化加粗</b></p>
<p>这是<em>语义化斜体</em>，这是<i>非语义化斜体</i></p>
<p>原价：<del>99元</del>，现价：69元</p>
<p>数学公式：x<sup>2</sup> + y<sup>2</sup> = r<sup>2</sup></p>
<p>化学公式：H<sub>2</sub>SO<sub>4</sub>（硫酸）</p>
 

4. HTML 列表标签

列表用于将一组相关内容按一定格式排列，HTML 支持三种核心列表类型：无序列表、有序列表、定义列表。

4.1 无序列表（<ul> + <li>）

列表项无固定顺序，默认以圆点（项目符号）作为标记，可通过 CSS 修改标记样式。
html
 
预览
 
 
 
 
<h3>我的爱好（无序列表）</h3>
<ul>
    <li>阅读</li>
    <li>运动</li>
    <li>编程</li>
    <li>摄影</li>
</ul>
 

4.2 有序列表（<ol> + <li>）

列表项有固定顺序（如编号、字母），默认以阿拉伯数字作为标记，可通过 type 属性修改标记类型。
html
 
预览
 
 
 
 
<h3>学习步骤（有序列表）</h3>
<ol type="1" start="1">
    <li>学习HTML基础</li>
    <li>学习CSS样式</li>
    <li>学习JavaScript交互</li>
</ol>

<h3>排名（有序列表，字母标记）</h3>
<ol type="A">
    <li>第一名</li>
    <li>第二名</li>
    <li>第三名</li>
</ol>
 

4.3 定义列表（<dl> + <dt> + <dd>）

用于定义 “术语 - 解释” 类型的内容（如词典、说明书），无项目符号。
html
 
预览
 
 
 
 
<h3>HTML核心术语（定义列表）</h3>
<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言，用于构建网页结构</dd>
    <dt>CSS</dt>
    <dd>层叠样式表，用于美化网页样式</dd>
    <dt>JavaScript</dt>
    <dd>脚本语言，用于实现网页交互效果</dd>
</dl>
 

4.4 嵌套列表

列表可以相互嵌套（如无序列表嵌套有序列表，或反之），实现复杂的列表结构。
html
 
预览
 
 
 
 
<h3>我的学习计划（嵌套列表）</h3>
<ul>
    <li>
        前端开发
        <ol>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ol>
    </li>
    <li>
        后端开发
        <ol>
            <li>Python</li>
            <li>Java</li>
        </ol>
    </li>
</ul>
 

5. HTML 链接标签

链接（<a> 标签，又称锚点标签）是网页的核心纽带，用于实现页面跳转、锚点定位、打开外部资源等功能。

5.1 核心语法与属性

html
 
预览
 
 
 
 
<a href="目标地址" target="打开方式" title="鼠标悬浮提示">链接文本/图片</a>
 
核心属性说明：
  1. href（必需）：指定链接的目标地址，支持多种类型：
    • 内部链接：同一网站内的其他页面（如 href="about.html"）
    • 外部链接：其他网站的 URL（必须带协议，如 href="https://www.baidu.com"）
    • 锚点链接：页面内的指定位置（如 href="#top"）
    • 功能链接：邮件（href="mailto:xxx@xxx.com"）、电话（href="tel:13800138000"）
    • 空链接：暂未指定目标（href="#" 或 href="javascript:void(0)"）
  2. target（可选）：指定链接的打开方式，默认值 _self
    • _self：在当前窗口 / 标签页打开（默认）
    • _blank：在新的标签页打开（推荐外部链接使用）
    • _parent：在父框架中打开（框架页面使用）
    • _top：在顶层框架中打开（框架页面使用）
  3. title（可选）：鼠标悬浮在链接上时显示的提示文本

5.2 常见链接示例

html
 
预览
 
 
 
 
<!-- 1. 外部链接（新标签页打开） -->
<a href="https://www.baidu.com" target="_blank" title="跳转到百度首页">百度一下</a>

<!-- 2. 内部链接（同一网站内页面跳转） -->
<a href="about.html">关于我们</a>
<a href="news/2025.html">2025年新闻</a> <!-- 子目录下的页面 -->

<!-- 3. 锚点链接（页面内定位） -->
<!-- 先定义锚点目标（通过id属性） -->
<h2 id="section1">第一部分内容</h2>
<p>大量文本内容...（省略）</p>
<p>大量文本内容...（省略）</p>
<!-- 锚点链接：跳转到id为section1的位置 -->
<a href="#section1">回到第一部分</a>
<!-- 跳转到其他页面的锚点 -->
<a href="about.html#contact">联系我们（关于页面）</a>

<!-- 4. 功能链接 -->
<a href="mailto:service@example.com">发送邮件给我们</a>
<a href="tel:13800138000">拨打客服电话</a>

<!-- 5. 空链接（暂未实现功能） -->
<a href="#">待开发链接</a>
<a href="javascript:void(0)">无跳转链接</a>

<!-- 6. 图片链接（将图片作为链接载体） -->
<a href="https://www.baidu.com" target="_blank">
    <img src="baidu-logo.png" alt="百度logo">
</a>
 

6. HTML 媒体元素（图片、音频、视频）

HTML 支持原生嵌入图片、音频、视频媒体资源，无需依赖第三方插件（HTML5 新增特性）。

6.1 图片元素（<img>）

<img> 是单标签，用于在网页中插入图片，核心是指定图片地址和替代文本。

6.1.1 核心语法与属性

html
 
预览
 
 
 
 
<img src="图片地址" alt="图片替代文本" width="宽度" height="高度" title="悬浮提示">
 
核心属性说明：
  1. src（必需）：图片的路径 / URL，支持两种类型：
    • 本地图片：同一项目内的图片文件（如 src="images/photo.jpg"、src="logo.png"）
    • 网络图片：互联网上的图片 URL（如 src="https://xxx.com/xxx.jpg"）
  2. alt（必需，语义化优化）：图片加载失败时显示的替代文本，同时帮助搜索引擎和屏幕阅读器理解图片内容
  3. width / height（可选）：设置图片宽度和高度，支持像素（px，可省略单位）、百分比（%）
    • 只设置其中一个属性，图片会按原始比例自动缩放（推荐，避免图片变形）
    • 同时设置两个属性，若比例与原图不一致，图片会变形
  4. 其他属性：title（悬浮提示）、loading="lazy"（懒加载，优化页面加载速度）

6.1.2 图片示例

html
 
预览
 
 
 
 
<!-- 本地图片（推荐使用相对路径） -->
<img src="images/cat.jpg" alt="一只可爱的猫咪" width="300" title="猫咪图片">

<!-- 网络图片 -->
<img src="https://picsum.photos/400/200" alt="随机风景图片" height="200">

<!-- 懒加载图片（适合非首屏图片） -->
<img src="images/bg.jpg" alt="背景图片" width="100%" loading="lazy">
 

6.2 音频元素（<audio>）

<audio> 用于在网页中嵌入音频文件，支持 MP3、WAV、OGG 三种主流格式（优先使用 MP3，兼容性最好）。

6.2.1 核心语法与属性

html
 
预览
 
 
 
 
<audio src="音频地址" controls autoplay loop preload="auto">
    您的浏览器不支持音频播放，请升级浏览器！
</audio>

<!-- 多格式兼容（推荐，应对不同浏览器支持差异） -->
<audio controls>
    <source src="music.mp3" type="audio/mpeg">
    <source src="music.ogg" type="audio/ogg">
    您的浏览器不支持音频播放，请升级浏览器！
</audio>
 
核心属性说明：

6.3 视频元素（<video>）

<video> 用于在网页中嵌入视频文件，支持 MP4、WebM、OGG 三种主流格式（优先使用 MP4，兼容性最好）。

6.3.1 核心语法与属性

html
 
预览
 
 
 
 
<video src="视频地址" controls width="600" autoplay loop muted preload="auto">
    您的浏览器不支持视频播放，请升级浏览器！
</video>

<!-- 多格式兼容（推荐） -->
<video controls width="600" muted>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    您的浏览器不支持视频播放，请升级浏览器！
</video>
 
核心属性说明（大部分与音频一致，新增部分如下）：

7. HTML 表单与表单控件

表单（<form>）是网页与用户交互的核心，用于收集用户输入的信息（如登录、注册、搜索、提交数据等），收集到的信息可提交到后端服务器进行处理。

7.1 表单容器（<form>）

所有表单控件必须嵌套在 <form> 标签内，用于定义表单的提交规则。

7.1.1 核心语法与属性

html
 
预览
 
 
 
 
<form action="后端接口地址" method="提交方式" enctype="数据编码类型">
    <!-- 表单控件（输入框、按钮等） -->
</form>
 
核心属性说明：
  1. action：指定表单数据提交的后端接口地址（如 action="https://xxx.com/login"），若留空则提交到当前页面
  2. method：指定表单的提交方式，可选值：
    • get（默认）：数据会附加在 URL 后面提交（可见，数据长度有限，适合搜索、查询等简单场景）
    • post：数据会在请求体中提交（不可见，数据长度无限制，适合登录、注册、提交大量数据等场景，安全性更高）
  3. enctype：指定表单数据的编码类型，主要用于提交文件时设置，可选值：
    • application/x-www-form-urlencoded（默认）：普通表单数据编码
    • multipart/form-data：提交文件时必须使用该类型（如上传图片、文档等）
    • text/plain：纯文本编码，极少使用

7.2 表单控件

表单控件是用户输入交互的载体，包括输入框、单选框、复选框、下拉菜单、按钮等，核心控件如下：

7.2.1 标签标签（<label>）

用于关联表单控件，点击 <label> 文本时，对应的表单控件会获得焦点（提升用户体验，尤其是单选框 / 复选框）。
两种关联方式：
  1. 通过 for 属性与控件的 id 属性关联（推荐，更灵活）
  2. 将控件嵌套在 <label> 内部（简单直接，无需 id）
html
 
预览
 
 
 
 
<!-- 方式1：for + id 关联 -->
<label for="username">用户名：</label>
<input type="text" id="username" name="username">

<!-- 方式2：嵌套关联 -->
<label>
    记住我：<input type="checkbox" name="remember">
</label>
 

7.2.2 输入框控件（<input>）

<input> 是单标签，通过 type 属性切换不同类型的输入框，是最常用的表单控件。
type 属性值 控件类型 示例
text 单行文本输入框 <input type="text" name="username" placeholder="请输入用户名">
password 密码输入框（内容隐藏） <input type="password" name="pwd" placeholder="请输入密码">
email 邮箱输入框（格式验证） <input type="email" name="email" required>
tel 电话输入框 <input type="tel" name="phone">
number 数字输入框（只能输入数字） <input type="number" name="age" min="1" max="100">
radio 单选框（多选一） <input type="radio" name="gender" value="male" checked> 男
checkbox 复选框（多选多） <input type="checkbox" name="hobby" value="read"> 阅读
file 文件上传框 <input type="file" name="avatar" multiple>
submit 表单提交按钮 <input type="submit" value="登录">
reset 表单重置按钮 <input type="reset" value="重置">
button 普通按钮（无默认行为） <input type="button" value="点击我" onclick="alert('Hello')">
date 日期选择框 <input type="date" name="birthday">
time 时间选择框 <input type="time" name="time">
search 搜索输入框 <input type="search" name="keyword" placeholder="请输入搜索关键词">
<input> 常用通用属性：

7.2.3 文本域（<textarea>）

用于输入多行文本（如留言、评论、简介等），支持自动换行和滚动条。
html
 
预览
 
 
 
 
<label for="remark">留言内容：</label>
<textarea id="remark" name="remark" rows="5" cols="30" placeholder="请输入您的留言...">
默认文本内容（可选，无需手动添加换行，浏览器会保留格式）
</textarea>
 
属性说明：

7.2.4 下拉菜单（<select> + <option> + <optgroup>）

用于提供预设选项供用户选择（如省份、城市、学历等），节省页面空间。
html
 
预览
 
 
 
 
<label for="city">选择城市：</label>
<select id="city" name="city" required>
    <option value="">-- 请选择城市 --</option>
    <optgroup label="一线城市">
        <option value="beijing">北京</option>
        <option value="shanghai" selected>上海</option>
        <option value="guangzhou">广州</option>
        <option value="shenzhen">深圳</option>
    </optgroup>
    <optgroup label="新一线城市">
        <option value="hangzhou">杭州</option>
        <option value="chengdu">成都</option>
    </optgroup>
</select>
 
标签说明：

7.2.5 按钮控件（<button>）

与 <input type="button"> 功能类似，但更灵活，可在标签内嵌套文本、图片等内容。
html
 
预览
 
 
 
 
<!-- 提交按钮 -->
<button type="submit">登录</button>

<!-- 重置按钮 -->
<button type="reset">重置表单</button>

<!-- 普通按钮 -->
<button type="button" onclick="alert('点击了普通按钮')">
    <img src="icon.png" alt="图标"> 点击我
</button>
 
属性说明：

7.3 完整表单示例

html
 
预览
 
 
 
 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户注册表单</title>
</head>
<body>
    <h2>用户注册</h2>
    <form action="https://xxx.com/register" method="post" enctype="application/x-www-form-urlencoded">
        <div>
            <label for="username">用户名：</label>
            <input type="text" id="username" name="username" placeholder="请输入3-16位用户名" required>
        </div>
        <br>
        <div>
            <label for="pwd">密码：</label>
            <input type="password" id="pwd" name="pwd" placeholder="请输入6-20位密码" required>
        </div>
        <br>
        <div>
            <label for="email">邮箱：</label>
            <input type="email" id="email" name="email" placeholder="请输入您的邮箱" required>
        </div>
        <br>
        <div>
            <label>性别：</label>
            <input type="radio" id="male" name="gender" value="male" checked>
            <label for="male">男</label>
            <input type="radio" id="female" name="gender" value="female">
            <label for="female">女</label>
        </div>
        <br>
        <div>
            <label>爱好：</label>
            <input type="checkbox" id="read" name="hobby" value="read">
            <label for="read">阅读</label>
            <input type="checkbox" id="sport" name="hobby" value="sport">
            <label for="sport">运动</label>
            <input type="checkbox" id="code" name="hobby" value="code">
            <label for="code">编程</label>
        </div>
        <br>
        <div>
            <label for="city">所在城市：</label>
            <select id="city" name="city" required>
                <option value="">-- 请选择城市 --</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="guangzhou">广州</option>
            </select>
        </div>
        <br>
        <div>
            <label for="avatar">上传头像：</label>
            <input type="file" id="avatar" name="avatar" accept="image/*">
        </div>
        <br>
        <div>
            <label for="remark">个人简介：</label>
            <textarea id="remark" name="remark" rows="3" cols="30" placeholder="请输入个人简介（可选）"></textarea>
        </div>
        <br>
        <button type="submit">提交注册</button>
        <button type="reset">重置表单</button>
    </form>
</body>
</html>
 

8. HTML 布局元素（传统布局与 HTML5 语义化布局）

布局用于规划网页的整体结构，将页面划分为不同的功能区域（如头部、导航、主体、侧边栏、尾部等）。

8.1 传统布局：<div> 标签

<div> 是无语义的块级容器标签，用于划分页面区域，通过 class 或 id 属性标识区域功能，配合 CSS 实现布局。
html
 
预览
 
 
 
 
<!-- 传统布局示例 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>传统布局</title>
    <style>
        /* 简单样式美化，演示布局结构 */
        .header { height: 80px; background: #333; color: #fff; text-align: center; line-height: 80px; }
        .nav { height: 40px; background: #666; color: #fff; line-height: 40px; padding-left: 20px; }
        .container { display: flex; }
        .main { flex: 3; height: 400px; background: #f5f5f5; padding: 20px; }
        .aside { flex: 1; height: 400px; background: #eee; padding: 20px; }
        .footer { height: 60px; background: #333; color: #fff; text-align: center; line-height: 60px; }
    </style>
</head>
<body>
    <!-- 头部 -->
    <div class="header">
        <h1>网站头部</h1>
    </div>

    <!-- 导航 -->
    <div class="nav">
        首页 | 产品 | 关于我们 | 联系我们
    </div>

    <!-- 主体容器 -->
    <div class="container">
        <!-- 主要内容 -->
        <div class="main">
            <h2>主要内容区域</h2>
            <p>这里是网页的核心内容...</p>
        </div>

        <!-- 侧边栏 -->
        <div class="aside">
            <h3>侧边栏</h3>
            <p>这里是侧边栏内容，如推荐文章、广告等...</p>
        </div>
    </div>

    <!-- 尾部 -->
    <div class="footer">
        版权所有 © 2025 我的网站
    </div>
</body>
</html>
 

8.2 HTML5 语义化布局标签

HTML5 新增了一系列具有明确语义的布局标签，替代 <div> 标签，让页面结构更清晰，利于搜索引擎优化（SEO）和屏幕阅读器识别，同时提高代码可读性。
核心语义化布局标签说明：
标签 语义含义 对应传统布局
<header> 页面 / 区域的头部 .header
<nav> 导航区域 .nav
<main> 页面核心内容区域（唯一） .main
<section> 文档中的章节 / 区域 .section
<article> 独立的内容单元（文章、评论等） .article
<aside> 侧边栏（辅助内容） .aside
<footer> 页面 / 区域的尾部 .footer

8.3 HTML5 语义化布局示例

html
 
预览
 
 
 
 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML5语义化布局</title>
    <style>
        /* 简单样式美化 */
        header { height: 80px; background: #333; color: #fff; text-align: center; line-height: 80px; }
        nav { height: 40px; background: #666; color: #fff; line-height: 40px; padding-left: 20px; }
        .container { display: flex; }
        main { flex: 3; height: 400px; background: #f5f5f5; padding: 20px; }
        aside { flex: 1; height: 400px; background: #eee; padding: 20px; }
        footer { height: 60px; background: #333; color: #fff; text-align: center; line-height: 60px; }
        section { margin-bottom: 20px; padding: 10px; background: #fff; }
        article { margin-bottom: 10px; padding: 10px; background: #f9f9f9; border: 1px solid #ddd; }
    </style>
</head>
<body>
    <!-- 页面头部 -->
    <header>
        <h1>网站头部</h1>
    </header>

    <!-- 导航区域 -->
    <nav>
        <a href="#">首页</a> | <a href="#">产品</a> | <a href="#">关于我们</a> | <a href="#">联系我们</a>
    </nav>

    <!-- 主体容器 -->
    <div class="container">
        <!-- 核心内容区域（唯一） -->
        <main>
            <h2>主要内容区域</h2>
            <!-- 文章章节 -->
            <section>
                <h3>科技新闻</h3>
                <!-- 独立文章 -->
                <article>
                    <h4>HTML5 最新特性详解</h4>
                    <p>HTML5 作为新一代网页标准，提供了丰富的语义化标签和原生媒体支持...</p>
                </article>
                <article>
                    <h4>CSS3 布局技巧汇总</h4>
                    <p>Flex 布局和 Grid 布局已成为现代网页布局的主流方案...</p>
                </article>
            </section>
        </main>

        <!-- 侧边栏 -->
        <aside>
            <h3>侧边栏</h3>
            <p>推荐文章：</p>
            <ul>
                <li><a href="#">JavaScript 入门教程</a></li>
                <li><a href="#">React 框架实战</a></li>
            </ul>
        </aside>
    </div>

    <!-- 页面尾部 -->
    <footer>
        版权所有 © 2025 我的网站 | 联系电话：13800138000
    </footer>
</body>
</html>
 

9. HTML 全局属性

全局属性是所有 HTML 元素都可以使用的属性（包括自定义标签），用于为元素添加通用功能或描述。
属性名 作用说明 示例
class 为元素指定一个或多个类名（用于 CSS 样式或 JS 选择） <div class="box red large">
id 为元素指定唯一标识（页面内唯一，用于 JS 选择或锚点） <h2 id="section1">
style 为元素添加行内 CSS 样式（优先级最高，不推荐大量使用） <p style="color: red; font-size: 16px;">
title 鼠标悬浮在元素上时显示的提示文本 <img src="pic.jpg" title="风景图片">
hidden 隐藏元素（元素不显示，也不占据页面空间） <p hidden>这是隐藏的文本</p>
lang 指定元素内容的语言 <p lang="en">Hello World</p>
tabindex 指定元素的 Tab 键聚焦顺序（-1 表示不可聚焦） <input type="text" tabindex="1">
contenteditable 设置元素内容是否可编辑（true/false） <div contenteditable="true">可编辑文本</div>
示例：
html
 
预览
 
 
 
 
<!-- 多个全局属性组合使用 -->
<div class="content" id="main-content" title="核心内容" lang="zh-CN">
    这是一段可编辑的文本：
    <p contenteditable="true" style="color: #333;">请在此输入内容...</p>
</div>
<!-- 隐藏元素 -->
<button hidden>隐藏的按钮</button>
<!-- Tab键聚焦顺序 -->
<input type="text" tabindex="1" placeholder="第一个聚焦">
<input type="text" tabindex="2" placeholder="第二个聚焦">
<input type="text" tabindex="-1" placeholder="不可聚焦">
 

10. HTML 注释

HTML 注释用于在代码中添加说明文字，浏览器不会解析和显示注释内容，仅在代码编辑器中可见。

10.1 注释语法

html
 
预览
 
 
 
 
<!-- 这是HTML注释内容 -->
 

10.2 注释的作用

  1. 标注代码功能（方便自己或他人理解代码含义）
  2. 暂时注释掉不需要的代码（便于调试，无需删除）
  3. 划分代码区域（提高代码可读性）

10.3 注释示例

html
 
预览
 
 
 
 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>注释示例</title>
    <!-- 该样式用于美化页面布局，后续可迁移到外部CSS文件 -->
    <style>
        .header { height: 80px; background: #333; }
    </style>
</head>
<body>
    <!-- 页面头部区域 -->
    <header class="header">
        <h1>网站标题</h1>
    </header>

    <!-- 导航区域 -->
    <nav>
        <a href="#">首页</a>
        <!-- 暂时隐藏产品链接，待功能完善后开启 -->
        <!-- <a href="#">产品</a> -->
        <a href="#">关于我们</a>
    </nav>

    <!-- 主体内容区域 -->
    <main>
        <!-- 文章列表：后续通过JS动态加载数据 -->
        <section class="article-list">
            <article>文章1</article>
            <article>文章2</article>
        </section>
    </main>
</body>
</html>
 

10.4 注释注意事项

11. HTML 实用技巧与注意事项

11.1 实用技巧

  1. 语义化编码优先：尽量使用语义化标签（如 <strong>、<header>、<article>）替代非语义化标签（如 <b>、<div>），利于 SEO 和代码维护
  2. 避免行内样式泛滥：<style> 行内样式优先级高但不易维护，推荐使用外部 CSS 文件统一管理样式
  3. 图片懒加载：非首屏图片添加 loading="lazy" 属性，减少页面初始加载时间，提升性能
  4. 表单验证：合理使用 required、type="email" 等原生验证属性，减少前端 JS 验证工作量
  5. 相对路径使用：引用本地资源（图片、HTML 页面）时，优先使用相对路径（如 images/pic.jpg），避免绝对路径（如 C:/xxx/pic.jpg）的兼容性问题
  6. 浏览器调试：使用浏览器 F12 开发者工具（Elements 面板）查看和调试 HTML 结构，快速定位问题

11.2 注意事项

  1. 标签闭合：
    • 双标签必须成对闭合（如 <p>文本</p>，不可遗漏 </p>）
    • 单标签（<br>、<img>、<input>）无需闭合，建议不添加 /（HTML5 中 <br/> 也兼容，但非必需）
  2. 属性引号：属性值建议使用双引号（""）或单引号（''）包裹，避免无引号导致的解析错误（如 src=pic.jpg 不推荐）
  3. 字符编码：必须在 <head> 中添加 <meta charset="UTF-8">，避免中文或特殊字符乱码
  4. 移动端适配：添加 <meta name="viewport" content="width=device-width, initial-scale=1.0">，确保网页在移动端正常显示
  5. 标签嵌套规范：
    • 块级元素（如 <div>、<p>、<h1>）可嵌套行内元素（如 <span>、<strong>）或其他块级元素（部分例外：<p> 不能嵌套 <div>）
    • 行内元素（如 <span>、<a>）不能嵌套块级元素
  6. 大小写规范：HTML 标签和属性名不区分大小写（如 <HTML>、<html> 均可），推荐使用小写字母（符合开发规范，更易阅读）

总结

  1. HTML 是网页结构的骨架，核心作用是定义页面结构和承载基础内容，与 CSS、JavaScript 协同工作构建完整网页
  2. HTML5 是主流版本，提供了语义化布局、原生媒体支持、增强表单等实用特性
  3. 掌握核心标签（文本、列表、链接、媒体、表单、布局）和全局属性，是构建合格 HTML 页面的基础
  4. 遵循语义化编码、规范嵌套、合理注释等原则，可提高代码可读性、可维护性和 SEO 效果
  5. 实际开发中，需配合 CSS 实现样式美化，配合 JavaScript 实现交互功能，形成完整的前端开发流程

扩展学习资源