合法index.html需满足三要素：文件名必须为index.html（非index.html.txt）、编码为UTF-8（无BOM）、结构完整含DOCTYPE声明及闭合的html/head/body；双击打不开或乱码主因是扩展名隐藏、编码错误或富文本编辑器插入控制符。
用记事本或VS Code新建一个合法的 index.html 文件
很多初学者卡在第一步：文件明明写了代码，双击却打不开或显示乱码。根本原因是系统把文件存成了 index.html.txt，或者编码不是 UTF-8。
操作要点：
- 用记事本（Windows）或 TextEdit（macOS，需先切到“纯文本”模式）或 VS Code 新建空白文件
- 输入代码后，“另存为” → 文件名填
index.html（必须手动输入，不能加引号） - 保存类型选“所有文件”，编码选 UTF-8（记事本里在底部下拉框里选；VS Code 默认就是）
- 保存后检查文件图标：应是浏览器图标，不是文档图标；右键“属性”里看扩展名是否真为
.html
确保 <!DOCTYPE html> 在第一行且无空格
这是浏览器进入“标准模式”的开关。漏写、写错位置、前面有空行或 BOM 字符，都可能导致样式错乱或中文乱码。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 页面文字挤成一团，没有默认行高和外边距
- Chrome 开发者工具 Elements 面板里看到
html标签外还多一层灰色的“Document”节点 - 手机访问时布局塌陷，
viewport元标签失效
正确写法只有一行，顶格：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的主页</title> </head> <body> <h1>你好</h1> </body> </html>
区分 <head> 和 <body> 的职责
<head> 不显示内容，只放配置信息；<body> 才是用户真正看到的部分。混用会导致页面空白或标题不生效。
必须放在 <head> 里的三项：
-
<meta charset="UTF-8">：解决中文乱码，缺了就变“” -
<title>：网页标签页上显示的文字，不是<h1> -
<meta name="viewport" content="width=device-width, initial-scale=1">：让页面在手机上能正常缩放
所有可见内容——标题、段落、图片、链接——必须严格写在 <body> 内部，哪怕只多一个空行或未闭合的 <div>，也可能导致后续内容不渲染。
验证标签是否成对闭合与嵌套正确
HTML 不像 JS 那样报语法错误，但错位闭合会让整个 DOM 结构错乱。比如 <p>一段话<strong>加粗</p></strong>，浏览器会自动修正为 <p>一段话<strong>加粗</strong></p>，但你写的结构已经失效。
实操建议：
- 写完一个标签，立刻敲
</让编辑器自动补全结束标签（VS Code 默认支持） - 用 Chrome 按 F12 → Elements 面板，展开看实际生成的 DOM 树，比源码更真实
- 避免在
<p>里嵌<div>（语义违规），改用<span>或 CSS 控制块级行为 - 所有自定义 class 名不要带空格或中文，例如
class="my-section"可以，class="我的模块"会截断
最常被忽略的一点：本地双击打开的 file:// 协议下，部分 CSS 特性（如 @import）、JS 模块、相对路径图片可能受限。调试阶段尽量用 VS Code Live Server 插件起一个本地 HTTP 服务，而不是直接双击文件。
