Perbezaan dan pengenalan penggunaan div, artikel dan bahagian dalam kemahiran tutorial HTML5

Saya belajar html5 baru-baru ini. Saya baru menggunakan html5 dan saya berasa sedikit tidak selesa kerana beberapa tag telah berubah, terutamanya tiga tag div dan artikel bahagian saya menyemak beberapa maklumat dan cuba menggunakan html5 dan css3 untuk menyusun halaman web I mempunyai sedikit idea, dan di bawah adalah halaman web mudah yang saya sediakan untuk rujukan anda, dan sekurang-kurangnya mempunyai sedikit idea tentang struktur html5.

div

Spesifikasi HTML: “Elemen div tidak mempunyai makna yang istimewa sama sekali

Teg ini ialah yang kita lihat dan gunakan kebanyakan label. Ia tidak mempunyai semantik per se dan digunakan sebagai cangkuk untuk susun atur dan penggayaan atau skrip.

bahagian
Spesifikasi HTML: “Elemen bahagian mewakili bahagian generik bagi dokumen atau aplikasi Bahagian, dalam konteks ini, ialah pengelompokan kandungan tematik, biasanya dengan a tajuk."

Bertentangan dengan semantik div, secara ringkasnya, bahagian ialah div dengan semantik, tetapi jangan fikir ia semudah itu. Bahagian mewakili sekeping kandungan topikal, biasanya dengan tajuk. Melihat ini, kita mungkin berfikir bahawa catatan blog atau ulasan yang berasingan hanya boleh menggunakan bahagian? Teruskan membaca:

“Pengarang digalakkan untuk menggunakan elemen artikel dan bukannya elemen bahagian apabila masuk akal untuk mensindiketkan kandungan elemen tersebut apabila berkaitan, artikel harus digunakan untuk menggantikan bahagian.

Jadi, bila bahagian perlu digunakan? Kemudian lihat:

“Contoh bahagian ialah bab, pelbagai halaman bertab dalam kotak dialog bertab, atau bahagian bernombor halaman utama tapak Web boleh dibahagikan kepada bahagian untuk pengenalan. item berita dan maklumat hubungan.”

Senario aplikasi biasa termasuk bab artikel, tab dalam kotak dialog tag atau bahagian bernombor dalam kertas. Halaman utama laman web boleh dibahagikan kepada bahagian seperti pengenalan, berita dan maklumat hubungan. Sebenarnya, saya sangat tertarik dengan maklumat yang disampaikan di sini, kerana saya merasakan bahagian dan artilce yang akan diperkenalkan di bawah adalah lebih sesuai untuk aplikasi modular Topik ini akan dibincangkan dalam artikel khas pada masa akan datang, jadi saya akan melangkaunya di sini buat masa ini.

Perhatikan bahawa W3C juga memberi amaran:

“Elemen bahagian bukan elemen bekas generik Apabila elemen diperlukan untuk tujuan penggayaan atau sebagai kemudahan untuk skrip, pengarang digalakkan untuk menggunakan sebaliknya elemen div. Peraturan umum ialah elemen bahagian sesuai hanya jika kandungan elemen disenaraikan secara eksplisit dalam rangka dokumen."

bahagian lebih daripada sekadar teg bekas biasa. Apabila tag hanya untuk penggayaan atau untuk memudahkan skrip, div harus digunakan. Secara umumnya, bahagian adalah sesuai apabila kandungan elemen muncul secara eksplisit dalam rangka dokumen.

artikel
Spesifikasi HTML: “Elemen artikel mewakili gubahan serba lengkap dalam dokumen, halaman, aplikasi atau tapak dan pada dasarnya, boleh diagihkan secara bebas atau boleh digunakan semula , cth. dalam sindikasi.”
artikel ialah teg bahagian khas, yang mempunyai semantik yang lebih jelas daripada bahagian, dan mewakili blok kandungan berkaitan yang bebas dan lengkap. Secara amnya, artikel akan mempunyai bahagian tajuk (biasanya terkandung dalam pengepala) dan kadangkala pengaki. Walaupun bahagian juga merupakan kandungan tematik, artikel itu sendiri adalah bebas dan lengkap dari segi struktur dan kandungan.

Spesifikasi HTML kemudiannya menyenaraikan beberapa senario yang berkenaan untuk artikel. "Ini boleh jadi siaran forum, artikel majalah atau akhbar, entri blog, ulasan yang diserahkan pengguna, widget atau alat interaktif atau mana-mana item kandungan bebas lain

Apabila artikel dibenamkan ke dalam artikel Pada dasarnya, kandungan artikel dalam adalah berkaitan dengan kandungan artikel luar. Contohnya, dalam catatan blog, artikel yang mengandungi ulasan yang diserahkan pengguna harus disembunyikan dalam artikel catatan blog yang mengandungi.

Persoalannya ialah apakah yang dikira sebagai "kandungan bebas lengkap"? Salah satu cara paling mudah untuk mengetahui ialah melihat sama ada kandungannya lengkap dalam suapan RSS. Semak sama ada kandungan itu lengkap dan bebas tanpa konteksnya.

Contoh:

halaman html:

Salin kodKod adalah sebagai berikut:

初学html5

halaman web HTML5 CSS3

Kesakitan itu sendiri adalah penting, bimbingan elitVivamus akan diteruskan dan ia disasarkan. Maecenas membenci penapaian itu. Kelas ini sesuai untuk pasangan senyap yang beralih ke pantai melalui perkahwinan kami, melalui projek Hymenaean. Fusce sagittis porta mauris, adalah penting untuk meletakkan ketakutan ke dalam anak panah penguatkuasa undang-undang. Tetapi anggota kakitangan perubatan memerlukan pelepasan sakit. Sehingga masa pulvinar. Tetapi ia adalah idea yang tidak baik, dan ia telah dikatakan. Takut bot, yang penting mengandung, minum besar. Kita hidup dan sekarang kita bercakap. Pelanggan sangat penting, pelanggan akan diikuti oleh pelanggan. Pada seseorang hanya sedikit. Ahli-ahli ultricies bertanggungjawab untuk keputusan. Sos melati my eros. Rumah itu akan diikuti oleh kenderaan hartanah. Ia sejuk atau jisim.

Pertunjukan item senarai

< Dengan cara yang penulis hanya Biro adalah lengkap seperti biasa. Aenean vulputate interdum ague, sed dapibus mi ultricies convallis. Berbual dari sekarang, dan hiaskannya jika tidak. Untuk sentiasa melabur lapisan. esok eu nibh lorem Tetapi penting untuk mengambil berat tentang kehidupan kakitangan perubatan dan membencinya. Dia bukan orang kaya dan dia sangat mudah untuk dielakkan. Maecenas mahu bola sepak menyeronokkan dan tidak menjadi sasaran. Ia benar-benar lembut, sebab itu ia menyanjung. Semua orang diharapkan untuk menjaga harta tersebut. Kehidupan kanak-kanak kesedihan kanak-kanak. Pelanggan sangat penting, pelanggan akan diikuti oleh pelanggan. Tetapi perjalanan kempen menjadi lembah ullamcorper. Sehingga hidup besar, tidak ada kolam renang, malah halaman belakang rumah. Dalam kes Morbiditi, adalah penting untuk menjaga ulser, dan bukan demam itu sendiri, mahupun perjalanan katil. Sampai tak masuk salad pun. Jika tidak hodoh, siapa yang akan menceburi kerjaya dalam kehidupan sekarang.

halaman css:

salin kod

@charset "utf-8";
/* Dokumen CSS */
#bekas{
lebar: 840px;
margin: 20px auto;
latar belakang:#fff;
padding:30px;
limpahan:tersembunyi;
}
/*--------------- pengepala ----------------*/
#utama-navigasi {
bawah sempadan:5px pepejal #666;
}
#utama-navigasi ul{
limpahan:tersembunyi;
lebar:100%;
gaya senarai:tiada;
saiz fon:1.6em;
}
#main-navigation li{
float:left;
}
#main-navigation li a{
latar belakang:#999;
margin: 0 5px 0 0;
lapik:5px 30px;
paparan:sekat;
warna:#fff;
teks-hiasan:tiada;
}
#main-navigation li.current a{
latar belakang:#666;
}
#main-navigation li a:hover{
latar belakang:#777;
}
/*------------------------- artikel -------------- ----------*/
artikel{
lebar:100%;
limpahan:tersembunyi;
}
bahagian{
apung:kiri;
lebar:500px;
}
/*------------------------- artikel -------------- ----------*/
ketepikan{
apung:kanan;
lebar:310px;
}
/*------------------------- artikel -------------- ----------*/
pengaki{
lebar:840px;
margin:20px auto;
saiz fon:1.4em;
text-align:center;
}

总结：
artikel bahagian div ，语义是从无到有，逐渐增强的。div任何何任何任式化或者bahagian立存在的一段内容，则就适用 article。原则上来说，能使用 artikel的时候，也是可以使用 bahagian 的，但是实际上，假如使用 artikel 更合适，那么就不要使用 bahagian .实际上，这两个标签也是特殊的 seksyen，在使用 nav 和 aside 更合适的情况下，也不要使用 bahagian 了。

对于 div 和 bahagian、 artikel 以及其他标签的区分比较 seksyen 对于 div 和 bahagian、 artikel 以及其他标签的区分比较 seksyen 简单亃看比较难，其实重点就是看看这段内容脱离了整体是不是还能作为一个完整的、独立的内容而存在，这里面的重点又在完为整而存在，这里面的重点又在完为整而在完不整。 bahagian 包含的内容也能算作独立的一块，但是它只能算是组成整体的一部分，artikel 才是一个完整的整体。

最后附上我的首个html5页面源码：http://xiazai.net.jb51/jb51.jb51. 🎜 >

Perbezaan dan pengenalan penggunaan div, artikel dan bahagian dalam kemahiran tutorial HTML5_html5

halaman web HTML5 CSS3

Pertunjukan item senarai