HTML本质是结构描述与语义表达语言，非编程语言；须唯一且不嵌套于其他语义标签内；验证仅在提交时触发；/关乎可访问性、打印与性能。
HTML 不是“一门编程语言”，它没有逻辑控制、没有变量运算，它的核心技术本质是结构描述与语义表达——浏览器靠它构建 DOM 树，屏幕阅读器靠它理解内容层级，搜索引擎靠它识别主次信息。脱离这个前提去谈“HTML 技术栈”，容易把标签当积木乱搭。
为什么 <main></main> 不能随便套在 <div> 外面
<p>很多新手写完页面发现键盘导航跳不到正文、SEO 工具提示“无主内容区域”，问题常出在语义断裂。<code><main></main> 是 WAI-ARIA 和 HTML5 规范明确定义的“页面唯一主要内容容器”，一个文档里只能出现一次，且不能嵌套在 <article></article>、<aside></aside>、<footer></footer> 等已有语义的区块内。
htmlppt.skill
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
下载
- ✅ 正确：直接包裹核心文章或表单区域，如
<main><h1>用户注册</h1>
<form>...</form></main>
- ❌ 错误：
<div class="wrapper"><main>...</main></div> —— 外层 <div> 削弱了 <code><main></main> 的语义权重，相当于给身份证套了个塑料袋再递出去
- ⚠️ 注意：
<main></main> 不影响视觉样式，但会影响 document.querySelector('main') 的可预测性，以及 Safari + VoiceOver 组合下的焦点流顺序
<input type="email"> 的验证到底在哪发生
浏览器原生验证（Constraint Validation API）只在表单提交时触发，oninput 或 onchange 事件中不会自动校验。很多人以为加了 type="email" 就能实时拦截非法输入，结果用户输完“abc@”就点提交，才弹红框——体验断层就在这儿。
- ✅ 实操建议：用
checkValidity() 主动触发验证，配合 setCustomValidity() 控制错误文案
- ✅ 场景适配：移动端需监听
input 事件（而非 change），因为软键盘收起不一定会触发 change
- ⚠️ 兼容陷阱：
type="date" 在 iOS Safari 上仍渲染为文本框，且不支持 min/max 的 JS 动态更新，必须初始化时写死属性值
<table> 的 <code><thead> / <code><tbody> 不只是为了好看
<p>这些标签直接影响表格的可访问性与打印行为。没有 <code><thead> 的表格，NVDA 屏幕阅读器无法重复播报表头；没有 <code><tbody> 的长表格，在分页打印时可能把表头和数据割裂到不同页。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul><li>✅ 必须包含：<code><table> 内至少一个 <code><tr> 应在 <code><thead> 中，其余数据行应包裹在 <code><tbody> 内（<code><tfoot> 可选）
<li>✅ 性能提示：对超大表格（>1000 行），用 <code><tbody> 包裹后，JS 操作 <code>tbody.rows 比遍历整个 table.rows 快约 20%（实测 Chrome 124）
- ⚠️ 常见错误：用
<div> 模拟表格布局，然后加 <code>role="table" —— 这种“伪语义”无法通过 WCAG 2.1 AA 认证，且多数辅助技术不识别
真正卡住人的从来不是“怎么写”，而是“为什么必须这么写”——比如 <caption></caption> 必须紧贴 <table> 开始，否则会被某些读屏软件忽略；比如 <code>aria-label 和 alt 不能同时出现在同一个 <img alt="HTML是什么关键核心技术 HTML网页开发实战【核心】" > 上，否则后者会被前者完全覆盖。这些细节不写进 DOM 规范的犄角旮旯里，但天天在真实项目里冒泡。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
<main><h1>用户注册</h1>
<form>...</form></main>
<div class="wrapper"><main>...</main></div> —— 外层 <div> 削弱了 <code><main></main> 的语义权重，相当于给身份证套了个塑料袋再递出去
<main></main> 不影响视觉样式，但会影响 document.querySelector('main') 的可预测性，以及 Safari + VoiceOver 组合下的焦点流顺序
<input type="email"> 的验证到底在哪发生
浏览器原生验证（Constraint Validation API）只在表单提交时触发，oninput 或 onchange 事件中不会自动校验。很多人以为加了 type="email" 就能实时拦截非法输入，结果用户输完“abc@”就点提交，才弹红框——体验断层就在这儿。
- ✅ 实操建议：用
checkValidity()主动触发验证，配合setCustomValidity()控制错误文案 - ✅ 场景适配：移动端需监听
input事件（而非change），因为软键盘收起不一定会触发change - ⚠️ 兼容陷阱：
type="date"在 iOS Safari 上仍渲染为文本框，且不支持min/max的 JS 动态更新，必须初始化时写死属性值
<table> 的 <code><thead> / <code><tbody> 不只是为了好看
<p>这些标签直接影响表格的可访问性与打印行为。没有 <code><thead> 的表格，NVDA 屏幕阅读器无法重复播报表头；没有 <code><tbody> 的长表格，在分页打印时可能把表头和数据割裂到不同页。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul><li>✅ 必须包含：<code><table> 内至少一个 <code><tr> 应在 <code><thead> 中，其余数据行应包裹在 <code><tbody> 内（<code><tfoot> 可选）
<li>✅ 性能提示：对超大表格（>1000 行），用 <code><tbody> 包裹后，JS 操作 <code>tbody.rows 比遍历整个 table.rows 快约 20%（实测 Chrome 124）
<div> 模拟表格布局，然后加 <code>role="table" —— 这种“伪语义”无法通过 WCAG 2.1 AA 认证，且多数辅助技术不识别
真正卡住人的从来不是“怎么写”，而是“为什么必须这么写”——比如 <caption></caption> 必须紧贴 <table> 开始，否则会被某些读屏软件忽略；比如 <code>aria-label 和 alt 不能同时出现在同一个 <img alt="HTML是什么关键核心技术 HTML网页开发实战【核心】" > 上，否则后者会被前者完全覆盖。这些细节不写进 DOM 规范的犄角旮旯里，但天天在真实项目里冒泡。
