31-PC端固定布局學(xué)習(xí)要點(diǎn)主講教師：本課程由北風(fēng)網(wǎng)和瓢城Web提本章主要開(kāi)始使用HTML5CSS3來(lái)構(gòu)Web頁(yè)面，第一個(gè)項(xiàng)目PC端一．大綱算法在HTML5中有一個(gè)很重要的概念，叫做HTML5大綱算法(HTML5Outliner)，它的用途是為用戶(hù)提供一份頁(yè)面的信息結(jié)構(gòu)比如我們經(jīng)常使用的手冊(cè)就是一個(gè)非常好的大綱結(jié)合理的使用HTML5元素，可以生成一個(gè)非常清晰的文檔大綱，我們可以通過(guò)各種工具去查看當(dāng)前頁(yè)面，比如谷歌和火狐的插件可以查看當(dāng)前的HTML5大綱。這里我們推薦使用一個(gè)服務(wù)器端的測(cè)試工具：HTML5Outliner，如下：測(cè)試工具：這個(gè)工具可以上傳本地html文件，也可以填寫(xiě)URL，或者直接在多行文本框上編寫(xiě)HTML5代碼均可了解大綱。通過(guò)上一節(jié)課的代碼編寫(xiě)，發(fā)現(xiàn)這個(gè)頁(yè)面的大綱非常的難看，出現(xiàn)三個(gè)UnitledSction，這個(gè)意思表示頁(yè)面此處缺少大綱標(biāo)題，不規(guī)范。如果你的頁(yè)面在這里測(cè)試，大綱都比較清晰，那么HTM5頁(yè)面是比較規(guī)范的。//大 結(jié)UntitledUntitledUntitledsection和首先，我們暫不探討怎么讓html5頁(yè)面大綱合乎規(guī)范。先探討一下section和div的div元素在html5之前就是非常常用的，它本身沒(méi)有任何語(yǔ)義，用來(lái)頁(yè)面布局CSS樣式以及JS調(diào)用。那么，div的用途已經(jīng)說(shuō)的很清楚了1.如果是頁(yè)面布局，且不是header、footer之類(lèi)的專(zhuān)屬區(qū)域，都應(yīng)該使用div；3.如果想對(duì)一段內(nèi)容進(jìn)行JS控制，那么也應(yīng)該使用divhtml5中，section并不是用來(lái)取代div的。在基礎(chǔ)課程中已經(jīng)簡(jiǎn)單的了解過(guò)，它是具有語(yǔ)義的文檔。表示一段文檔中的章節(jié)，比如包含一個(gè)標(biāo)題和一個(gè)段落，而大綱規(guī)范中，<p>Bootstrap是一款html5開(kāi)源框架通過(guò)上訴說(shuō)明，我們對(duì)于下方的section，增加一個(gè)h2即可實(shí)現(xiàn)大綱要求。最終//大 結(jié)1.Untitled1.Untitled那么發(fā)現(xiàn)最后一個(gè)UntiledSctin已經(jīng)擁有了標(biāo)題，已經(jīng)符合規(guī)范。對(duì)于前面還有兩個(gè)，待會(huì)兒再說(shuō)?，F(xiàn)在再探討一個(gè)問(wèn)題，既然div用于沒(méi)有任何語(yǔ)義的布局和樣式定義，那么我們就需要探討一下如下代碼用iv還是secion。//這里改用section還是div呢<section<h1class="logo">瓢城旅行社<ul從結(jié)構(gòu)上來(lái)看，section需要包含至少一個(gè)h1~h6，這里是符合的。但容易的部分是，section是某個(gè)區(qū)域章節(jié)的標(biāo)題，h1其實(shí)是整個(gè)的標(biāo)題。而ul部分是導(dǎo)航超section并不是代替div的元素。//比較合理的做<div<h1class="logo">瓢城旅行社<ul這里大綱進(jìn)行了一個(gè)很有趣的變化，如下//改變后的大1.Untitled是哪個(gè)元素下的呢？答案是：body元素。我們只要在body元素下創(chuàng)建一個(gè)h1，寫(xiě)上標(biāo)題//增加body標(biāo)題，解決大綱問(wèn)<h1>Body大標(biāo)題雖然在bodybody創(chuàng)建一個(gè)h1啊。難道創(chuàng)建后，再隱藏這種多此一舉的方法嗎？這個(gè)問(wèn)題，稍后再看，先再探三．結(jié)構(gòu)分析首先，探討一下nav元素。這個(gè)元素本質(zhì)上是用來(lái)存放一組作為導(dǎo)航的，比如ul。我LOGO+導(dǎo)航，我們可以理解為header頭部，所以，最終改寫(xiě)成如下結(jié)構(gòu)：//頭部元素?fù)Q成了header，nav元素只包含<header<div<h1class="logo">瓢城旅行社<navsection和nav元素大綱要求有標(biāo)題h1~h6，但section必須有才規(guī)范，而如果沒(méi)有標(biāo)題，也是合理的。當(dāng)然，添加上標(biāo)題會(huì)讓大綱更加好看，頁(yè)面中可以隱藏//最終格式如下<header<div<h1cl