输入!后按Tab键可快速生成标准HTML5骨架，含lang="zh-CN"、UTF-8编码等关键标签；语义化使用header/main/footer；图片需alt描述，链接加rel="noopener"；务必用Live Server预览而非双击打开。
直接用 ! + Tab 就能生成标准 HTML5 骨架，比复制粘贴模板快、比手敲少出错，这是最值得立刻上手的技巧。
VS Code 里输入 ! 后按 Tab 键生成骨架
这是 Emmet 的默认缩写，几乎所有现代编辑器都支持，但 VS Code 开箱即用且最稳定。触发后会自动补全为完整结构，包含 、<meta charset="UTF-8">、<meta name="viewport"> 等关键标签。
-
lang="zh-CN"别手动改成zh或漏写——影响 SEO 和屏幕阅读器发音准确性 - 生成后光标默认落在
<title></title>标签内，直接输标题就能改，不用满屏找位置 - 如果没反应，检查是否在
.html文件中（非.txt或未保存文件），且 Emmet 没被禁用（设置里搜emmet确认启用）
用 header、main、footer 替代一堆 div
语义化标签不是“加分项”，而是避免后期重构的硬需求。用 <header></header> 而不是 <div class="header">，浏览器和辅助工具能立刻识别区块用途。
<ul>
<li>
<code><nav></nav> 必须包在 <header></header> 或 <aside></aside> 内，单独放 body 里会被部分读屏软件忽略
<main></main> 页面只能有一个，且不能嵌套在 <article></article> 或 <section></section> 里header+main+footer 再按 Tab，一次生成三块区域结构图片和链接别裸写 src 和 href
哪怕只是本地预览，也必须加 alt 和 target。否则后续接入自动化检测或无障碍审查时，会卡在基础分上。
立即学习“前端免费学习笔记（深入）”；
-
<img src="logo.png" alt="公司Logo">——alt不能为空字符串，也不能是 "图片" 这种无意义描述 -
<a href="contact.html" target="_blank" rel="noopener"></a>——rel="noopener"是安全刚需，防止新开页通过window.opener控制原页面 - 路径优先用相对路径（如
./images/icon.svg），避免绝对路径（/images/icon.svg）导致本地双击打开时资源 404
预览别双击 HTML 文件，用 Live Server
双击打开的 file:// 协议会禁用 fetch、字体加载异常、CORS 报错，看似能看，实则埋坑。
- VS Code 安装
Live Server插件后，右键菜单点Open with Live Server，自动起http://127.0.0.1:5500服务 - 改完保存，浏览器自动刷新——比手动 F5 快，且能捕获实时 JS 错误（双击模式下控制台常静默）
- 手机调试时，在地址栏末尾加
:5500（如http://192.168.1.10:5500），局域网内真机访问，比截图判断响应式靠谱得多
真正卡住人的从来不是语法，而是 meta 标签拼错、viewport 缩放失效、图片路径斜杠方向反了这些细节。把 ! 当起点，把 Live Server 当默认操作，其他问题才真正变成“查文档就能解”的事。
