現在市面上到處都是各種指南教程，為了顯示這一系列文章的不同，我特意起名為指北系列，不同在哪裡?我會按一個對HTML一點概念的人的腦子來教你一步一步的學，保證你看完後有收獲。
適合閱讀的人群：沒有多少閒錢送給培訓機構那幫子SB教員，如果你真的想要去培訓機構去學習，請先去打聽一下那裡的老師的工資是多少，如果沒有超過六七千塊，那就不要去了，你不要想了，你就算跟他學到死你的工資也不會超過六七千塊的。
學習之前，請記住偉大的哲學家兼武術家李小龍的一句話：清空你的杯子，方能在行注滿。空無以求全。
推薦參考書：1，O'reilly.HeadFirst.Html.With.Css.And.Xhtml
2，W3C shcool
3，CSS禅意花園
4，HTML 文檔 CSS文檔
我覺得如果想入門的話，上面三本書就夠了，買其它的書真浪費錢，還不如好好的看看HTML DOCUMENT ,and CSS document.
第1集 了解HTML and CSS
目標：通過本課，你要做到：知道HTML是做什麼的，CSS的作用。
OK，開始上課了，借用軟件工程學裡的觀察者模式，我假定任何看此文章的必須是往WEB方面發展，如果不是向往這方面發展看這文章我想腦子肯定進水了。OK，那首先大至的了解下WEB這個概念。
WEB百度的解釋如下：網頁是構成網站的基本元素，是承載各種網站應用的平台。通俗的說，您的網站就是由網頁組成的。
還要了解一下浏覽器的概念：
浏覽器：萬維網(Web)服務的客戶端浏覽程序。可向萬維網(Web)服務器發送各種請求，並對從服務器發來的超文本信息和各種多媒體數據格式進行解釋、顯示和播放。
可以這樣理解：WEB主要 由客戶端和服務器端組成，客戶端是接收信息的終端，類似於我們發短信的時候，客戶端就是收信人，服務器端是發信人。當然抽象化的省略了防火牆，DNS之類的東西，因為這些東西你不需要了解。
所以，你有時候也聽一些書呆子說web的架構是B/S架構，如果你懂一點點英語，也就知道是(brower,and server)的簡稱，沒什麼意思。
當然，上面的東西全是廢話，你看不懂不需要看，學習HTML 和CSS，其實要了解的東西很少很少。
閉上眼睛，想一想，比如你今天想上網看美女圖片，你會干什麼?OK,肯定要打開一個浏覽器吧，不管是IE還是FIREFOX,所以，你肯定會自然而然的知道，我們必須借助於浏覽器才能看到網站上的網頁，用專業一點的話可以說，浏覽器是負責把HTML CSS JS等傳到客戶的端的語言按照內置的一整套規則解析成我們人能看得懂的內容的一個工具。
只要你大至懂了浏覽器的解析規則，等於說你基本讀得懂HTML和CSS 代碼了，好，現在我們來看看浏覽器是如何解析的。先從一個經典的HELLOWORLD例子開始第一課。
推薦使用的編輯器:notepad++,editplus,dreamware(新手不推薦使用，這些IDE集成工具會毀了你的，讓你一輩子也不會寫出一行完整的代碼),
<html>
<head>
<title>the first example</title>
</head>
<body>
<!----這裡寫注釋-------->
<helloword
</body>
</html>
ok,保存一下上面的例子成一個.html,或者.htm文件，用浏覽器浏覽一下。
通過上面的例子你會了解以下知識：
1，標簽一般是成對出現的，有沒有不是成對出現的標簽?當然有,比如<input type="image" />但單標簽一般的在最後面要加一個斜線，意思是我已經關閉了。
2，HTML由二部分組成，<head><body>他們被最外面的<html>包著，HTML的世界裡，有一些內容(永遠要記住，HTML只負責WEB的內容方面的東西)，基本上只要是內容方面的東西，他要麼是屬於head,要麼是屬於body,如果你以後看到有的東西既可以放到 head裡，又可以放在body裡，我可以百分百的跟你說，那些代碼不是負責內容方面的東西的，他們要麼負責樣式方面，要麼負責一些動態東西，除此之外沒有其它的東西了。
因為，在客戶端裡面，大至分為三種東西:
HTML:負責內容
CSS:負責樣式
javascript:負責動態東西
舉一個例子你一下子就明白了：
大富翁的虛擬社區最近興起了房地產，： 阿士伯想蓋一個和錢夫人一樣的大大的house(百度一下你就知道，house在西方專指別墅),他想蓋一個五室三廳四衛的House，要有一個大的花園，一個停車庫，在他的房間裡面他將會買一些家電一些家具，請一些傭人。
這裡面，虛擬社區裡把停車庫，花園，臥式當成了一個一個獨立的東西(這些在WEB裡面就被稱為HTML元不經意)。所以，阿士伯花了一些金幣買了這些道具，但買了之後，在自己的空空的空間裡怎麼放，這裡肯定有一套規則 吧：有可能這套規則這樣寫：
1，南邊是二個主臥式
2，車庫最後和地下室在一起
3，各個道具的大小如何設置
4，各個道具的間距如何設置
(這些就被稱為CSS樣式)
然後阿士伯購買的家電和傭人肯定也根據自己心中的要求來選擇吧，可能是這樣的：
1，家電必須要有X-max的效果
2，最好是一整套的智能家居解決方案
3，那個傭人不但要會做魚香肉絲，也必須要會煮方便面。
本文來源：我愛IT技術網(http://wwww.52ij.com/it/）轉載請標明出處，謝謝!