HTML文档必须包含<!DOCTYPE html>、<html>、<head>和<body>四部分：<!DOCTYPE html>触发标准渲染模式，缺失或错误会导致怪异模式；<head>中<meta charset="UTF-8">防乱码、<meta name="viewport">保响应式、<title>影响SEO；<h1>-<h6>定义文档大纲层级，语义错位损害可访问性与SEO；<p>表独立语义段落，<div>为无语义布局容器，<span>为行内语义容器，现代语义标签（如<article>）应优先替代冗余<div>。
HTML 文档必须有 <!DOCTYPE html>、<html>、<head> 和 <body> 这四部分，缺一不可；标签不是“随便写写”，语义错位或嵌套错误会直接导致渲染异常或 SEO 损失。
为什么 <!DOCTYPE html> 不能省略或写错？
浏览器靠它切换渲染模式：<!DOCTYPE html> 触发标准模式，缺失或写成 <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 会让 IE 进入怪异模式（Quirks Mode），box-sizing、margin 折叠、height 计算全都不一样。
- 必须全小写，且紧贴
<html>前面，中间不能有空行或注释 - 不要写成
<DOCTYPE html>（漏了 !）或<!doctype html5>（语法无效） - HTML5 只接受这一种写法，
<!DOCTYPE html>是唯一合法形式
<head> 里哪些标签实际影响页面行为？
<head> 看似不显示，但里面几个标签动一动就会影响加载、SEO 和响应式表现：
-
<meta charset="UTF-8">必须放在<head>最前面——否则中文乱码可能在前几行就出现 -
<meta name="viewport" content="width=device-width, initial-scale=1.0">缺失时，移动端页面会默认按 980px 渲染，文字小到看不清 -
<title>不只是浏览器标签名，也是搜索引擎结果页的第一行文案，长度建议控制在 60 字符内 -
<link rel="stylesheet" href="style.css">放这里才触发 CSS 阻塞渲染，放<body>底部会导致 FOUC（闪白）
<h1> 到 <h6> 不是“字号递减”那么简单
它们本质是文档大纲层级，不是样式开关。用错会破坏可访问性（screen reader 读序）、影响 SEO 权重分配，甚至让某些无障碍工具无法生成目录。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 一个页面只应有一个
<h1>，代表主主题；后续用<h2>表示一级子节，<h3>表示子子节——跳级（比如<h1>后直接<h4>）等于大纲断裂 - 不要仅靠
<h2>+ CSS 改成小字号来“假装”是正文——语义和视觉必须一致 - 搜索引擎会把
<h1>内容当作页面核心关键词，重复堆砌关键词反而被降权
<p>、<div>、<span> 的根本区别在哪？
不是“哪个好用”，而是“谁该承担什么责任”：
-
<p>是语义化段落容器，自带上下 margin，且隐含“独立完整语义单元”——不能套<h1>或<ul>，也不能空着写<p></p> -
<div>是无语义通用块容器，适合布局分组；但滥用会导致 DOM 层级臃肿，屏幕阅读器无法识别结构 -
<span>是行内容器，只能包内联内容（如文字、<em>）；把它当按钮或加 click 事件时，记得补tabindex="0"和键盘支持
真正容易被忽略的是：现代语义标签（如 <article>、<nav>、<section>）已能替代 80% 的 <div>，但很多人还在写满屏 <div class="wrapper"> ——这不是兼容性问题，是主动放弃结构表达力。
