一、工欲善其事必先利其器
浏览器：Google Chrome
- 配置推荐
- 先将Google Chrome浏览器设置成默认浏览器
- F12打开控制台 => 找到右上方齿轮设置图标 => 将language改为Chinese-中文 => 重启
编辑器：VSCode
- 配置推荐
Font Size：调整为 14-16（根据屏幕大小，默认 14），代码更清晰Format On Save：勾选，保存代码时自动格式化，统一代码风格Auto Save：勾选 afterDelay（延迟自动保存），避免忘记保存代码Tab Size：设置为 2 或 4（前端推荐 2，后端推荐 4），统一缩进Word Wrap：设置为 on，代码超出编辑器宽度时自动换行，无需横向滚动Line Numbers：确保勾选 on（默认开启），显示行号便于调试
- 插件推荐
Chinese (Simplified) Language Pack：中文插件，安装后重启Live Serve：启动本地服务器，实时预览 HTML 页面（修改代码后自动刷新浏览器）- ………………
学习网站：MDN和w3school
二、HTML概述
2.1、HTML的含义
HTML（Hyper Text Markup Language，超文本标记语言）。其作用是搭建网页结构，在网页上展示内容。
- 超文本是一种通过超链接将文本、图像、音频等多种类型信息相互关联，使读者能非线性跳转浏览的文本组织方式。
- 标记语言是一种通过在文本中插入特定符号或标签来定义内容结构、格式及逻辑关系，从而实现信息标准化组织与机器可读性的表达系统。
2.2、HTML常用术语
- 元素：浏览器解析 HTML 代码后，一个完整的标签单元（包含标签本身、属性、文本内容） 就称为一个元素
- 标签：HTML 代码中用
<>包裹的符号段，就是一个标签，是构成网页结构的基本单位- 单标签：无需包裹内容，自身即可完成定义，以
/>结尾（一般省略） - 双标签：需要成对出现，由开始标签和结束标签组成，中间可包裹内容
- 单标签：无需包裹内容，自身即可完成定义，以
- 属性：附加在标签上的 “特征说明”，用于定义标签的外观、行为、关联资源等特性，格式为
属性名="属性值" - 文本标签体：双标签的开始标签和结束标签之间的所有内容（包括文字、空格、换行，甚至嵌套的其他标签）
<单标签名 [属性名1="属性值" 属性名2="属性值" ...]/>
<双标签名 [属性名1="属性值" 属性名2="属性值" ...]>[文本标签体]</双标签名>
中括号[]表示可省略
2.3、注意事项
- HTML 文件的标准后缀为
.html或.htm，实际开发中优先使用.html后缀 - HTML 标签大小写不敏感，但禁止大小写混用，行业通用规范是全部使用小写
- 双标签需成对闭合、单标签需正确自闭合，所有标签都要保证闭合的规范性
- HTML 标签支持合法嵌套，但严禁交叉嵌套，其中注释标签本身不支持嵌套
- HTML 标签的属性必须设置对应值，且属性值需用双引号或单引号包裹（缺一不可）
三、标签
3.1、基本结构
<!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>
基本介绍
-
<!DOCTYPE html>：指定浏览器用 HTML5 规则解析页面，避免怪异模式，必须放在页面首行 -
<html lang="zh_CN"></html>：HTML 文档的唯一根标签，所有内容必须嵌套在其中lang属性：声明网页主语言，辅助工具做语言相关的适配处理- 常用值：
zh-CN（简体中文）、en（英文）
- 常用值：
-
<head></head>：存储元信息、资源链接等非可视化内容，支撑网页运行和搜索引擎识别 -
<body></body>：承载所有用户可见的页面内容，是网页呈现的核心载体 -
<!--注释内容-->:注释内容不会被浏览器渲染显示，仅用于开发人员理解代码，可放在 HTML 文档任意位置
head内标签
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0"/>：为网页补充元数据，其中charset保障字符解析，viewport配置适配移动端显示，支撑浏览器正确渲染页面charset：指定 HTML 文档的字符编码格式（如utf-8），确保浏览器能正确解析页面文字，避免乱码name="viewport"+content：width=device-width让页面宽度适配设备屏幕，initial-scale=1.0设置移动端初始缩放比例为 1（无缩放），确保网页在移动设备上正常呈现
<title>页面标题</title>：定义网页标题（显示在浏览器标签 / 搜索结果），标识网页主题，提升用户识别度，是 SEO 优化的核心要素之一<link rel="stylesheet" href="./css/style.css" type="text/css"/>：关联外部 CSS 样式表到当前网页，让浏览器加载并应用样式rel（必须）：定义当前文档与外部资源的关系类型（如stylesheet表示样式表），浏览器据此识别资源用途href（必须）：指定外部资源的具体 URL 地址（绝对 / 相对路径），是浏览器定位资源的关键type（可选）：声明外部资源的 MIME 数据格式（如text/css），现代浏览器可自动识别，无需手动写
<style type="text/css">CSS样式</style>：在网页内部编写 CSS 样式，直接控制页面布局和外观，无需引入外部样式文件type（可选）：默认text/css可省略
<script src="" defer type="text/javascript">JS代码</script>：引入外部 JS 文件或编写内部 JS 代码，实现网页动态交互逻辑src（可选）：指定外部 JS 文件路径（无src时，标签内写内部 JS 代码；有src时，标签内代码无效）defer/async（可选）：defer：页面解析完成后按顺序执行 JS，不阻塞渲染；async：JS 异步加载，加载完立即执行，不保证顺序type（可选）：默认text/javascript可省略；type="module"时，将 JS 作为 ES6 模块解析，支持import/export语法
<base href="" target=""/>：定义网页中所有相对 URL 的基准地址，统一管控路径；同时可设置链接默认打开方式；一个文档仅能有一个，且必须放在<head>内所有含 URL 的标签（如<a>、<link>）之前<noscript>内容</noscript>：当页面依赖 JS 实现核心功能，但用户浏览器关闭了 JS、或使用的是极老旧不支持 JS 的浏览器时，<noscript>内的内容会显示出来，保证用户能看到基础提示或内容，提升页面兼容性。- 注意事项：
href（Hypertext Reference）用于建立当前文档与外部资源的关联关系（浏览器不会暂停解析）src（Source）用于将外部资源嵌入 / 替换到当前文档中（浏览器会暂停解析直到资源加载执行完成）<title></title>、<base/>唯一且仅可放<head></head>；<meta/>、<link/>推荐仅放<head></head>（特殊场景可放<body></body>但不推荐）；<style></style>、<script></script>、<noscript></noscript>可放<head></head>或<body></body>且不同位置有对应最佳实践
3.2、元素划分
3.2.1、块级元素
核心特点
- 独占一行：无论内容多少，块级元素默认会占据父容器的整行空间，其后的元素会被挤到下一行显示；
- 可自定义宽高：能通过
width/height设置宽度和高度，默认宽度为父容器的 100%，高度由内容撑开； - 内外边距全生效：
margin（上下左右）、padding（上下左右）的设置都会完全生效，可通过内外边距调整元素位置和间距； - 可嵌套特性：支持嵌套其他块级元素或行内元素（部分块级元素有语义限制，如
p不能嵌套div等块级元素）； - 默认垂直排列：多个块级元素并列时，默认从上到下垂直排布。
本文中涉及的块级元素及场景特点
- 结构类（
html/head/body/title）：作为页面根结构，html包裹所有内容，head存非可视化元信息，body承载可视内容，均独占对应层级的整行空间； - 布局类（
div/header/nav/main/section/article/aside/footer等）：核心用于搭建页面布局，可自由设置宽高和边距，是页面结构的核心载体； - 文本类（
h1-h6/p/address/blockquote/pre）：h1-h6作为标题独占一行且自带默认上下间距，p段落默认上下留白，pre保留文本格式且独占一行； - 列表类（
ul/ol/dl/li/dt/dd）：ul/ol整体独占一行，li作为列表项默认垂直排列，dl/dt/dd组合形成自定义列表，均独占对应行； - 表格类（
table/caption/colgroup/thead/tbody/tfoot/tr）：table整体可设宽高，内部tr行独占表格一行，caption作为表格标题独占表格上方整行； - 表单类（
form/fieldset/legend/textarea/select/optgroup）：form包裹整个表单独占一行，textarea可设行列数（本质是宽高），select整体独占一行； - 其他（
hr/hgroup/details/dialog/search）：hr作为水平线独占一行且撑满父容器宽度，dialog弹窗默认独占页面层叠空间，可设宽高。
3.2.2、行内元素
核心特点
- 同行显示：不独占一行，能和其他行内元素、文本在同一行并列显示，宽度仅由自身内容（文字 / 嵌套行内元素）决定；
- 不可自定义宽高：设置
width/height无效，宽高完全由内容撑开，无法通过尺寸属性调整； - 内外边距有限生效：
padding/margin的水平方向（左 / 右）生效，垂直方向（上 / 下）仅会影响自身视觉位置，但不会推开周围元素（即不会改变其他元素的布局）； - 对齐特性：默认与基线（文字底部）对齐，可通过
vertical-align调整对齐方式； - 嵌套限制：仅能嵌套其他行内元素，不能嵌套块级元素（如
span不能嵌套div）。
本文中涉及的行内元素及场景特点
- 通用类（
span）：无语义的行内容器，仅用于包裹行内文本 / 元素，方便样式控制，宽高随内容变化； - 文本样式类（
strong/b/em/i/del/s/ins/u/sup/sub/mark）：仅修改文本样式（加粗 / 倾斜 / 删除线 / 上下标等），不改变行内显示特性，与其他文本同行； - 链接 / 引用类（
a/q/cite/abbr）：a超链接可跳转，同行显示且仅能通过padding/margin调整水平间距；q短引用自带引号，与文本同行； - 代码 / 标注类（
code/var/time/data）：code显示单行代码，time标注时间，均为行内显示，宽高由内容决定； - 表单相关（
label/output）：label绑定表单控件，与控件同行显示；output展示计算结果，行内排布； - 特殊行内（
br）：仅用于换行，无内容、无宽高，是行内元素中唯一强制换行的标签。
3.2.3、行内块元素
核心特点
-
兼具行内 + 块级特性：
- 行内特性：可与行内元素 / 文本同行显示，多个行内块元素可并列在同一行；
- 块级特性：能通过
width/height自定义宽高，margin/padding上下左右均完全生效；
-
默认对齐方式：默认与基线对齐（可通过
vertical-align调整为顶部 / 居中对齐）； -
空白间隙：多个行内块元素并列时，代码中的换行 / 空格会转化为页面上的空白间隙（需通过消除空格、设置父容器
font-size:0等方式解决）； -
宽高默认规则：未设置宽高时，宽度由内容 / 自身尺寸（如图片的原始尺寸）决定，高度同理。
本文中涉及的行内块元素及场景特点
- 媒体类（
img/video/audio）：img可设宽高且与文本同行显示（如图文混排），video/audio可自定义播放控件尺寸，同行排布时不独占一行； - 表单类（
input/button/progress/meter）：input各类输入框（文本 / 密码 / 单选 / 复选等）可设宽高，与label同行显示；button按钮可自定义尺寸，多个按钮可并列；progress进度条、meter度量条可设宽高，行内显示； - 表格类（
col/td/th）：td/th单元格可设宽高，且在表格行内并列显示；col定义列样式，行内块特性使其能适配表格列宽； - 其他（
datalist/option）：datalist配合input显示下拉提示，option作为下拉选项，均为行内块特性，可设尺寸且同行排布。
特殊标签（无行内 / 块级严格划分）：如 meta/link/style/script/base/noscript 等，属于元标签 / 资源标签，不参与页面布局渲染，无宽高、无行内 / 块级显示特性，仅用于提供页面元信息、加载外部资源（CSS/JS）等。
3.3、格式标签
3.3.1、基础格式标签
标题
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
每页只用一次<h1></h1>且尽量不超三个层级
段落
<p>这一段的内容</p>
换行
<br/>
<hr/>
3.3.2、进阶格式标签
加粗
<strong>加粗文本，推荐使用</strong>
<b>加粗文本</b>
倾斜
<em>倾斜文本，推荐使用</em>
<i>倾斜文本</i>
删除线
<del>删除线文本，推荐使用</del>
<s>删除线文本</s>
下划线
<ins>下划线文本，推荐使用</ins>
<u>下划线文本</u>
上下标
<sup>上标</sup>
<sub>下标</sub>
语义化标签
<!-- 1. 文本标注类 -->
<abbr title="HyperText Markup Language">HTML</abbr> <!-- 缩写/简称 -->
<address>北京市朝阳区XX路XX号 | 联系电话：123456789</address> <!-- 联系信息 -->
<blockquote cite="https://example.com">这是一段长引用内容，通常用于引用大段文本，会自动缩进。</blockquote> <!-- 长引用（带来源） -->
<q>这是短引用，浏览器自动添加引号。</q> <!-- 短引用 -->
<cite>《HTML权威指南》</cite> <!-- 作品标题（书籍/文章/影片等） -->
<!-- 2. 代码展示类 -->
<code>const num = 123;</code> <!-- 单行代码/代码片段 -->
<pre><code>
// 多行代码推荐嵌套pre（保留格式）
function sayHello() {
console.log("Hello World");
}
</code></pre>
<var>x</var> + <var>y</var> = <var>z</var> <!-- 变量/参数 -->
<time datetime="2026-03-01">2026年3月1日</time> <!-- 时间/日期（SEO友好） -->
<mark>重点高亮文本</mark> <!-- 标记/高亮文本 -->
<progress value="70" max="100">70%</progress> <!-- 进度条 -->
<meter value="80" min="0" max="100">80%</meter> <!-- 度量值（如评分/使用率） -->
3.4、盒子标签
块级盒子
<div><div>
行内盒子
<span></span>
语义盒子
<header></header>：定义网页 / 区块的页眉（包含 logo、导航、标题等）
<nav></nav>：定义页面导航链接区域（如主导航、侧边导航）
<main></main>：定义网页的核心 / 主要内容（一个页面仅一个）
<section></section>：定义文档中的独立内容区块（如新闻板块、产品模块）
<article></article>：定义独立完整的内容（如文章、评论、商品卡片）
<aside></aside>：定义页面主内容外的附属内容（如侧边栏、广告、相关推荐）
<footer></footer>：定义网页 / 区块的页脚（包含版权、联系方式、备案信息等）
<hgroup></hgroup>：组合多个标题（如 h1+h2），优化标题层级语义
<details></details>：定义可展开 / 折叠的详情面板（需配合 summary 使用）
<summary></summary>：定义 details 元素的可见标题（点击可展开 / 折叠详情）
<dialog></dialog>：定义弹窗 / 对话框（原生模态框，替代自定义弹窗的语义化标签）
<search></search>：定义页面的搜索区域（如搜索框 + 搜索按钮组合）
<data></data>：为内容添加机器可读的数值（如<data value="2026">2026年</data>）
<time></time>：定义时间 / 日期（含 datetime 属性，如<time datetime="2026-03-01">2026年3月1日</time>）
3.5、链接标签
<a href="" target="" title="" rel="" download="">点击跳转到示例网站</a>
href（必须）：指定链接的目标地址，决定点击后跳转到哪里- 绝对 URL：
<a href="https://www.baidu.com">百度</a>（跳转到外部网站） - 相对 URL：
<a href="./about.html">关于我们</a>（跳转到站内页面） - 页面锚点：
<a href="#top">回到顶部</a>（跳转到页面内 id="top" 的元素） - 邮箱：
<a href="mailto:xxx@example.com">联系我们</a>（唤起邮箱客户端） - 电话：
<a href="tel:123456789">拨打电话</a>（移动端唤起拨号盘） - 下载文件：
<a href="file.pdf" download>下载PDF</a>（触发文件下载）；可自定义文件名：<a href="file.pdf" download="我的PDF.pdf">下载PDF</a> - 空链接：
<a href="javascript:void(0)">无跳转链接</a>（仅绑定点击事件，不跳转）
- 绝对 URL：
target（可选）：指定链接在哪个窗口 / 框架中打开_self（默认）：在当前窗口打开链接_blank：在新标签页打开链接（开发中建议搭配rel="noopener noreferrer"防安全问题）_parent：在父框架中打开（框架页面使用）_top：在顶层窗口打开（突破所有框架嵌套）
title（可选）：鼠标悬停在链接上时显示提示文本，提升用户体验；示例：<a href="about.html" title="查看关于我们的详细信息">关于我们</a>rel（可选）：定义当前文档与目标链接的关系，提升语义和安全性noopener noreferrer：搭配target="_blank"使用，防止新页面获取当前页面 window 对象，避免安全漏洞nofollow：告诉搜索引擎 “不要追踪此链接”（如用户生成的外链、广告链接）
download（可选）：触发链接目标的下载行为（而非在线预览 / 跳转），仅对同源文件生效；跨域文件需后端配合才能强制下载
3.6、超媒体标签
图片
<img src="" alt="" title="" loading=""/>
src（必须）：指定图片的资源地址- 绝对 URL：
<img src="https://example.com/image.jpg" alt="示例图"> - 相对 URL：
<img src="./images/avatar.png" alt="头像"> - Base64 格式：
<img src="data:image/png;base64,..." alt="小图标">
- 绝对 URL：
alt（必须）：图片加载失败时的替代文本，提升可访问性title（可选）：鼠标悬停显示的提示文本loading（可选）：控制图片加载策略，优化性能eager（默认）：页面加载时立即加载lazy：图片进入视口时加载（懒加载）；示例：<img src="long-page-img.jpg" alt="长页面图" loading="lazy">
视频
<video src="" controls autoplay muted loop poster="" preload=""></video>
src（必须）：指定视频的资源地址- 绝对 URL：
<video src="https://example.com/video.mp4" controls></video> - 相对 URL：`
- 绝对 URL：
controls（可选）：显示浏览器默认的视频控制栏（播放 / 暂停 / 进度 / 音量等）；必加，否则无法操作视频autoplay（可选）：页面加载后自动播放视频；注：多数浏览器要求搭配muted才能生效muted（可选）：默认静音播放视频；常配合autoplay使用，示例：<video src="demo.mp4" autoplay muted controls></video>loop（可选）：视频播放完毕后自动循环播放poster（可选）：视频加载完成前显示的封面图；示例：<video src="demo.mp4" poster="./images/cover.jpg" controls></video>preload（可选）：控制视频预加载策略，优化性能none（默认）：不预加载任何内容metadata：仅预加载视频元数据（时长 / 尺寸等）auto：页面加载时预加载整个视频
音频
<audio src="" controls autoplay muted loop preload=""></audio>
src（必须）：指定音频的资源地址- 绝对 URL：
<audio src="https://example.com/music.mp3" controls></audio> - 相对 URL：
<audio src="./audios/background.mp3" controls></audio>
- 绝对 URL：
controls（可选）：显示浏览器默认的音频控制栏（播放 / 暂停 / 进度 / 音量等）；必加，否则无法操作音频autoplay（可选）：页面加载后自动播放音频；需搭配muted才能在多数浏览器生效muted（可选）：默认静音播放音频；示例：<audio src="background.mp3" autoplay muted loop></audio>loop（可选）：音频播放完毕后自动循环播放preload（可选）：控制音频预加载策略none（默认）：不预加载任何内容metadata：仅预加载音频元数据（时长 / 比特率等）auto：页面加载时预加载整个音频
3.7、表格标签
<!-- <table></table>：定义表格，核心属性说明：
border：设置表格边框宽度（像素）
cellpadding：单元格内边距
cellspacing：单元格之间的间距
width：表格整体宽度（100%表示占满容器） -->
<table border="1" cellpadding="8" cellspacing="0" width="100%">
<!-- <caption></caption>：定义表格标题，提升语义和可读性 -->
<caption>2026年员工销售业绩表（含跨列/跨行）</caption>
<!-- <colgroup></colgroup>：列组，用于统一管理列的样式 -->
<colgroup>
<!-- <col/>：定义单列样式，style设置列宽和背景色 -->
<col style="width: 15%; background-color: #f0f0f0;" />
<col style="width: 25%;" />
<!-- <col/>的span属性：设置样式作用范围，span="2"表示该样式应用到2列（第3、4列），统一设置列宽和文字颜色 -->
<col span="2" style="width: 20%; color: #333;" />
<col style="width: 20%;" />
</colgroup>
<!-- <thead></thead>：表格表头区域，语义化区分表头和主体 -->
<thead>
<!-- <tr></tr>：定义表格行 -->
<tr>
<!-- <th></th>：表头单元格，默认加粗居中，用于列标题 -->
<th>工号</th>
<th>姓名</th>
<th>部门</th>
<th>销售额（元）</th>
<th>排名</th>
</tr>
</thead>
<!-- <tbody></tbody>：表格主体区域，存放核心数据 -->
<tbody>
<tr>
<!-- <td></td>：数据单元格，存放具体数据 -->
<td>001</td>
<td>张三</td>
<!-- <td></td>的rowspan属性：单元格跨行合并，rowspan="2"表示该单元格占据2行（视觉上合并2行单元格） -->
<td rowspan="2">销售一部</td>
<td>120000</td>
<td>1</td>
</tr>
<tr>
<td>003</td>
<td>王五</td>
<!-- 因上方<td></td>设置rowspan="2"，此处省略部门列，避免结构重复 -->
<td>85000</td>
<td>3</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>销售二部</td>
<td>98000</td>
<td>2</td>
</tr>
</tbody>
<!-- <tfoot></tfoot>：表格表注/汇总区域，存放总计、备注等内容 -->
<tfoot>
<tr>
<!-- <td></td>的colspan属性：单元格跨列合并，colspan="3"表示该单元格占据3列（视觉上合并3列单元格） -->
<td colspan="3">总计</td>
<td>303000</td>
<td>—</td>
</tr>
</tfoot>
</table>
3.8、列表标签
无序列表
<!--
<ul></ul>：定义无序列表
type：设置列表项符号样式（可选，推荐用CSS替代）
- disc：实心圆点（默认）
- circle：空心圆点
- square：实心方块
-->
<ul type="square">
<!-- <li></li>：定义列表项，<ul>的直接子元素只能是<li> -->
<li>HTML基础</li>
<li>CSS样式</li>
<li>JavaScript交互</li>
</ul>
有序列表
<!--
<ol></ol>：定义有序列表
type：设置编号类型（可选）
- 1：数字（默认）
- A：大写字母
- a：小写字母
- I：大写罗马数字
- i：小写罗马数字
start：设置起始编号（默认从1开始）
-->
<ol type="A" start="3">
<!-- <li></li>：定义列表项，<ol>的直接子元素只能是<li> -->
<li>准备开发环境</li>
<li>编写HTML结构</li>
<li>添加CSS样式</li>
<li>实现JavaScript交互</li>
</ol>
自定义列表
<!--
<dl></dl>：定义描述列表（自定义列表）
<dt></dt>：定义术语/名称（列表项的标题）
<dd></dd>：定义术语的描述/值（对标题的解释）
注意：一个<dt></dt>可以对应多个<dd></dd>，用于对同一术语进行多条描述
-->
<dl>
<dt>HTML</dt>
<dd>超文本标记语言，用于构建网页结构</dd>
<dd>由一系列标签组成，定义页面内容</dd>
<dt>CSS</dt>
<dd>层叠样式表，用于美化网页布局</dd>
<dt>JavaScript</dt>
<dd>脚本语言，用于实现网页交互效果</dd>
</dl>
3.9、表单标签
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>表单综合示例</title>
</head>
<body>
<!--
<form></form>：定义供用户输入的HTML表单，用于收集并提交数据
action：表单数据提交的目标URL
method：提交方式（get/post）
-->
<form action="/submit-form" method="post">
<!--
<fieldset></fieldset>：对表单中的相关元素进行分组，提升结构可读性
<legend></legend>：定义<fieldset>元素的标题，说明分组内容
-->
<fieldset>
<legend>用户注册信息</legend>
<!--
<label></label>：定义<input>元素的标注，提升可访问性
for：与对应<input>的id属性关联，点击标签可聚焦输入框
-->
<label for="username">用户名：</label>
<!--
<input/>：HTML表单核心输入控件（自闭合标签）
核心属性说明：
1. type（核心）：输入类型（HTML5全量有效值，按功能分类）
▶ 基础文本类（最常用）：
- text：单行文本输入框（默认值，无格式限制）
- password：密码输入框（输入内容以圆点/星号隐藏）
- email：邮箱输入框（自带邮箱格式校验，移动端唤起邮箱键盘）
- search：搜索框（部分浏览器显示清除按钮，样式优化）
- tel：电话号码输入框（移动端唤起数字键盘，无格式校验）
- url：网址输入框（自带URL格式校验，要求含http/https）
▶ 数字/数值类：
- number：纯数字输入框（自带增减按钮，可配合min/max/step限制范围）
- range：滑块控件（用于模糊数值选择，需JS获取实时值）
▶ 日期/时间类（浏览器原生选择器）：
- date：日期选择器（年-月-日，本地化显示）
- time：时间选择器（时:分，24小时制）
- datetime-local：本地日期时间选择器（年-月-日 时:分，无时区）
- month：月份选择器（年-月，用于按月份筛选）
- week：周选择器（年-第X周，用于按周筛选）
▶ 选择类：
- checkbox：复选框（多选项，同name为一组，可多选）
- radio：单选框（互斥选项，同name为一组，仅能选一个）
▶ 文件/媒体类：
- file：文件上传控件（accept限制文件类型，multiple允许多选）
▶ 按钮类：
- button：普通按钮（无默认行为，需绑定onclick等JS事件）
- submit：表单提交按钮（点击自动提交form表单数据）
- reset：表单重置按钮（点击清空当前表单所有输入值）
- image：图像提交按钮（用图片替代提交按钮，点击提交表单并返回坐标）
▶ 特殊类型：
- hidden：隐藏域（不显示在页面，用于存储后台需要的参数）
- color：颜色选择器（原生取色器，返回十六进制颜色值）
2. id：唯一标识（必填，用于<label>关联/JS获取元素）
3. name：提交字段名（必填，无name则数据无法提交到后台）
4. placeholder：输入提示文本（浅灰色，输入内容后消失）
5. required：必填校验（布尔属性，表单提交前校验，为空则提示）
补充：可配合min/max（数值/日期范围）、step（步长）、disabled（禁用）等属性
-->
<!-- 1. 基础文本类示例 -->
<input type="text" id="username" name="username" placeholder="请输入用户名" required />
<br /><br />
<label for="password">密码：</label>
<input type="password" id="password" name="password" placeholder="请输入密码" required />
<br /><br />
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" placeholder="请输入邮箱" required />
<br /><br />
<label for="search">search（搜索框）：</label>
<input type="search" id="search" name="search" placeholder="请输入搜索内容" />
<br /><br />
<label for="tel">tel（电话号码）：</label>
<input type="tel" id="tel" name="tel" placeholder="请输入手机号" />
<br /><br />
<label for="url">url（网址）：</label>
<input type="url" id="url" name="url" placeholder="请输入网址（如https://）" />
<br /><br />
<!-- 2. 数字/数值类示例 -->
<label for="num1">number（数字1）：</label>
<input type="number" id="num1" name="num1" value="5" min="0" max="100" step="1" oninput="calculateSum()" />
<label for="num2">number（数字2）：</label>
<input type="number" id="num2" name="num2" value="3" min="0" max="100" step="1" oninput="calculateSum()" />
<label>两数之和：</label>
<output name="sum" for="num1 num2">8</output>
<br /><br />
<label for="range">range（滑块，当前值：）</label>
<input type="range" id="range" name="range" min="0" max="100" step="5" value="50" />
<span id="rangeValue">50</span>
<br /><br />
<!-- 3. 日期/时间类示例 -->
<label for="date">date（日期选择）：</label>
<input type="date" id="date" name="date" />
<br /><br />
<label for="time">time（时间选择）：</label>
<input type="time" id="time" name="time" />
<br /><br />
<label for="datetime-local">datetime-local（本地日期时间）：</label>
<input type="datetime-local" id="datetime-local" name="datetime-local" />
<br /><br />
<label for="month">month（月份选择）：</label>
<input type="month" id="month" name="month" />
<br /><br />
<label for="week">week（周选择）：</label>
<input type="week" id="week" name="week" />
<br /><br />
<!-- 4. 选择类示例 -->
<label>checkbox（复选框-兴趣爱好）：</label>
<input type="checkbox" id="hobby1" name="hobby" value="coding" />
<label for="hobby1">编程</label>
<input type="checkbox" id="hobby2" name="hobby" value="reading" />
<label for="hobby2">阅读</label>
<br /><br />
<label>radio（单选框-性别）：</label>
<input type="radio" id="gender1" name="gender" value="male" checked />
<label for="gender1">男</label>
<input type="radio" id="gender2" name="gender" value="female" />
<label for="gender2">女</label>
<br /><br />
<!-- 5. 文件/媒体类示例 -->
<label for="file">file（文件上传，仅图片）：</label>
<input type="file" id="file" name="file" accept="image/png,image/jpg" multiple />
<br /><br />
<!-- 6. 按钮/特殊类示例 -->
<input type="button" value="button（普通按钮）" onclick="alert('点击了普通按钮')" />
<input type="submit" value="submit（提交按钮）" />
<input type="reset" value="reset（重置按钮）" />
<label>image（图像提交按钮）：</label>
<input type="image" src="https://img.icons8.com/fluency/48/000000/send.png" alt="提交按钮" width="40"
height="40" />
<input type="hidden" id="hidden" name="user_id" value="10086" />
<label for="color">color（颜色选择）：</label>
<input type="color" id="color" name="theme_color" value="#ff0000" />
<br /><br />
<!--
<textarea></textarea>：定义多行的文本输入控件
rows：显示的行数
cols：显示的列数
placeholder：输入提示文本
-->
<label for="intro">个人简介：</label><br />
<textarea id="intro" name="intro" rows="4" cols="50" placeholder="请介绍一下自己"></textarea>
<br /><br />
<!--
<select></select>：定义下拉列表
<optgroup></optgroup>：定义下拉列表中相关选项的分组
<option></option>：定义下拉列表中的选项
value：提交时的选项值
selected：设置为默认选中项
-->
<label for="city">所在城市：</label>
<select id="city" name="city">
<optgroup label="一线城市">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
</optgroup>
<optgroup label="新一线城市">
<option value="hangzhou" selected>杭州</option>
<option value="chengdu">成都</option>
</optgroup>
</select>
<br /><br />
<!--
<datalist></datalist>：规定输入控件的预定义选项列表
配合<input/>的list属性使用，输入时会显示匹配的选项提示
-->
<label for="hobby_text">兴趣爱好（带提示）：</label>
<input type="text" id="hobby_text" name="hobby_text" list="hobby-options" placeholder="输入后可选择提示项" />
<datalist id="hobby-options">
<option value="编程"></option>
<option value="阅读"></option>
<option value="运动"></option>
<option value="音乐"></option>
</datalist>
<br /><br />
<!--
<button></button>：定义可点击的按钮（双标签，支持嵌套内容）
type：按钮类型
- submit：提交表单（默认）
- reset：重置表单
- button：普通按钮，需绑定JS事件
-->
<button type="submit">提交注册</button>
<button type="reset">重置表单</button>
</fieldset>
</form>
<script>
// 计算两数之和并更新<output>
function calculateSum() {
const num1 = parseFloat(document.getElementById('num1').value) || 0;
const num2 = parseFloat(document.getElementById('num2').value) || 0;
document.querySelector('output[name="sum"]').textContent = num1 + num2;
}
// 实时显示range滑块值
const range = document.getElementById('range');
if (range) {
const rangeValue = document.getElementById('rangeValue');
range.oninput = function () {
rangeValue.textContent = this.value;
};
}
</script>
</body>
</html>
四、Emmet语法
<!-- 一、HTML结构快速生成 -->
1. 基础标签：输入标签名+Tab键
- 例：p → <p></p>
- 例：div → <div></div>
2. 多标签批量创建：标签名*数量+Tab键
- 例：span*5 → 生成5个<span></span>
- 例：li*4 → 生成4个<li></li>
3. 父子级关系标签：父标签>子标签+Tab键
- 例：nav>ul>li → <nav><ul><li></li></ul></nav>
- 例：div>h3 → <div><h3></h3></div>
4. 兄弟级关系标签：标签1+标签2+Tab键
- 例：h2+p+div → <h2></h2><p></p><div></div>
- 例：header+main+footer → <header></header><main></main><footer></footer>
5. 带类名/ID的标签：.类名 或 #ID+Tab键
- 例：.box → <div class="box"></div>
- 例：#header → <div id="header"></div>
- 例：p.text → <p class="text"></p>
6. 有序类名标签：.类名$*数量+Tab键
- 例：.item$*3 → <div class="item1"></div><div class="item2"></div><div class="item3"></div>
7. 标签内带固定内容：标签名{内容}+Tab键
- 例：a{首页} → <a href="">首页</a>
- 例：button{提交} → <button>提交</button>
8. HTML5标准文档模板：!+Tab键
- 例：! → <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body></body></html>
9. 标签分组创建：(分组内容)+Tab键
- 例：(div>h2+p)+(section>ul>li) → <div><h2></h2><p></p></div><section><ul><li></li></ul></section>
10. 带自定义属性的标签：标签名[属性=值]+Tab键
- 例：img[src="pic.jpg" alt="示例图片" width="300"] → <img src="pic.jpg" alt="示例图片" width="300">
- 例：a[href="https://www.example.com" target="_blank"] → <a href="https://www.example.com" target="_blank"></a>
11. 文本自增标签：标签名{内容$}*数量+Tab键
- 例：li{列表项$}*4 → <li>列表项1</li><li>列表项2</li><li>列表项3</li><li>列表项4</li>
12. 省略div标签（默认生成div）：直接写类名/ID+Tab键
- 例：.container → <div class="container"></div>
- 例：#content → <div id="content"></div>
<!-- 二、CSS样式快速生成 -->
1. 宽度：w数值+Tab键
- 例：w200 → width: 200px;
- 例：w50% → width: 50%;
2. 高度：h数值+Tab键
- 例：h100 → height: 100px;
- 例：hauto → height: auto;
3. 行高：lh数值+Tab键
- 例：lh26px → line-height: 26px;
- 例：lh1.5 → line-height: 1.5;
4. 内边距：p数值（或pt/pl/pr/pb+数值）+Tab键
- 例：p10 → padding: 10px;
- 例：pt20 → padding-top: 20px;
- 例：pl15 → padding-left: 15px;
5. 外边距：m数值（或mt/ml/mr/mb+数值）+Tab键
- 例：m15 → margin: 15px;
- 例：mt30 → margin-top: 30px;
- 例：mr10 → margin-right: 10px;
6. 字体大小：f数值+Tab键
- 例：f16 → font-size: 16px;
- 例：f1.2rem → font-size: 1.2rem;
7. 文本颜色：c颜色值+Tab键
- 例：c#333 → color: #333;
- 例：c#fff → color: #fff;
- 例：crgb(255,0,0) → color: rgb(255, 0, 0);
8. 背景相关：bgc颜色值（或bgurl路径）+Tab键
- 例：bgc#f5f5f5 → background-color: #f5f5f5;
- 例：bgcwhite → background-color: white;
- 例：bgurl("bg.jpg") → background: url("bg.jpg");
9. 边框：bd数值+样式+颜色（或bdt/bdl/bdr/bdb+数值+样式+颜色）+Tab键
- 例：bd1px solid #ccc → border: 1px solid #ccc;
- 例：bdt2px dashed red → border-top: 2px dashed red;
10. 圆角：br数值+Tab键
- 例：br5px → border-radius: 5px;
- 例：br50% → border-radius: 50%;
11. 定位：posa/posr/posf+Tab键
- 例：posa → position: absolute;
- 例：posr → position: relative;
- 例：posf → position: fixed;
12. 浮动：fl/fr+Tab键
- 例：fl → float: left;
- 例：fr → float: right;
13. 显示模式：dib/dn/df/di+Tab键
- 例：dib → display: inline-block;
- 例：dn → display: none;
- 例：df → display: flex;
- 例：di → display: inline;
14. 弹性布局：jc-属性/ai-属性/flex数值+Tab键
- 例：jc-center → justify-content: center;
- 例：jc-between → justify-content: space-between;
- 例：ai-center → align-items: center;
- 例：flex1 → flex: 1;
15. 字体粗细：fw数值/fwbold/fwnormal+Tab键
- 例：fw600 → font-weight: 600;
- 例：fwbold → font-weight: bold;
- 例：fwnormal → font-weight: normal;
16. 文本对齐：ta-center/ta-left/ta-right+Tab键
- 例：ta-center → text-align: center;
- 例：ta-left → text-align: left;
- 例：ta-right → text-align: right;
<!-- 三、VSCode代码格式化操作 -->
1. 手动格式化：使用快捷键
- 例：shift+alt+f（选中代码或直接按，快速统一代码格式）
2. 自动保存格式化：通过设置开启
- 操作路径：文件 → 首选项 → 设置
- 搜索关键词：emmet.include
- 配置代码（添加到settings.json的「工作区设置」）：
"editor.formatOnType": true, // 输入时自动格式化
"editor.formatOnSave": true // 保存文件时自动格式化
