HTML 起步文档
HTML（超文本标记语言）是构建网页的基础。
说明：本文中“标签”和“元素”通常混用，但严格来说，
<p>是开始标签，</p>是结束标签，两者共同构成一个“元素”。为简洁起见，文中多数情况以“标签”泛指元素。
页面骨架
每一个 HTML 文档都有一个固定的骨架。下面的代码模板是所有网页的起点。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题</title>
</head>
<body>
<!-- 页面可见内容 -->
</body>
</html>
| 标签 | 作用 |
|---|---|
<html> | 根标签，包裹整个文档内容。lang 属性声明页面语言，利于搜索引擎和屏幕阅读器。 |
<head> | 头部区域，存放浏览器和搜索引擎使用的元数据（如编码、视口）、页面标题、样式表链接等，其内容对用户不可见。 |
<title> | 定义浏览器标签页上显示的标题，也是搜索引擎结果中显示的标题，对 SEO 至关重要。 |
<body> | 页面的主体，所有用户可见的内容（文字、图片、视频等）都放在这里。 |
关键说明
<!DOCTYPE html>：强制浏览器以标准模式（而非“怪异模式”）渲染页面。这是现代 HTML 文档的必备声明。<meta charset="UTF-8">：指定字符编码为 UTF-8，保证页面能正确显示所有国际字符，避免乱码。<meta name="viewport">：控制移动端视口（viewport）的宽度和缩放，是实现响应式网页设计的核心配置。
核心思想：语义化
HTML 的核心作用不是控制“样子”，而是描述“内容的结构和意义”。使用恰当的标签（如 <h1> 表示标题、<nav> 表示导航）能帮助：
- 搜索引擎 更好地理解页面内容，提升 SEO。
- 屏幕阅读器 为视障用户正确朗读页面。
- 开发者 写出更清晰、易维护的代码。
原则：选择标签时，优先考虑“这个内容是什么”，而不是“我希望它长什么样”。
基础内容元素
标题与段落
标题和段落是构成页面内容层级的最基础元素。
<h1>一级标题</h1>
<h2>二级标题</h2>
<!-- ... 直到 h6 -->
<p>段落文本，浏览器会自动在段落上下添加外边距，形成阅读间距。</p>
<br> <!-- 换行（单标签），用于在段落内强制换行。注意：不要使用多个 <br> 来制造段落间距或视觉空白，应使用 CSS 的 margin 属性。 -->
<hr> <!-- 水平分割线，表示主题的切换 -->
- 语义化标题：
<h1>到<h6>不仅改变文字大小，更重要的是构建了文档结构。一个页面通常只有一个<h1>。
文本格式化
在 HTML 中，推荐使用带有“语义”的标签来格式化文本，而不仅仅是为了改变外观。这有助于搜索引擎理解内容的权重。
| 效果 | 标签 | 说明 |
|---|---|---|
| 加粗 | <strong>重要文字</strong> | 表示内容具有很强的重要性、严重性或紧迫性。 |
| 倾斜 | <em>强调文字</em> | 表示内容的语气强调，阅读时需重读。 |
<del>已删除内容</del> | 表示文档中已被删除的内容。 | |
| 下划线 | <ins>插入内容</ins> | 表示文档中新插入的内容。 |
图像
<img> 是一个单标签，用于在页面中嵌入图像。
<img src="图片路径" alt="替代文本" title="悬停提示" width="300" loading="lazy">
src：必需。指定图像的路径（支持相对路径、绝对路径或网络链接）。alt：必需且至关重要。当图片无法加载时显示的文字，也是屏幕阅读器为视障用户朗读的内容。描述应准确传达图片的信息或用途，而不是写“图片”二字（例如：alt="一只橙色猫趴在笔记本键盘上"）。这对可访问性和 SEO 至关重要。title：可选的提示文字，当鼠标悬停在图片上时显示。注意：触摸屏设备（手机、平板）上title基本无效，屏幕阅读器对其支持也不一致，因此不要依赖title来传达关键信息。width/height：设置图片尺寸。建议只设置其中一个，另一个会按比例自适应，避免图片变形。
拓展提示：在现代响应式开发中，为了适配不同分辨率的屏幕（如 Retina 屏）和不同尺寸的视口，可以学习使用
srcset和sizes属性提供多张备选图片。性能优化：
loading="lazy"属性让图片在即将进入视口时才加载，能显著提升页面初始加载速度，是推荐的最佳实践。
超链接
<a> 标签定义了超链接，是互联网的“纽带”。
<a href="目标网址" target="_blank" rel="noopener noreferrer">安全的新窗口打开</a>
<a href="文件.zip">下载文件</a>
<a href="mailto:someone@example.com">发送邮件</a>
<a href="tel:10086">拨打电话</a>
href：必需。指定链接的目标地址。target="_blank"：在新标签页或新窗口中打开链接。安全最佳实践：必须同时添加rel="noopener noreferrer"，以防止新页面通过window.opener对原页面进行潜在操作。- 下载：如果
href指向浏览器无法直接打开的文件（如.zip、.pdf），通常会触发下载。 - 特殊协议：
mailto:和tel:可以分别唤起用户的邮件客户端或拨号应用。
<a href="文件.pdf" download="自定义文件名.pdf">下载PDF</a>
强制下载：
download属性告诉浏览器将链接资源作为下载处理，而不是打开预览。
锚点链接
锚点允许用户在同一页面的不同部分之间快速导航。
<a href="#section2">跳转到第二节</a>
<h2 id="section2">第二节内容</h2>
- 目标元素的
id值需要与链接的href中的#后的值完全匹配。
路径说明
路径决定了浏览器如何找到并加载资源。
相对路径
相对路径是从当前文件所在位置出发去寻找目标资源，是网站开发中最常用、最灵活的方式。
| 目标位置 | 写法示例 | 说明 |
|---|---|---|
| 同一级 | logo.png 或 ./logo.png | 当前文件所在的目录下。 |
| 下一级 | images/photo.jpg | 进入当前目录下的 images 文件夹。 |
| 上一级 | ../bg.jpg | 返回上一级目录（.. 表示上级目录）。 |
绝对路径
- 本地绝对路径：
C:\project\img\a.png（极度不推荐，因为你的网站部署到服务器后，本地路径将完全无效）。 - 网络绝对路径：
https://example.com/1.jpg（通常用于引用站外的资源）。
页面布局与结构
容器标签（div 与 span）
<div>：块级元素。它独占一行，前后有换行，是用于页面布局和分块的核心容器。<span>：行内元素。它不会换行，多个<span>可以在同一行内共存，常用于对一段文本中的局部内容进行样式修饰。
语义化布局标签
这些标签用更形象的名称描述了其内容的含义，对搜索引擎优化（SEO）和代码可读性有极大帮助。它们通常替代传统的 <div> 来构建页面结构。
| 标签 | 含义 |
|---|---|
<header> | 页眉/头部，通常包含导航、logo、标题。 |
<nav> | 导航链接区域。 |
<article> | 独立的内容块，如一篇博客文章、一条用户评论。 |
<section> | 文档中的一个通用区块，通常包含一个标题。 |
<aside> | 侧边栏，或与主内容间接相关的补充内容。 |
<footer> | 页脚，通常包含版权信息、联系方式等。 |
这些标签有利于 SEO 和代码可读性，尤其在移动端和现代浏览器中广泛支持。
数据展示
表格
表格用于展示结构化数据。
<table border="1" cellpadding="8" cellspacing="0">
<thead>
<th>姓名</th><th>年龄</th>
</thead>
<tbody>
<td>张三</td><td>20</td>
<td>李四</td><td>22</td>
</tbody>
</table>
<thead>,<tbody>,<tfoot>：用于逻辑上分组表格内容，便于样式控制和脚本操作。border,cellpadding,cellspacing：这些是表现层属性，与 HTML 的“结构层”职责相悖。现代开发中，表格的样式完全由 CSS 控制，HTML 中仅用表格展示结构化数据。请改用 CSS 设置边框、内边距等。
合并单元格
- 跨列：
colspan="n" - 跨行：
rowspan="n"
<td colspan="2">合并两列</td>
列表
列表用于组织一系列相关的条目。
| 类型 | 标签 | 示例 | 应用场景 |
|---|---|---|---|
| 无序列表 | <ul><li>项目</li></ul> | 圆点符号 | 导航菜单、新闻列表、功能清单 |
| 有序列表 | <ol><li>第一步</li></ol> | 数字序号 | 操作步骤、排名列表 |
| 自定义列表 | <dl><dt>术语</dt><dd>描述</dd></dl> | 术语/描述结构 | 术语解释、问答（FAQ） |
用户交互：表单
表单用于收集用户输入的数据，并提交到服务器。
表单域 <form>
<form action="提交地址" method="post" name="myForm">
<!-- 表单控件 -->
</form>
-
action：指定处理表单数据的服务器端程序地址。 -
method：指定数据提交的方式。get：用于获取数据（如搜索）。数据会附加在 URL 中（?key=value），不适合传输敏感信息；有长度限制（通常 2KB 左右），且可被浏览器缓存。post：用于提交数据（如注册、上传）。数据在请求体中传递，理论上无大小限制，相对更安全，但注意：仅使用post并不能保证绝对安全，仍需配合 HTTPS 等机制。
-
novalidate：禁用浏览器自带的表单验证，当你希望用 JavaScript 完全控制验证逻辑时使用。
<input> 常用类型
| type 值 | 说明 |
|---|---|
| text | 单行文本 |
| password | 密码（掩码） |
| radio | 单选按钮（需同名 name） |
| checkbox | 复选框 |
| submit | 提交按钮 |
| reset | 重置按钮 |
| button | 普通按钮 |
| file | 文件上传 |
重要属性
name：核心属性。定义了提交到服务器时的参数名。value：按钮的显示文字，或输入框的默认值。checked：用于radio或checkbox，表示默认选中状态。maxlength：限制输入的最大字符数。
下拉列表 <select>
<select name="city">
<option value="bj">北京</option>
<option selected>上海</option>
</select>
文本域 <textarea>
用于输入多行文本，如用户评论。
<textarea rows="4" cols="40">默认内容</textarea>
增强可访问性 <label>
<label> 标签为表单控件定义标注。当点击 <label> 内的文本时，关联的输入框会自动获得焦点，这大大提升了用户体验。
显式关联（推荐） ：
<label for="username">用户名：</label>
<input type="text" id="username" name="user">
隐式关联（简洁） ：
<label>用户名：<input type="text" name="user"></label>
- 两种方式均可，显式关联的
for属性值必须与输入控件的id值相同。
屏幕阅读器会朗读
<label>中的文字，让视障用户明确知道当前输入框需要填写什么。因此，务必为每个输入控件关联<label>，这对表单的可访问性至关重要。
HTML5 新增表单特性
新型 input 类型
这些新的 type 属性值，能让浏览器提供专门的输入界面和内置的格式验证。
| type | 说明 |
|---|---|
email | 输入邮箱地址，移动端键盘会显示 @ 和 .，浏览器会进行简单的格式验证。 |
url | 输入网址，浏览器会验证格式。 |
number | 数字输入框，带有上下箭头调整按钮。 |
tel | 电话号码输入框，在移动端会调出数字键盘。 |
search | 搜索框，在一些浏览器中会自带清除按钮。 |
date / time | 日期或时间选择器。 |
color | 颜色选择器。 |
新增属性
<input type="text" placeholder="请输入姓名" required autofocus>
placeholder：占位提示文本，输入内容时自动消失。required：标记为必填字段，提交时若为空，浏览器会阻止提交并给出提示。autofocus：页面加载完成后，该输入框自动获得焦点。autocomplete="off"：关闭浏览器自动补全功能。multiple：允许选择多个值，常用于file（一次选多个文件）或select。
重要提示：浏览器内置的表单验证是为了提升用户体验。真实项目中，后端必须对所有提交的数据进行二次验证，以确保安全。前端验证不能替代后端验证。
多媒体
视频 <video>
<video src="movie.mp4" controls autoplay muted loop poster="cover.jpg"></video>
controls：显示浏览器自带的播放控件。autoplay：自动播放。注意：现代浏览器通常要求视频必须处于静音（muted）状态才能自动播放。muted：默认静音。loop：循环播放。poster：在视频加载完成前或用户点击播放前显示的封面图。
音频 <audio>
<audio src="music.mp3" controls loop></audio>
- 为了提供更好的用户体验和兼容性，可以为
<video>和<audio>提供多个<source>子标签，指定不同格式的媒体文件。
嵌入内容 <iframe>
<iframe> 用于在网页中嵌入另一个网页或外部内容（如地图、视频）。
<iframe src="https://example.com" width="600" height="400" loading="lazy" sandbox></iframe>
src：嵌入的页面地址。sandbox：对嵌入内容施加严格的限制（如禁止脚本、弹窗），增强安全性。loading="lazy"：实现懒加载，提升性能。
特殊字符与注释
在 HTML 中，一些字符有特殊含义（如 < 是标签的开始），需要使用“实体名称”来表示。
| 字符 | 实体名 | 说明 |
|---|---|---|
| 空格 | | 不间断空格。HTML 默认会合并连续的空格，使用此实体可以插入多个连续空格。 |
| < | < | 小于号 |
> | 大于号 | |
| & | & | “与”符号，表示实体引用的开始。 |
| © | © | 版权符号 |
注释
<!-- 这是注释，不会在页面显示。用于给开发者留下说明，或暂时隐藏部分代码（调试时常用）。 -->
附：常用 Emmet 快捷写法
Emmet 是 VS Code、Sublime Text 等现代编辑器内置的插件，可以极大地提升 HTML/CSS 的编写速度。（需要编辑器支持，大多数现代编辑器默认已集成）
| 快捷输入 | 生成结果 |
|---|---|
! 或 html:5 | 生成完整的 HTML5 基础结构。 |
ul>li*3 | 生成一个包含3个 <li> 项目的 <ul> 列表。 |
a[href="#"] | 生成一个带有 href="#" 属性的 <a> 标签。 |
div.container | 生成 <div class="container"></div>。 |
div#main | 生成 <div id="main"></div>。 |
