Elemen baharu HTML5

Elemen Baharu HTML

Teg semantik dan atribut HTML5 membolehkan pembangun melaksanakan reka letak halaman web yang jelas Digabungkan dengan pemaparan kesan CSS3, adalah sangat mudah untuk membuat halaman web yang kaya dan fleksibel.

Elemen teg baharu untuk mempelajari HTML5 kali ini ialah:

<header> bahagian ekor;

<nav> 🎜><artikel> Tentukan teks utama atau sekeping kandungan yang lengkap

Cara terbaik untuk mempelajari teg ini; cuba gunakan mereka. Walaupun terdapat banyak templat susun atur halaman web siap sedia yang boleh digunakan dengan mudah, untuk pemula, adalah perlu untuk melaksanakan susun atur halaman yang mudah sendiri. Berikut ialah contoh susun atur halaman mudah untuk menunjukkan penggunaan teg di atas.

Contoh: Tiru reka letak laman utama blog

Laksanakan struktur halaman web seperti yang ditunjukkan dalam Rajah 2-1, iaitu halaman blog yang sangat tipikal: kepala, ekor, bar navigasi mendatar, navigasi bar sisi dan kandungan.

Rajah 2-1

Seperti yang anda lihat dalam Rajah 2-1, kawasan yang dilaksanakan oleh tag yang sepadan ditandakan dengan nama, seperti Pengepala

Sebelum menulis halaman, adalah perlu untuk mengatakan: elemen halaman dilaksanakan oleh HTML5, dan kesan paparan elemen tersebut diberikan oleh CSS3 Kod CSS3 boleh diletakkan dalam fail yang sama dengan HTML5 kod, atau ia boleh menjadi fail bebas, selagi ia dirujuk dalam fail HTML5. Adalah disyorkan bahawa setiap satu fail bebas Faedahnya ialah:

1) Mematuhi prinsip tanggungjawab tunggal: halaman HTML5 bertanggungjawab untuk menguruskan elemen, manakala fail CSS3 hanya bertanggungjawab untuk memaparkan kesan paparan. daripada fail HTML5 yang sepadan, bebas antara satu sama lain , tidak bersilang antara satu sama lain.

2) Kurangkan kerumitan halaman dan memudahkan penyelenggaraan: Bayangkan, apabila bilangan elemen pada halaman meningkat kepada banyak, betapa teruknya kebolehbacaan jika elemen dan atribut paparan elemen diuruskan pada satu halaman pada masa yang sama.

3) Mempercepatkan kelajuan pemuatan penyemak imbas: Satu lagi faedah perkara 2) ialah halaman mudah secara semula jadi akan dimuatkan dengan lebih pantas.

Sudah tentu, jika anda biasa meletakkan HTML5+CSS3 dalam satu fail, ini bukan idea yang buruk. Ini hanyalah cadangan.

Mari laksanakan Rajah 2-1 secara terperinci.

1. Penyata dokumen HTML5
Buat fail index.html baharu Jika alat penulisan halaman web yang anda gunakan sudah menyokong jenis fail HTML5, maka templat HTML5 berikut harus dihasilkan:
<. 🎜>

<!DOCTYPE html>
  <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Layout TEST</title>
 </head>
  <body>
 </body>
 </html>

Tidak kira jika alat menulis halaman web tidak menyokong HTML5 buat masa ini. Adalah sangat mudah untuk menulis baris kod ini sendiri.
Penjelasan: Baris pertama: <!DOCTYPE html> ialah penyederhanaan jenis dokumen HTML5, memudahkan kompleks (Peranan jenis dokumen: pengesah menggunakannya untuk menentukan peraturan yang akan digunakan untuk mengesahkan kod; wajib Penyemak imbas memaparkan halaman dalam mod standard)
2. Pengepala
<header> pelaksanaan teg
<header id="page_header">
<h1>Header</h1>
</header>

Nota: 1) Pengepala tidak boleh dikelirukan dengan tajuk h1, h2 dan h3. <header> boleh mengandungi segala-galanya daripada logo syarikat anda ke kotak carian. Contoh mengandungi tajuk sahaja.
2) Halaman yang sama boleh mengandungi berbilang elemen <header> Setiap blok atau artikel bebas boleh mengandungi <header> sendiri Oleh itu, dalam contoh, atribut id unik ditambahkan pada <header> Anda akan melihat peranan teg id dalam fail CSS.
3. Footer
<footer> pelaksanaan teg

<footer id="page_footer">
    <h2>Footer</h2>
</footer>

Penerangan: Kedudukan adalah hujung halaman atau blok Penggunaan pada dasarnya sama dengan <header>, dan ia juga akan menyertakan elemen lain , id juga dinyatakan di sini
4 Navigasi
<nav> pelaksanaan tag

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
    </ul>
</nav>

Penerangan: Kepentingan navigasi adalah penting untuk halaman web, pantas dan mudah Navigasi yang baik diperlukan untuk mengekalkan pelawat.
1) Ia boleh disertakan dalam <header> atau <footer> atau blok lain dan halaman boleh mempunyai berbilang navigasi.
2) Navigasi biasanya memerlukan CSS untuk dipaparkan dan anda akan melihat pemaparan CSS kemudian.
5. Sekat dan artikel
<bahagian> dan <artikel> pelaksanaan teg

<section id="posts">
        /*可以包含多个< article>*/
    <article>
         /*article的内容*/
        </article>
        <article>
         /*article的内容*/
        </article>
</section>

<bahagian> .
Berikut ialah kandungan umum <artikel>

<article>
        <header>
            <h2>Article Header</h2>
        </header>
        <p>Without you?I'd be a soul without a purpose.
                </p>
        <footer>
            <h2>Article Footer</h2>
        </footer>
</article>

Anda boleh melihat bahawa ia boleh mengandungi banyak unsur.
6. Narasi dan bar sisi
Teg <ketepikan> melaksanakan narasi dan bar sisi dilaksanakan oleh <bahagian>.
<ketepikan> ialah maklumat tambahan yang ditambahkan pada kandungan utama, termasuk pengenalan, gambar, dsb.

<aside>
    <p>sth. in aside
    </p>
</aside>

<ketepikan> biasanya ditambahkan pada <artikel>

<article>
        <header>
            <h2>Article Header</h2>
        </header>
        <aside>
            <p>sth. in aside
            </p>
        </aside>
        <p>Without you?I'd be a soul without a purpose.
                </p>
        <footer>
            <h2>Article Footer</h2>
        </footer>
</article>

Bar sisi, bukan narasi! Fikirkannya sebagai kawasan di sebelah kanan, yang mengandungi pautan dan gunakan <section> dan <nav>

<section id="sidebar">
    <nav>
    <ul>
          <li><a href="2012/04">April 2012</a></li>
          <li><a href="2012/03">March 2012</a></li>
          <li><a href="2012/02">February 2012</a></li>
          <li><a href="2012/01">January 2012</a></li>
    </ul>
    </nav>
</section>

Pada ketika ini, penggunaan setiap teg adalah seperti ini berikut ialah kod lengkap fail HTML5 index.html

Kod Lihat

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Layout TEST</title>
</head>
<body>
    <h2>body</h2>
    <header id="page_header">
        <h1>Header</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
        </nav>
    </header>
    <section id="posts">
        <h2>Section</h2>
        <article>
            <h2>article</h2>
            <header>
                <h2>Article Header</h2>
            </header>
            <aside>
                <h2>Article Aside</h2>
            </aside>
            <p>Without you?I'd be a soul without a purpose.
                        </p>
            <footer>
                <h2>Article Footer</h2>
            </footer>
        </article>
        <article>
            <h2>article</h2>
            <header>
                <h2>Article Header</h2>
            </header>
            <aside>
                <h2>Article Aside</h2>
            </aside>
            <p>Without you?I'd be a soul without a purpose. </p>
            <footer>
                <h2>Article Footer</h2>
            </footer>
        </article>
    </section>
    <section id="sidebar">
        <h2>Section</h2>
        <header>
            <h2>Sidebar Header</h2>
        </header>
        <nav>
            <h3></h3>
            <ul>
                <li><a href="2012/04">April 2012</a></li>
                <li><a href="2012/03">March 2012</a></li>
                <li><a href="2012/02">February 2012</a></li>
                <li><a href="2012/01">January 2012</a></li>
            </ul>
        </nav>
    </section>
 
    <footer id="page_footer">
        <h2>Footer</h2>
    </footer>
 
</body>
</html>

Berikut ialah pengenalan terperinci kepada elemen baharuElemen baharu

<kanvas> sebagai carta dan imej lain. Teg ini adalah berdasarkan API lukisan JavaScript

<!DOCTYPE html> 
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head> 
<body>
<canvas id="myCanvas">你的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
</body>
</html>

Elemen multimedia baharu

teg Penerangan

<audio> Tentukan kandungan audio

<video>

<sumber> Tentukan sumber multimedia <video> dan <audio><benamkan>

<trek> Menentukan trek teks luaran untuk media seperti <video>

Elemen bentuk baharu

Penerangan Teg

<datalist> Mentakrifkan senarai pilihan. Gunakan elemen ini bersama dengan elemen input untuk mentakrifkan kemungkinan nilai input.

<keygen> Menentukan medan penjana pasangan kunci untuk digunakan dalam borang.

<output> Tentukan jenis output yang berbeza, seperti output skrip.

Elemen semantik dan struktur baharu

HTML5 menyediakan elemen baharu untuk mencipta struktur halaman yang lebih baik:

Penerangan Teg

<artikel> Mentakrifkan kawasan kandungan bebas halaman.

<ketepikan> Mentakrifkan kandungan bar sisi halaman.

<bdi> Membolehkan anda menetapkan sekeping teks bebas daripada tetapan arah teks unsur induknya.

<perintah> Tentukan butang arahan, seperti butang radio, kotak semak atau butang

<perincian> Digunakan untuk menerangkan butiran dokumen atau bahagian tertentu dokumen

<dialog> Mentakrifkan kotak dialog, seperti kotak gesaan

<ringkasan> Label mengandungi tajuk elemen butiran

<angka> kandungan (imej, carta, foto, kod, dll.).

<figcaption> Tentukan tajuk <angka> elemen

<header> Mentakrifkan kawasan pengepala dokumen

<tanda>

<meter> Tentukan berat dan sukat. Gunakan hanya untuk ukuran dengan nilai maksimum dan minimum yang diketahui.

<nav> mentakrifkan bahagian pautan navigasi.

<kemajuan> Mentakrifkan kemajuan sebarang jenis tugas.

<ruby> Tentukan ulasan ruby (pinyin atau aksara Cina).

<rt> Tentukan tafsiran atau sebutan watak (fonetik atau aksara Cina).

<rp> Digunakan dalam ulasan ruby untuk menentukan kandungan yang dipaparkan oleh penyemak imbas yang tidak menyokong elemen ruby .

<bahagian> Mentakrifkan bahagian (bahagian, bahagian) dalam dokumen.

<masa> Tentukan tarikh atau masa.

<wbr> Menentukan tempat dalam teks yang sesuai untuk menambah aksara baris baharu.

Elemen Dialih Keluar

Elemen HTML 4.01 berikut telah dialih keluar dalam HTML5:

<akronim> ;

<besar>

<dir> ;<🎜

<font>

<<tt>

Meneruskan pembelajaran

fail baharu

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <canvas id="myCanvas">你的浏览器不支持 HTML5 canvas 标签。</canvas> <script> var c=document.getElementById('myCanvas'); var ctx=c.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100); </script> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik

Elemen baharu HTML5

peringkat rendahTutorial tapak web tiruan perusahaan Imperial CMS

peringkat rendahPemula dengan asas sifar dalam WordPress membina blog peribadi dan laman web korporat

peringkat rendahVideo arahan pembinaan tapak web berasaskan sifar CMS muktamad

peringkat rendahProjek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]

PertengahanVue3.0 daripada 0 untuk membina amalan projek sistem pengurusan belakang universal

peringkat rendahKursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]

peringkat rendahTutorial bahagian hadapan WEB [HTML5+CSS3+JS]

peringkat rendahBermula dengan cepat dengan apipost

PertengahanTutorial praktikal Vue3+TypeScript amalan projek peringkat perusahaan

peringkat rendahMari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP

PertengahanProjek e-dagang VUE (pertempuran sebenar projek dua bahagian hadapan & belakang)

peringkat rendahAplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]