最合规标注专业术语应使用标签，因其语义明确表示技术术语、外语短语等，被屏幕阅读器识别，提升可访问性；适用于首次定义术语场景，提供更强语义锚点。
用 <i></i> 标注专业术语最合规
<i></i> 是 HTML5 明确指定用于“技术术语、外语短语、船名、作品标题等区别性文本”的标签，不表示强调，只表语义区分。浏览器默认渲染为斜体，但重点是它被屏幕阅读器识别为非普通文本，能提升可访问性。
- 正确场景：写到
<i>TCP/IP</i>、<i>quantum entanglement</i>、<i>《论语》</i> - 别用
<em></em>代替——它专用于语义强调（重读），会改变语气，比如“你必须初始化”里的“必须”才是<em></em>的位置 - 别用
<b></b>或 CSS 加粗——纯视觉处理丢失语义，对 SEO 和无障碍支持无益
<dfn></dfn> 适合首次定义术语时使用
当一段文字中第一次出现某个术语，并紧接着给出解释，<dfn></dfn> 是更精准的选择。它明确告诉解析器：“这个词在此处被定义”，比 <i></i> 多一层语义锚点。
- 示例：
<p>我们采用 <dfn title="Dynamic Host Configuration Protocol">DHCP</dfn> 自动分配 IP 地址。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> -
title属性不是必须，但加上后鼠标悬停可提示全称，对用户友好 - 注意：不要嵌套
<dfn></dfn>在<i></i>里——两者语义不同，混用反而模糊意图
避免用 <u></u> 或 <strong></strong> 标术语
<u></u> 在 HTML5 中已被重定义为“非文本注释”，比如拼写错误或中文专名号，**不是**术语标记工具；而 <strong></strong> 表达的是内容重要性（如警告、关键操作），和术语本身是否“专业”无关。
- 错误写法：
<u>API</u>、<strong>SQL</strong>—— 浏览器可能渲染异常，辅助技术会误读语气 - 兼容性风险：
<u></u>在旧版浏览器中样式不可控，且与链接下划线冲突，易引发用户误点击 - 如果真需要加粗术语（比如文档风格要求），应通过 CSS 控制
<i></i>的字体权重，而非换标签
多语言术语要留意方向与字体
遇到阿拉伯语、希伯来语等 RTL（从右向左）语言术语，<i></i> 本身不处理文本方向，需配合 dir 属性或 CSS direction。
- 示例：
<i dir="rtl">الويب</i>（阿拉伯语“Web”） - 中英文混排术语如
<i>React</i> 组件，确保父容器字体栈包含中西文等宽/协调字体，否则斜体在中文旁可能显得突兀 - 别依赖
<i></i>自动适配——它只是语义容器，排版细节得靠 CSS 补足
<b></b> 或加个 class 就完事。其实只要多花两秒选对标签，就能让代码在无障碍、SEO、长期维护上少掉好几个坑。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
