html文档必须包含且顺序正确的5个基础标签是、、、、，其中内需含，推荐加lang属性，语义化标签不可用div模拟，嵌套应精简，外链css路径与mime类型须正确。
HTML文档结构不是“先写什么再写什么”的流程题，而是浏览器解析和语义表达的硬约束。不符合基本结构的页面，可能在本地双击能打开，但一放到服务器或接入构建工具就报错、样式失效、SEO抓取失败。
必须存在的5个基础标签及其顺序不能乱
浏览器靠 判断是否启用标准模式；<code> 是根容器，必须包裹全部内容； 里没 <meta charset="UTF-8">，中文就会乱码；<title></title> 必须在 内且只能出现一次； 是唯一渲染区域，所有可视内容都得在里面。
-
推荐显式声明语言，利于屏幕阅读器和搜索引擎识别 - 不要把
<script></script>或<link>放到开头——阻塞渲染，优先放底部或加defer -
<meta name="viewport">不是可选，响应式页面没它，手机端会默认缩放成桌面宽度
div 和语义化容器标签（header/nav/main/article/aside/footer）混用的坑
很多新手以为 “用 <div> 套一层再加 class 就等于语义化”，其实不是。搜索引擎和辅助技术只认原生语义标签，<code><div class="header"> 在 DOM 中仍是 <code><div>，不会被当成页头处理。
<ul>
<li>IE9 及以下不识别 <code><header></header> 等新标签，必须引入 html5shiv.js，否则这些标签不生效、CSS 无法匹配
<main></main> 每页只能有一个，且不能嵌套在 <article></article> 或 <aside></aside> 内——它代表页面核心内容主体<aside></aside> 不是“侧边栏”视觉定位，而是语义上“与主内容相关但可独立存在”的内容，比如博客文章旁的作者简介、同类推荐容器嵌套层级过深导致 CSS 难维护的真实问题
常见错误是层层 <div> 嵌套：<code><div><div><div><p>文字</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img
src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a>
<p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p>
</div>
<a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div></div></div></div>。这种结构让 CSS 选择器被迫写成 .wrapper .content .text p，改一个样式要翻三页代码，还容易被父级 overflow: hidden 或 transform 截断。
- 优先用语义标签替代无意义
<div>，减少嵌套层级。例如用 <code><article></article>直接包正文，不用<div class="post"><div class="post-content"> <li>需要视觉分组但无语义时，才用 <code><div>，并确保 class 名反映用途（如 <code>grid-item、card-body），而非位置（left-box） - Flex/Grid 布局下，
<div> 作为布局容器仍合理，但应限制在 1–2 层，避免超过三层嵌套 <h3>外置 CSS 文件加载失败时页面“裸奔”的排查路径</h3> <p>结构正确但样式全丢，90% 是 <code><link rel="stylesheet">路径或加载时机问题。浏览器控制台 Network 标签页里看到404或blocked就说明没加载成功。- 检查路径：相对路径以 HTML 文件所在目录为基准，
./css/style.css和css/style.css效果不同，后者容易因路由变化失效 - 检查 MIME 类型：服务器返回
Content-Type: text/plain会导致 CSS 不解析，必须是text/css - 不要在
里写<style></style>同时又外链同名 CSS——后者会覆盖前者，但调试时容易误判
真正难的不是写出能跑的 HTML，而是写出浏览器、搜索引擎、协作队友、三年后的你自己都能一眼看懂的结构。语义标签不是加分项，是现代前端开发的底线配置。
- 检查路径：相对路径以 HTML 文件所在目录为基准，
