What are the html5 layout elements?

html5 layout elements include: 1. header element, which defines the head content of the web page; 2. footer element; 3. nav element; 4. article element; 5. section element; 6. aside element; 7. time element; 8. progress element; 9. meter element, etc.

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

Several new layout structure elements in HTML5

1. Header element:

is generally used for the head of a web page to define the header A region block can also define a piece of content, and the defined content is an independent piece.

<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. Footer element:

is basically the same as the header element, but the footer element generally defines the bottom content of the web page

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

3. nav element:

can be used to define navigation bars, directories, hyperlinks, etc.; it is not necessary to put all connection groups into nav elements, only the main ones need to be The basic connection group can be put into the nav element

4. Article element:

is used to define an independent content block; it can be an article A blog, an article or an independent plug-in; it can be used nested or represents a plug-in. Similar to the div element

<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, section element:

is used to define the content in the page to be divided into chunks; emphasize chunking. Generally used for pages with obviously independent content

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

6. aside element:

• is usually used to set the sidebar.
  

• It can also be used nested inside the article element as ancillary information to the main content, such as reference materials, term explanations, etc.

• You can also define content other than the article element, provided that these contents are associated with the content of the article element

<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. Time element:

• Indicates a certain time or date in 24 hours, indicating that the time is allowed to have a time difference

• The date and time in the datetime attribute must be Separate text with "T" and use "z" to represent UTC standard time

• The pubbdate attribute is an optional tag that allows search engines to easily identify the date of the article and the publication date of the news.

<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, progress and meter elements:

• progress element: is a new element in HTML5, used to Create a progress bar; usually used in conjunction with JavaScript to display the progress of a task

• meter element: is a new element in HTML5, used to create a measurement bar to represent Assessment of weights and measures; usually used in conjunction with JavaScript

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

    </progress>

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

    </meter>
</form>

Related recommendations: "html video tutorial"

The above is the detailed content of What are the html5 layout elements?. For more information, please follow other related articles on the PHP Chinese website!