HTML文档必须以<!DOCTYPE html>开头，否则触发怪异模式；<html>为根节点，仅含<head>和<body>；<head>控制解析与加载，<body>承载可见内容，三者职责分明不可越界。
HTML文档必须以<!DOCTYPE html>开头
浏览器靠它识别这是HTML5文档，不是旧版HTML或XHTML。漏写或写错（比如<!doctype html>全小写、空格错位、多斜杠）会导致触发怪异模式（Quirks Mode），页面布局和CSS行为会不可预测。
常见错误现象：margin塌陷异常、box-sizing失效、Flex布局不生效。
-
<!DOCTYPE html>必须严格写在第一行，前面不能有任何字符（包括空格、BOM、注释） - 大小写不敏感，但推荐全大写+小写
html组合，即<!DOCTYPE html> - 不要加
public或SYSTEM等旧式DTD声明，HTML5不需要
<html>标签里只能直接放<head>和<body>
这是HTML树的根节点，所有其他标签都必须嵌套在它里面。很多人误把<script>或<div>直接写在<html>外，或插在<head>和<body>之间——浏览器会自动纠错，但可能造成脚本执行时机混乱或DOM解析顺序偏差。
使用场景：国际化项目常在<html lang="zh-CN">中加lang属性，影响屏幕阅读器和SEO。
立即学习“前端免费学习笔记（深入）”；
-
<head>和<body>是并列子元素，没有先后强制顺序，但惯例先写<head> -
<html>本身可带lang、dir等全局属性，不建议塞样式或事件 - 别在
<html>里直接写文本内容——会被忽略或意外包裹进<body>
<head>里不渲染内容，但决定页面怎么被解析和加载
<head>不是装饰性容器，它控制字符编码、视口、标题、资源加载优先级等关键行为。漏掉<meta charset="UTF-8">会导致中文乱码；没写<meta name="viewport">会让响应式布局在手机上失效。
性能影响：CSS文件用<link rel="stylesheet">放在<head>会阻塞渲染；而<script>默认也会阻塞，除非加defer或async。
-
<title>必须有，且只能出现一次，内容显示在浏览器标签页上 -
<meta charset="UTF-8">应紧贴<head>开头，避免因编码识别延迟导致前几个字节乱码 -
<link>、<style>、<script>可以放这里，但<script>慎用document.write()——它会清空整个页面
<body>是唯一展示给用户看的内容容器
所有可见元素——文字、图片、表单、视频——都得放在<body>里。有人把<header>、<main>、<footer>直接扔到<html>下，结果语义丢失、SEO降权、辅助技术无法识别结构。
容易踩的坑：在<body>里写<html>或<head>标签，浏览器会自动闭合，但可能导致脚本读取document.body时为空或结构错乱。
-
<body>支持onload等事件，但现代开发更倾向用DOMContentLoaded监听 - 不要用
<body bgcolor>或<body text>等过时属性，全部交给CSS控制 - 若需全局JS变量或初始化逻辑，确保DOM已就绪——检查
document.readyState是否为"interactive"或"complete"
<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><title>页面标题</title></head> <body><p>Hello World</p></body> </html>真正容易被忽略的，不是标签怎么写，而是每个层级的职责边界——
<head>管“怎么加载”，<body>管“展示什么”，<html>只管“这是个HTML文档”，三者越界操作，问题往往延迟暴露，排查起来反而更费时间。 
