双重强调的事情

>我的前老板有一个奇特的习惯：过度强调单词。 在Wysiwyg时代，这是一个真正的挑战，需要手动HTML编码。

<p>
  I used to have this boss who <em>loved</em>, <strong>loved</strong>, 
  <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> 
  to emphasize words.
</p>

（我们甚至都不讨论他用来额外强调的颜色编码！）>

这个费力的标记提出了问题。 除了努力之外，过度的重点 - 双重甚至三倍 - 一个好主意吗？

语义与视觉强调：一个关键区别

和

>标签在html5中具有不同的目的：<strong></strong> <em></em>

：指示“强烈的重要性，严重性或紧迫性。”
• <strong></strong>
：表示“强调强调”。
• > <em></em>

增加了权重，表明重要性或紧迫性。 考虑一个警告：

<strong></strong>

警告：

此内容异常很棒。 >

由于其吸引人的斜体化而似乎相似，但其作用是在句子中巧妙地转移重点。 比较：

<em></em>都强调，但有所不同，改变了句子的含义和口头阅读。

擅长传达细微的音调。

<p>I ate the <em>entire</em> plate of burritos.</p>
<p>I ate the entire <em>plate</em> of burritos.</p>

视觉强调超出语义<em></em>

>有时，斜体纯粹是为了视觉效果而没有语义变化。 几个标签实现了这一目标：

：虽然其主要功能是语义，但通常在视觉上使用。

• ：for引文（“源：<em></em>css-tricks
>”）。
• > <cite></cite>：有关联系方式（例如，[电子邮件保护]）。
同样，
• >不应该仅适用于视觉大胆。 将其用于真正的语义重量，避免不必要的重点。 默认情况下已经大胆的标题不需要进一步的加强。<address></address>
嵌套的重点：仔细的方法

在某些合法的情况下，需要嵌套的重点。 例如，一个样式的块语：<strong></strong>

如果电影标题在此块中需要斜体，则

是合适的，即使容器已经斜体化，也很合适：

理想情况下，在这种情况下，应删除嵌套的斜体：

blockquote {
  font-style: italic;
}

>容器样式查询简化了以下简化：<em></em>

<blockquote>
  This movie's opening weekend performance... In its first weekend, <i>Avatar: The Way of Water</i> made...
</blockquote>

这检查了blockquote是否是斜体的，如果是的，则在保留语义含义的同时，从嵌套元素中删除斜体。

避免嵌套重点

blockquote i {
  font-style: normal;
}

>

blockquote {
  container-name: quote;
  font-style: italic;
}

@container quote (font-style: italic) {
  em, i, cite, address {
    font-style: normal;
  }
}

（或反之亦然）通常不必

<p>
  I used to have this boss who <em>loved</em>, <strong>loved</strong>, 
  <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> 
  to emphasize words.
</p>

>现代浏览器处理渲染，但在语义上是多余的。一种强调类型通常就足够了。选择最能传达您意图的一种（视觉，重量或宣布的重点）。 屏幕读取器不会解释嵌套的标记，这是更重要的。

>

管理过度重点

如果您的老板要求“所有重点”，则优先考虑每种强调类型的正确HTML标签。 将CSS用于不影响语义的视觉样式：

<p>I ate the <em>entire</em> plate of burritos.</p>
<p>I ate the entire <em>plate</em> of burritos.</p>

>突出显示错误检测的嵌套语义重点：

blockquote {
  font-style: italic;
}

记住摘要的摘要，用于从嵌套元素中删除默认的斜体样式。

>

其他注意事项

• 确保您的webfont包含粗体和斜体变化。>
考虑重写自然重点的内容。
>测试您的受众使用的各种浏览器。

以上是双重强调的事情的详细内容。更多信息请关注PHP中文网其他相关文章！