>我的前老闆有一個奇特的習慣：過度強調單詞。 在Wysiwyg時代，這是一個真正的挑戰，需要手動HTML編碼。
1 2 3 4 5 | <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>都強調，但有所不同，改變了句子的含義和口頭閱讀。
擅長傳達細微的音調。
1 2 | <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>
如果電影標題在此塊中需要斜體，則
是合適的，即使容器已經斜體化，也很合適：
理想情況下，在這種情況下，應刪除嵌套的斜體：
1 2 3 | blockquote {
font-style: italic;
}
|
登入後複製
登入後複製
>容器樣式查詢簡化了以下簡化：<em></em>
1 2 3 | <blockquote>
This movie's opening weekend performance... In its first weekend, <i>Avatar: The Way of Water</i> made...
</blockquote>
|
登入後複製
避免嵌套重點1 2 3 | blockquote i {
font-style: normal;
}
|
登入後複製
>
1 2 3 4 5 6 7 8 9 10 | blockquote {
container-name: quote;
font-style: italic;
}
@container quote (font-style: italic) {
em, i, cite, address {
font-style: normal;
}
}
|
登入後複製
1 2 3 4 5 | <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用於不影響語義的視覺樣式：
1 2 | <p>I ate the <em>entire</em> plate of burritos.</p>
<p>I ate the entire <em>plate</em> of burritos.</p>
|
登入後複製
登入後複製
>突出顯示錯誤檢測的嵌套語義重點：
1 2 3 | blockquote {
font-style: italic;
}
|
登入後複製
登入後複製
記住摘要的摘要，用於從嵌套元素中刪除默認的斜體樣式。
>
其他注意事項
- 確保您的webfont包含粗體和斜體變化。 >
考慮重寫自然重點的內容。 -
>測試您的受眾使用的各種瀏覽器。 -
以上是雙重強調的事情的詳細內容。更多資訊請關注PHP中文網其他相關文章！
