HTML5常用重点标注方式
HTML5提供了多种用于标注重点内容的语义化标签，最常用的是<strong>和<em>。<strong>表示内容具有重要性，<em>表示内容需要被强调，二者在默认样式下都有特殊的视觉表现。除此之外，开发者也会通过自定义CSS样式来强化重点内容的展示效果。
默认语义标签的表现
我们先看一段基础的HTML5代码，分别使用<strong>和<em>标注内容：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>重点标注测试</title>
</head>
<body>
<p>这是一段普通文本，<strong>这部分是重要内容</strong>，<em>这部分是需要强调的内容</em>。</p>
</body>
</html>
在Chrome浏览器中，<strong>标签的内容默认会显示为加粗字体，<em>标签的内容默认会显示为斜体；而在Safari浏览器中，二者的默认样式和Chrome一致，但在部分旧版本Safari中，<strong>的加粗字重会比Chrome略高，视觉上更厚重。
自定义样式的表现差异
当开发者给重点标注标签添加自定义CSS样式时，差异会更明显。比如我们给<strong>添加颜色和下划线样式：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>自定义样式测试</title>
<style>
.custom-strong {
color: #ff0000;
text-decoration: underline;
font-weight: bold;
}
</style>
</head>
<body>
<p>这是一段普通文本，<strong class="custom-strong">这部分是自定义样式的重点内容</strong>。</p>
</body>
</html>
在Chrome中，这段代码的渲染结果会严格按照CSS定义的样式展示，颜色为红色，同时有下划线和加粗效果。而在Safari中，当<strong>标签同时有自定义font-weight和浏览器默认font-weight时，会出现样式优先级计算偏差，部分情况下加粗效果会失效，只保留红色和下划线样式。
Safari与Chrome渲染引擎核心区别
造成上述表现差异的核心原因是二者使用的渲染引擎不同，Safari基于WebKit引擎，Chrome基于Blink引擎，二者的区别主要体现在以下几个方面：
引擎溯源与迭代方向
WebKit引擎最初由苹果公司基于KHTML引擎开发，长期作为Safari浏览器的核心渲染引擎，迭代过程中更侧重适配苹果生态的设备特性，对iOS、macOS系统的硬件适配优化更多。Blink引擎是Google从WebKit引擎 fork 出来的分支，2013年之后成为Chrome的核心引擎，迭代方向更侧重跨平台兼容性和新Web标准的快速支持，对前沿CSS特性、HTML5新接口的适配速度更快。
样式计算规则差异
WebKit和Blink在CSS样式优先级计算、继承规则上略有不同。比如在用户代理样式表（浏览器默认的样式表）的设置上，WebKit对<strong>、<em>等语义标签的默认样式权重设置更高，当自定义样式和默认样式冲突时，WebKit更倾向于保留部分默认样式特性，而Blink的样式计算逻辑更严格遵循CSS规范，自定义样式的优先级更容易覆盖默认样式。
字体渲染逻辑差异
二者在字体渲染的抗锯齿处理、字重计算上也有区别。Safari的WebKit引擎在渲染加粗字体时，会调用系统级的字体渲染接口，字重的步进更明显；Chrome的Blink引擎则采用自己的字体渲染逻辑，字重的变化更平滑，当自定义font-weight为600时，Safari的加粗效果会比Chrome更突出。
开发中的适配建议
为了减少HTML5重点标注内容在不同浏览器中的表现差异，开发者可以参考以下建议：
- 尽量避免依赖浏览器的默认样式，给重点标注标签统一设置自定义CSS样式，明确指定color、font-weight、font-style等属性，避免样式冲突。
- 在开发过程中同时用Safari和Chrome进行测试，尤其是涉及语义化标签和自定义样式结合的场景，及时发现渲染差异。
- 如果需要兼容旧版本Safari，避免使用过于前沿的CSS属性，或者对Safari做单独的样式适配，比如在CSS中添加-webkit-前缀的兼容写法。
通过了解两种渲染引擎的差异，开发者可以更精准地控制页面在不同浏览器中的表现，提升页面的兼容性和用户体验。