下面为你整理一份清晰、系统、实用的 《HTML 指南（HTML Guide）》，适合入门、学习或作为参考手册使用。
📘 HTML 指南（HTML Guide）
1. HTML 是什么？
HTML（HyperText Markup Language，超文本标记语言） 是构建网页的基础语言，用于描述网页的结构和内容。
浏览器负责解析 HTML，并呈现文本、图片、视频、表格等内容。
2. 一个基本 HTML 文档结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>HTML 示例页面</title>
</head>
<body>
<h1>你好，HTML！</h1>
<p>这是一个示例页面。</p>
</body>
</html>
结构说明：
<!DOCTYPE html>：告诉浏览器使用 HTML5 标准<html>：整个页面的根元素<head>：页面的元信息，如标题、编码、样式等<body>：页面内容主体
3. HTML 常用标签分类（必会）
3.1 文本结构
| 标签 | 用途 |
|---|---|
<h1>–<h6> | 标题 |
<p> | 段落 |
<span> | 行内文本片段 |
<strong> | 强调（加粗，语义化） |
<em> | 斜体（语义化强调） |
<br> | 换行 |
<hr> | 水平分割线 |
3.2 超链接 & 图片
<a href="https://example.com">访问链接</a>
<img src="image.jpg" alt="描述文字">
href：跳转地址alt：图片无法加载时的替代文本（也用于无障碍访问）
3.3 列表
无序列表
<ul>
<li>苹果</li>
<li>香蕉</li>
</ul>
有序列表
<ol>
<li>第一步</li>
<li>第二步</li>
</ol>
3.4 表格
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>小明</td>
<td>18</td>
</tr>
</table>
3.5 表单（输入）
<form action="/submit" method="post">
<input type="text" name="username" placeholder="用户名">
<input type="password" name="pwd" placeholder="密码">
<button type="submit">提交</button>
</form>
常见输入类型：
textpasswordemailnumberfilecheckboxradiodate
3.6 语义化标签（HTML5）
语义化让搜索引擎、屏幕阅读器更好理解页面内容。
| 标签 | 语义 |
|---|---|
<header> | 页头 |
<nav> | 导航栏 |
<section> | 内容区块 |
<article> | 独立内容（可单独发布） |
<aside> | 侧边栏 |
<footer> | 页尾 |
4. HTML 属性（Attributes）
属性用于提供额外信息，例如：
<img src="xx.jpg" width="300" height="200" alt="风景图">
常见属性：
id: 全局唯一标识符class: 用于 CSS 样式 / JSstyle: 内联样式title: 鼠标悬停提示data-*: 自定义数据属性
5. 块级元素 vs 行内元素
块级元素（block）
独占一行
可以包含行内或块级元素如：
div,p,h1-h6,section
行内元素（inline）
与文本同行
不会换行如：
span,a,strong,em
6. HTML 与 CSS、JavaScript 的关系
HTML → 结构CSS → 样式JavaScript → 行为
引入方式：
CSS
<link rel="stylesheet" href="style.css">
JavaScript
<script src="app.js"></script>
7. 最佳实践（W3C 推荐）
✔ 使用语义化标签（利于 SEO 和无障碍访问）✔ 所有图片必须带 alt✔ 保持结构清晰、缩进规范✔ 表格必须包括 <th> 表头✔ 使用 label 与输入框关联，提高可访问性
8. HTML 学习路线（简明版）
基础标签
文档结构
表单
语义化 HTML5
DOM 与 JavaScript 基础
无障碍标准（WCAG 入门）
🎁 如需，我可以进一步为你提供：
📄 完整的 HTML 速查表📘 “HTML 从零开始”教程📚 HTML + CSS 入门课程大纲📝 帮你生成 HTML 示例代码📦 导出为 PDF / PPT / Markdown
你希望我把这个指南扩展成完整教材、还是生成PDF 文档？