新建HTML文件需用小写字母加短横线命名（如index.html），禁用空格和中文，保存于独立文件夹；必备结构为<!DOCTYPE html><html><head><body>四部分，且<head>中须含<meta charset="UTF-8">与<title>；双击空白或显代码多因扩展名错误、编码非UTF-8或标签未闭合；VS Code中输入!+Tab可快速生成基础结构，但需手动设lang和viewport。
新建 .html 文件时命名和保存位置要注意什么
文件名必须以 .html 或 .htm 结尾，且不能含空格或中文（比如 我的页面.html 会导致某些服务器或本地双击打开失败）。推荐用小写字母加短横线，例如 index.html、about-page.html。保存路径建议单独建个文件夹（如 my-website/），避免和桌面其他文件混在一起——否则后续引入 CSS/JS 时路径容易出错。
HTML5 基础结构里哪些标签不能少
现代浏览器要求最低结构包含 <!DOCTYPE html>、<html>、<head>、<body> 四部分。漏掉 <head> 可能导致中文乱码（因为没写 <meta charset="UTF-8">），漏掉 <html> 开闭标签会让部分校验工具报错，也影响语义化解析。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>页面标题</title> </head> <body> <p>这是正文内容</p> </body> </html>
为什么双击打开空白或显示代码而不是网页
常见原因有三个：
– 用记事本保存时选了“文本文档 (*.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，如果失效，检查设置里是否被关闭。
立即学习“前端免费学习笔记（深入）”；
注意：补全后记得手动修改 <title> 和 lang 属性值，lang="zh-CN" 对中文 SEO 和屏幕阅读器更友好，别留着默认的 en-US。
<meta name="viewport">，结果在手机上页面缩放异常——这不是基础结构必需项，但只要目标用户包括移动端，就必须加。容易被忽略的还有 <title> 标签位置：它必须在 <head> 内，且不能放在 <body> 里，否则浏览器不会显示标题栏文字。 
