必须放在第一行，它是html5文档类型声明，告诉浏览器按标准模式解析页面；若缺失、错位或前置空格/注释，将触发怪异模式，导致css失效、盒模型错乱、语义标签降级。

HTML不是编程语言，它是网页信息逻辑表现的结构标准——所有内容必须按语义层级组织，否则浏览器无法正确解析，搜索引擎也读不懂。

为什么必须放在第一行

这是告诉浏览器：“请用HTML5标准来解析接下来的所有代码”。如果漏掉、写错位置（比如缩进或前面有空格），浏览器会退回到“怪异模式”，导致CSS失效、盒模型错乱、<section></section>等语义标签被当成普通<div>处理。<ul> <li>常见错误：<code><!-- 注释 -->（注释在前）或换行后才写<code>

实际影响：同一段CSS在Chrome里正常，在IE或旧版Edge里布局塌陷

验证方式：打开开发者工具 → Elements 标签页，看顶部是否显示 而非 （无lang属性说明解析已出问题）

里哪些配置项不能省

不显示内容，但决定页面能否被正确加载和识别。以下三项缺一不可：

• <meta charset="UTF-8">：没有它，中文、emoji、特殊符号全变成乱码（）
• <meta name="viewport" content="width=device-width, initial-scale=1.0">：没有它，手机访问时页面会默认缩放成PC尺寸，文字小到无法阅读
• <title></title>：没有它，浏览器标签页显示为空白或“未命名”，SEO直接归零

其他如<link rel="stylesheet">或<script></script>可选，但前三项是硬性基础设施。

语义化标签不是“锦上添花”，而是DOM解析的前提

浏览器和辅助设备（如读屏软件）依赖标签名判断内容角色。用一堆<div>堆出导航栏，和用<code><nav></nav>包裹，对视觉用户没区别，但对搜索引擎、自动化测试、无障碍访问系统来说，完全是两个世界。

• 典型误用：<div class="header"> 应该换成 <code><header></header>；<div class="main-content"> 应该换成 <code><main></main>
• 后果：Google Search Console 可能标记“结构化数据缺失”，视障用户无法通过语义跳转到主要内容区
• 兼容性注意：<main></main>、<aside></aside> 在 IE11 及更早版本不被识别（需加 polyfill 或降级为<div role="main">）<h3> <code>里最容易被忽略的嵌套规则

  HTML不是“怎么写都行”的自由文本。某些标签有强制嵌套要求，违反会导致浏览器自动修正（即“纠错模式”），但修正结果不可控。

  

  Html2md

  使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

  下载
  • <p></p>内不能直接放<div>、<code><h1></h1>、<ul></ul>等块级元素（会自动闭合<p></p>）
  • <li>必须直接放在<ul></ul>或<ol></ol>里，不能套一层<div> <li>自闭合标签如<code><img>、<input>后面加/（如<img>）在HTML5中合法但不必要，反而可能干扰某些构建工具

  真正关键的是：浏览器解析时会重排DOM树，你写的结构 ≠ 最终生效的结构。用开发者工具检查Elements，才能确认真实嵌套关系。