HTML语义标签需严格规范：多行代码必须用<pre>嵌套；<time>须带datetime属性；<abbr>和<blockquote>需配title与cite；内HTML字符必须转义。
HTML里想让一段文字带语义地“被标记为代码”“被引用”“被缩写”，不能靠加粗或换行硬凑，得用对标签。错用 <pre> 套 <div>、漏转义 <、把 <time> 当普通容器塞字符串——这些都会导致语义丢失、渲染异常或无障碍失效。
多行代码必须用 <pre><code> 嵌套，顺序不能反
浏览器只认 <pre><code> 这个组合：前者保空格换行，后者声明“这是代码”。反过来或拆开，高亮库（如 Prism.js）大概率不触发，屏幕阅读器读作普通段落。
-
<code>单独放多行 JS，所有换行和缩进被压成一个空格，复制出来没法直接运行 -
<pre>里直接塞<div>或<p>是 HTML5 非法嵌套，部分浏览器容错但不可靠 - 模板中如果
<pre>标签本身有缩进（比如在 JSX 或 .html 文件里被 IDE 自动对齐），首行会多出空格——要么从行首写标签，要么用<!-- -->注释包住
<time> 必须带 datetime 属性才有效
只写 <time>2026-09-29</time> 是无效的：机器无法识别这是日期，搜索引擎不索引时间信息，datetime 才是机器可读的关键。
- 正确写法：
<time datetime="2026-09-29">今天</time>或<time datetime="2026-09-29T04:30">现在</time> - 纯中文如“九月二十九日”不能替代
datetime值，否则语义断裂 - 动态插入时，别用
innerHTML拼接datetime，容易 XSS；优先用setAttribute('datetime', value)
缩写和引用要配 cite 属性才完整
<abbr> 和 <blockquote> 不是摆设。没 cite，引用来源就没了；没 title，缩写展开就失效。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
-
<abbr title="HyperText Markup Language">HTML</abbr>：鼠标悬停才显示全称，title缺失则无提示 -
<blockquote cite="https://example.com/article">...</blockquote>：cite是 URI，不是文字描述；不写或写错格式（比如写成cite="来源：XXX"）会让语义断掉 -
<q>是行内引用，自动加引号，但不支持cite；长引用必须用<blockquote>
<code> 里的 HTML 字符必须转义
你贴的代码里如果有 <div>、& 或 >，不转义就会被浏览器当真实标签解析，轻则内容截断，重则整个页面结构错乱。
- 服务端渲染建议统一过
htmlspecialchars()（PHP）或DOMPurify.sanitize()（JS） - 前端动态插入时，永远优先用
textContent赋值，别用innerHTML - 常见漏转：
<script>标签内容、React JSX 中的花括号、Vue 模板中的{{}}—— 它们本质都是字符串，但混在 HTML 里就得逃逸
最常被忽略的是：这些标签不是“视觉美化工具”，而是语义契约。浏览器、爬虫、读屏软件都依赖它们做判断。写完检查一遍 datetime、cite、title 是否都到位，<pre><code> 是否严格嵌套，转义是否彻底——比调样式更容易翻车。
