HTML文档必须以<!DOCTYPE html>开头，否则浏览器进入怪异模式导致语义标签失效、布局错乱；<html>必须包裹<head>和<body>，<head>需在<body>前且含<meta charset="UTF-8">（须置最前）和<title>，<body>是唯一可放可见内容的容器。
HTML文档必须以 <!DOCTYPE html> 开头，否则浏览器会进入怪异模式，连 <header>、<nav> 这类语义标签都可能失效——这不是兼容性问题，是解析引擎根本没按 HTML5 标准启动。
为什么 <html> 必须包裹 <head> 和 <body>
浏览器解析时，<html> 是唯一合法的根元素。如果漏写或错放（比如把 <body> 直接扔在 <html> 外），DOM 树会自动修复：缺失的 <html> 会被补上，但 <head> 和 <body> 会被强行塞进修复后的结构里，导致 script 执行时机异常、CSS 作用域错乱。
-
<head>只能出现在<html>内部，且必须在<body>之前；它不渲染内容，但控制页面元信息（如<meta charset="UTF-8">缺失会导致中文乱码） -
<title>必须位于<head>内，且只能出现一次；重复写多个<title>时，浏览器只取第一个 -
<body>是唯一可直接写可见内容的容器；所有视觉元素（<p>、<div>、<img>等）必须嵌套其中，不能平级挂在<html>下
<meta charset="UTF-8"> 放错位置就白写了
这个标签必须出现在 <head> 的最前面（至少要在 <title> 之前），否则浏览器已按默认编码（通常是 ISO-8859-1）开始解析，再遇到 charset 也来不及切换。常见现象是页面刚加载时文字乱码，刷新后正常——那是因为缓存或重解析触发了二次处理，不可靠。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 不要把它塞在
<body>里，浏览器会忽略 - 不要用
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">替代，HTML5 中已过时，且兼容性差 - VS Code 或 WebStorm 自动生成的模板常把这行放在
<title>后面，记得手动往前挪
自闭合标签写法差异直接影响渲染行为
<img>、<input>、<br> 这类标签没有结束标签，但属性必须完整。尤其注意 <img src="x.jpg"> 缺少 alt 属性时，虽然能显示图片，但无障碍阅读器无法描述内容，SEO 权重也会下降；而 <input type="text"> 忘写 name，表单提交时该字段根本不会被发送。
立即学习“前端免费学习笔记（深入）”；
- HTML5 允许省略末尾斜杠（
<img src="a.png">合法），但写成<img src="a.png" />也不报错——XML 风格写法在 HTML5 中纯属冗余 -
<link rel="stylesheet" href="style.css">必须放在<head>内，放<body>开头会导致 CSS 加载延迟，页面闪动 -
<script>默认阻塞 HTML 解析，若必须放<head>，请加defer或async属性，否则页面白屏时间变长
真正容易被忽略的不是标签怎么写，而是浏览器如何“纠错”：它会默默修复结构错误，让你误以为代码没问题。查 DOM 树要用开发者工具的 Elements 面板，而不是看源码——源码里没写的标签，DOM 里可能已经存在了。
