本文作為小白入門級，相對基礎(chǔ)，是寫給現(xiàn)在想了解一點前端知識的設(shè)計師同行們。文章把前端相關(guān)的術(shù)語都用設(shè)計師熟悉的東西解釋一遍（比如<body>比喻成畫布），通俗易懂幽默風趣，絕對是小白入門的好教程！
前言還是要一點的：很多人一聽前端兩個字，就以為是寫網(wǎng)頁的，其實前端包括很多，不僅僅是標簽加樣式那些東西。如果按10級來評的話，不知道你們想象的那些東西有沒有占兩成，今天把以前的一些東西整理出來，給需要的人。作為web轉(zhuǎn)行做設(shè)計師的人，我會盡量用設(shè)計師能理解的角度來講，如有不足及錯誤請指正但勿噴。
天貓&京東,內(nèi)蒙古電商品牌策劃,內(nèi)蒙古微信營銷,內(nèi)蒙古微網(wǎng)站,呼和浩特電商品牌策劃,呼和浩特微信營銷,呼和浩特微網(wǎng)站,內(nèi)蒙古網(wǎng)站制作，內(nèi)蒙古網(wǎng)站設(shè)計，內(nèi)蒙古網(wǎng)站建設(shè)，呼和浩特網(wǎng)站建設(shè)，呼和浩特網(wǎng)站制作、呼和浩特網(wǎng)站設(shè)計首選內(nèi)蒙古呼和浩特先誠網(wǎng)絡科技公司。先誠官網(wǎng)：http://www.schuylerstatebank.com/
一、使用工具
工具的話，DW我想大家是最熟悉的吧，對設(shè)計師來說光看圖標就覺得親切有木有？
對專職做前端的來說DW可能并不是首選，因為會覺得性能不好，比如代碼提示不夠，工作起來效率不太高。以DW為例，這個主要是……本人電腦里剛好只裝了它。代碼提示太多并不是件好事，單詞量本來就少，如果養(yǎng)成了只記前兩個字母然后等待代碼提示的習慣。大概就好比沒有自動鉛筆的時候，你連普通鉛筆都不會削，多尷尬啊。
二、初識html
html并不是一種編程語言，而是一種標記語言，它只是把內(nèi)容放在相應的標簽內(nèi)通過網(wǎng)頁的形式表現(xiàn)出來，讓人們能看到。就像使用PS來添加字體、顏色、樣式……然后完成導出成一張圖片給別人看，實際上編寫PS這個程序軟件的人干的才是編程的工作。你需要做的只是掌握一定的PS技法。同理，DW也是一個讓你的內(nèi)容呈現(xiàn)給別人的工具，你可以給內(nèi)容（圖片、文字、形狀……）布局，添加樣式、動作……然后導出成一個html文件，讓別人能通過瀏覽器看到，而布局和添加樣式的技法是你需要掌握的，也就是本文所要傳達的東西。
1. 文件格式
后綴為“.html”的文件即為網(wǎng)頁的文件格式，默認為使用瀏覽器打開。有時候會遇到諸如“.htm”之類的格式其實也是差不多的。就像jpg也有jpeg的叫法一樣。
2. 新建文件
DW內(nèi)新建一個html文件，然后就會自動出現(xiàn)如下代碼：
這段代碼是必不可少的，不同版本的DW可能會有些不同，但是作用是一樣的，相當于在新建一個PS文檔的時候，至少有一個圖層。這些代碼規(guī)定了一些瀏覽器讀取所需要的規(guī)范，為你寫入內(nèi)容奠定了基礎(chǔ)。
其中：
想要顯示的內(nèi)容都裝在<body></body>標簽內(nèi)，它就是html畫布，在畫布以外放置東西，可能會看不見，也可能出錯。
你的網(wǎng)頁名字則是放在<title> </title>內(nèi)：
（其他的標簽作用會在之后的文章中慢慢講解或百度哦。）
編碼區(qū)上方有幾個菜單，Code（編碼）、Split（拆分）、Design（設(shè)計）、Live（實時），請保證你是在編碼菜單下。此前有設(shè)計師利用design直接可視化進行排版，說也能排出來啊。額……那還要程序員來干嘛咩？你有你的便利，咱有咱的長處……乖乖碼字吧。
尖括號“< >”和看似認識又有點不認識的單詞的組成便是標簽了，也是構(gòu)成網(wǎng)頁不可或缺的元素，當然不止這幾個。有木有發(fā)現(xiàn)除第一行和帶meta的，都是成對兒出現(xiàn)？（oh god，代碼都來虐狗了?。┎⑶也唤徊?。
接下來是需要注意的幾點規(guī)范：
1）除特殊標簽外，所有標簽必須成對出現(xiàn)并以“< tagName>”開始，以“< / tagName>”結(jié)束（所以它們也被稱為開始標簽和結(jié)束標簽），并且不與其他標簽交叉：下面這種亂叉的方式絕對會死很慘噠。
2）標簽名小寫（記住記住……）
3）每個標簽的尖括號不能多，也不能少（跟瀏覽器讀取網(wǎng)頁的形式有關(guān)，一般由上到下，由左到右，當讀取到一個左尖括號“<”時，會一直尋找下一個右尖括號“>”為結(jié)束，，是的，它就是這么執(zhí)著。缺失可能會導致比較嚴重的問題，也要養(yǎng)成一個規(guī)范編碼的習慣，先寫完一對標簽，再填充內(nèi)容和樣式。）
好啦，講多無益，還是在實踐中尋找知識吧！
實戰(zhàn)案例演示
一、畫個矩形
你習慣了在PS里移動鼠標？那現(xiàn)在要換個方式了，把你想要DW做的事情變成一行行命令。
在<body>后回車換行，然后縮格（不想代碼亂七八糟的話就養(yǎng)成換行縮格的習慣吧）。當你開始打左尖括號的時候右下角就已經(jīng)有代碼提示了，像平時的百度搜索一樣，選擇你想要的按下回車便自動完成。你也可以選擇自己一個字母一個字母的敲。然后完整的敲出如下代碼 —— 代碼例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盒子。你可以通過輸入各種命令來給盒子加上各種各樣的樣式來規(guī)定其大小、顏色、放置位置……
如例1中，有這樣一句：
style="width:200px; height:200px; background-color:#c93; "
如果沒有這一句，那就像在白色畫布上畫了一個白色的矩形，你將會看不到你的盒子。
width（寬）、height（高）、background-color（背景顏色）決定了盒子的寬高和顏色，他們被稱為屬性，其后跟的是屬性值。其實有時候你完全可以把每個標簽當成一個人或任何物體（有點面向?qū)ο笏枷氲囊馑寂?，有興趣的請百度）。所有能描述這個人的外在都叫做他的屬性：
上圖中的小孩如果我們要用html標記語言來描述的話，大概是這個樣子：<人 style=”年齡：10歲; 膚色:黃色; 性別:男；”></人>，當然，不可能醬紫寫啦，標簽及標簽屬性是不允許有中文的。
所以，得到如下樣式書寫規(guī)范，多練習畫幾個盒子吧（可以嘗試更改寬高及背景顏色）：
二、默認樣式及附加樣式
如果你是個乖孩紙，做了上面的練習，多畫了幾個盒子，你會發(fā)現(xiàn)，所有的盒子不管右邊空格有多寬，新的盒子總是另起一行。你只規(guī)定了大小，并沒有告訴盒子要“站”在哪里。
那就是即將要說到的。
1. 默認樣式：
1）靠左而且會占與其自身高度一樣的空間（前提是你已經(jīng)規(guī)定了寬高，否則為0）
所以別人是沒法緊隨其后的。
2）div盒子默認為白色
2. 附加樣式：
例1中style內(nèi)就是附加樣式，添加附加樣式（以下簡稱樣式）之前，div按照自身的默認樣式呈現(xiàn)。添加樣式之后，默認樣式將被覆蓋，也就是俗稱的“后來居上”。來做個實驗吧，在一個div盒子的樣式也就是style內(nèi)添加兩個同一屬性名，不同屬性值的樣式：
然后觀察一下，最后出現(xiàn)的矩形顏色是#c93還是#c00？
好啦，到最后看看能不能不看示例自己敲出來吧。內(nèi)容不多只是為了入門，之后會不間斷更新爭取講多一點。
有一種方法叫用文本文檔寫html，但是寶寶不想跟你們說，怕誤人子弟。哈哈……
注：本文均來自百度搜索，如涉及版權(quán)問題，請聯(lián)系我們，我們會第一時間解決。
copyright ? 呼和浩特市先誠網(wǎng)絡科技有限責任公司 Reserved
蒙ICP備15010202150214號
蒙公網(wǎng)安備10001347號
呼和浩特市先誠網(wǎng)絡科技有限責任公司
蒙ICP備15010202150214號
蒙公網(wǎng)安備10001347號