HTML5文档必须包含<!DOCTYPE html>、<html>、<head>和<body>四个基础标签；前者声明文档类型且须为首行，后三者构成根结构，缺一将导致渲染异常或怪异模式。
HTML5 文档必须包含的 4 个基础标签
一个合法可被浏览器正确解析的 HTML5 静态网页，最低限度需要 <!DOCTYPE html>、<html>、<head> 和 <body> 这四个标签。缺任何一个，页面可能渲染异常或被浏览器降级为怪异模式。
常见错误现象包括：中文乱码、CSS 不生效、JavaScript 报 document is not defined、表单提交失败等，往往就卡在这四层结构没写对。
-
<!DOCTYPE html>必须是文档第一行，且不能带任何空格或注释前置；写成<!doctype html>或<!DOCTYPE HTML>也合法，但大小写不敏感不等于可随意缩写 -
<html lang="zh-CN">建议显式声明lang属性，否则屏幕阅读器和 SEO 会丢失语言上下文 -
<head>里至少要有<meta charset="UTF-8">，否则中文内容极大概率乱码；<title>虽非强制，但缺失会导致浏览器标签页显示为空白或“无标题文档” -
<body>是唯一能放可见内容的容器，所有文本、图片、按钮都得在里面；把它写成<body/>（自闭合）是无效的，HTML 不支持这种写法
语义化标签替代 div 的典型场景
HTML5 引入了 <header>、<nav>、<main>、<article>、<section>、<aside>、<footer> 等语义化标签，不是为了“看起来更高级”，而是让浏览器、搜索引擎、辅助设备能准确理解内容层级。
比如用 <div class="header"> 和用 <header>，视觉上完全一样，但前者对无障碍工具来说只是“一个普通盒子”，后者会被读作“页面头部区域”。
立即学习“前端免费学习笔记（深入）”；
- 导航菜单优先用
<nav>，而非<div id="nav">；一个页面可有多个<nav>（如顶部主导航 + 侧边相关链接） - 主要内容区块用
<main>，且整个页面只能有一个；它不能嵌套在<article>或<aside>内部 -
<section>表示有独立主题的一块内容，需搭配<h2>–<h6>使用；纯样式分隔不用它，那是<div>的职责 -
<article>适用于能独立分发的内容，如博客文章、新闻条目；评论区、作者信息不属于<article>，应放在外部
head 中容易被忽略但关键的 3 个 meta 标签
很多人只记得 <meta charset="UTF-8">，却漏掉另外两个影响实际体验的关键 <meta>：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">—— 没它，移动端页面会默认按 980px 渲染，文字小到无法阅读；iOS Safari 和 Android Chrome 都依赖这个声明做响应式适配 -
<meta name="description" content="...">—— 不影响页面功能，但决定搜索引擎结果页中显示的摘要文案；长度建议控制在 70–160 字符，超长会被截断 -
<meta http-equiv="X-UA-Compatible" content="IE=edge">—— 虽然 IE 已淘汰，但部分企业内网环境仍存在；此标签确保旧版 IE 使用最高可用文档模式，避免触发兼容性视图
script 和 link 标签的位置与加载行为差异
<script> 默认同步阻塞解析，而 <link rel="stylesheet"> 是并行下载但阻塞渲染；位置选错会直接拖慢首屏时间。
- JS 文件尽量放在
</body>前（即<body>底部），避免阻塞 DOM 构建；若必须在<head>加载，加上defer属性（<script defer src="app.js"></script>），保证执行顺序且不阻塞解析 - CSS 文件必须放在
<head>内，且推荐使用<link rel="stylesheet">而非<style>内联；内联 CSS 超过 2KB 会增加 HTML 体积，不利于缓存复用 - 不要把
<script>放在<head>里又不加defer或async，否则 JS 执行时document.body还不存在，document.getElementById()必然返回null
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="一个符合标准的 HTML5 静态页面示例"> <title>首页</title> <link rel="stylesheet" href="style.css"> </head> <body> <header><h1>网站标题</h1></header> <nav><a href="/about">关于</a></nav> <main><p>这里是主体内容</p></main> <footer><p>© 2024</p></footer> <script src="app.js" defer></script> </body> </html>HTML5 结构看似简单，但每个标签的存在位置、嵌套规则、属性取值都有明确规范；最容易出问题的不是“不知道怎么写”，而是“以为写了就对了”，结果在移动端、读屏软件或 SEO 抓取时暴露逻辑缺陷。
