html標記優化網頁布局的方法

我們一直在講CSS網頁布局代碼的優化，在以往的文章中，也一直強調語義和文檔的結構。隨著國外對WEB標准的推廣，有些新手認為，web2.0就是把以前的table布局都改為DIV+CSS布局就是web2.0。其實不然， 我們要合理利用這些標簽。 有一點值得引起注意，那就是在 web 開發人員圈子裡通常被稱為“div-itis”的對 div 元素的濫用現象。下面我們給大家介紹一下html標記優化網頁布局吧!

通過大量的嵌套 div 或 span 元素來添加樣式確實很方便，但還是應盡量避免這種誘惑。在多數情況下，為文檔內現有元素附加樣式或 JavaScript 功能是可以做到不必引入 div 或 span 元素的。作為通用容器的 div 或 span 元素應作為最後的手段使用——也就是說，最好是先盡量以語義化元素來編寫網頁，僅在確實需要時才加入通用容器元素。

所以我們要：優化 優化 再優化 精簡和優化CSS網頁布局代碼

我要多用一些語義性標簽，但是也要對號入座，標簽語義要用對。

HTML元素的語義類別

結構

這些元素的語義定義了他們在文檔中扮演著的結構的角色

div

span

ol,ul,li,dl,dt,dd

del,ins

h1..h6

p

內容

這些元素的語義定義了在文檔中表示內容標記的語義

a

abbr

acronym

address

blockquote

cite

code

dfn

kbd

q

samp

var

修飾形容

這些元素起到對內容的修飾和形容

strong

em

" Once you've completed your markup, go over it two more times and find ways to reduce the number of elements on the page. Does that UL really need its own wrapping div? I think not. "

以上就是我們給大家介紹的html標記優化網頁布局了。希望大家繼續關注我們的網站!