VS Code 识别 HTML5 需 .html 后缀和 <!DOCTYPE html>，自动启用语义标签与属性补全；html:5 缩写需配置 emmet.includeLanguages；必须用 Live Server 启动才能正常使用 fetch() 等 HTML5 API。
VS Code 识别 HTML5 文件要靠 .html 后缀和 DOCTYPE
VS Code 不靠插件“开启 HTML5 模式”，而是根据文件扩展名和首行内容自动判断语言模式与文档类型。只要文件名是 index.html（或任意 .html），且第一行写了 <!DOCTYPE html>，它就按 HTML5 标准解析：启用 <section>、<article> 等语义标签提示，支持 contenteditable、draggable 等 HTML5 属性补全。
常见错误现象：
- 右下角状态栏显示
Plain Text→ 点击该区域，手动选HTML - 输入
section没有自动补全 → 检查是否保存了文件（未保存时语言模式可能未生效） -
html:5不展开 → 确认光标在空行、文件已保存、且当前语言模式确实是HTML
emmet.includeLanguages 必须显式配置才能用 html:5
VS Code 自带 Emmet，但默认只对 .html 文件启用基础缩写；html:5 这类骨架命令需要额外声明映射关系，否则按 Tab 没反应。
操作步骤：
立即学习“前端免费学习笔记（深入）”；
- 打开
settings.json（快捷键Ctrl+Shift+P→ 输入Preferences: Open Settings (JSON)） - 添加这一行：
"emmet.includeLanguages": {"html": "html"} - 保存后，在新
.html文件里输入html:5+Tab，立刻生成含<meta charset="UTF-8">和<meta name="viewport">的完整结构
注意："html" 是语言标识符，不是文件后缀；写成 "htm" 或 "HTML" 都无效。
Live Server 是唯一能跑通 fetch() 和 navigator.geolocation 的方式
双击打开 index.html 是走 file:// 协议，浏览器会直接禁用绝大多数 HTML5 API：本地 fetch('./data.json') 报 CORS 错误，navigator.geolocation.getCurrentPosition 返回 permission denied。
必须用 Live Server 启动：
- 安装插件：搜索
Live Server（作者 Ritwick Dey） - 右键
index.html→Open with Live Server - 浏览器地址栏显示
http://127.0.0.1:5500/才算成功 —— 此时fetch、localStorage、Geolocation全部可用
如果端口被占，Live Server 会自动换端口（如 :5501），无需手动改配置。
别碰 html.suggest.html5，它早在 VS Code 1.80+ 就默认 true 了
网上教程常让你加 "html.suggest.html5": true 到 settings.json，这是过时操作。VS Code 当前版本（1.92+）已默认启用 HTML5 标签和属性建议，加了反而可能覆盖其他设置。
真正该检查的是：
-
html.validate.scripts：设为true可捕获内联<script>中的语法错误 -
files.encoding：确保是utf8，避免中文乱码（新建文件默认就是，但粘贴旧代码时可能带 BOM） - 不要启用
security.webview.experimentalFeatures：这个实验性开关会破坏Shadow DOM行为，HTML5 组件调试时容易出怪问题
HTML5 开发最易被忽略的点，其实是运行环境本身——file:// 和 http:// 是两套权限模型，不通过 Live Server 启动，再标准的 HTML5 代码也调不了 API。
