新建HTML文件需用小写字母加短横线命名（如index.html），禁用空格和中文，保存于独立文件夹；必备结构为四部分，且中须含与；双击空白或显代码多因扩展名错误、编码非UTF-8或标签未闭合；VS Code中输入!+Tab可快速生成基础结构，但需手动设lang和viewport。
新建 .html 文件时命名和保存位置要注意什么
文件名必须以 .html 或 .htm 结尾，且不能含空格或中文（比如 我的页面.html 会导致某些服务器或本地双击打开失败）。推荐用小写字母加短横线，例如 index.html、about-page.html。保存路径建议单独建个文件夹（如 my-website/），避免和桌面其他文件混在一起——否则后续引入 CSS/JS 时路径容易出错。
HTML5 基础结构里哪些标签不能少
现代浏览器要求最低结构包含 、、、 四部分。漏掉 可能导致中文乱码（因为没写 ），漏掉 开闭标签会让部分校验工具报错，也影响语义化解析。
页面标题 这是正文内容
为什么双击打开空白或显示代码而不是网页
常见原因有三个：
– 用记事本保存时选了“文本文档 (*.txt)”而非“所有文件”，实际生成的是 index.html.txt（Windows 默认隐藏扩展名，看着像 index.html，实则不是）；
– 文件编码不是 UTF-8 无 BOM（尤其用 Windows 记事本另存时默认是 ANSI）；
– 浏览器地址栏显示的是 file:///C:/.../index.html，但页面为空，大概率是 HTML 标签未闭合或写了非法字符（比如中文标点代替英文引号）。
立即学习“前端免费学习笔记（深入）”；
- 解决方法：用 VS Code / Sublime Text 等编辑器新建文件，直接保存为
index.html - 确认编码：在编辑器右下角点击编码类型（如 “UTF-8”），选“Save with Encoding” → “UTF-8”
- 检查扩展名：在 Windows 文件夹选项中勾选“显示文件扩展名”
VS Code 里快速生成基础结构的快捷方式
不用手敲全部标签。新建空文件 → 输入 ! → 按 Tab 键（需开启 Emmet 支持，默认开启），VS Code 会自动补全完整 HTML5 结构。这个快捷键依赖 emmet.triggerExpansionOnTab 设置为 true，如果失效，检查设置里是否被关闭。
注意：补全后记得手动修改 lang 属性值，lang="zh-CN" 对中文 SEO 和屏幕阅读器更友好，别留着默认的 en-US。
