在VS Code中快速生成HTML5骨架需输入英文!后按Tab；解决fetch失败须用Live Server插件启HTTP服务；开启"html.suggest.html5": true以获得语义化标签提示；Live Server仅监听右键启动的文件及其子目录。
怎么快速生成标准 HTML5 骨架
VS Code 默认不自动给你写 <!DOCTYPE html> 和语义化结构，光靠新建空文件是不行的——你得触发 Emmet 缩写。最稳的方式是：在空 .html 文件里输入 !（英文感叹号），然后按 Tab 或 Enter，它就会展开成完整的 HTML5 结构，包含 <html lang="zh-CN">、<meta charset="UTF-8"> 等基础项。
别手敲 html:5——这个写法在新版 VS Code 中已失效；也别依赖右键菜单“生成 HTML”，那不是所有安装都自带。确认生效的方法是：展开后检查有没有 <header>、<main> 这类标签的补全提示，没有说明 Emmet 没认对语言模式。
- 确保右下角状态栏显示的是
HTML，不是Plain Text；点它 → 选Configure File Association for '.html'→ 设为HTML - 如果
!不展开，打开settings.json加上"emmet.includeLanguages": {"html": "html"} - 别用中文标点或空格触发缩写，必须是英文
!+Tab
为什么直接双击打开 HTML 文件会报 fetch 失败
因为浏览器用 file:// 协议打开时，fetch('./data.json')、localStorage 读写、甚至某些 CSS @import 都会被同源策略拦掉，控制台清一色报 CORS request not HTTP 或 SecurityError——这不是你代码错，是协议限制。
真实开发中，只要涉及任何 API 调用、本地资源加载、Service Worker，就必须走 http://。VS Code 本身不带服务器，得靠插件补上这一环。
- 装
Live Server（作者 Ritwick Dey），右键 HTML 文件选Open with Live Server，地址变成http://127.0.0.1:5500/xxx.html - 别用
Preview on Web Server：它不支持热重载，改完还得手动 F5，容易漏看效果 - 别信“VS Code 内置预览”——它只是调系统浏览器开
file://，和双击没区别
HTML5 标签和属性为啥不提示
比如你打 <sec 不弹 <section>，输 dragg 不出 draggable，大概率是 VS Code 没开启 HTML5 专属提示开关。它默认只开基础 HTML4 补全，语义标签得手动打开。
这个开关藏在配置里，不是插件控制的。关掉它，<article>、<time datetime="">、contenteditable 全部消失；开了，连 <dialog open> 的 open 布尔属性都会自动加等号提示。
- 打开
settings.json（Ctrl+, → 右上角“打开设置(JSON)”） - 加上这行：
"html.suggest.html5": true - 顺手关掉校验脚本：
"html.validate.scripts": false，否则 ES6 箭头函数会报红
怎么让改完 HTML 自动刷新页面
Live Server 不是装了就自动生效的——它只监听当前被“右键打开”的那个文件及其同目录下的资源。如果你在 /src/index.html 上右键启动，但实际编辑的是 /pages/about.html，改完不会刷。
还有个隐形坑：Live Server 默认端口是 5500，但如果你之前跑过别的项目占了这个端口，它会静默换到 5501，而浏览器还停留在 5500 页面，看起来就像“没刷新”。这时候要留意右下角状态栏的端口号是否跳变。
- 每次切换 HTML 文件预览前，先关掉旧的 Live Server（右下角点红色「Go Live」按钮停掉）
- 右键目标文件 →
Open with Live Server，别用顶部菜单或命令面板里的模糊入口 - 看到右下角出现绿色
Go Live+ 端口号，才表示服务已绑定当前文件
最常被忽略的一点：Live Server 启动后，它只代理当前文件所在文件夹及子目录。如果你的 JS 引入路径写成 ../lib/main.js，而该文件不在服务根目录下，请求照样 404——不是语法问题，是路径和服务器根不匹配。
