HTML（HyperText Markup Language）是构建网页的标准标记语言，用于定义网页的结构和内容。
1. 标签分类
1.1 双标签（成对出现）
双标签由开始标签和结束标签组成，内容写在两个标签之间。
| 标签 | 说明 | 示例 |
|---|---|---|
<p> | 段落 | <p>这是一个段落</p> |
<h1>~ | 标题（1最大，6最小） | <h1>主标题</h1> |
<a> | 超链接/锚点 | <a href="url">链接文字</a> |
<div> | 块级容器 | <div>内容区域</div> |
<span> | 行内容器 | <span>行内文字</span> |
🔗 超链接<a>详解
<ahref="网址"target="_blank"title="鼠标悬停提示">链接文字</a>常用属性：
| 属性 | 说明 | 可选值 |
|---|---|---|
href | 链接地址 | URL、#（页面顶部）、#id（锚点跳转） |
target | 打开方式 | _self（当前窗口，默认）_blank（新窗口）_parent（父框架）_top（顶层窗口） |
title | 悬停提示文本 | 任意文字 |
1.2 单标签（自闭合标签）
单标签不需要结束标签，独立使用。
| 标签 | 说明 | 示例 |
|---|---|---|
<input> | 输入框 | <input type="text"> |
<br> | 换行 | 文字<br>换行后文字 |
<hr> | 水平分割线 | <hr> |
<img> | 图片 | <img src="图片路径"> |
2. 路径说明
2.1 绝对路径
完整的资源地址，包含协议、主机名等信息。
格式：协议://主机名:端口/路径 示例：https://www.example.com/images/logo.png💡小知识：
http默认端口 80，https默认端口 443（通常可省略）
2.2 相对路径
相对于当前文件位置的路径。
| 符号 | 含义 | 示例 |
|---|---|---|
./ | 当前目录 | ./images/logo.png |
../ | 上一级目录 | ../css/style.css |
| 直接写文件名 | 当前目录 | index.html |
项目结构示例： ├── index.html ├── css/ │ └── style.css └── images/ └── logo.png 在 index.html 中引用： - CSS文件：./css/style.css 或 css/style.css - 图片：./images/logo.png 或 images/logo.png3. 文本相关标签
3.1 引用标签
<blockquote>这是一段引用文字，会产生缩进效果</blockquote>3.2 行内容器（无语义）
<span>用于设置部分文字样式，常配合 CSS 使用</span>3.3 预格式标签
<pre>保留空格、换行 按原始格式显示</pre>4. 表格 table
4.1 基本结构
<tableborder="1"cellpadding="10"cellspacing="0"><thead><tr><th>表头1</th><th>表头2</th></tr></thead><tbody><tr><td>数据1</td><td>数据2</td></tr></tbody></table>标签说明：
| 标签 | 说明 |
|---|---|
<table> | 表格容器 |
<thead> | 表头区域 |
<tbody> | 表体区域 |
<tr> | 表格行（table row） |
<th> | 表头单元格（加粗居中） |
<td> | 数据单元格（table data） |
常用属性：
| 属性 | 说明 |
|---|---|
border | 边框粗细 |
cellpadding | 单元格内边距 |
cellspacing | 单元格间距 |
align | 对齐方式（建议用 CSS 代替） |
4.2 合并单元格
| 属性 | 说明 | 示例 |
|---|---|---|
rowspan | 跨行合并 | <td rowspan="2">跨2行</td> |
colspan | 跨列合并 | <td colspan="3">跨3列</td> |
5. 图片 img
<imgsrc="图片路径"alt="替代文本"title="悬停提示"width="200"height="100">属性详解：
| 属性 | 说明 | 是否必需 |
|---|---|---|
src | 图片资源路径 | ✅ 必需 |
alt | 图片加载失败时显示的文字（也利于 SEO 和无障碍访问） | ✅ 推荐 |
title | 鼠标悬停时的提示文字 | 可选 |
width | 图片宽度 | 可选 |
height | 图片高度 | 可选 |
💡最佳实践：图片常嵌套在
<a>标签中实现点击跳转
<ahref="https://example.com"><imgsrc="logo.png"alt="公司Logo"></a>6. 表单 form
6.1 form 基本结构
<formaction="提交地址"method="post"name="myform"><!-- 表单控件 --></form>属性说明：
| 属性 | 说明 | 常用值 |
|---|---|---|
action | 表单提交的目标 URL | 服务器地址 |
method | 提交方式 | get（默认，数据在 URL 中）、post（数据在请求体中） |
name | 表单名称 | 自定义名称 |
6.2 常见表单控件
📝 文本输入
<!-- 普通文本 --><inputtype="text"placeholder="请输入用户名"><!-- 密码（输入内容隐藏） --><inputtype="password"placeholder="请输入密码">🔘 单选框 radio
<p>性别：</p><label><inputtype="radio"name="sex"value="male"checked>男</label><label><inputtype="radio"name="sex"value="female">女</label>⚠️注意：同一组单选框需要相同的
name才能实现互斥；checked表示默认选中
☑️ 复选框 checkbox
<p>爱好：</p><label><inputtype="checkbox"name="hobby"value="web">前端开发</label><label><inputtype="checkbox"name="hobby"value="java">Java开发</label><label><inputtype="checkbox"name="hobby"value="python">Python</label>📋 下拉选择 select
<!-- 单选下拉 --><selectname="course"><optionvalue="">请选择课程</option><optionvalue="html">HTML</option><optionvalue="css">CSS</option><optionvalue="js"selected>JavaScript</option></select><!-- 多选下拉（按住 Ctrl/Shift 多选） --><selectname="skills"multiple><optionvalue="html">HTML</option><optionvalue="css">CSS</option><optionvalue="js">JavaScript</option></select>📄 多行文本 textarea
<textarearows="5"cols="30"placeholder="请输入内容..."></textarea>🔲 按钮类型
<inputtype="submit"value="提交"><inputtype="reset"value="重置"><buttontype="button">普通按钮</button>🏷️ label 标签（提升用户体验）
<!-- 方式1：for 关联 id --><labelfor="username">用户名：</label><inputtype="text"id="username"><!-- 方式2：直接包裹 --><label>用户名：<inputtype="text"></label>💡 使用
label后，点击文字也能聚焦到输入框
7. 文本样式标签（表现类）
| 标签 | 效果 | 示例 |
|---|---|---|
<b> | 加粗 | <b>加粗文字</b> |
<strong> | 加粗（有强调语义） | <strong>重要内容</strong> |
<i> | 斜体 | <i>斜体文字</i> |
<em> | 斜体（有强调语义） | <em>强调内容</em> |
<u> | 下划线 | <u>下划线文字</u> |
<s> | <s>删除线文字</s> | |
<del> | <del>已删除</del> |
特殊字符（HTML 实体）：
| 显示 | 代码 | 说明 |
|---|---|---|
| 空格 | | 不换行空格 |
| < | < | 小于号 |
| > | > | 大于号 |
| & | & | 和号 |
| " | " | 双引号 |
8. 列表
8.1 无序列表 ul（常用于导航）
<ul><li>列表项 1</li><li>列表项 2</li><li>列表项 3</li></ul>8.2 有序列表 ol
<ol><li>第一步</li><li>第二步</li><li>第三步</li></ol>8.3 定义列表 dl
<dl><dt>术语/标题</dt><dd>描述/解释</dd><dt>HTML</dt><dd>超文本标记语言</dd></dl>9. 区块标签
9.1 块级容器 div
<divclass="container"><!-- 用于布局和分组，本身无语义 --></div>9.2 HTML5 语义化标签（推荐使用）
| 标签 | 说明 |
|---|---|
<header> | 页眉 |
<nav> | 导航 |
<main> | 主体内容 |
<article> | 文章 |
<section> | 区块 |
<aside> | 侧边栏 |
<footer> | 页脚 |
<header>网站头部</header><nav>导航栏</nav><main><article>文章内容</article><aside>侧边栏</aside></main><footer>页脚信息</footer>10. 开发技巧
10.1 Emmet 快捷语法
| 输入 | 输出 |
|---|---|
!或html:5 | HTML5 文档结构 |
div.container | <div class="container"></div> |
ul>li*3 | 3个 li 的 ul 列表 |
p*6>lorem | 6个带随机文本的段落 |
div#main | <div id="main"></div> |
10.2 常用快捷键
| 快捷键 | 功能 |
|---|---|
F11 | 全屏 |
Ctrl + / | 注释/取消注释 |
Alt + Shift + F | 格式化代码 |
Ctrl + D | 选中下一个相同内容 |
📚 总结速查表
HTML 文档基本结构：<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>页面标题</title></head><body><!-- 页面内容 --></body></html>| 类别 | 常用标签 |
|---|---|
| 文本 | <h1>~<br/>######,<br/>, ``, |
| 链接/媒体 | <a>,<img> |
| 列表 | <ul>,<ol>,<li>,<dl>,<dt>,<dd> |
| 表格 | <table>,<tr>,<th>,<td> |
| 表单 | <form>,<input>,<select>,<textarea>,<button> |
| 布局 | <div>,<header>,<nav>,<main>,<footer> |
