@不到布 ：謹以此文獻給那些被代碼折磨的設計師們，和那些與前端無(wú)法交流的設計師們。本文將從0出發(fā)，并把內容和難度限定于設計師需要并可以理解的范疇內，我并不打算寫(xiě)一本前端教材（因為不夠格），所以請各位盡可能輕松閱讀。
之前一直說(shuō)要開(kāi)坑，但是手忙腳亂的腦內擬了一段暴長(cháng)的Opening全被我扣押在腦海里了。精減下來(lái)只有一句話(huà)謹以此文獻給那些被代碼折磨的設計師們，和那些與前端無(wú)法交流的設計師們。本文將從0出發(fā)，并把內容和難度限定于設計師需要并可以理解的范疇內，我并不打算寫(xiě)一本前端教材（因為不夠格），所以請各位盡可能輕松閱讀。
在很久很久以前，是沒(méi)有網(wǎng)頁(yè)設計師的存在的，當HTML橫空出世為互聯(lián)網(wǎng)注入最基本的生命之時(shí)，沒(méi)有人在意頁(yè)面是否好看。而隨著(zhù)時(shí)間的發(fā)展，大眾審美需求的提升，網(wǎng)頁(yè)也需要有更多的變化而不僅僅是文字的展示，于是開(kāi)始出現了網(wǎng)頁(yè)設計師這樣的職業(yè)，而與之相對的就是CSS的誕生。
在最早的網(wǎng)頁(yè)中，一切的一切都是混在一起的（就像盤(pán)古開(kāi)天辟地之前的宇宙），雖說(shuō)是一切，其核心只有兩個(gè)——內容與樣式。這樣的大亂燉給工程師和網(wǎng)頁(yè)設計師都造成了很大的困擾——如果你曾經(jīng)試圖打開(kāi)過(guò)某個(gè)網(wǎng)站的源代碼你就會(huì )知道，那里面亂成什么德行，而那個(gè)時(shí)期的源代碼是你能看到的混亂程度再乘個(gè)5位數……好吧這只是個(gè)比喻，總之因為雙方都受不了混亂的代碼，于是有人提出建議，把樣式從內容中踢出去，被踢出來(lái)的部分變成了CSS，留下的便是HTML。BTW，隨之應運而生的就是前端工程師（當然其實(shí)誕生途中還有flash啊js啊php啊各種亂七八糟的東西飛來(lái)飛去，你都不必知道）。
從這里我們大概可以知道，HTML是面對電腦、工程師這些理性邏輯頭腦的，而CSS是那些理性邏輯的家伙為設計者準備的一個(gè)“工具”，是幫助HTML面對人的工具，也是讓一堆文字變成與設計稿一樣的唯一工具。
前面說(shuō)到網(wǎng)頁(yè)的核心是內容與樣式，HTML就是其前者——內容。脫離了內容的樣式是沒(méi)有意義的，也就是說(shuō)離開(kāi)HTML光談CSS是沒(méi)有意義的。HTML語(yǔ)言其實(shí)很好辨認，由兩個(gè)尖括號：<和>包起來(lái)的就被稱(chēng)為標簽（tag），如果你看到某個(gè)文檔里時(shí)不時(shí)出現標簽，那這份文檔十有八九都是由HTML語(yǔ)言（或者它的親戚XML）寫(xiě)成的。
而由一對標簽（比如<p>和</p>）包起來(lái)的所有文字內容，便被稱(chēng)為元素（element）。元素開(kāi)頭的標簽就被稱(chēng)為開(kāi)始標簽，而末尾的標簽則被稱(chēng)為結束標簽。開(kāi)始標簽和結束標簽之間可以沒(méi)有任何文字（比如<i></i>）
有一種特殊的自閉合標簽，比如水平線(xiàn)<hr />或者圖片<img />，它們的斜杠位于尖括號里面，這樣的標簽本身就是一個(gè)元素。
元素都有它的名字，名字就是開(kāi)始標簽的那個(gè)尖括號后面的第一個(gè)單詞，這個(gè)名字是給電腦看的，但它很重要！因為：
某些元素只能位在特定的元素內。
某些元素只能位在特定的位置上。
同時(shí)在前端工程師中有一個(gè)很重要的課題便是語(yǔ)義化（Semantic HTML）。這涉及到很多問(wèn)題，比如做好的網(wǎng)頁(yè)能不能被搜索引擎（比如百度、Google）收錄，被收錄的部分是不是我們希望他收錄的部分。不過(guò)作為設計師，語(yǔ)義化是寫(xiě)代碼很久以后需要考慮的課題（甚至永遠不會(huì )遇到），但我仍然希望你們知道有這樣一個(gè)東西（之后我也會(huì )經(jīng)常提到）。
元素之間可以嵌套，但是不能交叉閉合，比如：
后出現的標簽要先閉合成為一個(gè)元素，像下面這樣寫(xiě)就絕對不行：
關(guān)于HTML，我要說(shuō)的最后一個(gè)東西就是屬性（attribute）。屬性會(huì )出現在元素的開(kāi)始標簽里，通過(guò)空格區分不同的屬性，而寫(xiě)法是屬性名="屬性值"。對于使用css的設計師來(lái)說(shuō)，class屬性就是最重要也是最經(jīng)常使用的屬性之一。
現在你可能有點(diǎn)暈頭轉向，但是后面我會(huì )不斷提到標簽、元素、屬性，如果不記得就回來(lái)看一下就好了。
這就是網(wǎng)頁(yè)的第二個(gè)核心——樣式。理論上講它可以規定網(wǎng)頁(yè)的一切表現，位置、顏色、大小、距離…設計稿上的所有效果都可以借助它一一呈現，但是在實(shí)際應用中配合功能和性能以及各方面的要求，導致設計師的構想并不一定能夠完整表達。
HTML代碼可以寫(xiě)在很多文件中，而css代碼只能出現在兩個(gè)地方：css文件或者html文件中。而css的基本呈現形式是這樣的：
選擇器（selector）是用來(lái)告訴瀏覽器，樣式需要應用到哪個(gè)元素上，它的功能非常強大——可以直接按元素名稱(chēng)選擇，也可以按元素的id屬性值選擇，還可以按元素的class屬性值來(lái)選擇，甚至可以選擇某個(gè)元素的兄弟、兒子、孫子，還能選擇元素的狀態(tài)。
在HTML及CSS中都經(jīng)常提到的一個(gè)詞，class，通常也被稱(chēng)作類(lèi)。一個(gè)元素是可以擁有多個(gè)類(lèi)的（但不能擁有多個(gè)id，整個(gè)HTML文件中的所有元素的id屬性值都應該是唯一的），類(lèi)名與類(lèi)名之間使用空格隔開(kāi)，而類(lèi)名不能使用中文。通過(guò)類(lèi)選擇器選擇元素，是CSS中最常見(jiàn)的選擇方式。
CSS的屬性（property）和前面說(shuō)過(guò)的元素的屬性（attribute）是完全不同的，有興趣的話(huà)可以讀一下這篇文章，之后我會(huì )盡量區分說(shuō)明，請各位盡量避免混淆。每一條CSS屬性-值（property-value）都構成一個(gè)聲明，每一句聲明之后都需要一個(gè)半角分號;來(lái)作為結束（就像我們寫(xiě)作時(shí)所用的句號）。
至于大括號（{和}），這是css的語(yǔ)法標記，就像HTML中的尖括號，時(shí)刻不要忘，否則易出錯。
HTML 與 CSS 結合在一起，設計稿就這樣從一張圖片變成了我們在瀏覽器中瀏覽的靜態(tài)網(wǎng)頁(yè)，當然這也就是以前可能會(huì )經(jīng)常聽(tīng)到的 DIV + CSS 。這樣話(huà)說(shuō)起來(lái)很輕巧，但是無(wú)論是 HTML 還是 CSS 都是需要一個(gè)字一個(gè)字打出來(lái)的…而更多的問(wèn)題，就在 HTML 與 CSS 的結合過(guò)程中產(chǎn)生了。欲知后事如何，且聽(tīng)…
…慢著(zhù)，我們還是先把它們結合起來(lái)，有問(wèn)題下次再說(shuō)…
以上是一個(gè)最基本的帶有CSS鏈接的HTML頁(yè)面的代碼：
html元素是所有網(wǎng)頁(yè)都必須要具備的，網(wǎng)頁(yè)中的一切內容必須寫(xiě)在html元素內；
head元素是給瀏覽器和搜索引擎準備的，大部分并不會(huì )顯示在頁(yè)面上；
title元素中的內容會(huì )顯示在瀏覽器標題欄的位置上；
link元素的href屬性則指示了這個(gè)頁(yè)面所使用的css文件的；
還有可能會(huì )出現script元素，它將會(huì )指示這個(gè)頁(yè)面所使用的js文件；
body元素是放置網(wǎng)頁(yè)內容的地方（你以后所寫(xiě)的99.9%的HTML代碼都會(huì )位于這個(gè)元素內）。
標簽之前的空格被稱(chēng)作“縮進(jìn)”，良好的縮進(jìn)習慣可以幫助寫(xiě)出易讀的代碼，在任何一個(gè)項目或者頁(yè)面中，都應該正確使用縮進(jìn)。上面所展示的代碼就是一個(gè)基本的縮進(jìn)示范，每個(gè)子元素都比其父元素縮進(jìn)一個(gè)單位。
一般的縮進(jìn)只要按下鍵盤(pán)左邊的Tab鍵就好，但是在程序員中廣泛存在一種究竟是一個(gè)Tab好還是兩個(gè)空格好的爭議（如同咸甜豆腐腦般的存在）。當然在書(shū)寫(xiě)過(guò)程中，沒(méi)有人會(huì )去按兩下空格，他們通常是把Tab的輸入改為兩個(gè)空格而已（所以你只要記得，縮進(jìn)一個(gè)單位按一下Tab就好）
關(guān)于書(shū)寫(xiě)代碼工具，如果你實(shí)在沒(méi)得選，可以使用Dreamweaver(請使用代碼模式或者各半模式)，否則當然首推Sublime Text，綠色便攜的Notepad++也是不錯的選擇。
從零開(kāi)始學(xué)系列！
聯(lián)系客服
