如何學習DIV+CSS(Web標準)製作網頁

本文和大家重點討論一下如何學習DIV+CSS製作網頁，如何學習Web標準製作網頁呢?我想每一個剛剛接觸web標準的人都會問這樣的問題，我就根據自己的經驗總結。

如何學習DIV+CSS製作網頁

我接觸的很多人都問，如何學習Web標準製作網頁呢?我想每一個剛剛接觸web標準的人都會問這樣的問題，我就根據自己的經驗總結。

1.不要一味使用DW等工具設計網頁，去熟悉(X)HTML語言和CSS語言

因為web標準對代碼的要求提高了，沒有對xhtml代碼沒有一定的瞭解是無法通過校檢的。 DW工具也可以使用，但是要看著代碼寫網頁了。

首先是xhtml代碼，不是很多，知道他們如何使用，怎麼正確書寫，而且要記得封閉tag。 如<img><br>。 建議看看一些html參考手冊，畢竟xhtml是從html升級來的，很多tag還在在繼續使用。

2.建立標準化的聲明(DOCTYPE)和head

以前的網頁，甚至大型的入口網站也連個聲明也沒有，就僅僅是，現在要做的就是給你的網頁加上聲明，規範head區域，讓搜尋引擎和喜歡你的網站。

推薦寫法:

&lt;!--(1)過渡型（Transitional）--&gt;&nbsp; &nbsp;&lt;! DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""HTTP://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "&gt;&nbsp; &nbsp;&lt;!--(2)嚴格型（Strict）--&gt;&nbsp; &nbsp;&lt;! DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""HTTP://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;&nbsp; &nbsp;&lt;!--(3)框架型（Frameset）--&gt;&nbsp; &nbsp;&lt;! DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Frameset//EN""HTTP://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"&gt; &nbsp; &nbsp;&lt;!--設定一個名字空間（Namespace）lang="zh-CN"/--&gt;&nbsp; &nbsp;&lt;htmlxmlnshtmlxmlnshtmlxmlnshtmlxmlns= "HTTP://www.w3.org/1999/xhtml"lang="zh-CN"&gt;&nbsp; &nbsp;&lt;head&gt;&nbsp; &nbsp;&lt;!--聲明你的編碼語言:GB2312/UTF-8 /Unicode/ISO-8859-1--&gt;&nbsp; &nbsp;&lt;metaHTTP-equivmetaHTTP-equivmetaHTTP-equivmetaHTTP-equiv=" Content-Type"content="text/html;charset=GB2312"/&gt;&nbsp; &nbsp;&lt; metaHTTP-equivmetaHTTP-equivmetaHTTP-equivmetaHTTP-equiv="Content-Language"content="zh-CN"/&gt;&nbsp; &nbsp; &lt;!--為搜尋引擎準備的內容--&gt;&nbsp; &nbsp;&lt;!--允許搜索機器人搜索站內所有連結。 如果你想某些頁面不被搜索，推薦採用robots.txt方法--&gt;&nbsp; &nbsp;&lt;metacontentmetacontentmetacontentmetacontent="all"name=" robots"/&gt;&nbsp; &nbsp;&lt;!--佈建網站作者資訊--&gt;&nbsp; &nbsp;&lt;metanamemetanamemetanamemetaname="author"content= admin@lvtao.net,memory/&gt;&nbsp; &nbsp;&lt;!--佈建網站版權資訊--&gt;&nbsp; &nbsp;&lt;metanamemetanamemetanamemetaname=" Copyright"content="www.php100.com,版權所有"/&gt;&nbsp; &nbsp;&lt;!--網站的簡要介紹(推薦)--&gt;&nbsp; &nbsp;&lt; metanamemetanamemetanamemetaname="description"content="php100技術分享社區，中國最大的php資源分享門戶"/&gt;&nbsp; &nbsp;&lt;!-- 網站的關鍵字(推薦)--&gt;&nbsp; &nbsp;&lt;metacontentmetacontentmetacontentmetacontent="php,資源,視頻教程"name="keywords"/&gt; &nbsp; &nbsp;&lt;!--我的最愛小圖示--&gt;&nbsp; &nbsp;&lt;linkrellinkrellinkrellinkrel="icon"href="/favicon.ico"type=" image/x-icon"/&gt;&nbsp; &nbsp;&lt;linkrellinkrellinkrellinkrel="shortcuticon"href="/favicon.ico"type="image/ x-icon"/&gt;&nbsp; &nbsp;&lt;title&gt;網頁標題&lt;/title&gt;&nbsp; &nbsp;&lt;!--連接樣式表--&gt;&nbsp; &nbsp;&lt;linkrellinkrellinkrellinkrel="stylesheet"rev="stylesheet"href="css/style.css"type=" text/css"media="all"/&gt;&nbsp; &nbsp;&lt;styletypestyletypestyletypestyletype="text/css"media="all"&gt;@ importurl(css/style01.css);&lt;/style&gt;&nbsp; &nbsp;&lt;!--RSS--&gt;&nbsp; &nbsp;&lt; linkrellinkrellinkrellinkrel="alternate"type="application/rss+xml"title="memory"href="HTTP://www.lvtao.net/inc /rsd.php"/&gt;&nbsp; &nbsp;&lt;!--JS--&gt;&nbsp; &nbsp;&lt;scriptsrcscriptsrcscriptsrcscriptsrc="js.js"type=" text/javascript"language="javascript""&gt;&lt;/script&gt;&nbsp; &nbsp;&lt;/head&gt;&nbsp; &nbsp;&lt;body&gt;&lt; /body&gt;&nbsp; &nbsp;&lt;/html&gt;&nbsp;&nbsp;

3.學習div配合CSS進行網頁佈局

使用

配合CSS為你的網頁佈局，而不要使用table了，這樣的文章很多，實例也很多，推薦你去bluediea.com，div佈局的好處很多，就提級幾個實用的：

1.代碼冗余小，網頁打開速度快。

2.結構和表現分離了，你可以只通過css改變你的佈局，而資訊不變，這樣維護和升級的成本降低了。

4.學習web標準理論，語義化，CSS，結構和表現分離思想

web標準的提出其實只是為了達到，tag的語義化，結構和表現分離，網站本土化向國際化過度，向後相容和設備無關性，讓你的網頁在互聯網上暢行無阻。

這個階段，你已經能夠使用css佈局你的網頁，製作出能通過W3C校檢的網頁，你可以瞭解什麼是web標準，web標準的框架和作用，結構和表現分離的思想和優勢，CSS的更深層次的理論，xhtmltag的語義，親和力理論， 跨平臺性，讓你的網頁適合多種瀏覽器和多種設備。

5.應用web標準製作網頁，建立自己的web標準代碼規範，提高開發效率

web標準現在還是在推廣之中，沒有一個成熟的模式，畢竟需要手寫代碼，你這時就可以根據自己的經驗提出一些提高自己開發效率的方法，可以把一些常用的代碼片段，習慣的css命名， 和一些能夠重複使用的功能模組作成代碼剪輯提高代碼的複用性!