Struktur dan semantik HTML5 (3): Kemahiran tutorial elemen tahap blok semantik_html5

HTML5 juga menambah beberapa elemen peringkat blok semantik semata-mata:
Dialog angka diketepikan
Saya telah menggunakan dua elemen pertama dalam artikel dan buku. Elemen ketiga yang saya jarang gunakan, ia digunakan terutamanya untuk teks bertulis.
ketepikan
Elemen tepi mewakili arahan, petua, bar sisi, petikan, nota tambahan, dsb., iaitu kandungan di luar baris utama naratif. Contohnya, dalam artikel developerWorks, anda sering melihat bar sisi ditulis dalam format jadual Lihat Kod 3 untuk bar sisi developerWorks yang ditulis dalam HTML4.

.xf-value

The.xf-valueselectorusedherestylestheinput
fieldvaluebutnotitslabel.Thisisactuallyinconsistent
withthecurrentCSS3draft.Theexamplereallyshouldusethe
::valuepseudo-classinsteadlikeso:

input::value{width:20em;}
#ccnumber::value{width:18em}
#zip::value{width:12em}
#state::value{width:3em}

.xf-valueThe.xf-valueselectorusedherestylestheinputfieldvaluebutnotitslabel. Ini sebenarnya tidak konsistendengan drafCSS3 semasa.Contohnya hendaklah menggunakan::valuepseudo-classinsteadlikeso:input::value{width:20em;}
#ccnumber::value{width:18em}
#zip::value{width:12em}
#state::value{width:3em} Walau bagaimanapun, Firefox tidak menyokong sintaks ini.
Dalam HTML5, bar sisi ini boleh ditulis dengan cara yang lebih bermakna, lihat bar sisi Kod 4 pembangunWorks yang ditulis dalam HTML5.

.xf-value

The.xf-valueselectouseed herestylestheinput
fieldvalue butnotitslabel.This is actually inconsistent
withthecurrent.Thehoups3draft::value

input::value{width:20em;}
#ccnumber::value{width:18em}
#zip::value{width:12em}
#state::value{width:3em}
Walau bagaimanapun, Firefox tidak menyokong sintaks ini.

Penyemak imbas boleh menentukan tempat untuk meletakkan bar sisi ini (mungkin dengan sedikit kod CSS).

angka
Elemen angka mewakili imej peringkat blok dan juga boleh mengandungi penerangan. Sebagai contoh, dalam banyak artikel developerWorks, anda boleh melihat gambar rajah kod 5 developerWorks yang ditulis dalam HTML4 dengan penanda sedemikian Hasilnya ditunjukkan dalam Rajah 1.

Rajah2.PasangMozillaXFormsdialogMozillaXForms0.7Unsigned"
src="installdialog"height border="""height border" ="317"hspace="5"vspace="5"width="331"/>


Rajah 1.InstallMozillaXFormsdialog


Dalam HTML5, rajah ini boleh ditulis dengan cara yang lebih semantik, lihat rajah kod 6 developerWorks yang ditulis dalam HTML5.

Rajah2.InstallMozillaXFormsdialog

MozillaXForms0.7Unsigned"
src="3installdialog07. "hspace="5"vspace="5"width="331"/>

Paling penting, penyemak imbas (terutamanya pembaca skrin) boleh memautkan angka dan huraian bersama-sama dengan jelas.
Elemen angka bukan sahaja boleh memaparkan gambar. Anda juga boleh menggunakannya untuk menambah penerangan pada audio, video, iframe, objek dan elemen benam.

dialog
Elemen dialog mewakili perbualan antara beberapa orang. Elemen HTML5dt boleh mewakili pembesar suara dan elemen HTML5dd boleh mewakili kandungan pertuturan. Oleh itu, perbualan boleh dipaparkan dengan cara yang munasabah dalam pelayar lama. Kod 7 menunjukkan dialog terkenal daripada Galileo "Dialog Mengenai Dua Sistem Ketua Dunia". Kod 7. Dialog Galilea ditulis dalam HTML5

Simplicius

Menurut garis lurusAF,
dan tidak mengikut lengkung,sehingga sudah dikecualikan

untuk kegunaan tersebut.

TetapiSaya tidak boleh mengambil salah satu daripada mereka,
melihat bahawa garis lurusAFberjalan secara serong.Sepatutnya
lukisan berserenjang dengan CD, untuk ini akan menganggapnya

paling pendek, juga unik di kalangan
sepanjang masa🎜menjadi sama dengan titik yang tidak terhad Atoeveryotherpointoftheopposite

lineCD.

Salviati

Pilihan anda dan oleh sebab itu anda
tambahkan bagi yang paling baik.Sonowwehdapat
bahawa dimensi pertama ditentukan oleh garis lurus;
kedua (iaitu, lebar)selaindimensisofapermukaan;itulah ,lengthandbreadth .

Tetapi andaikan anda terpaksa menentukan ketinggian—untuk
contoh, sejauh mana platform ini terletak dari turapan di bawah
di bawah sana. Melihat bahawa dari titik dalam pelantar kita
garis lurus,garis lurus,dan menang ,totheinfinitepointsoftthepavement
di bawah, yang manakah antara baris ini akan anda gunakan?

Terdapat perdebatan mengenai sintaks tepat elemen ini. Sesetengah orang mahu membenamkan teks bukan dialog (seperti arahan pentas dalam skrip) dalam elemen dialog dan yang lain tidak suka memanjangkan peranan elemen dt dan dd. Walaupun terdapat hujah mengenai sintaks tertentu, kebanyakan orang bersetuju bahawa menyatakan dialog dalam cara semantik ini adalah perkara yang baik.
　
　(Bersambung)