VS Code 是最省心的 html 编写工具——自带 UTF-8 编码、语法高亮、Live Server 实时预览；必须包含 、 根元素及含 （含 charset 和 viewport）与 的完整结构，路径引用须严格按相对位置且注意大小写。
用什么工具写 HTML 最不踩坑
纯文本编辑器就行，别装“网页制作软件”。vs code 是目前最省心的选择——自带语法高亮、实时预览（装 live server 插件）、错误提示直接标在行尾。用 记事本 也能写，但保存时必须手动选“utf-8 编码”+“.html”后缀，否则中文乱码或双击打不开。
常见错误现象：文件双击打开是空白页、中文显示为小方块、右键“查看源代码”里有乱码字符。本质都是编码没对齐。VS Code 默认就是 UTF-8，新建文件存盘时不用额外操作。
- 别用
word或wps直接另存为 HTML——会塞一堆私有标签和样式，浏览器根本没法稳定渲染 - Mac 用户慎用
TextEdit，它默认存成富文本（.rtf），得先在“格式→制作纯文本”再保存 - 所有文件名避免空格和中文，用
index.html、about-me.html这种，防止路径出错
HTML 文件必须有的三样东西
不是写完标签就能跑。浏览器只认三个硬性结构：文档类型声明、根元素 、以及包含 和 的完整骨架。缺任何一项，某些标签（比如 <meta charset="utf-8">）可能失效，导致样式错乱或脚本不执行。
最小可用示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>我的第一个页面</title> </head> <body> <p>Hello World</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> </body> </html>必须顶格写在第一行，不能缩进，不能加空格，不能写成 <code>（大小写无所谓，但习惯全大写）-
<meta charset="utf-8">必须放在里，且越靠前越好（最好第二行），晚了浏览器可能已按错误编码解析了一部分 -
lang="zh-CN"不是可有可无——它影响屏幕朗读器发音、搜索引擎语义识别，也关系到某些 CSS 伪类（如:lang()）的行为
怎么让页面在手机上正常显示
不加这行 meta，移动端浏览器会强行把页面按桌面宽度缩放，文字小得看不清，点击区域错位。<meta name="viewport" content="width=device-width, initial-scale=1.0"> 就是告诉手机：“别猜了，就按屏幕真实宽度来显示”。
这个标签必须放在 里，且紧挨着 <meta charset> 后面。顺序错了，ios safari 有可能忽略它。
- 别写成
content="width=375"这种固定值——不同手机宽度不同，会适配失败 - 如果用了
initial-scale=1.0还是缩放异常，检查是否同时写了user-scalable=no（禁用缩放），这在无障碍场景下是反模式 - 微信内置浏览器早期版本对 viewport 支持不稳定，如果真遇到问题，优先确认是不是缓存旧 HTML 导致的假象
图片、链接、CSS 怎么正确引用路径
路径写错是 404 的主因，不是代码语法错，而是浏览器压根找不到文件。核心就一条：路径永远相对于当前 HTML 文件的位置算起，不是相对于项目根目录，也不是相对于你心里想的那个“根”。
假设你的目录长这样：
/my-site/ ├── index.html ├── css/ │ └── style.css └── images/ └── logo.png那么在 index.html 里引用：
- CSS：
<link rel="stylesheet" href="css/style.css">（同级目录下的 css 文件夹） - 图片：
<img src="images/logo.png" alt="html怎么制作网页_html网页制作全流程【实操】" >（同级目录下的 images 文件夹） - 如果在
css/style.css里要引用图片，路径就得写成../images/logo.png（..表示上一级） - 绝对路径（以
/开头）是从网站根目录算起，本地双击打开 HTML 时无效，只有部署到服务器（如http://localhost:3000/）才起作用
容易被忽略的是大小写敏感：linux 服务器、github Pages、Vercel 都区分 Image.jpg 和 image.jpg，而 windows 本地不区分——开发时没问题，一上线就 404。