语义标签使用需严格遵循规范:仅表示本节头部而非页眉,必须唯一且为直接子元素,须带标题并表逻辑区块,否则应改用。

直接用 <header></header>、<nav></nav>、<main></main>、<section></section>、<footer></footer> 这五个标签,其他语义标签(如 <aside></aside>、<article></article>)在多数业务模板中不强制要求,强行套用反而破坏结构清晰度。
为什么不能把 <header></header> 当“页面顶部样式容器”用
它只表示「本节内容的头部」,不是视觉意义上的“页眉”。常见错误是把整个顶部导航栏+Logo+搜索框全包进一个 <header></header>,结果导致大纲层级错乱——尤其当这个 <header></header> 套在 <section></section> 里时,屏幕阅读器会误判为该节的标题区,而非全局导航。
- 页面级
<header></header>应与<main></main>并列,且内部只放<h1></h1>或品牌标识 + 主导航(即<nav></nav>) - 每个
<section></section>可以有自己的<header></header>,但必须配一个<h2></h2>或更低级标题 -
<header></header>里不要塞表单控件或按钮组;那些属于交互区域,应归入<form></form>或独立<div role="region"> <h3> <code><main></main>必须且只能有一个,且不能嵌套在其他语义标签内这是辅助技术定位核心内容的唯一锚点。浏览器和读屏软件靠它跳过导航/侧边栏直达正文,SEO 也依赖它识别主干内容。一旦嵌套在
<section></section>或<article></article>里,就等于告诉机器:“这段内容不是页面主体”,后果是可访问性降级、搜索引擎可能忽略正文权重。
htmlppt.skill下载把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件(幻灯片风格)。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本,并且希望生成演示用的 HTML 时触发。支持任意内容来源:iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区,并通过企微直接发送给用户。触发词示例:帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 检查 DOM:确保
<main></main>是的直接子元素,且未被<header></header>、<nav></nav>、<footer></footer>包裹 - 不要用 CSS 隐藏
<main></main>后再另起一个“伪 main”;隐藏不影响语义解析,只会让结构树断裂 - SPA 类应用中,路由切换时需动态更新
<main></main>内容,而非销毁重建——否则焦点管理失效
<section></section>不是“视觉分组”,必须自带主题和标题它代表文档大纲中的一个逻辑区块,浏览器会据此生成层级节点。没有
<h2></h2>–<h6></h6>的<section></section>等同于无效标签,不如用<div>。<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>轮播图、商品列表、卡片网格这类纯视觉模块,即使有 class="section",也不该用 <code><section></section> - 检查 DOM:确保
- “兼容性说明”“示例代码”“性能对比”三块内容若各自有
<h2></h2>,才适合分别用<section></section>包裹 -
<section></section>内部不要再嵌套<section></section>表达并列项;那是<article></article>或多个<section></section>并列的场景
最容易被忽略的是 <main></main> 和 <section></section> 对 <h1></h1> 解析的影响:<main></main> 自带 sectioning root,意味着其内部的 <h1></h1> 被视为该区块最高级标题,而非整页的 <h1></h1>;而 <section></section> 内的 <h1></h1> 会被降级为 <h2></h2> 处理。这种隐式行为不报错,但会让大纲生成器输出不可预期的结果。


















