必须以开头，含和viewport，保存为UTF-8无BOM，CSS/JS用相对路径，script放前或加defer，用Live Server避免file://跨域问题。
用浏览器直接打开就能运行的 HTML 文件怎么写
不用工具、不装软件，一个文本编辑器加浏览器就足够。关键不是“怎么学”，而是“怎么让第一行代码立刻生效”。
常见错误现象：file:// 路径下样式不加载、JS 报 CORS 错误、双击打开页面空白——基本都是因为漏写了 或 <code> 结构不完整。
- 必须以
开头，否则 IE 和部分旧环境会触发怪异模式 -
里至少要有<meta charset="UTF-8">，否则中文乱码几乎必然发生 - 所有标签闭合要严格：写
<p>文字</p>，别只写<p>文字</p>（HTML5 虽宽松，但 JS 操作 DOM 时容易出错） - 保存文件时选“UTF-8 无 BOM”，尤其在 Windows 记事本里，默认可能带 BOM，导致
<script></script>前多出不可见字符，控制台报错Unexpected token
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我的第一个页面</title> </head> <body> <h1>Hello</h1> </body> </html>
VS Code 写 HTML 为什么比记事本强
不是因为它“高级”，而是它能实时堵住三类高频低级错误：拼错标签名、漏闭合、属性值没加引号。
使用场景：改一行文本、加个按钮、引入一段 CSS —— 这些操作在 VS Code 里靠 Emmet 就能秒出结构，而记事本里手动敲 <div class="container"></div> 容易少个 > 或引号。
立即学习“前端免费学习笔记（深入）”；
- 安装插件
Auto Close Tag和Auto Rename Tag，改<div> 时自动同步闭合标签 <li>输入 <code>html:5然后按 Tab，自动生成完整基础模板（含<meta name="viewport">） - 右键 → “Open with Live Server”，它起的是本地
http://127.0.0.1:5500服务，彻底避开file://下的跨域限制 - 别用“保存后刷新浏览器”这种原始方式，
Live Server支持热重载，改完保存，页面自动刷新 -
<link rel="stylesheet">的href值必须是相对路径，比如 CSS 文件和 HTML 在同一目录，就写href="style.css"，别写href="/style.css"（开头斜杠代表网站根目录，本地file://下无效） -
<script></script>放在里时，DOM 还没生成，直接操作document.getElementById会返回null；要么移到前，要么加defer属性 - 检查浏览器开发者工具的 Network 面板：如果
style.css或script.js显示 404，说明路径错了；显示 200 但内容为空，可能是文件编码或保存失败 - JS 文件里用了
console.log却看不到输出？先确认是否打开了 Console 面板，且没勾选“Hide network messages”之类过滤选项
引入 CSS 和 JS 后页面没反应？先查这四点
90% 的“写了代码但不生效”问题，和语法无关，和路径、时机、加载顺序有关。
常见错误现象：CSS 样式没上色、按钮点击无反应、控制台报 Cannot find module 或 undefined is not a function。
移动端打开白屏或布局错乱怎么办
不是代码写错了，大概率是少了这一行：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
没有它，手机浏览器会按桌面宽度（通常是 980px）渲染页面，然后整体缩小显示，文字小到看不清，点击区域错位，100vw 也不等于屏幕宽。
- 这行
<meta>必须放在里，且越靠前越好，不能被其他<meta>挡住 - 别写成
content="width=375"这种固定值，设备宽度千差万别，必须用device-width - 如果用了
rem布局，记得 JS 初始化时读取document.documentElement.clientWidth，而不是window.innerWidth（后者包含滚动条） - 真机调试建议用 Chrome 远程调试：连上安卓手机，打开 chrome://inspect，能看到和 PC 一样的 DevTools，比模拟器准得多
