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