HTML 里的高亮标记 mark 用法-html教程-PHP中文网

mark 元素唯一语义是“上下文相关性标记”，非强调或语气变化；仅适用于搜索关键词、文档引用术语、代码示例修改部分；必须安全操作文本节点、显式声明样式并适配深色模式，禁用 innerhtml 替换。

html 里的高亮标记 mark 用法

mark 不是“加黄底”的快捷方式，而是语义标记

它唯一传达的语义是“这段文本在当前上下文中被相关性标记”，不是强调重要性（那是 strong），也不是语气变化（那是 em）。用错场景，读屏器不会播报、搜索引擎可能忽略、可访问性直接掉线。

必须用 mark 的三类场景：
• 搜索结果页中动态包裹用户输入的关键词（如 URL 参数 q=fetch，页面里所有 “fetch” 需被语义化标记）
• 文档引用片段里临时标出与当前段落强相关的术语（如 “检查 package.json 中的 dependencies 字段”）
• 代码示例中突出显示被修改/新增的行内部分（如 const value = 42;），且该高亮需被辅助技术识别为“上下文标记”

动态高亮时最危险的写法：innerHTML.replace()

直接对容器做 innerHTML = htmlString.replace(/keyword/g, '$&')，等于同时打开 XSS、DOM 结构撕裂、HTML 解析中断三扇门：

用户搜 [a-z] → 正则未转义，new RegExp(keyword) 报错中断
用户搜 <script>alert(1)</script> → 拼进字符串后执行脚本
原文含 <code>console.log() → 替换后变成 <code>console.log()，mark 标签被撕开，DOM 解析失败

安全做法是只操作纯文本节点：
• 用 document.createTreeWalker(element, NodeFilter.SHOW_TEXT) 遍历所有文本节点
• 跳过空节点（node.textContent.trim() === ''）
• 对每个节点内容做匹配，用 document.createElement('mark') 插入，而非字符串拼接

样式必须显式声明，不能靠浏览器默认

浏览器默认黄色背景在以下场景会失效：
• 深色模式下部分浏览器渲染为透明或浅黄
• Windows 高对比度模式强制重置为黑底
• 邮件客户端、阅读模式、PDF 导出完全丢弃 UA 样式

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

至少要声明：
• background-color（别用 background: none，它不清除 background-image）
• color（确保深色模式下文字可读）
• padding（避免贴边难点击）
建议加 border-radius 和 box-shadow: inset 0 -2px 0 #007acc，色觉障碍用户也能感知

深色模式适配必须手动写：
@media (prefers-color-scheme: dark) { mark { background-color: #ffca28; color: #121212; } }