使用語義HTML複製

Web內容版本控制通常依賴於文字處理器的更改跟踪。但是，HTML為此提供內置元素：<del></del> ，，，，，<ins></ins> ， 和<mark></mark>。結合其他元素和CSS，這些功能與Word或Google文檔相似。

讓我們開始<ins></ins>。

這<ins></ins>元素表示插入文本。在建議添加的同時，文本本質上已經存在於標籤中。瀏覽器通常強調插入的文本。這種視覺提示，儘管潛在地與<u></u>或鏈接，很有幫助。

現在，讓我們將<del></del>，標記已刪除的文本。

瀏覽器樣式<del></del>罷工，類似於<s></s>，但具有不同的語義含義。<del></del>指示要刪除的內容進行編輯，而<s></s>表示過時或不准確的信息。

這些語義元素提供了基本的視覺提示。但是，他們還具有用URL解釋編輯理由的URL註釋更改的cite屬性。不幸的是，此URL不直接可見或可單擊。儘管語義上有價值，但仍需要CSS進行顯示，即使到那時，可命令性和可複制性仍然存在問題。包裝<ins></ins>和<del></del>在鏈接中，鏈接是否是編輯的一部分。

一個更有用的屬性<ins></ins>和<del></del>是datetime ，指定編輯的時間戳。儘管不是立即可見的，但它仍然保持語義清晰度。

HTML的datetime格式需要精確性，需要特定的一天，月和年份<ins></ins>和<del></del>避免歧義。例如，CSS可以通過揭示懸停的datetime值來提高清晰度。複選框也可以用於交互式控制。

有效的複制不僅僅是添加和刪除。它涉及理解作者意圖。輸入<mark></mark>元素。

<mark></mark>突出顯示特別感興趣的文本，通常具有黃色背景。

對於編輯的筆記，<aside></aside>可以包含更長的評論。句子結構或單詞選擇的內聯評論需要獨創性和CSS。

這<u></u>元素通常由於鏈接混亂而避免，只要它使用獨特的顏色（例如紅色）來避免與鏈接的模棱兩可，可以突出顯示拼寫錯誤。

默認瀏覽器樣式<ins></ins>，，，，，<del></del> ， 和<mark></mark>是有幫助但可能令人困惑的。為了提高清晰度，請考慮自定義CSS：

 ins {
  填充：0 0.125EM;
  文本介紹：無；
  背景色：Lightgreen;
}
del {
  填充：0 0.125EM;
  文本介紹：無；
  背景色：粉紅色；
}
標記 {
  填充：0 0.125EM;
}
。筆記 {
  填充：0 0.125EM;
  背景色：燈光；
}
一邊。注意{
  填充：0.5EM 1EM；
}
u {
  文本介紹：無；
  邊界底：3px紅色沖洗；
}

雖然CSS動畫可以增強視覺反饋，但淡出<del></del>由於display: none 。使用零高和寬度的visibility可以使褪色更順暢。

總之，HTML提供了跟踪編輯的工具。仔細的樣式和對可訪問性的考慮（正如阿德里安·羅塞利（Adrian Roselli）在原始文章的評論中指出的那樣）對於有效實施至關重要。

以上是使用語義HTML複製的詳細內容。更多資訊請關注PHP中文網其他相關文章！