网页基础：手把手带你编写HTML文档结构
作者：袖梨
2026-07-01
必须将<!DOCTYPE html>置于文件最开头，前面不能有任何字符（包括空格、注释、BOM），否则浏览器会进入怪异模式，导致flex、grid、margin等样式失效；<html lang="zh-CN">应明确声明语言以支持无障碍和SEO；<meta charset="UTF-8">须紧随<head>之后、所有含文本标签之前，确保前1024字节内被解析，避免乱码与脚本错误。
不写 <!DOCTYPE html>，浏览器大概率会进怪异模式（Quirks Mode），flex、grid、甚至 margin 都可能失效——这不是 bug，是浏览器在“猜”你想要什么。
为什么 <!DOCTYPE html> 必须放在第一行
它不是注释，也不是可选标签，而是触发标准渲染模式的开关。哪怕前面多一个空格、一行注释、甚至 UTF-8 BOM 字节，都可能导致浏览器降级到怪异模式。
- 必须严格位于文件最开头，前面不能有任何字符（包括空行、
<!-- -->、BOM） -
<!doctype html>或<!DOCTYPE HTML>也合法，但小写<!doctype html>更易被 lint 工具识别 - 旧项目里看到
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ...>？那是过时写法，现代项目只用<!DOCTYPE html>
<html lang="zh-CN"> 的 lang 属性到底要不要加
加。不是“建议”，是实际影响：屏幕阅读器靠它切换语音，CSS 的 :lang() 伪类靠它匹配，搜索引擎也用它判断内容语言。不写默认为 und（未定义），等于放弃这部分语义。
-
lang="zh"和lang="zh-CN"都可，后者更精确（区分简体中文与繁体） - 如果页面混用中英文，可在局部元素上覆盖，比如
<span lang="en">API</span> - 不要写成
<html language="zh-CN">—— 属性名是lang，不是language
<meta charset="UTF-8"> 为什么必须放 <head> 最前面
浏览器解析 HTML 是流式进行的。如果 <meta charset> 出现在 <title> 后面，前面那部分标题文字就可能被按系统默认编码（比如 GBK）错误解码，导致乱码或 emoji 显示为方块。
立即学习“前端免费学习笔记（深入）”；
- 必须紧贴
<head>开始标签之后，越早越好（理想位置：第二行） - 不能省略引号：
<meta charset=UTF-8>在某些解析器下会失败 - 不需要写
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">——<meta charset>是 HTML5 简化写法，等效且更安全
<meta name="viewport"> 在移动端不生效的常见原因
写了却缩放异常？大概率是位置或值的问题。这个标签只对移动浏览器和桌面 Chrome 的响应式模拟起作用，但它不会“自动适配”，得靠参数配合 CSS 单位（如 rem、vh）才能真正生效。
- 必须写在
<head>里，且要在所有 CSS 和 JS 加载前（否则样式可能已按错误宽度计算） -
content="width=device-width, initial-scale=1.0"是底线配置；漏掉initial-scale=1.0，iOS Safari 可能默认放大 1.5 倍 - 不要加
user-scalable=no—— 这会破坏可访问性，Lighthouse 直接扣分 - 如果用了
rem布局，记得 JS 动态设置根字体大小时，要监听orientationchange事件，否则横竖屏切换后rem基准错乱
真正容易被忽略的，不是某个标签怎么写，而是它们之间的**顺序依赖**：<meta charset> 影响文本解析，<meta viewport> 影响布局上下文，lang 影响 DOM 行为——这些不是孤立配置，而是一条隐性执行链。写错一行位置，后面所有样式和脚本都可能在错误前提下运行。
