HTML是页面结构定义者而非呈现者，其标签本质是语义容器；浏览器通过HTML骨架、CSS样式及默认样式共同完成视觉渲染，DOCTYPE决定解析模式，head中元信息直接影响渲染正确性与性能。
HTML 不是“页面呈现”的实现者，而是页面结构的定义者；浏览器渲染出的视觉效果，靠的是 HTML 提供骨架 + CSS 控制样式 + 浏览器默认样式共同作用的结果。
HTML 标签不是样式指令，而是语义容器
很多人初学时误以为 <h1> 是“加粗大字”，<p> 是“带段间距的文本”，其实它们的本质是：告诉浏览器“这段内容在文档中扮演什么角色”。<h1> 表示最高级标题，<p> 表示一个独立段落——至于是否加粗、多大、有没有上下边距，全由浏览器内置样式表或你写的 CSS 决定。
- 删掉所有 CSS 后，
<h1>仍会比<p>显得大而重，这是浏览器的默认样式（user agent stylesheet），不是 HTML 自带的“呈现能力” - 用
<div>套文字也能“看起来像标题”，但搜索引擎和读屏软件无法识别其语义，SEO 和无障碍访问直接受损 - 把
<button>换成<div onclick="...">，键盘用户按 Enter 键将无法触发，因为语义丢失导致交互行为缺失
为什么 <DOCTYPE html> 必须放在第一行
它不参与页面渲染，但决定浏览器用哪套规则解析整个文档。漏写、错位、写成 <!doctype HTML5> 都会导致浏览器进入“混杂模式（Quirks Mode）”，后果是：
- CSS 盒模型计算异常：
width: 100px在混杂模式下可能包含 padding 和 border，标准模式下只算 content 宽度 -
<img>的默认 vertical-align 变成 baseline 而非 middle，容易引发莫名基线对齐错位 - 某些 CSS 属性（如
min-height）在旧引擎中完全失效 - 现代框架（如 Vue、React）初始化脚本可能因 DOM 解析差异而报错或挂起
<head> 里哪些内容真会影响页面呈现
表面看 <head> 不显示内容，但它控制着渲染链起点：
立即学习“前端免费学习笔记（深入）”；
-
<meta charset="utf-8">缺失或写成gbk→ 中文乱码、JS 字符串截断、表单提交值损坏 -
<meta name="viewport" content="width=device-width">缺失 → 移动端强制缩放，字体小到无法阅读，点击区域错位 -
<link rel="stylesheet" href="main.css">放在<body>里 → CSS 加载前，HTML 先以无样式状态闪现（FOUC），再重绘，体验割裂 -
<title>不只是标签页文字：它是浏览器历史记录、书签、分享卡片的默认文案，也影响 SEO 权重分配
新手最容易忽略的结构陷阱
看似能跑通的代码，常埋着后期难排查的坑：
- 嵌套错误：
<p><div>文本</div></p>——<div>是块级元素，不能合法出现在<p>内，浏览器会自动闭合<p>，导致 DOM 结构和预期不符 - 遗漏
alt属性：<img src="logo.png">→ 图片加载失败时空白、SEO 降权、读屏软件读不出含义 - 用
<br>代替段落分隔：第一行<br>第二行<br>第三行—— 语义为“换行”，不是“新段落”，无法被 CSS 统一控制间距或首行缩进 -
<html lang="zh-CN">缺失 → 浏览器无法为中文选择合适字体回退策略，部分生僻字显示为方框
真正卡住项目的，往往不是“不会写什么”，而是“没意识到某处结构松动会导致下游连锁反应”。HTML 的约束力不在语法报错，而在隐性兼容边界和协作契约里。
