手机捕鱼游戏

書名： HTML+CSS網頁設計實踐教程
作者名：田中雨
本章字數： 3831字
更新時間： 2021-03-19 20:43:01

2.1 新增的結構元素

沒有HTML 5的新增結構元素之前，設計人員定義結構時，通常都是通過一個“全能”的<div>標記實現。然后通過設置該標記中div元素id屬性的值分別表示頭部、底部和側欄等，例如header、footer和sidebar。而有了這些結構元素后，設計人員再也不需要為id的命名費盡心思，對于手機、閱讀器等設備更有語義的好處。

2.1.1 header元素

header元素表示頁面中一個內容區塊或整個頁面的標題，它可以包含所有通常放在頁面頭部的內容。header元素并不是頁面中的head元素，因此可以為每個區域添加一個header元素。

header元素通常用來顯示一個頁面中的標題、Logo圖片、搜索文本框或者其他相關內容，使用該元素可以替代原來使用的“<div id="header"></div>”標記。它的使用非常簡單，語法如下：

    <header><!--內容--></header>

【練習1】

本次練習主要演示header元素的使用，通過在頁面中使用header元素顯示網頁的Logo標志，實現的步驟如下所示。

（1）在Dreamweaver CS5開發工具中新建一個網頁，在頁面的合適位置添加代碼，在顯示Logo信息的頭部使用header元素表示。代碼如下。

    <div id="main_container">
        <header>
            <div class="logo"> <a href="work1/index.html"><img src="work1/images/logo.gif" alt="" title="" border="0" /></a> </div>
        </header>
    </div>

（2）如果需要為header元素指定樣式，不需要通過ID選擇器進行定義，而是直接在樣式中進行定義即可。樣式代碼如下。

    header{
        width:677px;
        height:173px;
        margin:auto;
    }

（3）運行頁面查看效果，如圖2-1所示。

圖2-1 header元素的使用

2.1.2 article元素

article元素中的內容獨立于文檔的其余部分，表示頁面中的一塊與上下文不相關的獨立內容。一個網頁中可以出現一個article元素，也可以同時出現多個article元素，它可以獨立使用，也可以和section元素結合使用。

article元素可以表示博客中的文本或者是來自論壇中的文本，還可以是來自其他外部資源的內容。使用該元素通常會替代原來使用的“<div id="content"></div>”標記，其使用也非常簡單。語法如下：

    <article><!--內容--></article>

【練習2】

本次練習演示article元素的使用，可以利用練習1的頁面，也可以重新更改或設計頁面，實現步驟如下。

（1）使用Dreamweaver CS5添加一個新的網頁，在頁面的合適位置添加article元素，該元素包含關于藝術文章說明的列舉說明。部分代碼如下。

    <article>
        <div class="title"><img src="work1/images/title_products.gif" alt=""title="" /></div>
        <div class="prod_box"> <img src="work1/images/p1.gif" alt="" title=""class="prod_img"/>
            <div class="prod_details">
                <h1>小提琴</h1>
                <p>小提琴的出現已有300多年的歷史，是自17世紀以來西方音樂中最為重要的樂器之一,被譽為樂器皇后，其制作本身是一門極小提琴為精致的藝術。小提琴音色優美，接近人聲，音域寬廣，表現力強，從它誕生那天起，就一直在樂器中占有顯著的地位，為人們所寵愛。</p>
                <a href="#" class="order"><img src="work1/images/order.gif"alt="" border="0" /></a>
            </div>
        </div>
        <!--省略其他內容-->
        <div class="pagination"> <span class="disabled">prev</span> <span class="current">1</span> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a>...<a href="#?page=22">22</a> <a href="#">23</a> <a href="#">next</a> </div>
        <div class="clear"></div>
    </article>

（2）為上述元素添加相應的樣式，部分樣式代碼如下。

    article{
        padding:20px 40px 0 40px;
    }
    .prod_box{
        float:left;
        padding:10px 10px 10px 15px;
    }

（3）運行頁面觀察效果，如圖2-2所示。

2.1.3 section元素

前面已經提到過，article元素通常會和section元素一起使用，那section元素究竟是做什么的呢？section元素用于將頁面上的內容劃分為獨立的區域，定義文檔中的節，例如章節、頁眉、頁腳或者文檔中的其他部分。

圖2-2 article元素的使用

一個section元素通常是一個有主題的內容組，前面有一個header元素，后面跟一個footer元素，如果有需要，section元素也可以嵌套使用。如下代碼演示了section元素的簡單使用。

    <article>
        <header><h1>第1章</h1></header>
        <section>
            <header><h1>第1節</h1></header>
            <p><h1>第1節的內容</h1></p>
            <footer><h1>第1節的其他信息</h1></footer>
        </section>
    </article>

雖然article元素和section元素都可以向頁面顯示內容，但是，它們之間也存在著不同。實際上，article元素可以看成是一種特殊類型的section元素，只是它比section元素更加強調獨立性。簡單來說，就是section元素強調分段或分塊，而article元素強調獨立性。

具體來說，如果一塊內容相對來說比較獨立、完整的時候，應該使用article元素，但是如果想將一塊內容分成幾段，就應該使用section元素。

【練習3】

本次練習將article元素和section元素結合起來使用，使用article元素表示整篇文章，section元素表示文章的不同部分。

（1）在Dreamweaver CS5中添加一個新的頁面，然后設計頁面，在頁面的合適位置添加article元素和section元素。部分代碼如下。

    <article>
        <header>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;生命長河里的繁星點點，總有最璀璨的那么幾顆在始終如一地閃耀著，一聽到老師的這個的題目，我便微舒口氣，凝望著窗外，專心翻閱著生命中的那五樣東西...</header><br/>
        <section>
            <h3>我的父母</h3><br/>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;有這樣兩個人，是他們將我帶到這個神奇的世界，他們一直視我為他們的專屬天使，用全部的愛心撫養著我，他們是——我在紙上，專心寫下了"父母"兩個字。</p>
        </section><br/>
        <section>
            <h3>我的朋友</h3><br/>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;當我在川流不息的人群世俗中迷惘時，忽然，跳出來一群人緊緊握住我的手，為我指明方向，快樂于我共分享，痛苦與我同分擔。于是，我又寫下了"朋友"二字。</p>
        </section><br/>
        <!--省略其他內容-->
    </article>

（2）如果需要，則為上述的有關元素添加樣式代碼。例如，為article元素添加的樣式代碼如下。

    article {
        font-family: Verdana;
        font-size: 14px;
        color: #0366B6;
        margin: 3px;
        float: left;
        width: 600px;
        padding-top: 15px;
        padding-right: 3px;
        padding-bottom: 10px;
        padding-left: 20px;
    }

（3）運行頁面觀察效果，如圖2-3所示。

注意

section是一個劃分內容的標識，而不是一個容器。在HTML 5中，div元素是一種容器。因此，如果希望放置一些內容并定義樣式時，可以使用div元素進行總體的CSS樣式套用而不是section元素。

在HTML 5中，設計人員可以將所有頁面的從屬部分（例如導航條、菜單和版權說明等）包含在一個統一的頁面中，以便統一使用CSS樣式來進行裝飾。另外，關于section元素的使用禁忌總結如下。

圖2-3 section元素的使用

（1）不要將section元素用作設置樣式的頁面容器，那是div元素的工作。

（2）如果article元素、aside元素或nav元素更符合使用條件，盡量不使用section元素。

（3）不要為沒有標題的內容區塊使用section元素。

2.1.4 nav元素

nav元素用來向頁面構建導航，導航定義為一個頁面中（例如，一篇文章頂端的一個目錄，它可以鏈接到同一頁面的錨點）或一個站點內的鏈接。

一個頁面中可以擁有多個nav元素作為頁面整體或不同部分的導航，但是，并不是所有的導航鏈接都要放入到該元素中，例如頁面底部的導航鏈接就應該使用footer元素。

【練習4】

nav元素的內容可能是鏈接的一個列表，標記為一個有序列表或者是一個無序列表。本次練習主要演示nav元素的使用，實現步驟如下。

（1）在Dreamweaver CS5中添加一個新頁面，設計頁面并在頁面的導航顯示處添加nav元素。代碼如下。

    <nav>
        <ul>
            <li><a href="#" class="hover">首頁</a></li>
            <li><a href="#">聯系我們</a></li>
            <li><a href="#">技術支持</a></li>
            <li><a href="#">文章列表</a></li>
            <li><a href="#">目標信息</a></li>
            <li><a href="#">最新動態</a></li>
            <li><a href="#">展望未來</a></li>
            <li class="noBor"><a href="#">聯系我們</a></li>
        </ul>
    </nav>

（2）分別為導航元素和列表元素添加樣式，部分樣式代碼如下。

    nav{
        height:30px;
        float:left;
        margin:123px 0 0 0;
        background:url(images/nav_bg.gif) 0 0 repeat-x;
        width:677px;
    }
    nav li{
        float:left;
        font-size:0;
        line-height:0;
        margin:0;
        border-right:#FFF5ED solid 1px;
    }
    nav li a{
        display:block;
        background:url(images/nav_bg.gif) 0 0 repeat-x;
        padding:0 15px;
        font:bold 11px/30px Arial, Helvetica, sans-serif;
        color:#fff;
        background-color:inherit;
        text-decoration:none;
    }

（3）運行頁面查看效果，導航效果如圖2-4所示。

圖2-4 nav元素的使用

提示

nav元素是一個包裝器，它不會替代ol或ul元素，但是它會包圍ol或ul元素。通過這種方式，不支持nav元素的舊版本瀏覽器將會顯示列表元素和列表項，并且顯示效果完全正常。

在練習4中，nav元素作用于鏈接導航，當前鏈接到本頁面。并不是鏈接的每一個集合都是一個nav，只需要將主要的、基本的鏈接組放入nav元素即可。具體來說，nav可以適用于多個場合，具體使用場合說明如下。

（1）傳統導航條。目前主流網站上都有不同層級的導航條，其作用是將當前畫面跳轉到網站的其他主要頁面上去。

（2）側邊欄導航。目前主流博客網站及商品網站上都有側邊欄導航，其作用是將頁面從當前文章或當前商品跳轉到其他文章或其他商品頁面上去。

（3）頁內導航。頁內導航的作用是在本頁面幾個主要的組成部分之間進行跳轉。

（4）翻頁操作。翻頁操作是指在多個頁面的前后頁或博客網站的前后篇文章滾動。

2.1.5 footer元素

footer元素用來定義其父級區塊（section）或根區塊（document）的腳注信息，使用該元素可以顯示作者、文檔的創建日期、相關閱讀鏈接以及版權信息等。通常情況下，footer元素用來替代原來頁面中的“<div id="footer"></div>”標記。

【練習5】

幾乎所有的網站都離不開底部信息，這些底部備注信息可以是簡單的鏈接，還可以包括與版權有關的信息。下面通過一個簡單的練習演示footer元素的使用，實現的具體步驟如下。

（1）在Dreamweaver CS5中添加一個新的頁面，設計頁面并且使用footer元素顯示底部信息。代碼如下。

    <footer>
        <ul>
            <li><a href="#" class="hover">首頁</a></li>
            <li><a href="#">關于我們</a></li>
            <!--省略其他內容-->
        </ul>
        <p class="copyright">Copyright ? Import 2013. All Rights Reserved.</p>
        <a href="#" class="xhtml">Xhtml</a><a href="#" class="css">Css</a>
        <p class="design">Designed by : <a href="#" target="_blank" class="link">Template World</a></p>
    </footer>

（2）如果需要，為上面的元素添加相應的樣式，部分樣式代碼如下。

    footer{
        width:983px;
        margin:0 auto;
        background:url(images/footer_bg.gif) 0 0 repeat-x;
        height:117px;
        position:relative;
    }
    footer p.copyright{
        font:normal 11px/22px Arial, Helvetica, sans-serif;
        position:absolute;
        left:384px;
        top:36px;
        width:250px;
        color:#FFFEC2;
        background-color:inherit;
    }

（3）運行頁面查看效果，如圖2-5所示。

圖2-5 footer元素的使用

footer元素與header一樣，一個頁面中沒有對該元素的個數進行限制。同時，可以為article元素或section元素添加footer元素。

例如，為article元素添加footer元素，代碼如下。

    <article>
文章內容
        <footer>文章的腳注</footer>
    </article>

2.1.6 address元素

address元素為文檔或section定義聯系信息，這些聯系信息可以是E-mail地址、郵政地址或者任何其他形式。但是，address元素并不適合所有需要地址信息的情況，例如，對于客戶的聯系信息就不需要該元素。

address元素中不能包含標題、區塊內容、header、footer或address元素，通常情況下，會將該元素和其他內容一起放在footer元素中。例如，在下面的代碼中，展示了博客中某篇文章評論者的名字及其在博客中的網址鏈接。代碼如下。

    <address>
        <a >I Love MySelf</a>
    </address>

address在支持該元素瀏覽器中顯示時，其文本內容被呈現為斜體。大多數瀏覽器都會在address元素的前后添加一個換行符，但是，如果有必要，還可以在需要地址文本的內容添加額外的換行符。

2.1.7 hgroup元素

hgroup元素用于對整個頁面或頁面中一個內容區塊的標題進行組合，它是將標題及其子標題進行分組的元素。hgroup元素扮演著一個可以包含一個或者更多與標題相關容器的角色。

hgroup元素通常會將h1～h6元素進行分組，例如，一個內容區塊的標題及其子標題算一組，但是使用時也需要注意以下三點。

（1）如果只有一個標題元素（h1～h6中的一個），不建議使用hgroup元素。

（2）當出現一個或者一個以上的標題與元素時，推薦使用hgroup元素作為標題容器。

（3）當一個標題有副標題、其他section或者article的元數據時，建議將hgroup元素和元數據放到一個單獨的header元素容器中。

【練習6】

通常情況下，會將hgroup元素放在header元素中，本次練習將該元素放在header元素中，從而演示該元素的使用。

（1）在Dreamweaver CS5中添加一個新的頁面，設計頁面時向頁面中添加header元素，向header元素中添加hgroup元素，該元素表示一個主標題和一個子標題。代碼如下。

    <hgroup>
        <h1 class="blogtitle" id="blogname">
            <a ><span id="blog-namespan"> Love微微風的博客</span></a>
        </h1>
        <h3 style="color:red; margin-left:30px;">記錄了我生活中的點點滴滴...</h3>
    </hgroup>
    <div class="bloglink" id="bloglink">
        <a >http://blog.sina.com.cn/u/2236154751</a>
        <a id="SubscribeNewRss" href="#" onclick="return false;">[<cite>訂閱</cite>]</a>
        <a href="#">[<cite>手機訂閱</cite>]</a>
    </div>

（2）為頁面中的部分元素添加樣式代碼，部分樣式如下所示。

    div, h1, h2, h3, h4, p, form, label, input, textarea, img, span{
        margin:0; padding:0;
    }

（3）運行頁面查看效果，如圖2-6所示。

圖2-6 hgroup元素的使用

hgroup元素可以和figcaption元素結合使用，這樣可以將hgroup元素作為標題容器。示例代碼如下。

    <hgroup>
        <figcaption>最新鏈接</figcaption>
        <ul>
            <li><a href="#">What's New 07</a></li>
            <li><a href="#">What Our Goal</a></li>
            <li><a href="#">Rise in Air In a Different Way Towards Success </a></li>
            <li><a href="#">Airfeed Updates</a></li>
            <li class="noMargin2"><a href="#">Why Choose Our Site</a></li>
        </ul>
    </hgroup>

官术网_书友最值得收藏!

HTML+CSS網頁設計實踐教程