html标签须严格闭合，自闭合标签统一写为形式；优先使用语义化标签如；属性值必须加引号，布尔属性需显式赋值；表格与列表嵌套须符合规范，禁止非法子元素。
HTML标签必须成对闭合，自闭合标签要加斜杠
浏览器对缺失闭合标签的容忍度高，但不意味着可以随意省略。比如 <p>文本</p> 漏掉
<img src="a.jpg"> 在 HTML5 中虽可不写斜杠，但混用 <img src="a.jpg"> 会导致 XHTML 兼容性问题或某些构建工具报错。
实际建议：
- 所有双标签（如
<div>、<code><section></section>、<p></p>）必须显式写出结束标签 - 自闭合标签（
<img>、<input>、<br>、<hr>）统一写成<img src="x">形式（注意空格+斜杠），避免在 XML 或 SSR 渲染中出错 - 不要依赖浏览器自动修复——它只按“怪异模式”补全，结果不可控
- 把登录表单放在
<aside></aside>里——<aside></aside>应用于附属、非主线内容（如侧边栏广告、相关链接） - 用多个
<div class="card"> 替代 <code><article></article>包裹独立内容项（如博客列表） -
<h1></h1>到<h6></h6>必须体现层级，不能只为样式而跳级（如<h2></h2>后直接<h4></h4>） -
<input required>合法，但语义模糊；推荐写成<input required="required">或<input required=""> -
<input disabled>并不会启用控件——只要存在该属性，即为 true；要取消禁用，必须彻底移除disabled属性 - 自定义属性一律用
data-前缀，如data-id="123"，不可写id="123"代替业务标识 -
<ul></ul>或<ol></ol>下只能直接跟<li>，中间插<p></p>或<div> 会被浏览器移到列表外 <li> <code><li>内可嵌任意流内容，但若需多段文字，优先用<p></p>而非连续换行（<br>） - 避免
<div><ul><li></ul></div>这类“套娃式”无意义包裹，除非真有布局或样式隔离需求
语义化标签优先于 和
用 <div> 套一切是早期惯性，但现代 HTML 要求结构可读、可访问、可索引。<code><header></header> 不只是“上面那块”，它代表页面或区块的头部元信息；<nav></nav> 明确告诉屏幕阅读器这是导航区域；<main></main> 是唯一主内容容器，一个页面只能有一个。
常见误用场景：
属性值必须加引号，布尔属性要显式赋值
虽然 class=header 在部分浏览器能解析，但一旦值含空格或特殊字符（如 class=btn btn-primary），不加引号就直接失效。更隐蔽的问题是：某些构建工具（如 Webpack + html-loader）或 Linter（如 eslint-plugin-html）会直接报错。
anything-to-html
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
下载
布尔属性（disabled、required、checked）也容易踩坑：
嵌套规则不能违反，尤其注意表格和列表
HTML 有严格的嵌套语法约束，不是“能渲染出来就行”。最常破戒的是表格：<table> 内只能是 <code><caption></caption>、<colgroup></colgroup>、<thead>、<code><tfoot>、<code><tbody>、<code><tr>；<code><tr> 下只能是 <code><th> 或 <code><td>。把 <code><div> 直接塞进 <code><tr>，浏览器会自动“修复”成 <code><tr><td><div>...</div></td></tr>，但 DOM 结构已失控。
列表同理：
格式规范不是为了取悦校验器，而是让 DOM 树稳定、协作时少猜意图、无障碍支持不掉链子。最易被忽略的是嵌套合法性——它不出错、不报警，却会在 SSR、服务端渲染或自动化测试中突然暴露为结构错乱。
用 <div> 套一切是早期惯性，但现代 HTML 要求结构可读、可访问、可索引。<code><header></header> 不只是“上面那块”，它代表页面或区块的头部元信息；<nav></nav> 明确告诉屏幕阅读器这是导航区域；<main></main> 是唯一主内容容器，一个页面只能有一个。
常见误用场景：
属性值必须加引号，布尔属性要显式赋值
虽然 class=header 在部分浏览器能解析，但一旦值含空格或特殊字符（如 class=btn btn-primary），不加引号就直接失效。更隐蔽的问题是：某些构建工具（如 Webpack + html-loader）或 Linter（如 eslint-plugin-html）会直接报错。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
布尔属性（disabled、required、checked）也容易踩坑：
嵌套规则不能违反，尤其注意表格和列表
HTML 有严格的嵌套语法约束，不是“能渲染出来就行”。最常破戒的是表格：<table> 内只能是 <code><caption></caption>、<colgroup></colgroup>、<thead>、<code><tfoot>、<code><tbody>、<code><tr>；<code><tr> 下只能是 <code><th> 或 <code><td>。把 <code><div> 直接塞进 <code><tr>，浏览器会自动“修复”成 <code><tr><td><div>...</div></td></tr>，但 DOM 结构已失控。
列表同理：
格式规范不是为了取悦校验器，而是让 DOM 树稳定、协作时少猜意图、无障碍支持不掉链子。最易被忽略的是嵌套合法性——它不出错、不报警，却会在 SSR、服务端渲染或自动化测试中突然暴露为结构错乱。
