Disalin dengan html semantik

Kawalan versi kandungan web sering bergantung pada penjejakan perubahan pemproses kata. Walau bagaimanapun, HTML menawarkan unsur-unsur terbina dalam ini:<del></del> ,<ins></ins> , dan<mark></mark> . Digabungkan dengan unsur -unsur lain dan CSS, ini memberikan fungsi yang sama kepada Word atau Google Docs.

Mari kita mulakan<ins></ins> .

The<ins></ins> elemen menandakan teks yang dimasukkan. Semasa mencadangkan penambahan, teks itu sememangnya sudah ada dalam tag. Penyemak imbas biasanya menggariskan teks yang dimasukkan. Isyarat visual ini, walaupun berpotensi keliru dengan garis bawah dari<u></u> atau pautan, membantu.

Sekarang, mari kita pasangkan penyisipan dengan<del></del> , yang menandakan teks yang dipadam.

Gaya pelayar<del></del> dengan serangan, serupa dengan<s></s> , tetapi dengan makna semantik yang berbeza.<del></del> Menunjukkan kandungan yang dikeluarkan untuk mengedit, sementara<s></s> menandakan maklumat yang sudah lapuk atau tidak tepat.

Unsur -unsur semantik ini memberikan isyarat visual asas. Walau bagaimanapun, mereka juga mempunyai atribut cite untuk perubahan perubahan dengan URL yang menerangkan rasional edit. Malangnya, URL ini tidak dapat dilihat secara langsung atau boleh diklik. Walaupun semantik berharga, CSS diperlukan untuk paparan dan walaupun itu, kebolehkerjaan dan kebolehkerjaan tetap menjadi isu. Pembalut<ins></ins> dan<del></del> Dalam pautan tidak menjelaskan sama ada pautan itu adalah sebahagian daripada edit.

Atribut yang lebih berguna yang dikongsi oleh<ins></ins> dan<del></del> adalah datetime , menyatakan timestamp edit. Walaupun tidak segera pengguna-kelihatan, ia mengekalkan kejelasan semantik.

Format datetime HTML menuntut ketepatan, memerlukan hari, bulan, dan tahun tertentu untuk<ins></ins> dan<del></del> untuk mengelakkan kekaburan. CSS dapat meningkatkan kejelasan, misalnya, dengan mendedahkan nilai datetime pada hover. Kotak semak juga boleh digunakan untuk kawalan interaktif.

Copyediting yang berkesan melampaui menambah dan memadam. Ia melibatkan pemahaman niat pengarang. Masukkan<mark></mark> elemen.

<mark></mark> menyoroti teks minat tertentu, biasanya dengan latar belakang kuning.

Untuk nota editor,<aside></aside> boleh mengandungi komen yang lebih panjang. Komen sebaris untuk struktur kalimat atau pilihan perkataan memerlukan kepintaran dan CSS.

The<u></u> Elemen, sering dielakkan kerana kekeliruan pautan, boleh menyerlahkan salah ejaan, dengan syarat ia menggunakan warna yang berbeza (seperti merah) untuk mengelakkan kekaburan dengan pautan.

Gaya penyemak imbas lalai untuk<ins></ins> ,<del></del> , dan<mark></mark> membantu tetapi berpotensi mengelirukan. Untuk meningkatkan kejelasan, pertimbangkan CSS tersuai:

 Ins {
  Padding: 0 0.125em;
  Teks-penyerapan: Tiada;
  latar belakang warna: Lightgreen;
}
del {
  Padding: 0 0.125em;
  Teks-penyerapan: Tiada;
  latar belakang warna: merah jambu;
}
Tandakan {
  Padding: 0 0.125em;
}
.note {
  Padding: 0 0.125em;
  latar belakang warna: lightblue;
}
aside.note {
  Padding: 0.5em 1em;
}
u {
  Teks-penyerapan: Tiada;
  Sempadan-bawah: 3px merah putus-putus;
}

Walaupun animasi CSS dapat meningkatkan maklum balas visual, pudar<del></del> Kandungan tidak mudah kerana batasan dengan display: none . Menggunakan visibility dengan ketinggian sifar dan lebar membolehkan pudar yang lebih lancar.

Kesimpulannya, HTML menyediakan alat untuk mengesan suntingan. Gaya yang berhati -hati dan pertimbangan kebolehcapaian (seperti yang dinyatakan oleh Adrian Roselli dalam komen artikel asal) adalah penting untuk pelaksanaan yang berkesan.

Atas ialah kandungan terperinci Disalin dengan html semantik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!