HTML 5 seperti revolusi, dan berjalan lancar di era pasca-Web2.0.
Apa itu HTML 5, saya tidak perlu masuk ke detail di sini. Menurut pemahaman saya, inovasi HTML 5 dapat diringkas sebagai sistem label semantik, dukungan media yang disederhanakan dan kaya, teknologi penyimpanan data lokal yang ajaib, animasi kaya (kanvas) yang tidak memerlukan plug-in, dan dukungan API yang kuat. Singkatnya, HTML 5 membuat interaksi komputer dan interaksi jaringan manusia lebih nyaman dan cocok untuk pengguna. Kurangnya dukungan sebelumnya untuk aplikasi media yang kaya dan penyimpanan ini tidak lagi menyebalkan untuk browser. Tujuan asli revolusi HTML 5 adalah untuk mempromosikan web dari platform konten ke platform aplikasi standar dan menyatukan standar setiap kamp platform.
Artikel ini menjelaskan salah satu inovasi HTML 5: struktur yang lebih jelas dan ringkas.
Mulai dari awalKode header XHTML standar akan terlihat seperti ini:
<! Doctype html public -// w3c // dtd xhtml 1.0 transisi // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml>
<head>
<meta http-equiv = konten-tipe konten = teks/html; Charset = GB2312 />
</head>
Bisakah kamu ingat? Maukah Anda menghafalnya dengan menghafal? Tentu saja tidak! Kami hanya perlu salinan dan tempel mekanis.
Mari kita lihat bagaimana header HTML 5 standar adalah:
<! Doctype html>
<Meta Charset = GB2312>
Saya tidak perlu mengatakan mana yang lebih rumit dan mana yang sederhana. Ya, header HTML 5 bisa sangat sederhana sehingga dapat diingat dengan mudah! Juga, kasing, kutipan dan backslash sebelum braket sudut terakhir dapat diabaikan.
Mengapa bisa begitu longgar? Bahkan, jika XHTML dikirim sebagai teks/html, browser juga dapat menguraikannya dengan baik, dan browser tidak peduli dengan sintaks kode. Jadi, HTML 5 adalah metafisik, dapat melanggar beberapa standar asli, tetapi masih dapat berkinerja baik di browser.
Tentu saja, untuk kenyamanan bantuan tim dan pemeliharaan selanjutnya, kita masih harus menyatukan gaya penulisan yang Anda sukai, seperti:
<! Doctype html>
<Html>
<head>
<Meta Charset = GB2312 />
...
</head>
<body>
...
</body>
</html>
Selain itu, meskipun HTML 5 saat ini tidak didukung oleh semua browser, header ini yang dapat menghemat lebih dari 100 byte (untuk situs dengan level PV harian atau di atas satu juta, dapat menghemat banyak lalu lintas). Jika Anda telah meneliti mode resolusi browser, Anda harus tahu bahwa halaman akan memicu mode aneh tanpa mendefinisikan Doctype, dan selama browser <! Doctype HTML> didefinisikan, Anda dapat menguraikan halaman dalam mode standar tanpa menentukan jenis DTD tertentu.
Sistem Pelabelan Semantik BaruPengkodean semantik adalah keterampilan yang diperlukan untuk pengembang front-end yang memenuhi syarat, tetapi ketika halaman web menjadi semakin kaya, jelas bahwa mereka tidak dapat melakukannya dengan hanya menggunakan tag XHTML asli untuk melakukan desemane. Tuhan berkata: Pasti ada cahaya! Lalu ada cahaya. Oleh karena itu, HTML 5 menyediakan serangkaian tag baru dan atribut yang sesuai untuk mencerminkan semantik khas situs web modern. Berlatih untuk menghasilkan kebenaran. Mari kita tulis contoh:
<Div id = header>
<Div class = hgroup>
<h1> Judul Situs Web </h1>
<H1> Subtitle situs </h1>
</div>
<Div id = nav>
<ul>
<li> html 5 </li>
<li> CSS </li>
<li> JavaScript </li>
</ul>
</div>
</div>
<!-// header end->
<Div id = left>
<Div class = artikel>
<p> Ini adalah artikel tentang tag struktur HTML 5 baru. </p>
</div>
<Div class = artikel>
<p> Ini juga artikel tentang tag struktur HTML 5 baru. </p>
</div>
</div>
<!-// ujung kiri->
<Div id = engendar>
<h1> profil penulis </h1>
<p> Mr.think, orang biasa yang berfokus pada teknologi front-end web. </p>
</div>
<!-// Side End->
<Div id = footer>
Bagian bawah halaman
</div>
<!-// footer end->
Di atas adalah bagian blog sederhana bagian html, yang terdiri dari header, area tampilan artikel, kolom sisi kanan, dan bawah. Pengkodeannya rapi dan sesuai dengan semantik XHTML, yang dapat dilakukan dengan baik bahkan dalam HTML 5. Tetapi untuk browser, ini adalah sepotong kode yang tidak membedakan antara bobot, daripada tag yang memungkinkan mesin untuk memahami semantik untuk menentukan blok yang sesuai. Misalnya, browser standar (seperti Firefox, Chrome dan bahkan versi baru IE) memiliki kunci pintasan yang dapat menyebabkan pelanggan melompat langsung ke navigasi halaman, tetapi masalahnya adalah bahwa semua blok ditentukan oleh Div, dan nilai ID div ditentukan oleh pengembang, sehingga browser tidak tahu blok yang harus menjadi blok di mana tautan navigasi berada. Munculnya tag HTML 5 baru hanya menebus kekurangan ini. Kemudian, jika kode di atas diganti dengan HTML 5, Anda dapat menulisnya seperti ini:
<Header>
<Hgroup>
<h1> Judul Situs Web </h1>
<H1> Subtitle situs </h1>
</hgroup>
<av>
<ul>
<li> html 5 </li>
<li> CSS </li>
<li> JavaScript </li>
</ul>
</sav>
</teader>
<Div id = left>
<martikel>
<p> Ini adalah artikel tentang tag struktur HTML 5 baru. </p>
</artikel>
<martikel>
<p> Ini juga artikel tentang tag struktur HTML 5 baru. </p>
</artikel>
</div>
<sander>
<h1> profil penulis </h1>
<p> Mr.think, orang biasa yang berfokus pada teknologi front-end web. </p>
</side>
<footer>
Bagian bawah halaman
</footer>
Ternyata struktur halaman HTML bisa sangat indah sehingga dapat dilihat sekilas tanpa komentar. Untuk browser, Anda tidak akan lagi bingung ketika Anda menemukan blok yang sesuai.
Cara menyusun elemen dengan HTML 5 tag baru:Melalui contoh di atas, kami memahami inovasi tag HTML 5 baru untuk struktur, tetapi ketika beralih ke penggunaan aktual, bagaimana kami dapat menggunakannya dengan tepat? Saya pikir ini juga pertanyaan yang ingin ditanyakan oleh banyak pelajar HTML 5. Sama seperti semantik XHTML, penggunaan tag semantik HTML 5 juga harus diikuti: setiap tag memiliki makna spesifik, dan semantik berarti bahwa kami menggunakan tag yang sesuai di tempat yang tepat untuk membuat orang dan mesin lebih baik (mesin dapat dipahami karena browser dapat dipahami sebagai mesin pencari). Misalnya, tag header umumnya merupakan elemen blok pertama dari halaman (tag header juga dapat digunakan dalam elemen header jenis, seperti judul blok artikel), yang berisi informasi topik halaman; Tag NAV umumnya digunakan untuk membungkus informasi navigasi; Footer umumnya digunakan untuk membungkus informasi bawah halaman; dan sebagainya.
Di bawah ini adalah penjelasan semantik dan pedoman penggunaan untuk tag baru umum untuk kelas struktural yang tercantum dalam manual HTML 5:
Tag <Header>Definisi Manual: Menentukan header bagian atau dokumen.
Pedoman Penggunaan: Umumnya digunakan untuk memasukkan header halaman, dan juga dapat digunakan untuk header area lainnya, seperti header artikel:
<Header>
<Hgroup>
<h1> Judul Situs Web </h1>
<H1> Subtitle situs </h1>
</hgroup>
</teader>
Tag <hgroup>Definisi manual: Digunakan untuk menggabungkan judul halaman atau bagian web.
Pedoman untuk digunakan: Digunakan untuk kombinasi kelas judul, seperti judul dan subtitle dari sebuah artikel:
<Hgroup>
<H1> Ini adalah artikel yang memperkenalkan tag struktur HTML 5 </h1>
<h2> html 5 inovasi </h2>
</hgroup>
Tag <av>Definisi manual: Tentukan bagian yang menentukan tautan navigasi.
Pedoman Penggunaan: Bagian Navigasi untuk mendefinisikan halaman:
<av>
<ul>
<li> html 5 </li>
<li> CSS </li>
<li> JavaScript </li>
</ul>
</sav>
<sander> TagTentukan konten selain artikel. Konten samping harus terkait dengan konten artikel.
Pedoman Penggunaan: Digunakan untuk konten yang dibagi, bagian baru akan dimulai dalam aliran dokumen, yang umumnya digunakan di bilah samping yang terkait dengan konten artikel:
<sander>
<h1> profil penulis </h1>
<p> Mr.think, orang biasa yang berfokus pada teknologi front-end web. </p>
</side>
Tag <section>Definisi manual: Tentukan bagian dalam dokumen. Misalnya, bab, header, footer, atau bagian lain dari dokumen.
Pedoman Penggunaan: Konten yang digunakan untuk bagian akan memulai bagian baru dalam aliran dokumen:
<section>
Apa bagian <H1>? </h1>
<h2> Bab baru </h2>
<martikel>
<h2> Tentang bagian </h1>
<p> Bagian Pendahuluan </p>
...
</artikel>
</section>
Tag <footer>Definisi Manual: Menentukan footer bagian atau dokumen. Biasanya, itu akan berisi nama pencipta, tanggal pembuatan dokumen, dan/atau informasi kontak.
Pedoman Penggunaan: Ini umumnya digunakan untuk membungkus seluruh halaman dengan dasar umum, dan juga dapat digunakan di bagian bawah area lain, seperti bagian bawah artikel:
<footer>
</footer>
Tag <cartikel>Definisi manual: Tentukan konten eksternal. Misalnya, artikel baru dari penyedia berita eksternal, baik dari blog, atau dari forum. Atau berasal dari sumber eksternal lainnya.
Pedoman Penggunaan: Sesuai namanya, umumnya digunakan dalam blok artikel:
<martikel>
<Header>
<Hgroup>
<H1> Ini adalah artikel yang memperkenalkan tag struktur HTML 5 </h1>
<h2> html 5 inovasi </h2>
</hgroup>
<Time Datetime = 2011-03-20> 2011.03.20 </taku>
</teader>
<p> Detail konten artikel </p>
</artikel>
Tag <tig figur>Definisi manual: Digunakan untuk menggabungkan elemen.
Pedoman Penggunaan: Sebagian besar digunakan untuk menggabungkan gambar dan deskripsi gambar:
<figure>
<img src = img.gif alt = figure tag title = figure tag/>
<figcaption> Ini adalah informasi deskripsi dari gambar </figcaption>
</tigur>
Tag <u menu>Definisi manual: Tentukan daftar menu. Gunakan tag ini saat Anda ingin mencantumkan kontrol formulir.
Panduan Penggunaan: Digunakan di Blok Kelas Menu, Digunakan Untuk Menentukan Daftar Menu atau Opsi Menu:
<u menu>
<li> html 5 </li>
<li> CSS </li>
<li> JavaScript </li>
</u menu>
Tag baru lainnya di HTML 5 tidak akan dijelaskan satu per satu. Silakan periksa sendiri manual.
Faktanya, hal -hal ini seperti div, h1, INPU dan tag lainnya di xhtml. Selama Anda lebih banyak berlatih dalam kehidupan sehari -hari, mudah untuk menggunakannya secara bebas.
Tentang kompatibilitasJika Anda adalah orang yang suka belajar dan memperhatikan front-end, Anda harus tahu bahwa tag HTML 5 baru telah digunakan dalam struktur halaman Taobao. Jadi, yang ingin saya katakan adalah selama Anda berani mencoba, kompatibilitas tidak menjadi masalah. Ada banyak metode kompatibilitas online (artikel ini adalah tentang struktur, ha ~).
Cerita selanjutnyaTeknologi baru apa pun membutuhkan proses adaptasi. Jika Anda siap menjadi pengembang front-end web yang sangat baik, Anda harus terus mencoba dan menerima teknologi front-end terbaru.
Sun Wen pernah mengatakan bahwa jika Anda ingin membuat kebahagiaan peradaban, Anda harus membuat rasa sakit peradaban. Ini berlaku untuk revolusi kemanusiaan, dan begitu pula revolusi HTML 5. Penurunan bertahap IE telah memungkinkan produsen browser besar untuk memasuki periode negara yang bertikai dan bersaing satu sama lain. Sedangkan untuk pengembang, kami hanya berharap bahwa produsen browser utama harus mengikuti standar yang sama sebanyak mungkin, daripada membagi para pemain setelah kompetisi. Karena, presentasi yang efisien dan sempurna dari aplikasi yang sama untuk semua jenis pengguna adalah tujuan akhir kami.
Dengan cara ini, artikel ini dimulai dari doctype halaman, untuk menggunakan tag HTML 5 baru untuk membangun struktur halaman yang lebih semantik, dan kemudian menjelaskan tag baru yang terkait dengan struktur halaman. Saya percaya setiap orang memiliki pemahaman baru tentang tag baru struktural HTML 5. Jika Anda tertarik, maka buka IDE Anda, tulis sepotong kode yang dibangun oleh tag baru HTML 5, dan kemudian gunakan CSS untuk menggambarkan cetak biru besar Anda!