legend必须嵌套在fieldset内且为首个子元素才生效，单独使用无效；样式仅支持text-align或display: contents调整；内容仅限内联元素；禁用需设fieldset[disabled]；视觉隐藏须用.visually-hidden类而非display:none。
legend 必须嵌套在 fieldset 里才能生效
单独写 <legend>标题</legend> 不会渲染，浏览器直接忽略。它不是独立标签，只在 <fieldset></fieldset> 内部起作用，且必须是其第一个子元素。
常见错误包括：
-
<legend></legend>放在<div> 或表单顶层 → 无 DOM 语义，屏幕阅读器读不到 <li> <code><fieldset><div><legend>标题</legend></div></fieldset>→ 不是直接子元素，WCAG 检查报fieldset-missing-legend -
<fieldset> <p>说明</p> <legend>标题</legend> </fieldset>→<p></p>占了首位，<legend></legend>被跳过 - 用
text-align: center或text-align: right控制文字对齐（不影响边框锚点） - 用
display: contents拆解盒模型（但 IE 完全不支持，旧版 Safari 表现不稳定） -
<legend> <input type="checkbox"> 启用验证</legend>→ 表单控件嵌套，渲染异常 -
<legend><p>必填项</p></legend>→<p></p>是块级，破坏流式行为 -
<legend><h3>地址</h3></legend>→<h3></h3>干扰可访问名称计算，阅读器可能跳过 - 必须插入为
<fieldset></fieldset>的第一个子节点 - 不能插入空格或换行符作为首个子节点（DOM 中的文本节点也算）
- 插入后立即检查
fieldset.firstElementChild === legend，避免因 whitespace 导致语义失效
legend 样式调整不能靠 position: absolute 或 margin 移动位置
浏览器把 <legend></legend> 当作边框的一部分渲染，默认“浮”在左上角。用 position: absolute、margin-left 或 flex 布局强行拉它，容易导致边框断裂、文字重叠或布局错位。
安全做法只有两种：
若真要彻底自定义位置和样式，建议放弃 <fieldset>/<legend></legend>
</fieldset>，改用 <section aria-labelledby="lbl1"><h3 id="lbl1">标题</h3></section>，并手动补全可访问性逻辑。
legend 内容只能包含内联元素，禁用块级标签和表单控件
<legend></legend> 本身是行内容器，HTML 规范禁止在里面放 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img
src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a>
<p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>、<div>、<code><input> 等块级或交互元素。
这些写法会导致解析异常或布局错乱：
允许的安全内联内容：纯文本、<strong></strong>、<span></span>、图标 <svg></svg>（需包裹在 <span></span> 中）。
禁用整组时，必须用 fieldset[disabled]，而不是给 legend 加 disabled
<legend></legend> 本身不响应 disabled 属性，设了也无效。真正能禁用整个分组并灰化样式的，只有 <fieldset disabled></fieldset>。
动态 JS 插入 <legend></legend> 时要注意：
最易被忽略的是：视觉隐藏 <legend></legend> 时，绝不能用 display: none 或 visibility: hidden —— 这等于主动切断可访问性。应使用标准 .visually-hidden 类（clip-path: inset(100%) + border: 0 + width: 1px 等组合）。
