第八十七節，html5+css3pc端固定佈局，大綱算法，section和div，結構分析

時間 2019-11-12

標籤第八十七 html5+css3pc html css 固定佈局大綱算法 section div 結構分析欄目 HTML 简体版

原文原文鏈接

html5+css3pc端固定佈局，大綱算法，section和div，結構分析css

一．大綱算法
在HTML5中有一個很重要的概念，叫作HTML5 大綱算法(HTML5Outliner)，它的用途是爲用戶提供一份頁面的信息結構目錄。好比咱們常常使用的手冊就是一個很是好的大綱結構：html

測試工具：https://gsnedders.html5.org/outliner/
這個工具能夠上傳本地html文件，也能夠填寫URL，或者直接在多行文本框上編寫HTML5代碼都可瞭解大綱。
經過咱們將上一節課的代碼編寫，發現這個頁面的大綱很是的難看，出現三個Untitled Section，這個意思表示頁面此處缺乏大綱標題，不規範。若是你的頁面在這裏測試，大綱都比較清晰，那麼HTML5頁面是比較規範的。 html5

須要大綱的標籤css3

1.<body>,是須要大綱標題的，注意：<body>裏面的大綱標題的上級，若是是須要大綱標題的，大綱標題就歸屬於上級，若是上級是不須要大綱標題的，大綱標題就歸屬於<body>標籤算法

語義標籤通常就是拿來佈局大綱，最好不要用於css樣式，css樣式用div，ide

語義標籤說明工具

<body> 　　　　網頁主體　　　　　　　　　　　　　　　　　　　　須要大綱佈局

<header> 　　表示首部　　不須要要大綱用於頭部區域測試

<footer> 　　表示尾部　　　　　不須要要大綱用於尾部區域網站

<nav> 表示有意集中在一塊兒的導航元素須要大綱

<section> 　　表示重要概念或主題　　　　須要大綱主題

<article> 　　表示一段獨立的內容　　須要大綱

<address> 表示文檔或article的聯繫信息不須要要大綱

<aside> 　表示與周邊內容少有牽涉的內容　　須要大綱

<hgroup> 　將一組標題組織在一塊兒　　　　須要大綱,會自動變成下一個主大綱須要定義大綱的地方

<details> 生成一個區域，用戶將其展開能夠得到更多細節不須要要大綱

<summary> 用在details元素中，表示該元素內容的標題或說明不須要要大綱

注意：<article>表示一段獨立的內容，裏面又能夠添加<header> ，<nav> ，<section> ，<footer>當上門的標籤嵌套

二．section和div
首先，咱們暫不探討怎麼讓html5頁面大綱合乎規範。先探討一下section和div的區別。div元素在html5以前就是很是經常使用的標籤，它自己沒有任何語義，用來頁面佈局和CSS樣式以及JS調用。那麼，div的用途已經說的很清楚了：
　　1.若是是頁面佈局，且不是header、footer之類的專屬區域，都應該使用div；
　　2.若是隻是單純的對一個端內容進行CSS樣式定義，那麼也應該使用div;
　　3.若是想對一段內容進行JS控制，那麼也應該使用div。

html5中，section並非用來取代div的。在基礎課程中已經簡單的瞭解過，它是具備語義的文檔標籤。表示一段文檔中的章節，好比包含一個標題和一個段落，而大綱規範中，至少要包含一個標題。
經過上訴說明，咱們能夠對section標籤，增長一個h2便可實現大綱要求。

測試工具：https://gsnedders.html5.org/outliner/

火狐插件： HeadingsMap

三.完成大綱

能夠看出已經有很好的大綱結構了

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瓢城旅行社</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--導航-->
<header class="dao-hang">
    <div class="dao-hang2">
        <h1 class="log">瓢城旅行社</h1>
        <nav>
            <h2>網站導航</h2>
            <ul>
                <h3>
                    <li class="dao-hang-lie-biao"><a href="index.html">首頁</a></li>
                    <li class="dao-hang-lie-biao"><a href="#">旅遊資訊</a></li>
                    <li class="dao-hang-lie-biao"><a href="#">機票訂購</a></li>
                    <li class="dao-hang-lie-biao"><a href="#">風景欣賞</a></li>
                    <li class="dao-hang-lie-biao"><a href="#">公司簡介</a></li>
                </h3>
            </ul>
        </nav>
    </div>
</header>


<!--主體-->
<section>section
<h2>主題</h2>
</section>


<!--尾部-->
<footer>footer</footer>

</body>
</html>