就在我打开文档准备写这篇东西的时候，后台还躺着几条新消息：有人问“HTML怎么制作”，有人把自己写的<!DOCTYPE html><html lang="zh-cn">一整段贴过来问为什么页面是空白的，还有人在问“HTML是不是很难”。这些问题我在不同地方见过太多次了。HTML可能是整个技术领域里门槛最低、但又被误解得最凶的一个东西。很多人把它当成需要付费软件才能打开的工程文件，也有人以为必须先学会编程才能碰它，结果学了两天就被各种概念劝退。
这篇不是标签字典，也不会给你罗列几百个标签让你背。我想带你从头走一遍“制作HTML网页”的真实流程：先弄清楚HTML在网页技术链里到底是个什么角色，然后把开发环境搭起来，逐行看懂一份标准文档，再把手上的标签拼成能用的小页面，最后把新手大概率会踩的坑提前排掉。不管你是要交网页设计作业、给朋友做个生日祝福页，还是认真想往前端开发方向走，这条路都适用。
1. 网页是怎么被浏览器拼出来的：HTML在技术栈里的位置
1.1 HTML不是编程语言，而是一份"内容结构说明书"
很多人第一次听到“超文本标记语言”这个全称就被吓到了，其实拆开看没什么神秘的。“超文本”指的是页面里除了文字还有图片、链接、视频这些东西；“标记”才是核心——用一堆尖括号标签告诉浏览器，哪部分是标题、哪部分是段落、哪部分是一张图。
浏览器拿到HTML文件后做的事，本质上就是“照着说明书拼页面”。你在页面上看到的所有内容，追根溯源都是HTML标签在告诉浏览器“这里放一个标题”“这里放一个按钮”“这里放一张图片”。HTML本身没有任何逻辑判断能力，它不会算数、不会做判断，所以它不叫编程语言，它的定位是“内容结构说明书”。
拿超市货架来类比最直观：HTML是货架本身和商品标签，告诉顾客“这里是饮料区，这里是零食区”；而后面会讲到的CSS是货架的装修风格，JavaScript则是那个能根据顾客需求自动调整商品位置的服务员。
1.2 HTML、CSS、JavaScript三方分工
这三个东西经常被一起提起，导致很多新手分不清边界。我建议你从一开始就建立这样一个心智模型：
- HTML：负责内容和结构。页面有哪些板块、每个板块里有什么，都由它定义。
- CSS：负责表现和样式。颜色、大小、间距、布局、动画，都是它的活。
- JavaScript：负责行为和交互。点击按钮弹出提示、滚动加载更多、提交表单前的校验，都靠它。
用盖房子来类比就是：HTML是承重墙和户型结构，CSS是外墙瓷砖和室内装修，JavaScript是房子里水电开关这些能“动”的东西。很多新手一上来就急着学JavaScript，结果连html标签的嵌套关系都没搞明白，写出来的交互代码连要操作哪个元素都定位不到。所以不管你的目标是什么，先把HTML这块地基打牢。
1.3 学会HTML之后到底能做什么
搜索引擎里那些高频词——html网页制作、html静态页面开发、html综合项目实战——已经说明答案了。纯HTML加一点CSS和JavaScript，你就能做：
- 个人简历主页或作品集页面
- 节日祝福页（生日、教师节这类场景在热搜里常年有需求）
- 产品介绍静态页
- 邮件模板（很多人都不知道，大部分营销邮件的正文就是用HTML写的）
- 简单的交互demo（比如红绿灯模拟、倒计时、计算器）
要注意的是，HTML能做的是“静态页面”——内容写死，不跟你数据库打交道。如果一个页面需要根据用户登录状态显示不同内容、需要从服务器拉取数据，那就得引入后端技术了。但即便做动态网站，前端那层HTML也绕不开。
2. 开工前的两件套：编辑器选型与项目文件结构
2.1 为什么我推荐VS Code，而不是记事本
先说结论：直接装 VS Code，它是目前做HTML开发最主流的编辑器，免费、跨平台，Windows和Linux都能用，对应了不少人搜的“ubuntu的html编辑器”这类问题。为什么不建议用系统自带的记事本？因为记事本没有语法高亮，标签不自动补全，括号不帮你配对，等你写了几十行代码之后，连找“这个div到哪结束”都会想哭。
VS Code真正拉开差距的是插件生态。装好之后先补三个插件：
- Live Server：本地起一个开发服务器，你保存文件，浏览器自动刷新，做页面调试的效率能提升一个档次。
- Auto Rename Tag：修改开始标签时自动同步修改结束标签，减少低级错误。
- Prettier - Code formatter：自动格式化代码，统一缩进和引号风格。
初次打开VS Code，按Ctrl+Shift+X打开扩展商店，搜名字安装就行。如果你只是临时想写个小片段，也可以直接用在线工具，比如JSBin或者CodePen，输代码即时出效果，适合验证单段代码。
2.2 浏览器开发者工具是给谁用的
编辑器写代码，浏览器看效果，中间还有个必须养成的习惯——用开发者工具看“幕后”。Chrome或Edge里按F12，或者右键页面选择“检查”，就会打开开发者工具面板。你至少要先认识三个标签页：
- Elements（元素）：查看页面渲染出来的HTML结构，实时修改样式看效果。新手排查布局问题基本都靠它。
- Console（控制台）：JavaScript跑出来的日志和报错都显示在这里。你写的代码如果有语法错误，这里会给出具体行号。
- Network（网络）：查看页面加载了哪些资源、哪些文件加载失败。CSS样式不生效、图片不显示时，来这里看一眼最直接。
很多新人问“为什么我的页面效果不对”，我第一句话都是“你先看控制台报什么错”。养成“先看报错再动手改”的习惯，比多背十个标签有用得多。
2.3 项目文件结构：从一开始就规规矩矩
写一个独立的HTML单页，你可能只需要一个index.html文件。但只要项目稍微复杂一点，我建议你从一开始就用规范的目录结构：
my-project/ ├── index.html ├── css/ │ └── style.css ├── js/ │ └── main.js └── images/index.html这个名字有特殊含义：当服务器访问一个目录时，默认会去找这个文件，所以它是整个站点的入口。CSS文件放css目录、JavaScript文件放js目录、图片放images目录，各司其职。等你在HTML里引用这些外部资源时，路径也不会乱。
路径这块顺便说一下基础知识。HTML里引用外部文件有两种写法：相对路径和绝对路径。相对路径是从当前文件出发找目标，比如在index.html里写css/style.css，意思是在当前目录下找css文件夹里的style.css；绝对路径则是完整的网址或本地完整路径。自己的项目内部文件一律用相对路径，这样把整个文件夹拷到别的地方也不会失效。
3. 第一份HTML文档：标准骨架逐行拆解
3.1 别急着写标签，先建一份最简骨架
如果你在搜索引擎里看过html相关的高频词，会发现大量结果都以同一段代码开头：<!DOCTYPE html><html lang="zh-cn"><head>...。这不是巧合，这就是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> <h1>你好，世界</h1> <p>这是我用HTML制作的第一个页面。</p> </body> </html>把这段代码保存成一个index.html文件，双击用浏览器打开，你就能看到一个最简单的网页。注意：保存时文件后缀必须是.html或.htm，不是.txt。如果文件图标还是文本文件的样子，大概率是系统把后缀隐藏了，需要在资源管理器里打开“显示文件扩展名”再检查一下。
3.2 head区域里每一行到底在干什么
很多新手复制骨架时只知道照抄，完全不理解为什么要有这些行。我逐行解释一遍，因为理解了之后你才不会乱删。
第一行<!DOCTYPE html>是文档类型声明。它的作用不是定义HTML标签，而是告诉浏览器“请用现代标准模式解析这个页面”。历史原因导致旧浏览器存在“怪癖模式”和“标准模式”之分，不写这一行可能让布局渲染变得不可预测。现代浏览器默认行为已经很规范，但这行依然是标准写法。
<html lang="zh-CN">里的lang属性声明页面语言。zh-CN代表中国大陆地区的简体中文。这个属性的实际用处比想象中大：浏览器翻译插件会据此判断要不要提示翻译，屏幕阅读器会据此选择正确的朗读方式，搜索引擎也需要它来理解页面内容语言。如果你只是练习，写zh-CN就行。
<meta charset="UTF-8">是字符编码声明。UTF-8 是目前最通用的编码格式，能覆盖全球几乎所有文字。如果这行缺失或者写错，中文会出现乱码——很多新手一上来就遇到“页面全是问号”的问题，就是这个原因。VS Code默认按UTF-8保存文件，所以只要你声明了UTF-8，基本不会乱码。
<meta name="viewport" content="width=device-width, initial-scale=1.0">这行负责移动端适配。没有它，手机浏览器会按桌面端的宽度渲染整个页面，然后整体缩放，字小得像蚂蚁。加了它，页面宽度会跟随设备宽度。这行在纯桌面练习时看不出差别，但一旦你要做能手机访问的页面，它就是标配。
<title>我的第一个网页</title>则定义了浏览器标签页上显示的文字，同时也是搜索引擎结果里显示的标题。它虽然写在head里，但直接影响用户体验和SEO，不能省。
3.3 body区域的可见内容与注释的习惯
<body>标签里放的是页面可见内容。刚才示例里的<h1>是一级标题，<p>是段落，这两个后面会细讲。
再补充一个写代码时非常重要的习惯——注释。HTML注释的写法是：
<!-- 这是注释，浏览器不会显示它 -->注释是写给开发者自己看的。新手写代码不喜欢注释，过两周回来看自己的文件，完全想不起来当时某段结构干嘛用的。我的建议是：在写大区块之前先写一行注释标明用途，比如<!-- 顶部导航栏开始 -->、<!-- 商品列表区域 -->，这样文件结构一目了然，调bug的时候也能快速定位区域。
另外，不管用哪个编辑器，写HTML一定要保持缩进。每嵌套一层标签就缩进两个空格或一个Tab。这段代码对浏览器来说缩进不缩进都一样，但对你和维护你代码的人来说，缩进就是生命线。
4. 高频标签实战：文字、链接、表格与表单一次学到位
4.1 文本与区块标签的分工
HTML标签数量看着多，但日常开发高频使用的就二三十个，剩下的遇到再去查。先解决最常用的文本和区块标签。
标题标签h1到h6定义了六级标题，重要性逐级递减。一个规范页面一般只有一个h1，通常是页面主标题或Logo，不要为了字大就滥用h1。段落标签p用于普通的文字段落。strong表示重要文字，默认加粗；em表示强调，默认斜体。换行用br，注意它是自闭合标签，不需要结束标签。水平分割线用hr，一般是用来分隔内容区块的，现在更多被CSS边框替代。
区块这块，div是一个无语义的通用容器，用来把一组元素包起来便于整体布局。span则是行内容器，常用于在一段文字里单独给某几个字设置样式。举个例子：
<div class="intro"> <p>这是介绍段落，<span style="color: red;">这一小段文字</span>会有单独的样式。</p> </div>除了div，HTML5还提供了语义化标签：<header>定义页头，<nav>定义导航，<main>定义主体内容，<section>定义章节，<footer>定义页脚。这些标签和div的作用一样都是容器，但带了“名字”，开发者一看就知道这块是干嘛的，搜索引擎也更容易理解页面结构。能用语义化标签的地方，不要都堆div。
4.2 链接与图片：让页面不再是孤岛
一个网页之所以叫“超文本”，关键就在于它可以跳转。链接用<a>标签：
<a href="https://example.com" target="_blank">访问示例网站</a>href是目标地址，target="_blank"表示在新标签页打开。做页面内跳转时，href可以写成#id名，点击后会滚动到页面里对应id的元素位置，这个技巧在后面做“返回顶部”时会用到。
图片用<img>标签：
<img src="images/photo.jpg" alt="一张风景照片">src是图片路径，alt是图片无法显示时替代文字。alt不仅能帮助视障用户理解内容，也有利于SEO。我见过不少新手不写alt，页面加载失败时图片位置只留一个破图标，用户完全不知道这原本是什么内容。图片路径写相对路径，图片放项目文件夹里的images目录。
4.3 表格：数据展示的标准姿势
表格对应的关键词在热搜里常年有，说明这确实是新手的痛点。HTML表格的基础结构是“表格、行、单元格”三层：
<table border="1"> <thead> <tr> <th>姓名</th> <th>分数</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>92</td> </tr> <tr> <td>李四</td> <td>87</td> </tr> </tbody> </table><table>定义表格，<tr>定义一行，<th>是表头单元格，<td>是普通单元格。<thead>、<tbody>分别表示表头和主体，分组之后样式控制更方便。
合并单元格经常让新手卡壳。colspan让一个单元格横向跨多列，rowspan让它纵向跨多行：
<tr> <td colspan="2">这一格横跨两列</td> </tr>有个历史教训我必须提一下：很多年前前端开发者流行用表格做整个页面布局，因为当时CSS还不成熟。现在千万别这么干，表格的渲染性能差、响应式适配麻烦，它只适合展示真正的二维数据，页面布局交给CSS。
4.4 表单：输入控件与标签的正确搭配
表单是用户和页面交互的最基础形式，也是很多新手从“看”转向“写”的关键节点。一个最简单的登录表单长这样：
<form action="/login" method="post"> <div> <label for="username">用户名</label> <input type="text" id="username" name="username"> </div> <div> <label for="password">密码</label> <input type="password" id="password" name="password"> </div> <button type="submit">登录</button> </form>form标签有两个关键属性：action是表单提交的目标地址，method是提交方式。GET会将数据拼在URL后面，适合搜索这类不敏感的场景；POST会将数据放在请求体里，适合登录、注册这类有数据修改和敏感信息的场景。
input的type属性决定了控件形态：text是单行文本，password是密文输入，email会做邮箱格式校验，radio是单选按钮，checkbox是多选复选框，file是文件上传。label的for属性要跟对应input的id一致，这样点击文字就能聚焦到输入框，这个细节对提升用户体验非常重要。
下拉选择用select，多行文本用textarea，提交按钮用button type="submit"。关于表单提交后的跳转，我在第7章会专门讲。
这里有一张速查表，可以收藏着用：
| 标签 | 作用 | 关键属性 |
|---|---|---|
<a> | 超链接 | href、target |
<img> | 图片 | src、alt |
<table> | 表格容器 | 无 |
<tr> | 表格行 | 无 |
<th>/<td> | 表头/单元格 | colspan、rowspan |
<form> | 表单容器 | action、method |
<input> | 输入控件 | type、name、id |
<label> | 控件说明文字 | for |
<select> | 下拉框 | name |
<textarea> | 多行文本 | name |
5. 结构、表现、行为分离：CSS与JavaScript的接入方式
5.1 CSS三种引入方式：行内、内部、外部
写出来的HTML默认是白底黑字、从上往下排列的纯文档流，要让它变得好看，就得引入CSS。CSS引入有三种方式，我在项目里对它们的取舍很明确。
第一种是行内样式，直接写在标签的style属性里：
<p style="color: red; font-size: 20px;">这段文字是红色</p>这种方式生效最快，但不推荐在项目里使用。因为样式和结构混在一起，改一个颜色得去HTML文件里翻；同一套样式想复用，只能复制粘贴，维护成本极高。它适合什么场景呢？临时调试，或者邮件模板里少数不能外链样式的场景。
第二种是内部样式表，写在<head>里的<style>标签中：
<head> <style> p { color: red; } </style> </head>这种方式适合单个HTML文件的demo，比如你要做一个带完整样式的单页小案例，比如生日祝福页，把所有代码塞进一个文件里发给别人，打开就能看。
第三种是外部样式表，也是正式项目里最推荐的方式：
<head> <link rel="stylesheet" href="css/style.css"> </head>HTML文件、CSS文件、JavaScript文件各管各的，互不干扰，这就是所谓的“结构、表现、行为分离”。项目一复杂，这种分离带来的好处就会非常明显地体现出来。
5.2 盒模型与Flex：新手必须掌握的两个布局知识
CSS里第一个必须理解的概念是盒模型。页面里所有元素都是一个矩形盒子，从内到外依次是：内容content、内边距padding、边框border、外边距margin。你设置的width默认只作用于内容区域，如果再加上padding和border，元素实际占的宽度会比你设的值更大，这是很多新手做布局时“明明设了宽度却溢出”的原因。
解决方案是加一行全局设置：
* { box-sizing: border-box; }box-sizing: border-box的意思是，你设置的width直接包含padding和border，元素实际宽度跟预期一致，布局计算时省心得多。
布局方面，强烈建议新手早点接触Flex布局，它是目前做页面布局最高效的方案之一。典型用法是让子元素水平垂直居中：
.container { display: flex; justify-content: center; align-items: center; }display: flex把容器变成弹性容器，justify-content: center控制水平居中，align-items: center控制垂直居中。这一套组合在“元素居中”这个高频需求上，比老式的margin: 0 auto加各种hack简单太多了。
5.3 JavaScript：脚本放哪、事件怎么写
JavaScript的引入方式和CSS类似，但有一个关键区别：script标签的位置会影响代码能不能正常运行。
<body> <!-- 页面内容 --> <script src="js/main.js"></script> </body>为什么通常建议把script标签放在body末尾？因为JavaScript经常要操作页面上的元素，比如给按钮绑定点击事件。如果脚本在head里就被解析执行，此时body还没加载，脚本去获取一个不存在的元素就会报错。放在body末尾，等页面内容都渲染完了脚本再执行，就不会有这个问题。或者你可以在head里引入时加defer属性，它告诉浏览器等文档解析完再执行。
一个最基础的事件示例：
<button id="myButton">点击我</button> <script> document.getElementById('myButton').addEventListener('click', function () { alert('按钮被点击了'); }); </script>document.getElementById用来获取页面元素，addEventListener用来监听事件，这是JavaScript操作页面的最基本套路。控制台里打出来的报错，会精确告诉你哪一行出了问题，它就是你的第一调试工具。
6. 综合小项目：一个带红绿灯动画和一键返回顶部的完整页面
6.1 项目目标和结构
学到这里，把前面的知识点串成一个完整项目才算是真正的“HTML的制作”。我设计了一个小页面，它有两个功能亮点：一个是红绿灯状态循环动画，这是一类典型的JS定时器应用；另一个是一键返回顶部按钮，这是很多长页面必备的交互。它的整体效果类似一个简单个人主页加一个动态功能区。
文件结构就用前面说的规范：
traffic-demo/ ├── index.html ├── css/ │ └── style.css └── js/ └── main.js6.2 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> <link rel="stylesheet" href="css/style.css"> </head> <body> <header class="site-header"> <h1>我的个人主页</h1> <p>一个用HTML、CSS、JavaScript做出来的演示页面</p> </header> <main> <section class="card"> <h2>红绿灯模拟</h2> <div class="traffic-light" id="trafficLight"> <div class="light light-red" id="lightRed"></div> <div class="light light-yellow" id="lightYellow"></div> <div class="light light-green" id="lightGreen"></div> </div> <p class="status-text" id="statusText">当前状态：红灯</p> </section> <section class="card"> <h2>关于这个页面</h2> <p>页面里包含文字排版、列表、按钮和基本的CSS布局。你可以把它作为自己第一个综合项目的模板，在此基础上继续加内容、换主题、改样式。</p> <p>滚动页面查看右下角的“返回顶部”按钮。</p> </section> </main> <footer class="site-footer"> <p>底部信息：练习项目</p> </footer> <button class="back-to-top" id="backToTop">顶部</button> <script src="js/main.js"></script> </body> </html>这里包含了<header>、<main>、<section>、<footer>语义化标签的组合，也包含了今天讲到的标题、段落、按钮元素。注意红绿灯的灯体我用了三个带独立id的div，这样JavaScript才能精准控制每一盏灯。
6.3 CSS样式部分
/* css/style.css */ * { box-sizing: border-box; } body { margin: 0; font-family: "Microsoft YaHei", sans-serif; background-color: #f5f5f5; color: #333; line-height: 1.6; } .site-header { background-color: #2c3e50; color: #fff; text-align: center; padding: 40px 20px; } .site-header h1 { margin: 0; font-size: 2rem; } main { max-width: 800px; margin: 30px auto; padding: 0 20px; } .card { background-color: #fff; border-radius: 8px; padding: 24px; margin-bottom: 24px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .traffic-light { width: 100px; padding: 12px; margin: 20px auto; background-color: #222; border-radius: 12px; display: flex; flex-direction: column; gap: 10px; } .light { width: 60px; height: 60px; margin: 0 auto; border-radius: 50%; background-color: #555; transition: background-color 0.3s ease; } .light-red.active { background-color: #e74c3c; box-shadow: 0 0 15px #e74c3c; } .light-yellow.active { background-color: #f1c40f; box-shadow: 0 0 15px #f1c40f; } .light-green.active { background-color: #2ecc71; box-shadow: 0 0 15px #2ecc71; } .status-text { text-align: center; font-weight: bold; } .site-footer { text-align: center; padding: 20px; color: #888; } .back-to-top { position: fixed; right: 24px; bottom: 24px; width: 56px; height: 56px; border: none; border-radius: 50%; background-color: #3498db; color: #fff; font-size: 14px; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .back-to-top.show { opacity: 1; visibility: visible; }CSS部分有几个值得注意的点。红绿灯容器用flex-direction: column让三盏灯从上往下排；灯的样式先写一个默认灰色，再用.active类控制点亮颜色，点亮时加一层box-shadow模拟发光效果，这样做的好处是逻辑和样式解耦——JavaScript只需要切换类名，不需要直接改颜色。transition让亮灯和灭灯之间有0.3秒的渐变动画，视觉效果更自然。返回顶部按钮用position: fixed固定在页面右下角，默认opacity: 0隐藏，加了.show类才显示。
6.4 JavaScript交互部分
// js/main.js var lightState = 0; var states = [ { name: '红灯', duration: 5000, activeClass: 'light-red' }, { name: '黄灯', duration: 2000, activeClass: 'light-yellow' }, { name: '绿灯', duration: 4000, activeClass: 'light-green' } ]; var lightRed = document.getElementById('lightRed'); var lightYellow = document.getElementById('lightYellow'); var lightGreen = document.getElementById('lightGreen'); var statusText = document.getElementById('statusText'); function clearAllLights() { lightRed.classList.remove('active'); lightYellow.classList.remove('active'); lightGreen.classList.remove('active'); } function changeLight() { var current = states[lightState]; clearAllLights(); document.querySelector('.' + current.activeClass).classList.add('active'); statusText.textContent = '当前状态：' + current.name; lightState = (lightState + 1) % states.length; setTimeout(changeLight, current.duration); } changeLight(); var backToTop = document.getElementById('backToTop'); window.addEventListener('scroll', function () { if (window.scrollY > 200) { backToTop.classList.add('show'); } else { backToTop.classList.remove('show'); } }); backToTop.addEventListener('click', function () { window.scrollTo({ top: 0, behavior: 'smooth' }); });红绿灯的逻辑核心是用setTimeout实现“递归调用”：每次changeLight执行后，根据当前状态的时长设置下一次切换的定时器，lightState = (lightState + 1) % states.length让状态在0、1、2之间循环。这个模式比用setInterval更灵活，因为每周期时长可以根据状态动态变化，不会出现定时器错位问题。
返回顶部用了window.scrollTo配合behavior: 'smooth'，这是现代浏览器原生支持的平滑滚动，你完全不需要自己去写那些“每秒滚动多少像素”的旧算法。滚动监听scroll事件里判断window.scrollY > 200，超过200像素就显示按钮，否则隐藏。
把这个项目完整跑起来，你就在一个真实场景里用到了前面所以知识点：HTML结构、外部CSS文件、盒模型、Flex布局、类名切换、事件监听、定时器、滚动操作。
7. 新手翻车现场复盘：预览失败、中文乱码与格式转换
7.1 为什么双击HTML文件打不开，或者样式不生效
“html文件无法预览”是频率极高的求助。绝大多数情况原因在三处。第一，文件扩展名不对，实际上存成了index.html.txt，Windows默认隐藏扩展名，你看着是html，实际系统按文本文件处理。解决方法是打开文件资源管理器的“显示文件扩展名”，改掉后缀。第二，路径写错了。外部CSS和JS没有加载出来，检查文件目录是否跟href、src里写的路径一致。这时候打开开发者工具的Network面板刷新一次页面，哪些文件404一目了然。第三，浏览器用file://协议直接打开本地文件时，部分浏览器对本地资源加载有限制。碰到这种问题，最省事的方法是右键页面用Live Server打开，或者自己起一个本地服务：
# 在项目目录下执行 python -m http.server 8080然后浏览器访问http://localhost:8080。使用本地服务器开发的习惯应该从一开始就养成。
7.2 中文乱码：字符编码必须前后一致
页面中文全部变成乱码，十有八九是编码问题。HTML文件本身以什么编码保存，页面声明用什么编码，这两个必须一致。VS Code默认UTF-8保存，页面声明也是UTF-8，一般不会乱；但如果HTML是用系统记事本在Windows上另存为时选了ANSI编码，页面却声明了UTF-8，就会冲突。
排查思路很简单：先确认文件编码，VS Code右下角会显示当前文件编码；再确认head里<meta charset="UTF-8">有没有写、写的是不是UTF-8。如果文件已经用其他编码保存了乱码，最好的办法是用编辑器重新转成UTF-8，再重新声明。
7.3 HTML和Word、WPS表格、Markdown之间的互相转换
很多人会搜“html格式转换wps表格”“html转为md”，原因各不相同。有的是手里有一批HTML文件要整理成文档，有的是做爬虫拿到表格想转成Excel。这里给你说几个我实测过的思路。
HTML文件本身可以直接用浏览器打开，也可以直接用WPS打开，WPS会识别并渲染HTML里的表格和排版。想把HTML表格转成Excel表格，最省事的办法是直接改扩展名为.xls，Excel和WPS通常能识别出HTML格式的表格内容，但会弹一个格式不兼容提示，不影响数据读取。更规范的做法是复制表格内容粘贴到WPS表格里，或者用Python的pandas.read_html读取表格后另存为Excel。
HTML转Markdown则更适合用专门工具。命令行用户推荐pandoc，一句pandoc input.html -t markdown -o output.md就能完成转换，它对标准HTML的解析效果很好。不习惯命令行的，可以搜在线转换工具，选一个支持从URL上传或者粘贴源码的即可。需要注意，HTML越复杂（嵌套深、样式多），转出来的Markdown越乱，这是格式差异导致的，不是工具有问题。
7.4 表单提交成功后的跳转到底谁来做
“html/php 注册成功后跳转”这类问题暴露了一个常见误区：以为HTML本身能控制提交后跳转。实际上，表单通过action提交给服务器后，后续发生什么完全由服务器决定。服务器处理完注册逻辑后，通过HTTP重定向响应（类似302），让浏览器跳转到指定页面，这才是注册成功跳转的标准做法。前端HTML做不了这件事。
如果你只是在做一个前端模拟，没有服务器，可以用JavaScript在收到表单内容后手动跳转：
document.getElementById('loginForm').addEventListener('submit', function (event) { event.preventDefault(); // 这里可以做简单的本地校验 window.location.href = 'success.html'; });window.location.href是前端页面跳转的核心API。但请记住，这只是模拟。真正的注册登录系统涉及用户数据安全，校验必须在服务器完成，前端跳转只能做体验优化。
回到红绿灯这个项目，如果你想验证纯前端的“跳转效果”，也可以在页面里加一个按钮，绑定window.location.href跳转到页面内某个#id锚点，这个用法和返回顶部按钮的原理是一致的。
我个人的体会是：学HTML最忌讳的是“只看不写”。你可以把今天的红绿灯页面按自己的喜好改一遍——换个配色、改下文字、加个图片区块、调整红绿灯时长，改完一个页面，你学到的东西比刷十篇教程都多。做第一个项目时慢一点没关系，控制台报错多也没关系，那些报错信息其实就是最好的学习材料，我遇到过的绝大多数问题，在报错信息里都已经写清楚了原因和位置。
