html结构需兼顾语义、可访问性与性能：必须唯一且包裹全部主要内容；导航须用带aria-label的nav；关键css须内联于head且≤10kb；废弃html呈现属性，样式全交由css控制。

没有“完美”的HTML结构，只有符合当前语义需求、可访问性要求和渲染性能约束的结构。 所有试图套用模板、忽略上下文或硬塞标签的做法，都会在Lighthouse评分、屏幕阅读器体验或SEO抓取中暴露问题。

为什么

必须是的直接子元素

浏览器和辅助技术靠

定位页面“真正要读的内容”。如果写成<header><main></main></header>，相当于把导航栏声明为正文一部分——屏幕阅读器会跳过标题直奔“首页”链接，Lighthouse直接报document-missing-main错误。

• <main></main>只能出现一次，第二个会被完全忽略，HTML验证器标红
• 允许的父容器只有或无语义的<div>（仅用于CSS布局，不能带class或id） <li>所有用户可见内容（包括文章、产品列表、表单）必须严格落在<code><main></main>内，<nav></nav>、<header></header>、<footer></footer>都得并列放在下

里为什么必须用

而不是

搜索引擎靠<ul></ul>识别“一组并列导航入口”，不是为了好看，而是结构化建模需要。用<div class="nav-item"></div>包裹链接，爬虫无法判断这些链接是否属于同一逻辑组，关键词权重传递失效。



html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 每个<a></a>必须包在<li>里，<li>必须是<ul></ul>或<ol></ol>的直接子元素
• 必须加aria-label，比如<nav aria-label="主导航"></nav>，否则多个<nav></nav>时屏幕阅读器无法区分
• 禁止在<ul></ul>里塞非链接内容（如搜索框、登录按钮），它们该放<header></header>里

关键CSS内联位置错在哪就白干

内联<style></style>不是往里随便一扔就行。浏览器顺序解析，关键样式必须抢在第一个<link rel="stylesheet">前生效，否则仍会阻塞渲染。

• <style></style>必须紧贴<meta charset>后面，不能有任何<link>或<script></script>挡在前面
• 禁用@import——它会触发同步网络请求，让内联退化为阻塞源
• 体积必须≤10KB；超限后部分规则可能被截断，Chrome DevTools Coverage工具能帮你验证真实使用率

为什么现在会失效

HTML5已废弃所有呈现类属性，bgcolor、text、link等不仅被现代浏览器忽略或降级处理，还会和CSS冲突、无法响应式适配，Lighthouse直接标为“过时用法”。

• 必须改用CSS：比如body { background-color: #f0f0f0; }，才能支持媒体查询、主题切换、CSS变量注入
• 内联事件属性（如onclick）也应移至JavaScript中绑定，避免污染结构
• 所有样式控制必须走CSS层，HTML只负责语义结构——这是可访问性与长期维护的底线

最难的从来不是写对标签，而是每次写之前想清楚：这个节点是否真的需要独立语义？它在屏幕阅读器焦点流里处于什么位置？首屏渲染时它是否参与样式计算？漏掉任何一个，结构就只是看起来整齐而已。