VS Code中输入!+Tab可生成标准HTML5结构，Emmet支持CSS选择器语法快速生成标签，必须显式闭合块级元素，优先使用<details><summary>等原生语义化标签替代JS实现简单交互。
刚写HTML时手速慢、标签总漏闭合、结构反复删改——不是你不够努力，是还没摸清编辑器和语法的“默认节奏”。效率提升的关键不在多练，而在用对触发点。
VS Code 里敲 ! 就生成完整 HTML5 结构
新手常手动写 <!DOCTYPE html>、<html lang="zh-CN">……其实 VS Code 内置了开箱即用的模板。光标在空文件中，输入英文感叹号 ! 后按 Tab，立刻生成带 <meta charset="UTF-8">、<viewport> 和空 <body> 的标准结构。
这个动作必须养成条件反射，因为：
- 漏写
lang会导致屏幕阅读器发音错乱、SEO 语义丢失 - 没声明
charset且文件实际保存为 UTF-8 时，某些服务器环境会返回乱码 - 手动补全容易把
<meta>写成自闭合形式<meta />，HTML5 不需要斜杠，浏览器虽容错但校验工具会报错
用 Emmet 写 div#app.container 直接输出带 ID 和 class 的 div
别再一个一个敲 <div id="app" class="container"></div>。Emmet 把 CSS 选择器语法直接映射为 HTML 标签生成规则：
立即学习“前端免费学习笔记（深入）”；
-
#→ 生成id属性：header#main→<header id="main"></header> -
.→ 生成class属性：section.featured→<section class="featured"></section> - 组合使用：
ul.nav>li*3→ 生成含 3 个<li>的无序列表 - 加文本：
h1{欢迎来到首页}→<h1>欢迎来到首页</h1>
注意：Emmet 默认不补全 <img> 的 alt 属性，必须显式写 img[alt="描述"]，否则会违反可访问性规范。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
别省略块级标签闭合，哪怕 HTML5 允许
浏览器确实能自动补全 <p>文字<div>容器</div> 中缺失的 </p>，但 JS 操作 DOM 时会出问题：
-
document.querySelector('div').parentElement可能拿到<p>，也可能拿到<body>，取决于浏览器自动修正逻辑 - 服务端模板（如 EJS、Nunjucks）遇到未闭合标签，可能整段渲染错位，调试时难以定位
- W3C Validator 会报错，CI/CD 流水线若接入校验，直接阻断合并
建议：所有 <div>、<section>、<article>、<p> 都显式写 </xxx>；<img>、<input> 等自闭合标签统一用 <img src="x" alt=""> 形式，不加 /。
用 <details><summary> 替代手写 JS 折叠逻辑
新手常为“点击展开”去查 jQuery 或写 addEventListener，其实 HTML5 原生就支持：
<details> <summary>常见问题</summary> <p>这里放具体内容……</p> </details>
这个组合零 JS、无障碍友好、语义清晰。唯一要注意的是：<summary> 必须是 <details> 的第一个子元素，否则浏览器不会识别为可折叠控件。
复杂交互才需要 JS；简单状态切换，先看原生标签能不能扛住——这是减少无效编码最直接的路径。
