emmet可快速生成html骨架及复杂结构，如输入!或html:5按tab生成标准html5文档；支持标签、类名（.class）、id（#id）、嵌套（>）、兄弟（+）、重复（*）、自增（$）和内容填充（{}）等语法，vs code和webstorm默认集成，需确保文件类型为html且触发键为tab。
用 Emmet 快速生成 HTML 骨架
写 HTML 时不靠手敲 <div></div>，Emmet 是最直接的提速方式。VS Code、WebStorm 默认支持，输入 div.container>ul>li*5 再按 Tab，立刻生成带层级和重复项的结构。
常见错误是漏掉触发键（比如按了 Enter 而不是 Tab），或在非 HTML 文件类型里没启用 Emmet（检查右下角语言模式是否为 HTML）。
-
nav>ul>li{Link $}*3→ 生成带文本的导航项，$自动递增 -
img[src="placeholder.jpg"][alt=""]→ 直接补全带属性的标签 - 在 Vue 或 JSX 文件中需手动开启 Emmet 支持：设置里搜
emmet.includeLanguages，加"vue-html": "html"或"javascriptreact": "html"
避免重复写 class 和 id 的命名惯性
很多人一写就上 container、wrap、box，结果全局满屏同名 class，CSS 冲突频发，后期改起来像扫雷。
实际项目里更推荐语义化 + 功能组合命名，比如 header-primary、card-product、form-login。这样既减少歧义，也方便后续用 [class*="card"] 这类属性选择器批量处理。
- 不用
btn-red这种样式导向名，改用btn-submit或btn-delete - ID 尽量少用，尤其别为了 JS 操作而硬加
id="submitBtn"—— 用document.querySelector('.btn-submit')更稳定 - 组件级开发中，用 BEM 规范（如
modal__close）比嵌套多层 class 更易维护
用 data-* 属性替代自定义属性拼接
想给元素加点元信息，比如“这个按钮对应第几条数据”，别写 data-id="3" 然后 JS 里反复 parseInt()，也别用 onclick="handleClick(3)" 这种内联脚本。
正确做法是统一用 data- 前缀，配合 dataset API 读取，浏览器自动做类型转换：
<button data-item-id="123" data-status="pending">Edit</button>
element.dataset.itemId 返回字符串 "123"，element.dataset.status 是 "pending" —— 注意驼峰转换规则，短横线转首字母大写。
- 不要用
data-123或data-foo-bar-baz（过长难维护），控制在 2~3 段以内 - 避免把 JSON 字符串塞进
data-config，真需要复杂结构就走script type="application/json"块 - 服务端渲染时，确保
data-值已转义，防止 XSS（如data-title="{{ title|e }}"）
script 标签位置与 defer/async 的实际影响
JS 放 里不加 defer 或 async，页面会白屏卡住；放 前又容易让 DOM 操作找不到节点。这不是风格问题，是加载顺序引发的真实阻塞。
优先选 <script defer src="main.js"></script>：它不阻塞 HTML 解析，但保证执行顺序（多个 defer 脚本按出现顺序执行），适合操作 DOM 的逻辑。
-
async适合独立工具类（如统计脚本），不依赖其他 JS，也不被其他 JS 依赖 - 现代项目中，如果用了模块化（
type="module"），它默认行为等价于defer，无需额外加 - 动态插入的 script（如
document.createElement('script')）默认异步，除非手动设script.async = false
真正容易被忽略的是：即使加了 defer，如果 JS 里写了 document.write()，依然会清空整个页面 —— 这个老式写法现在基本该进回收站了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
