Memetik dalam HTML: Petikan, Petikan, dan Blockquotes

Ia terlalu biasa untuk melihat HTML yang salah digunakan untuk petikan dalam markup. Dalam artikel ini, mari kita menggali semua ini, melihat situasi yang berbeza dan tag HTML yang berbeza untuk mengendalikan situasi tersebut.

Terdapat tiga elemen HTML utama yang terlibat dalam petikan:

Mari lihat.

Blockquotes

Tag blockquote digunakan untuk membezakan teks yang disebutkan dari seluruh kandungan. Guru Inggeris kelas kesepuluh saya menggerudi ke kepala saya bahawa sebarang petikan empat baris atau lebih lama harus ditetapkan dengan cara ini. Spesifikasi HTML tidak mempunyai keperluan sedemikian, tetapi selagi teks itu adalah petikan dan anda mahu ia ditetapkan selain daripada teks dan tag sekitarnya, blockquote adalah pilihan semantik.

Secara lalai, penyemak imbas indent blockquot dengan menambah margin pada setiap sisi.

Sebagai elemen aliran (iaitu elemen "tahap blok"), blockquote boleh mengandungi unsur -unsur lain di dalamnya. Sebagai contoh, kita boleh menjatuhkan perenggan di sana tanpa masalah:

 <clockquote>
  <p> </p>
  <p> </p>
</clockquote>

Tetapi ia juga boleh menjadi unsur -unsur lain, seperti tajuk atau senarai yang tidak teratur:

 <clockquote>
    <h2> </h2>
    <ul>
      <li> </li>
      <li> </li>
    </ul>
</clockquote>

Adalah penting untuk diperhatikan bahawa blockquot hanya boleh digunakan untuk petikan dan bukannya sebagai elemen hiasan dalam reka bentuk. Ini juga membantu kebolehaksesan sebagai pengguna pembaca skrin boleh melompat antara blockquotes. Oleh itu, elemen blockquote yang digunakan semata -mata untuk estetika benar -benar boleh mengelirukan pengguna tersebut. Jika anda memerlukan sesuatu yang lebih hiasan yang jatuh di luar batas petikan yang dilanjutkan, maka mungkin div dengan kelas adalah cara untuk pergi.

 blockquote,
.callout-block {
  / * Ini boleh berkongsi gaya */
}

Memetik dengan q

Q Tags () adalah untuk sebut harga sebaris , atau apa yang dikatakan guru kelas kesepuluh saya adalah mereka di bawah empat baris. Banyak pelayar moden secara automatik akan menambah tanda petikan kepada petikan sebagai elemen pseudo tetapi anda mungkin memerlukan penyelesaian sandaran untuk pelayar yang lebih tua.

Tanda petikan tipikal sama seperti yang sah untuk sebut harga sebaris sebagai elemen . Walau bagaimanapun, faedah menggunakan adalah bahawa ia termasuk atribut CITE, pengendalian tanda petikan automatik, dan pengendalian automatik tahap petikan. Unsur -unsur tidak boleh digunakan untuk sindiran (misalnya "Anda akan menggunakan tag untuk sindiran, bukan?"), atau menandakan perkataan dengan petikan udara (misalnya "Awesome" adalah penerangan "tepat" penulis). Tetapi jika anda dapat mengetahui cara menandakan petikan udara, sila beritahu saya. Kerana itu akan menjadi "hebat."

Atribut petikan

Kedua -dua dan blockquotes boleh menggunakan atribut petikan (CITE). Atribut ini memegang URL yang menyediakan konteks dan/atau rujukan untuk bahan yang disebutkan. Spesifikasi membuat satu titik mengatakan bahawa URL boleh dikelilingi oleh ruang. (Saya tidak pasti mengapa itu ditunjukkan, tetapi jika anda mahu marah dewa -dewa kod semantik, anda perlu melakukan lebih daripada membuang ruang.)

 <p> Pegawai itu meninggalkan nota yang mengatakan <q cite="https://johnrhea.com/summons"> Anda telah dipanggil untuk hadir pada hari ke -4 Januari atas tuduhan percubaan pembaca percubaan. </q> </p>

Atribut Cite itu tidak dapat dilihat oleh pengguna secara lalai. Anda boleh menambahkannya dengan taburkan sihir CSS seperti demo berikut. Anda juga boleh biola dengan lebih jauh untuk membuat petikan muncul pada hover.

Kedua -dua pilihan itu sangat hebat. Sekiranya anda perlu memetik sumber supaya pengguna dapat melihatnya dan pergi ke sana, anda harus melakukannya dalam HTML dan mungkin dengan elemen , yang akan kami sampaikan seterusnya.

Elemen petikan

Tag hendaklah digunakan untuk merujuk kerja kreatif dan bukannya orang yang berkata atau menulis petikan itu. Dalam erti kata lain, ia bukan untuk petikan. Berikut adalah contoh dari spec :

 <p> buku kegemaran saya ialah <cite> disfungsi realiti </cite> oleh
Peter F. Hamilton. Komik kegemaran saya adalah <cite> mutiara sebelum ini
Babi </cite> oleh Stephan pastis. Trek kegemaran saya ialah <cite> jive
Samba </cite> oleh Cannonball Adderley Sextet. </p>

Inilah contoh lain:

Jika pengarang artikel ini memberitahu anda dia akan memberi anda cupcake, dan anda dia dengan nama , itu akan secara semantik tidak betul. Oleh itu, tiada kek cawan akan berubah tangan. Jika anda memetik artikel di mana dia menawarkan anda cupcake, itu akan betul -betul betul, tetapi kerana penulis tidak akan berbuat demikian, anda masih tidak akan mendapat cupcake. Maaf.

Secara lalai, penyemak imbas mengisahkan tag Cite dan tidak ada syarat bahawa A atau hadir untuk menggunakan elemen CITE. Jika anda ingin memetik buku atau kerja kreatif yang lain, maka tampalkannya dalam elemen Cite. Dewa -dewa semantik akan tersenyum pada anda kerana tidak menggunakan elemen atau .

Tetapi di mana untuk meletakkan elemen CITE? Di dalam? Di luar? Terbalik? Jika kita memasukkannya ke dalam atau , kita menjadikannya sebahagian daripada petikan. Itu dilarang oleh spesifikasi untuk alasan itu.

 
<clockquote>
  Petikan Mengenai Pengedaran Cupcake Dari Artikel
  <cite> Artikel </cite>
</clockquote>

Meletakkannya di luar hanya terasa salah dan juga memerlukan anda untuk mempunyai elemen yang melampirkan seperti

jika anda mahu menggayakannya bersama -sama.

 <dana>
  <clockquote>
    Petikan Mengenai Pengedaran Cupcake Dari Artikel
  
  <cite> Artikel </cite>
</clockquote></dana>

NB Jika anda Google isu ini, anda mungkin dapat melihat artikel doktor HTML5 dari tahun 2013 yang bertentangan dengan banyak perkara yang dibentangkan di sini. Yang mengatakan, setiap kali ia menghubungkan ke dokumen untuk sokongan, DOCS bersetuju dengan artikel yang sedang anda baca dan bukannya artikel Doktor HTML5. Kemungkinan besar dokumen telah berubah sejak artikel itu ditulis.

Hei, bagaimana dengan elemen angka?

Salah satu cara untuk menandakan sebut harga - dan dengan cara yang menggembirakan dewa -dewa kod semantik - adalah untuk meletakkan blockquote dalam elemen angka. Kemudian, letakkan elemen CITE dan mana -mana pengarang atau maklumat kutipan lain dalam figcaption.

 <apet>
  <clockquote>
    Tetapi pelayar web tidak seperti pelayan web. Sekiranya kod back-end anda semakin besar sehingga ia mula berjalan perlahan-lahan, anda boleh membuang lebih banyak kuasa pengkomputeran di atasnya dengan meningkatkan pelayan anda. Itu bukan pilihan di bahagian depan di mana anda tidak mempunyai <em>satu</em> persekitaran jangka masa-pengguna akhir anda mempunyai persekitaran jangka masa mereka sendiri dengan kekangannya sendiri di sekitar kuasa pengkomputeran <strong>dan</strong> sambungan rangkaian.
  
  <igcaption>
    & mdash; Jeremy Keith, <cite> Model Mental </cite>
  
</igcaption></clockquote></apet>

Walaupun ini menggandakan bilangan elemen yang diperlukan, terdapat beberapa faedah:

1. Ia betul -betul betul untuk semua empat elemen.
2. Ia membolehkan anda untuk memasukkan dan merangkumi maklumat pengarang di luar memetik nama kerja.
3. Ia memberi anda cara mudah untuk menggayakan petikan tanpa menggunakan div, rentang atau celaka.

Tidak ada ini untuk dialog

Bukan ! Mereka adalah untuk modal menarik perhatian. Dialog, seperti dalam, pertukaran perbualan antara orang yang bercakap atau menaip satu sama lain.

Sama ada atau atau tidak akan digunakan untuk dialog dan pertukaran yang sama antara penceramah. Jika anda menandakan dialog, anda boleh menggunakan apa sahaja yang paling masuk akal untuk anda. Tidak ada cara semantik untuk melakukannya. Yang mengatakan, spec mencadangkan tag dan tanda baca

dengan atau tag untuk menetapkan pembesar suara dan tag untuk menandakan arah panggung.

Kebolehcapaian sebut harga

Dari penyelidikan yang saya lakukan, pembaca skrin tidak sepatutnya mempunyai masalah dengan memahami tag , , , , atau tags.

Lebih banyak "cara" untuk "memetik"

Anda boleh menambah tanda petikan kepada menggunakan elemen pseudo CSS. Elemen dilengkapi dengan tanda petikan yang dibakar supaya mereka tidak perlu ditambah, namun menambahkannya sebagai elemen pseudo boleh menjadi penyelesaian untuk pelayar yang lebih tua yang tidak menambahkannya secara automatik. Oleh kerana ini adalah bagaimana pelayar moden menambah tanda petikan tidak ada bahaya menambahkan petikan pendua. Pelayar baru akan menimpa elemen pseudo lalai, dan pelayar yang lebih tua yang menyokong unsur -unsur pseudo akan menambah petikan.

Tetapi anda tidak boleh, seperti yang saya lakukan, anggap bahawa perkara di atas akan sentiasa memberi anda petikan pembukaan dan penutupan yang pintar. Walaupun fon menyokong petikan pintar, kadang -kadang petikan lurus akan dipaparkan. Untuk menjadi selamat, lebih baik menggunakan harta CSS yang dikenakan untuk membuat kecerdasan pada tanda petikan tersebut.

 blockquote {
  Petikan: "" "" "" "" "" "";
} 

Memetik pelbagai peringkat

Sekarang mari kita lihat tahap petikan. Tag secara automatik akan menyesuaikan tahap petikan secara automatik.

Katakan anda berada di kawasan yang menggunakan konvensyen British menggunakan petikan tunggal. Anda boleh menggunakan peraturan CSS Quotes untuk meletakkan petikan pembukaan dan penutupan terlebih dahulu dalam senarai. Inilah contoh kedua -dua cara:

Tiada had untuk bersarang. Unsur -unsur yang bersarang itu bahkan boleh berada di dalam blokquote yang berada di dalam blockquote.

Jika anda menambah tanda petikan ke blockquote, ketahui bahawa blockquote tidak mengubah tahap petikan cara tag . Jika anda mengharapkan untuk mempunyai petikan dalam blockquote, anda mungkin mahu menambah peraturan pemilih keturunan untuk memulakan unsur dalam blockquote pada tahap petikan tunggal (atau petikan berganda jika anda mengikuti konvensyen British).

 blockquote q {
  Petikan: "'" "" "" "" "" ";
}

Tahap petikan terakhir yang anda masukkan akan diteruskan melalui tahap petikan berikutnya. Untuk menggunakan konvensyen double, single, double, tunggal ..., tambahkan lebih banyak tahap ke CSS Quotes Property.

 q {
  Petikan: "" "" "" "" "" "" "" "" "" "" "" "" "" "" ";
}

Gantung tanda baca

Banyak pakar tipografi akan memberitahu anda bahawa menggantung tanda petikan pada blockquotes kelihatan lebih baik (dan mereka betul). Tanda baca menggantung adalah, dalam kes ini, tanda petikan yang ditolak dari teks supaya watak -watak teks itu secara menegak.

Satu kemungkinan dalam CSS menggunakan nilai sedikit negatif pada harta inden teks. Lekapan negatif yang tepat akan berubah mengikut fon, jadi pastikan anda menyemak jarak jauh dengan fon yang anda gunakan.

 blockquote {
  teks -inden: -0.45em;
}

Terdapat cara yang lebih baik untuk mengendalikan ini dengan menggunakan harta CSS yang menggantung. Ia hanya disokong dalam safari pada masa penulisan ini, jadi kita perlu meningkatkan secara progresif:

 / * Fallback */
blockquote {
  teks -inden: -0.45em;
}

/ * Sekiranya ada sokongan, padamkan indent dan gunakan harta itu sebaliknya */
@Supports (gantung-suntikan: pertama) {
  blockquote {
    inden teks: 0;
    Hanging-suntikan: Pertama;
  }
}

Menggunakan suntikan gantung adalah lebih baik kerana ia kurang fiddly. Ia hanya akan berfungsi apabila boleh.

Bolehkah kita menghidupkan tanda petikan?

Sudah tentu kita boleh.

Kenapa anda perlu melakukan ini, saya tidak pasti, tetapi tanda petikan dalam tag ditambah adalah unsur -unsur pseudo dalam lembaran gaya UA, jadi kami dapat memilih dan gaya mereka - termasuk animasi - jika kita perlu.

Tunggu, mungkin kita hanya menyelesaikan perkara petikan udara selepas semua.

Atas ialah kandungan terperinci Memetik dalam HTML: Petikan, Petikan, dan Blockquotes. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!