2.2 HTML 5新增內(nèi)容

視頻講解：光盤\TM\lx\2\02 HTML 5新增內(nèi)容．mp4

自從2010年HTML 5正式推出以來，就以一種驚人的速度被迅速地推廣，世界各知名瀏覽器廠商也對HTML 5有很好的支持。例如，微軟就對IE 9做了標準上的改進，使其能夠支持HTML 5。而且HTML 5還有一個特點，就是在老版本的瀏覽器上也可以正常運行。本節(jié)將為大家介紹與HTML 4相比，HTML 5新增的元素與屬性。

注意

HTML 5的出現(xiàn)代表著Web開發(fā)進入了一個新的時代。但這并不表示現(xiàn)在用HTML 4開發(fā)的網(wǎng)站要重新創(chuàng)建，因為HTML 5內(nèi)部功能并不是革命性的，而是發(fā)展性的。這正是HTML 5兼容性的表現(xiàn)。

2.2.1 新增的元素

在HTML 5中新增了以下元素。

<section>元素

<section>元素表示頁面中的一個區(qū)域，例如章節(jié)、頁眉、頁腳或頁面中的其他部分。可以與h1、h2、h3、h4等元素結(jié)合起來使用，標示文檔結(jié)構(gòu)。

【例2.12】應(yīng)用<section>標記在頁面中定義一個區(qū)域。代碼如下：

        <section>
            <h2>section標記的使用</h2>
            <p>完成百分比：100%</p>
            <input type="button" value="請單擊"/>
        </section>

上面這段代碼相當(dāng)于在HTML 4中使用<div>標記在頁面中定義了一個區(qū)域。

<article>元素

<article>元素表示頁面中的一塊與上下文不相關(guān)的獨立內(nèi)容，例如博客中的一篇文章、一段用戶評論等。除了內(nèi)容部分，一個<article>元素通常有自己的標題、腳注等內(nèi)容。

【例2.13】應(yīng)用<article>元素在頁面中定義一個區(qū)域。代碼如下：

        <article>
            <header>
            <h1>蘋果美容</h1>
            </header>
            <p>蘋果素有"水果之王"的美稱，它含有豐富的維生素C，能讓皮膚細嫩、柔滑而白皙。蘋果面膜的做法很簡
        單，將蘋果去皮去核切塊后放入攪拌機中攪成泥狀，干性皮膚的美眉在蘋果泥中加入新鮮的牛奶或蜂蜜，油性皮
        膚的美眉則可加入少量蛋清，攪拌均勻后涂在臉上，敷10～15分鐘后洗凈，你會發(fā)現(xiàn)膚色有明顯變化哦。</p>
            <footer>
            <p>2016-9-27</p>
            </footer>
        </article>

<header>元素

<header>元素表示頁面中一個內(nèi)容區(qū)域或整個頁面的標題。在例2.13中就為大家演示了<header>元素的應(yīng)用。

<footer>元素

<footer>元素表示整個頁面或頁面中一個內(nèi)容區(qū)域塊的腳注，例如日期、作者信息等。在例2.13中就為大家演示了<footer>元素的應(yīng)用。

<aside>元素

<aside>元素用來表示當(dāng)前頁面或文章的附屬信息部分，可以包含與當(dāng)前頁面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、導(dǎo)航條等信息。

【例2.14】應(yīng)用<aside>元素定義頁面?zhèn)葯凇?span id="8extipn" class="kt_107">（實例位置：光盤\TM\sl\2\9）

關(guān)鍵代碼如下：

        <aside>
            <nav>
            <h2>側(cè)欄</h2>
              <ul>
                  <li>
                    <a href="#">明日圖書</a> 2017-2-27
                  </li>
                  <li>
                      <a href="#">明日軟件</a> 2017-2-27
                  </li>
                  <li>
                    <a href="#">編程詞典</a> 2017-2-27
                  </li>
              </ul>
            </nav>
        </aside>

圖2.16 在頁面中添加的側(cè)欄

頁面運行結(jié)果如圖2.16所示。

2.2.2 新增的input元素類型

HTML 5中新增了很多input元素類型，這些新增的元素可以使程序員更加方便地創(chuàng)建頁面。HTML 5新增的input元素類型如下：

email

將input元素的類型設(shè)置為email，表示文本框必須輸入E-mail地址。

url

url表示必須輸入URL地址。

number

number表示必須輸入數(shù)值的文本框。

range

range表示必須輸入一定范圍內(nèi)數(shù)值的文本框。