Sunny蕭蕭：本文作為小白入門級，相對基礎，是寫給現在想了解一點前端知識的設計師同行們。文章把前端相關的術語都用設計師熟悉的東西解釋一遍（比如<body>比喻成畫布），通俗易懂幽默風趣，絕對是小白入門的好教程！
背景交代（此處省略2000個字……）
前言還是要一點的：很多人一聽前端兩個字，就以為是寫網頁的，其實前端包括很多，不僅僅是標簽加樣式那些東西。如果按10級來評的話，不知道你們想象的那些東西有沒有占兩成，
今天把以前的一些東西整理出來，給需要的人。作為web轉行做設計師的人，我會盡量用設計師能理解的角度來講，如有不足及錯誤請指正但勿噴。
一、使用工具
工具的話，DW我想大家是最熟悉的吧，對設計師來說光看圖標就覺得親切有木有？
對專職做前端的來說DW可能并不是首選，因為會覺得性能不好，比如代碼提示不夠，工作起來效率不太高。以DW為例，這個主要是……本人電腦里剛好只裝了它。代碼提示太多并不是件好事，單詞量本來就少，如果養成了只記前兩個字母然后等待代碼提示的習慣。大概就好比沒有自動鉛筆的時候，你連普通鉛筆都不會削，多尷尬啊。
二、初識html
html并不是一種編程語言，而是一種標記語言，它只是把內容放在相應的標簽內通過網頁的形式表現出來，讓人們能看到。就像使用PS來添加字體、顏色、樣式……然后完成導出成一張圖片給別人看，實際上編寫PS這個程序軟件的人干的才是編程的工作。你需要做的只是掌握一定的PS技法。同理，DW也是一個讓你的內容呈現給別人的工具，你可以給內容（圖片、文字、形狀……）布局，添加樣式、動作……然后導出成一個html文件，讓別人能通過瀏覽器看到，而布局和添加樣式的技法是你需要掌握的，也就是本文所要傳達的東西。
1. 文件格式
后綴為“.html”的文件即為網頁的文件格式，默認為使用瀏覽器打開。有時候會遇到諸如“.htm”之類的格式其實也是差不多的。就像jpg也有jpeg的叫法一樣。
2. 新建文件
DW內新建一個html文件，然后就會自動出現如下代碼：
這段代碼是必不可少的，不同版本的DW可能會有些不同，但是作用是一樣的，相當于在新建一個PS文檔的時候，至少有一個圖層。這些代碼規定了一些瀏覽器讀取所需要的規范，為你寫入內容奠定了基礎。
其中：
想要顯示的內容都裝在<body></body>標簽內，它就是html畫布，在畫布以外放置東西，可能會看不見，也可能出錯。
你的網頁名字則是放在<title> </title>內：
（其他的標簽作用會在之后的文章中慢慢講解或百度哦。）
編碼區上方有幾個菜單，Code（編碼）、Split（拆分）、Design（設計）、Live（實時），請保證你是在編碼菜單下。此前有設計師利用design直接可視化進行排版，說也能排出來啊。額……那還要程序員來干嘛咩？你有你的便利，咱有咱的長處……乖乖碼字吧。
尖括號“< >”和看似認識又有點不認識的單詞的組成便是標簽了，也是構成網頁不可或缺的元素，當然不止這幾個。有木有發現除第一行和帶meta的，都是成對兒出現？（oh god，代碼都來虐狗了！）并且不交叉。
接下來是需要注意的幾點規范：
1）除特殊標簽外，所有標簽必須成對出現并以“< tagName>”開始，以“< / tagName>”結束（所以它們也被稱為開始標簽和結束標簽），并且不與其他標簽交叉：下面這種亂叉的方式絕對會死很慘噠。
2）標簽名小寫（記住記住……）
3）每個標簽的尖括號不能多，也不能少（跟瀏覽器讀取網頁的形式有關，一般由上到下，由左到右，當讀取到一個左尖括號“<”時，會一直尋找下一個右尖括號“>”為結束，，是的，它就是這么執著。缺失可能會導致比較嚴重的問題，也要養成一個規范編碼的習慣，先寫完一對標簽，再填充內容和樣式。）
好啦，講多無益，還是在實踐中尋找知識吧！
實戰案例演示
一、畫個矩形
你習慣了在PS里移動鼠標？那現在要換個方式了，把你想要DW做的事情變成一行行命令。
在<body>后回車換行，然后縮格（不想代碼亂七八糟的話就養成換行縮格的習慣吧）。當你開始打左尖括號的時候右下角就已經有代碼提示了，像平時的百度搜索一樣，選擇你想要的按下回車便自動完成。你也可以選擇自己一個字母一個字母的敲。然后完整的敲出如下代碼 —— 代碼例1：
<div></div>
然后在第一個div的后面，先空格，再添加樣式句子如下：
<div style="width:200px; height:200px; background-color:#c93; "></div>
保存后刷新即可看到：
OK，接觸到了<div>這個標簽，我們就來說道說道。
我一般會把標簽看做是一個一個的二維盒子，之所以說它是二維盒子，是因為盒子只有寬高，是平面的。這個盒子可以小到看不見，也可以大到望不到邊。html中有很多種類的盒子，例如裝鏈接的a標簽盒子（<a></a>），裝文本的p盒子（<p></p>）或者span盒子（<span></span）。而例1中用到的div則是個大雜燴盒子，它可以裝圖片文字，也可以裝其他的盒子和div盒子。你可以通過輸入各種命令來給盒子加上各種各樣的樣式來規定其大小、顏色、放置位置……
如例1中，有這樣一句：
style="width:200px; height:200px; background-color:#c93; "
如果沒有這一句，那就像在白色畫布上畫了一個白色的矩形，你將會看不到你的盒子。
width（寬）、height（高）、background-color（背景顏色）決定了盒子的寬高和顏色，他們被稱為屬性，其后跟的是屬性值。其實有時候你完全可以把每個標簽當成一個人或任何物體（有點面向對象思想的意思哦，有興趣的請百度）。所有能描述這個人的外在都叫做他的屬性：
上圖中的小孩如果我們要用html標記語言來描述的話，大概是這個樣子：<人 style="年齡：10歲; ?膚色:黃色; 性別:男；"></人>，當然，不可能醬紫寫啦，標簽及標簽屬性是不允許有中文的。
所以，得到如下樣式書寫規范，多練習畫幾個盒子吧（可以嘗試更改寬高及背景顏色）：
二、默認樣式及附加樣式
如果你是個乖孩紙，做了上面的練習，多畫了幾個盒子，你會發現，所有的盒子不管右邊空格有多寬，新的盒子總是另起一行。你只規定了大小，并沒有告訴盒子要“站”在哪里。
那就是即將要說到的。
1. 默認樣式：
1）靠左而且會占與其自身高度一樣的空間（前提是你已經規定了寬高，否則為0）
所以別人是沒法緊隨其后的。
2）div盒子默認為白色
2. 附加樣式：
例1中style內就是附加樣式，添加附加樣式（以下簡稱樣式）之前，div按照自身的默認樣式呈現。添加樣式之后，默認樣式將被覆蓋，也就是俗稱的“后來居上”。來做個實驗吧，在一個div盒子的樣式也就是style內添加兩個同一屬性名，不同屬性值的樣式：
然后觀察一下，最后出現的矩形顏色是#c93還是#c00？
好啦，到最后看看能不能不看示例自己敲出來吧。內容不多只是為了入門，之后會不間斷更新爭取講多一點。
有一種方法叫用文本文檔寫html，但是寶寶不想跟你們說，怕誤人子弟。哈哈……
下一篇講“征服霸道div，用矩形模仿網頁布局”，寶寶看看有沒有人給贊！嗚嗚……幾千字也不是好敲的。
「設計師自學指南系列教程」
- 平面設計：《超贊！設計師完全自學指南》
- 交互設計：《交互設計師修煉指南！教你從零開始成為優秀交互設計師》
- UI設計：《超實用新手指南！零基礎如何自學UI設計？》
- 前端開發：《天貓高手來教你！零基礎如何系統地學習前端開發？》
- 摳圖技巧：《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
- 配色方案：《色彩搭配速成！3個實用方法幫你全面搞定配色》
- DPI指南：《基礎知識學起來！為設計師量身打造的DPI指南》
【優設網 原創文章 投稿郵箱：2650232288@qq.com】
================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量112萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
AI輔助海報設計101例
已累計誕生 737 位幸運星
發表評論
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓