DIV CSS 佈局教程網

介紹

HTML是提供網頁文檔內容的上下文結構和含義；HTML本身是沒有表現的，我們看到的例如<H3>是粗體，字號為2em；<strong>的加粗，不要認為這些是html的表現，這是html的默認樣式在起作用，所以我們要知道html和頁面的表現是沒有關系的，表現是CSS的事。html在頁面中的作用是結構、含義，說白了就是劃分內容，這裡放什麼，我們放的是什麼。

結構化

一個頁面比作房子，那HTML就是鋼筋混凝土的牆，房蓋房梁一樣的架子；而CSS就是裝飾材料，地板油漆一類的東西。好的頁面結構就是在沒有CSS裝飾的情況下，頁面結構依然清晰明了，房屋依然可現。而人們常說的DIV+CSS，只是通俗的說法，並不是通篇的DIV，記住：DIV不是神！

語義化

HTML是一種對文本內容和意義（即語義）的補充說法。它會告訴我們說：“這行是一個標題，這幾行組成一個段落，這是一個項目列表，那是一個鏈接。”而不是來告訴我們：“這些字是藍色的，那些又是紅色的，這部分內容靠右，這幾個是斜體。”這些是CSS的工作。總之：HTML告訴我們一塊內容是什麼（或其意義），而不是它長什麼樣子。

復制代碼代碼如下:
<!--未語義化-->
<div id="header">
<div class="H3">前磚攻城師</div>
<div class="h2">搭積木也要玩藝術</div>
</div>
<!--語義化之後-->
<div id="header">
<H3>前磚攻城師</H3>
<h2>搭積木也要玩藝術</h2>
</div>

語義化的好處？

1. 去掉樣式能讓頁面結構呈現清晰
2. 屏幕閱讀器會按標記“讀”你的網頁
3. 有益於SEO
4. 便於團隊開發和維護

附:HTML5新增元素

標簽 含義 與html4對照 <article> 標簽定義外部的內容。比如來自一個外部的新聞提供者的一篇新的文章，或者來自 blog 的文本，或者是來自論壇的文本。亦或是來自其他外部源內容 HTML5:<article></article>
HTML4:<div></div> <section> 標簽定義文檔中的節（section、區段）。比如章節、頁眉、頁腳或文檔中的其他部分。 HTML5: <section></section>
HTML4: <div></div> <aside> 標簽定義 article 以外的內容。aside 的內容應該與 article 的內容相關。 HTML5:<aside>Aside 的內容是獨立的內容，但應與文檔內容相關。</aside>
HTML4:<div>Aside 的內容是獨立的內容，但應與文檔內容相關。</div> <header> 標簽定義 section 或 document 的頁眉。 HTML5: <header></header>
HTML4: <div></div> <footer> 標簽定義 section 或 document 的頁腳。典型地，它會包含創作者的姓名、文檔的創作日期以及/或者聯系信息。 HTML5: <footer></footer>
HTML4: <div></div> <hgroup> 標簽用於對網頁或區段（section）的標題進行組合。 HTML5: <hgroup></hgroup>
HTML4: <div></div> <nav> 標簽定義導航鏈接的部分 HTML5: <nav></nav>
HTML4:<ul></ul> <canvas> 標簽定義圖形，比如圖表和其他圖像。這個 HTML 元素是為了客戶端矢量圖形而設計的。它自己沒有行為，但卻把一個繪圖 API 展現給客戶端 JavaScript 以使腳本能夠把想繪制的東西都繪制到一塊畫布上。 HTML5:<canvas id="myCanvas" width="200" height="200"></canvas>
HTML4:<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object> <video> 標簽定義視頻，比如電影片段或其他視頻流。 HTML5: <video src="movie.ogg" controls="controls">您的浏覽器不支持 video 標簽。</video>
HTML4:<object type="video/ogg" data="movie.ogv"><param name="src" value="movie.ogv"></object> <audio> 標簽定義聲音，比如音樂或其他音頻流。 HTML5:<audio src="someaudio.wav">您的浏覽器不支持 audio 標簽。</audio>
HTML4:<object type="application/ogg" data="someaudio.wav"><param name="src" value="someaudio.wav"></object> <embed> 標簽定義嵌入的內容，比如插件。 HTML5: <embed src="horse.wav" />
HTML4: <object data="flash.swf"  type="application/x-shockwave-flash"></object> <source> 標簽為媒介元素（比如 <video> 和 <audio>）定義媒介資源。 HTML5: <source>
HTML4: <param> <datalist> 標簽定義可選數據的列表。與 input 元素配合使用，就可以制作出輸入值的下拉列表。 HTML5: <datalist></datalist>
HTML4: none <details> 標簽定義元素的細節，用戶可進行查看，或通過點擊進行隱藏。與 <legend> 一起使用，來制作 detail 的標題。該標題對用戶是可見的，當在其上點擊時可打開或關閉 detail。 HTML5: <details></details>
HTML4: <dl style="display:hidden"></dl> <summary> 標簽包含 details 元素的標題，”details” 元素用於描述有關文檔或文檔片段的詳細信息。”summary” 元素應該是 “details” 元素的第一個子元素。 HTML5: <details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5.</details>
HTML4: none <figure> 標簽用於對元素進行組合。使用 <figcaption> 元素為元素組添加標題。 HTML5: <figure><figcaption>PRC</figcaption><p>The People's Republic of China was born in 1949...</p></figure>
HTML4: <dl><H3>PRC</H3><p>The People's Republic of China was born in 1949...</p></dl> <figcaption> 標簽定義 figure 元素的標題。”figcaption” 元素應該被置於 “figure” 元素的第一個或最後一個子元素的位置。 HTML5: <figure><figcaption>PRC</figcaption></figure>
HTML4: none <mark> 主要用來在視覺上向用戶呈現那些需要突出的文字。<mark>標簽的一個比較典型的應用就是在搜索結果中向用戶高亮顯示搜索關鍵詞。 HTML5: <mark></mark>
HTML4: <span></span <meter> 標簽定義度量衡。僅用於已知最大和最小值的度量。必須定義度量的范圍，既可以在元素的文本中，也可以在 min/max 屬性中定義。 HTML5: <meter></meter>
HTML4: none <output> 標簽定義不同類型的輸出，比如腳本的輸出。 HTML5: <output></output>
HTML4: <span></span> <progress> 標簽運行中的進程。可以使用 <progress> 標簽來顯示 JavaScript 中耗費時間的函數的進程。 HTML5: <progress></progress>
HTML4: none <time> 標簽定義日期或時間，或者兩者。 HTML5: <time></time>
HTML4: <span></span> <keygen> 標簽用於對網頁或區段（section）的標題進行組合 HTML5: <keygen>
HTML4: none <command> 標簽定義命令按鈕，比如單選按鈕、復選框或按鈕。 HTML5: <command onclick=cut()" label="cut">
HTML4: none