HTML是标记语言而非编程语言，用语义化标签描述内容结构，需遵循文档骨架、可访问性及解析特性。

HTML 不是编程语言，是浏览器能直接读取并渲染的标记语言。它用成对的标签（比如

、）描述内容结构和语义，而不是控制逻辑或流程。

HTML 标签本质是语义指令，不是样式代码

很多人初学时以为 是“加粗”， 是“斜体”，于是滥用它们做视觉效果。其实 表示“不带额外语义的突出显示”， 表示“不同语气或语境的文字”（比如外文词、科技术语）。视觉表现该交给 CSS 控制。

常见误区：

• 用
  套

  模拟按钮或链接，却不加 role 或 tabindex，导致屏幕阅读器无法识别
• 把
  到
  当作“字号大小工具”，跳着用（比如
  后直接
  ），破坏文档大纲
• 在 上漏写 alt 属性，既影响可访问性，也降低 SEO 可读性

HTML 文件必须有基本骨架才能被浏览器正确解析

没有 、、、 这四部分，浏览器可能进入怪异模式（Quirks Mode），导致盒模型、字体渲染等行为不一致。

最小合法 HTML 文件长这样：

  <meta charset="UTF-8"><title>页面标题</title><p>这是正文段落</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill10828" title="财经HTML高端海报生成"><img
														src="https://img.php.cn/upload/skill/000/000/081/179336525482166.jpg" alt="财经HTML高端海报生成" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill10828" title="财经HTML高端海报生成" class="overflowclass">财经HTML高端海报生成</a>
													<p class="overflowclass">复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill10828" title="财经HTML高端海报生成" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>

注意点：

• lang 属性不是可选装饰，它直接影响语音合成、断字（hyphenation）、字体回退等行为
• charset 必须是 UTF-8，且 要在 最前面（否则可能被忽略）
• 不只是浏览器标签页上显示的文字，也是搜索引擎结果页的第一行、分享卡片的默认标题

HTML 解析是单向流：从上到下、边加载边构建 DOM

浏览器拿到 HTML 字节流后，并不会等整个文件下载完才开始处理。它逐行解析，遇到标签就创建对应 DOM 节点，遇到 <script></script> 默认会暂停解析、下载并执行 JS（除非加 async 或 defer）。

这意味着：

• 把 <script></script> 放在 顶部，很可能阻塞首屏渲染
• 虽然不阻塞 HTML 解析，但会阻塞后续脚本执行和页面绘制（render blocking）
• + 的响应式图片逻辑，是在 HTML 解析阶段由浏览器根据当前环境（DPR、viewport、格式支持）决定加载哪个资源，不是 JS 运行时才选

真正容易被忽略的，是 HTML 的“被动性”：它本身不做任何计算、不维护状态、不响应事件——所有交互能力都靠外部引入的 JS 和 CSS 协同实现。写 HTML 时盯着“结构是否清晰”“语义是否准确”“是否便于后续扩展”，比纠结“怎么让这个 div 居中”重要得多。