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