雙重強調的事情

>我的前老闆有一個奇特的習慣：過度強調單詞。 在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中文網其他相關文章！