Apakah elemen susun atur html5?

elemen susun atur HTML5 termasuk: 1. elemen pengepala, yang mentakrifkan kandungan kepala halaman web; 3. elemen nav; ; 7. elemen masa; 8. elemen kemajuan;

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi HTML5, komputer Dell G3.

Beberapa elemen struktur reka letak baharu dalam HTML5

1 Elemen pengepala:

biasanya digunakan untuk kepala halaman web, mentakrifkan pengepala. Blok wilayah juga boleh mentakrifkan sekeping kandungan, dan kandungan yang ditakrifkan ialah sekeping bebas.

<header>
    <h1>中国最大的搜索引擎</h1>
    <a href="http://www.baidu.com">百度</a>
    <nav>
        <ul>
            <li><a href="#">谷歌</a></li>
            <li><a href="#">火狐</a></li>
            <li><a href="#">360</a></li>
        </ul>
    </nav>
</header>

2. Elemen pengaki:

pada asasnya sama dengan elemen pengepala, tetapi elemen pengaki biasanya mentakrifkan kandungan bawah halaman web

<footer>
    <ul>
        <li>关于我们</li>
        <li>联系客服</li>
        <li>合作招商</li>
        <li>隐私政策</li>
    </ul>
</footer>

3. Elemen navigasi:

boleh digunakan untuk mentakrifkan bar navigasi, direktori, hiperpautan, dll.; tidak perlu meletakkan semua sambungan kumpulan ke dalam elemen nav, cuma Letakkan kumpulan sambungan utama dan asas ke dalam elemen nav

4. Elemen artikel:

digunakan untuk mentakrifkan kandungan bebas blok; Ia boleh menjadi blog, artikel atau pemalam bebas; ia boleh digunakan bersarang atau mewakili pemalam. Serupa dengan elemen div

<article>
    <header>
        <h1>Article元素</h1>
        <p>欢迎学习Article元素</p>
    </header>
    <footer>
        <p>这是底部</p>
    </footer>
</article>
<article>
    <h1>这是一个内嵌页面</h1>
    <object data="#" type="" width="600px" height="600px"></object>
</article>

5. Elemen bahagian:

digunakan untuk menentukan kandungan pada halaman yang akan dibahagikan kepada ketulan; Biasanya digunakan untuk halaman yang mempunyai kandungan yang jelas bebas

<article>
    <section>
        <h1>第一章：桃园三结义</h1>
        <p>桃园三结义最初是小说《三国演义》里记载的故事，述说当年刘备、关羽和张飞三位仁人志士，为了共同干一番大事业的目标，意气相投，
            言行相依，选在一个桃花盛开的季节、选在一个桃花绚烂的园林，举酒结义，对天盟誓，有苦同受，有难同当，有福同享，共同实现自己人生的美好理想。</p>
    </section>
    <section>
        <h1>第二章：</h1>
        <p>草船借箭是我国古典名著《三国演义》中赤壁之战的一个故事。借箭由周瑜故意提出(限十天造十万支箭)，机智的诸葛亮一眼识破是一条害人之计，
            却淡定表示“只需要三天”。后来，有大雾天帮忙，诸葛亮再利用曹操多疑的性格，调了几条草船诱敌，终于借足十万支箭，立下奇功。</p>
    </section>
</article>

6. elemen ketepikan:

• biasanya digunakan untuk menetapkan bar sisi.
  

• juga boleh disarangkan di dalam elemen artikel sebagai maklumat tambahan kepada kandungan utama, seperti bahan rujukan, penjelasan istilah, dll.

• Anda juga boleh menentukan kandungan di luar elemen artikel, dengan syarat kandungan ini dikaitkan dengan kandungan elemen artikel

<article class="film_review">
    <header>
        <h2>侏罗纪公园</h2>
    </header>
    <section class="main_review">
        <p>Dinos were great!</p>
    </section>
    <section class="user_reviews">
        <article class="user_review">
            <p>Way too scary for me.</p>
            <footer>
                <p>
                    Posted on <time datetime="2015-05-16 19:00">May 16</time> by Lisa.
                </p>
            </footer>
        </article>
        <article class="user_review">
            <p>I agree, dinos are my favorite.</p>
            <footer>
                <p>
                    Posted on <time datetime="2015-05-17 19:00">May 17</time> by Tom.
                </p>
            </footer>
        </article>
    </section>
    <footer>
        <p>
            Posted on <time datetime="2015-05-15 19:00">May 15</time> by Staff.
        </p>
    </footer>
</article>

7. elemen masa:

• mewakili masa atau tarikh tertentu dalam 24 jam, menunjukkan bahawa masa dibenarkan untuk mempunyai perbezaan masa

• Tarikh dalam atribut datetime adalah sama dengan Masa mesti dipisahkan dengan teks "T" dan "z" mewakili masa standard UTC

• Atribut pubbdate ialah teg pilihan yang membenarkan carian enjin untuk mengenal pasti dengan mudah tarikh artikel dan tarikh berita Tarikh penerbitan

<section>
    <time datetime="2019-4-27">2019-4-27</time>
    <time datetime="2019-4-27T20:00">2019-4-27</time>
    <time datetime="2019-4-27T20:00Z">2019-4-27</time>
    <time datetime="2019-4-27+09:00">2019-4-27</time>
</section>

8. kemajuan dan elemen meter:

• elemen kemajuan: baharu kepada Elemen HTML5, digunakan untuk mencipta bar kemajuan; biasanya digunakan bersama JavaScript untuk memaparkan kemajuan tugasan

• elemen meter: ialah elemen baharu dalam HTML5, digunakan untuk membuat bar ukuran , digunakan untuk mewakili penilaian berat dan ukuran biasanya digunakan dalam kombinasi dengan JavaScript

<form action="">
    <!--max:规定当前进度条的最大值 ； value属性：设定进度条当前显示的默认值  form：规定进度条所属的一个或多个表单-->
    <p>当前下载进度：</p>
    <progress value="30" max="100">

    </progress>

    <meter value="40" max="100" min="10">

    </meter>
</form>

Cadangan berkaitan: "tutorial video html"

Atas ialah kandungan terperinci Apakah elemen susun atur html5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!