按 ! + Tab 可快速生成合法 HTML5 骨架，含 DOCTYPE、html、meta 等基础结构，但需手动改 lang 为 zh-CN 并确保 UTF-8 编码；中文乱码或无响应时需检查 Emmet 启用状态及编码设置。
直接用编辑器快捷键 ! + Tab 就能生成合法、带基础元信息的 HTML5 骨架，比手敲快 10 倍，且规避 90% 的编码/路径/解析错误。
VS Code 里按 ! 键为什么能生成完整结构
这是 Emmet 插件的默认缩写，不是语法糖，也不是模板引擎——它硬编码了 HTML5 最小合规结构。触发后输出的代码包含：<!DOCTYPE html>、<html lang="en">、<meta charset="UTF-8">、<meta name="viewport"> 和空 <body>。关键点在于：lang 默认是 en，中文项目得手动改成 zh-CN；charset 固定为 UTF-8，不改就大概率中文乱码。
常见错误现象：! 后没反应 → 检查 Emmet 是否启用（设置里搜 emmet，确认 Emmet: Enabled Languages 包含 html）；生成后中文显示方块 → 忘改 lang 或没保存为 UTF-8 编码（右下角点击编码名，选 Save with Encoding → UTF-8）。
html:5 和 ! 生成结果有啥区别
本质一样，都是 Emmet 内置缩写，但行为略有差异：
立即学习“前端免费学习笔记（深入）”；
-
!是最简触发方式，适合新建空白文件时第一击 -
html:5是显式命名缩写，兼容性略高（老版本 VS Code 或 WebStorm 可能只认这个） - 两者都生成
<meta http-equiv="X-UA-Compatible" content="IE=edge">，现代项目可删——IE 已停更，留着反而可能干扰某些调试工具 - 都不带
<title>实际内容，必须手动填，否则 SEO 抓取时标题为空
用 file:// 协议双击打开 HTML 文件时样式/脚本失效
根本原因是浏览器出于安全限制，禁止本地协议加载相对路径的 <link> 或 <script>。比如：<link rel="stylesheet" href="style.css"> 在 file:///xxx/index.html 下会报 net::ERR_FILE_NOT_FOUND。
解决办法只有两个，且必须二选一：
- 用 Live Server 插件启动：右键 →
Open with Live Server，地址变成http://127.0.0.1:5500/，此时所有相对路径正常解析 - 把资源路径全改成绝对路径：比如
href="/css/style.css"（注意开头的/），但要求你用本地 HTTP 服务（如 Pythonpython -m http.server）启动，否则仍 404
别试 file:/// 下用 ../ 或完整盘符路径——前者跨目录易出错，后者完全不跨平台，Windows 路径在 macOS/Linux 直接失效。
语义化标签不是“锦上添花”，而是结构生效的前提
很多人以为 <header> <nav> <main> 只是让代码好看，其实它们直接影响三件事：
- 屏幕阅读器识别逻辑流：没
<main>，视障用户无法快速跳转到主体内容 - 搜索引擎提取核心区块：百度/Google 会优先抓取
<main>内文本，而非所有<div> - CSS 选择器效率：用
main h1比div div h1更精准，也更少被意外覆盖
容易踩的坑：<article> 不等于“一篇文章”，它代表独立可分发的内容单元（如博客列表项、新闻卡片）；<section> 必须有标题（<h2> 等），否则语义断裂；<aside> 不能放主导航，那是 <nav> 的事。
真正卡住人的从来不是“怎么写结构”，而是“什么时候该换行、什么时候该加空格、什么时候必须闭合”这些肉眼难辨的细节。用好 ! 是起点，但每次保存前看一眼右下角编码、打开前先启 Live Server、写完标签立刻检查嵌套层级——这些动作比记住所有标签更重要。
