vs code 中输入 ! 或 html:5 按 tab 可自动生成 html5 骨架，依赖 emmet 且需语言模式为 html；ul>li*5 等缩写需按 tab 展开，符号含义明确；ctrl+/ 注释、ctrl+d 多光标编辑提升效率；live server 插件提供热更新本地 http 服务。
VS Code 里输入 ! 或 html:5 就能生成完整骨架
不用手动敲 、<code>、 这一堆固定结构，直接在空文件里打 ! 或 html:5，按 Tab 键就自动补全。这是 Emmet 内置的最常用初始化指令，VS Code 默认支持，无需额外配置。
注意：必须确保当前文件语言模式是 HTML（右下角显示“HTML”，不是“Plain Text”）。如果没反应，点右下角切换；若仍无效，检查是否禁用了 Emmet（设置里搜 emmet，确认 emmet.includeLanguages 包含 "html": "html"）。
常见错误现象：! 按了 Tab 却只插入感叹号、不展开；或展开后缺 <meta charset="UTF-8"> —— 多半是语言模式不对，或插件被意外禁用。
ul>li*5 这类 Emmet 缩写要记清符号含义
Emmet 不是随便打字，每个符号有明确语义：
-
>表示子元素嵌套，如div>p>span→<div><p><span></span></p></div> -
+表示同级并列，如header+main+footer→ 三个独立标签横向排列 -
*表示重复次数，li*3生成 3 个<li> -
#和.分别生成id和class，div#app.container→<div id="app" class="container"></div> -
{}插入文本内容，a{登录}→<a>登录</a>
容易踩的坑：ul>li*5 后忘了按 Tab，结果只留下字符串；或误把 > 写成 >> 导致解析失败；还有人用 . 写 class 时漏空格，比如 div.my-class 正确，div.my-class.btn 会生成两个 class，但 div.my-classbtn 就变成一个 class 名叫 my-classbtn。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
用 Ctrl+/ 注释和多光标批量修改比手敲安全得多
注释整块 HTML 时，选中代码后按 Ctrl+/（Windows/Linux）或 Cmd+/（Mac），编辑器自动加 <!-- -->。别手动输 <!-- 和 -->，尤其在嵌套结构里极易漏掉闭合符，导致后续渲染异常。
批量改多个相同标签属性更省事：
- 选中第一个
class="btn"，按Ctrl+D（VS Code）逐个扩展选中其他相同文本 - 或按
Ctrl+Shift+L全选所有匹配项，一次性改完 - 想同时改多个
href值？先选中一个href="xxx"，再按Ctrl+D跳到下一个，直到全选中，然后直接输入新值
性能影响不大，但手动替换易出错——比如改 src 时漏掉引号，或把 data-id 错写成 date-id，浏览器不会报错，但 JS 逻辑就失效了。
Live Server 插件让改完 HTML 立刻看到效果，别再手动刷新
装好 Live Server 插件后，右键 HTML 文件 → Open with Live Server，浏览器自动打开并监听文件变化。你保存文件那一秒，页面就刷新，不用切窗口、按 F5、等加载。
关键细节：
- 它起的是本地 HTTP 服务（
http://127.0.0.1:5500/xxx.html），不是直接双击file://协议——后者会因跨域限制让 AJAX、图片相对路径、ES Module 加载失败 - 关闭 Live Server 标签页不影响其他已开页面，可保留多个测试视图
- 如果改完代码没刷新，先看 VS Code 右下角是否显示 “Live Server on”，再检查浏览器控制台有没有
CORS或404报错，大概率是路径写错了
真正容易被忽略的是：当项目里有多个 HTML 文件（比如 index.html 和 about.html），Live Server 默认只服务当前打开的文件；想全局访问，得手动在地址栏改路径，而不是以为它自动托管整个文件夹。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
