本文作為小白入門級，相對基礎，是寫給現在想了解一點前端知識的設計師同行們。文章把前端相關的術語都用設計師熟悉的東西解釋一遍(比如比喻成畫布)，通俗易懂幽默風趣，是小白入門的好教程!

背景交代(此處省略2000個字……)

前言還是要一點的：很多人一聽前端兩個字，就以為是寫網頁的，其實前端包括很多，不僅僅是標簽加樣式那些東西。如果按10級來評的話，不知道你們想象的那些東西有沒有占兩成，

今天把以前的一些東西整理出來，給需要的人。作為web轉行做設計師的人，我會盡量用設計師能理解的角度來講，如有不足及錯誤請指正但勿噴。

一、使用工具

工具的話，DW我想大家是最熟悉的吧，對設計師來說光看圖標就覺得親切有木有?

對專職做前端的來說DW可能并不是選擇，因為會覺得性能不好，比如代碼提示不夠，工作起來效率不太高。以DW為例，這個主要是……本人電腦里剛好只裝了它。代碼提示太多并不是件好事，單詞量本來就少，如果養(yǎng)成了只記前兩個字母然后等待代碼提示的習慣。大概就好比沒有自動鉛筆的時候，你連普通鉛筆都不會削，多尷尬啊。

二、初識html

html并不是一種編程語言，而是一種標記語言，它只是把內容放在相應的標簽內通過網頁的形式表現出來，讓人們能看到。就像使用PS來添加字體、顏色、樣式……然后完成導出成一張圖片給別人看，實際上編寫PS這個程序軟件的人干的才是編程的工作。你需要做的只是掌握一定的PS技法。同理，DW也是一個讓你的內容呈現給別人的工具，你可以給內容(圖片、文字、形狀……)布局，添加樣式、動作……然后導出成一個html文件，讓別人能通過瀏覽器看到，而布局和添加樣式的技法是你需要掌握的，也就是本文所要傳達的東西。

1. 文件格式

后綴為“.html”的文件即為網頁的文件格式，默認為使用瀏覽器打開。有時候會遇到諸如“.htm”之類的格式其實也是差不多的。就像jpg也有jpeg的叫法一樣。

2. 新建文件

DW內新建一個html文件，然后就會自動出現如下代碼：

這段代碼是必不可少的，不同版本的DW可能會有些不同，但是作用是一樣的，相當于在新建一個PS文檔的時候，至少有一個圖層。這些代碼規(guī)定了一些瀏覽器讀取所需要的規(guī)范，為你寫入內容奠定了基礎。

其中：

想要顯示的內容都裝在標簽內，它就是html畫布，在畫布以外放置東西，可能會看不見，也可能出錯。

你的網頁名字則是放在內：

(其他的標簽作用會在之后的文章中慢慢講解或百度哦。)

編碼區(qū)上方有幾個菜單，Code(編碼)、Split(拆分)、Design(設計)、Live(實時)，請確保你是在編碼菜單下。此前有設計師利用design直接可視化進行排版，說也能排出來啊。額……那還要程序員來干嘛咩?你有你的便利，咱有咱的長處……乖乖碼字吧。

尖括號“ >”和看似認識又有點不認識的單詞的組成便是標簽了，也是構成網頁不可或缺的元素，當然不止這幾個。有木有發(fā)現除第一行和帶meta的，都是成對兒出現?(oh god，代碼都來虐狗了!)并且不交叉。

接下來是需要注意的幾點規(guī)范：

1)除特殊標簽外，所有標簽必須成對出現并以“ tagName>”開始，以“< / tagName>”結束(所以它們也被稱為開始標簽和結束標簽)，并且不與其他標簽交叉：下面這種亂叉的方式會死很慘噠。

2)標簽名小寫(記住記住……)

3)每個標簽的尖括號不能多，也不能少(跟瀏覽器讀取網頁的形式有關，一般由上到下，由左到右，當讀取到一個左尖括號“<”時，會一直尋找下一個右尖括號“>”為結束，，是的，它就是這么執(zhí)著。缺失可能會導致比較嚴重的問題，也要養(yǎng)成一個規(guī)范編碼的習慣，先寫完一對標簽，再填充內容和樣式。)

好啦，講多無益，還是在實踐中尋找知識吧!

實戰(zhàn)案例演示

一、畫個矩形

你習慣了在PS里移動鼠標?那現在要換個方式了，把你想要DW做的事情變成一行行命令。

在后回車換行，然后縮格(不想代碼亂七八糟的話就養(yǎng)成換行縮格的習慣吧)。當你開始打左尖括號的時候右下角就已經有代碼提示了，像平時的百度搜索一樣，選擇你想要的按下回車便自動完成。你也可以選擇自己一個字母一個字母的敲。然后完整的敲出如下代碼 —— 代碼例1：