編者按：@不到布?：謹(jǐn)以此文獻(xiàn)給那些被代碼折磨的設(shè)計(jì)師們，和那些與前端無法交流的設(shè)計(jì)師們。本文將從0出發(fā)，并把內(nèi)容和難度限定于設(shè)計(jì)師需要并可以理解的范疇內(nèi)，我并不打算寫一本前端教材（因?yàn)椴粔蚋瘢?，所以請各位盡可能輕松閱讀。

之前一直說要開坑，但是手忙腳亂的腦內(nèi)擬了一段暴長的Opening全被我扣押在腦海里了。精減下來只有一句話謹(jǐn)以此文獻(xiàn)給那些被代碼折磨的設(shè)計(jì)師們，和那些與前端無法交流的設(shè)計(jì)師們。本文將從0出發(fā)，并把內(nèi)容和難度限定于設(shè)計(jì)師需要并可以理解的范疇內(nèi)，我并不打算寫一本前端教材（因?yàn)椴粔蚋瘢?，所以請各位盡可能輕松閱讀。

設(shè)計(jì)稿與代碼之間的關(guān)系

在很久很久以前，是沒有網(wǎng)頁設(shè)計(jì)師的存在的，當(dāng)HTML橫空出世為互聯(lián)網(wǎng)注入最基本的生命之時(shí)，沒有人在意頁面是否好看。而隨著時(shí)間的發(fā)展，大眾審美需求的提升，網(wǎng)頁也需要有更多的變化而不僅僅是文字的展示，于是開始出現(xiàn)了網(wǎng)頁設(shè)計(jì)師這樣的職業(yè)，而與之相對的就是CSS的誕生。

在最早的網(wǎng)頁中，一切的一切都是混在一起的（就像盤古開天辟地之前的宇宙），雖說是一切，其核心只有兩個(gè)——內(nèi)容與樣式。這樣的大亂燉給工程師和網(wǎng)頁設(shè)計(jì)師都造成了很大的困擾——如果你曾經(jīng)試圖打開過某個(gè)網(wǎng)站的源代碼你就會知道，那里面亂成什么德行，而那個(gè)時(shí)期的源代碼是你能看到的混亂程度再乘個(gè)5位數(shù)……好吧這只是個(gè)比喻，總之因?yàn)殡p方都受不了混亂的代碼，于是有人提出建議，把樣式從內(nèi)容中踢出去，被踢出來的部分變成了CSS，留下的便是HTML。BTW，隨之應(yīng)運(yùn)而生的就是前端工程師（當(dāng)然其實(shí)誕生途中還有flash啊js啊php啊各種亂七八糟的東西飛來飛去，你都不必知道）。

從這里我們大概可以知道，HTML是面對電腦、工程師這些理性邏輯頭腦的，而CSS是那些理性邏輯的家伙為設(shè)計(jì)者準(zhǔn)備的一個(gè)“工具”，是幫助HTML面對人的工具，也是讓一堆文字變成與設(shè)計(jì)稿一樣的唯一工具。

HTML

前面說到網(wǎng)頁的核心是內(nèi)容與樣式，HTML就是其前者——內(nèi)容。脫離了內(nèi)容的樣式是沒有意義的，也就是說離開HTML光談CSS是沒有意義的。HTML語言其實(shí)很好辨認(rèn)，由兩個(gè)尖括號：<和>包起來的就被稱為標(biāo)簽（tag），如果你看到某個(gè)文檔里時(shí)不時(shí)出現(xiàn)標(biāo)簽，那這份文檔十有八九都是由HTML語言（或者它的親戚XML）寫成的。

而由一對標(biāo)簽（比如<p>和</p>）包起來的所有文字內(nèi)容，便被稱為元素（element）。元素開頭的標(biāo)簽就被稱為開始標(biāo)簽，而末尾的標(biāo)簽則被稱為結(jié)束標(biāo)簽。開始標(biāo)簽和結(jié)束標(biāo)簽之間可以沒有任何文字（比如<i></i>）

• 有一種特殊的自閉合標(biāo)簽，比如水平線<hr />或者圖片<img />，它們的斜杠位于尖括號里面，這樣的標(biāo)簽本身就是一個(gè)元素。

元素都有它的名字，名字就是開始標(biāo)簽的那個(gè)尖括號后面的第一個(gè)單詞，這個(gè)名字是給電腦看的，但它很重要！因?yàn)椋?/p>

• 某些元素只能位在特定的元素內(nèi)。
• 某些元素只能位在特定的位置上。

同時(shí)在前端工程師中有一個(gè)很重要的課題便是語義化（Semantic HTML）。這涉及到很多問題，比如做好的網(wǎng)頁能不能被搜索引擎（比如百度、Google）收錄，被收錄的部分是不是我們希望他收錄的部分。不過作為設(shè)計(jì)師，語義化是寫代碼很久以后需要考慮的課題（甚至永遠(yuǎn)不會遇到），但我仍然希望你們知道有這樣一個(gè)東西（之后我也會經(jīng)常提到）。

元素之間可以嵌套，但是不能交叉閉合，比如：

后出現(xiàn)的標(biāo)簽要先閉合成為一個(gè)元素，像下面這樣寫就絕對不行：

關(guān)于HTML，我要說的最后一個(gè)東西就是屬性（attribute）。屬性會出現(xiàn)在元素的開始標(biāo)簽里，通過空格區(qū)分不同的屬性，而寫法是屬性名="屬性值"。對于使用css的設(shè)計(jì)師來說，class屬性就是最重要也是最經(jīng)常使用的屬性之一。

現(xiàn)在你可能有點(diǎn)暈頭轉(zhuǎn)向，但是后面我會不斷提到標(biāo)簽、元素、屬性，如果不記得就回來看一下就好了。

CSS

這就是網(wǎng)頁的第二個(gè)核心——樣式。理論上講它可以規(guī)定網(wǎng)頁的一切表現(xiàn)，位置、顏色、大小、距離…設(shè)計(jì)稿上的所有效果都可以借助它一一呈現(xiàn)，但是在實(shí)際應(yīng)用中配合功能和性能以及各方面的要求，導(dǎo)致設(shè)計(jì)師的構(gòu)想并不一定能夠完整表達(dá)。

HTML代碼可以寫在很多文件中，而css代碼只能出現(xiàn)在兩個(gè)地方：css文件或者h(yuǎn)tml文件中。而css的基本呈現(xiàn)形式是這樣的：

選擇器（selector）是用來告訴瀏覽器，樣式需要應(yīng)用到哪個(gè)元素上，它的功能非常強(qiáng)大——可以直接按元素名稱選擇，也可以按元素的id屬性值選擇，還可以按元素的class屬性值來選擇，甚至可以選擇某個(gè)元素的兄弟、兒子、孫子，還能選擇元素的狀態(tài)。

在HTML及CSS中都經(jīng)常提到的一個(gè)詞，class，通常也被稱作類。一個(gè)元素是可以擁有多個(gè)類的（但不能擁有多個(gè)id，整個(gè)HTML文件中的所有元素的id屬性值都應(yīng)該是唯一的），類名與類名之間使用空格隔開，而類名不能使用中文。通過類選擇器選擇元素，是CSS中最常見的選擇方式。

CSS的屬性（property）和前面說過的元素的屬性（attribute）是完全不同的，有興趣的話可以讀一下這篇文章，之后我會盡量區(qū)分說明，請各位盡量避免混淆。每一條CSS屬性-值（property-value）都構(gòu)成一個(gè)聲明，每一句聲明之后都需要一個(gè)半角分號;來作為結(jié)束（就像我們寫作時(shí)所用的句號）。

至于大括號（{和}），這是css的語法標(biāo)記，就像HTML中的尖括號，時(shí)刻不要忘，否則易出錯(cuò)。

HTML + CSS

HTML 與 CSS 結(jié)合在一起，設(shè)計(jì)稿就這樣從一張圖片變成了我們在瀏覽器中瀏覽的靜態(tài)網(wǎng)頁，當(dāng)然這也就是以前可能會經(jīng)常聽到的 DIV + CSS 。這樣話說起來很輕巧，但是無論是 HTML 還是 CSS 都是需要一個(gè)字一個(gè)字打出來的…而更多的問題，就在 HTML 與 CSS 的結(jié)合過程中產(chǎn)生了。欲知后事如何，且聽…

…慢著，我們還是先把它們結(jié)合起來，有問題下次再說…

以上是一個(gè)最基本的帶有CSS鏈接的HTML頁面的代碼：

html元素是所有網(wǎng)頁都必須要具備的，網(wǎng)頁中的一切內(nèi)容必須寫在html元素內(nèi)；

head元素是給瀏覽器和搜索引擎準(zhǔn)備的，大部分并不會顯示在頁面上；

• title元素中的內(nèi)容會顯示在瀏覽器標(biāo)題欄的位置上；
• link元素的href屬性則指示了這個(gè)頁面所使用的css文件的；
• 還有可能會出現(xiàn)script元素，它將會指示這個(gè)頁面所使用的js文件；

body元素是放置網(wǎng)頁內(nèi)容的地方（你以后所寫的99.9%的HTML代碼都會位于這個(gè)元素內(nèi)）。

標(biāo)簽之前的空格被稱作“縮進(jìn)”，良好的縮進(jìn)習(xí)慣可以幫助寫出易讀的代碼，在任何一個(gè)項(xiàng)目或者頁面中，都應(yīng)該正確使用縮進(jìn)。上面所展示的代碼就是一個(gè)基本的縮進(jìn)示范，每個(gè)子元素都比其父元素縮進(jìn)一個(gè)單位。

• 一般的縮進(jìn)只要按下鍵盤左邊的Tab鍵就好，但是在程序員中廣泛存在一種究竟是一個(gè)Tab好還是兩個(gè)空格好的爭議（如同咸甜豆腐腦般的存在）。當(dāng)然在書寫過程中，沒有人會去按兩下空格，他們通常是把Tab的輸入改為兩個(gè)空格而已（所以你只要記得，縮進(jìn)一個(gè)單位按一下Tab就好）

關(guān)于書寫代碼工具，如果你實(shí)在沒得選，可以使用Dreamweaver(請使用代碼模式或者各半模式)，否則當(dāng)然首推Sublime Text，綠色便攜的Notepad++也是不錯(cuò)的選擇。

從零開始學(xué)系列！

色彩知識大科普！再也不做“色盲”啦！
《設(shè)計(jì)師配色寶典！教你從零開始學(xué)配色（一）》

幫你全面搞定摳圖的那些事兒！
《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》

閱讀量過10萬的超人氣自學(xué)指南！
《超贊！設(shè)計(jì)師完全自學(xué)指南》

原文地址：hikarievo.me
作者：@不到布

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量83萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計(jì) 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：