網站前端的開發環境相當簡單，主要用到Dreamweaver、Photoshop兩樣工具。也可以用Sublime Text 3代替Dreamweaver，用Dreamweaver的話版本要選Dreamweaver CC以后的版本，對HTML5的支持較好，本書以Dreamweaver CC 2017版為例。
書中代碼測試用的瀏覽器為微軟的Edge瀏覽器，如果不是windows 10的操作系統，建議用谷歌Chrome瀏覽器，部分代碼在微軟的IE9.0及以下瀏覽器下無效。
網頁前端開發用到的語言主要是HTML、CSS、Javascript。HTML用于定義網頁的內容，當前的版本是HTML5；CSS用于修飾網頁的顯示效果，當前版本是CSS3；Javascript用于定義網頁的動態效果，當前版本是ECMA-262 5th Edition；目前主流瀏覽器都支持HTML5、CSS3、Javascript。
HTML稱為超文本標記語言，通過標記對內容加以說明，一般標記都是成對出現的，如
`<b>`表示起始標記，`</b>`表示結束標記；`<b>123</b>`，表示123三個字符加粗顯示， `<i>456</i>`，表示456三個字符加傾斜效果；標記可以嵌套，`<b><i>123456</i></b>`表示123456幾個字符即加粗又傾斜，`<b>123<i>456</i></b>`表示123三個字符加粗，456三個字符即加粗又傾斜；起始標記和結束標記要配對，不可以亂套，如`<b><i>123456<b></i>`這樣是不允許的。
CSS稱為層疊樣式表。用來修飾網頁元素的顯示效果，起到美化網頁的作用，基本格式是“選擇器{屬性名:屬性值；}”，如`a{color:red;}`，a是一個標記選擇器，用來選擇超鏈接標記，color是設置網頁的前景色，`a{color:red;}`的作用是修改網頁中超級鏈接標記的顏色為紅色。
Javascript是主流瀏覽器都支持的腳本語言，通過對瀏覽器文本對象模型（DOM）的操作實現網頁的動態效果，如動態添加網頁元素，動態設置網頁元素的值和外觀等。
## 練習一 熟悉Dreamweaver CC 2017開發環境
本書的代碼在Dreamweaver CC 2017中書寫，但書中的講解盡量做到和開發環境無關，習慣把開發環境設置成這一個樣子來書寫代碼，如圖1-4-1，這也是Dreamweaver CC 2017 標準模式的默認設置，如果當前開發環境不是這個樣子，可以通過Dreamweaver CC 2017標題欄上的“標準"菜單下的"重置標準”菜單項恢復到默認效果。
:-: 
:-: 圖1-4-1
## 練習二 熟悉文本格式標記
在Dreamweaver CC 2017中新建一個html文件，保存為text.html，轉到代碼頁，在`<body></body>`標記之間添加如下代碼1-4-2-1，加粗部分為新增代碼，效果如圖1-4-2：
~~~
<body>
<h1>標題一</h1><h2>標題一</h2>
<h3>標題一</h3><h4>標題一</h4>
<h5>標題一</h5><h6>標題一</h6>
<hr>
<b>加粗</b><br>
<i>斜體</i>
<u>下劃線</u>
</body>
~~~
:-: 代碼1-4-2-1
* `<body></body>`標記 – 正文標記，表示網頁正文的開始和結束。一張網頁中只有一對`<body></body>`標記。
* `<h1></h1>`標記 – 標題標記，指明包含在標記內的文本是一個標題，自動換行。按照標題文字從大到小，有`<h1>到<h6>`六個標記。
* `<hr>`標記 – 插入水平線。
* `<b></b>`標記 – 包含在標記內的文本加粗 。
* `<i></i>`標記 – 包含在標記內的文本為斜體 。
* `<u></u>`標記 – 包含在標記內的文本加下劃線 。
* `<br>`標記及網頁中文字的換行 – html文件中的代碼在瀏覽器中解釋執行，默認按照從上到下，從左到右流式布局 。在網頁中的文字不能通過回車換行，也不能通過空格鍵調整文字之間的間距（多個連續空格被認作是一個空格）。`<br>`標記可以實現文本換行，標題標記`<h1>到<h6>`默認自動換行，還有更多的塊級元素默認也有自動換行效果。注意，這里說的網頁指的是html文件在瀏覽器中解釋執行后呈現的頁面，不是html源文件。
:-: 
:-: 圖1-4-2
## 練習三 熟悉表單元素
表單元素也是常見的一類網頁元素，用來收集客戶端信息提交到服務器處理，所以需要提交數據到服務器的頁面都會用到表單元素。在Dreamweaver CC 2017中新建一個html文件，保存為form.html，轉到代碼頁，在`<body></body>`標記之間添加如下從`<form>`開始到`</form>`結束的代碼（代碼1-4-3-1），效果如圖1-4-3：
~~~
<body>
<form>
文本框<input type="text" value="123"><br>
密碼框<input type="password" value="123"><br>
多選一<input type="checkbox">
多選二<input type="checkbox"><br>
單選一<input type="radio" name="danxuan">
單選二<input type="radio" name="danxuan"><br>
文件上傳<input type="file"><br>
按鈕<input type="button" value="按鈕">
</form>
</body>
~~~
:-: 代碼 1-4-3-1
* `<form></form>`標記 – 表單元素需要放在`<form>`標記內才能通過post方式提交到服務端處理。
* `<input>`標記及表單元素 – 通過設置`<input>`標記的type屬性來設置表單元素的類型，如text為文本框，password為密碼框，除了上述代碼1-4-3-1中的這些表單元素，html5還支持顏色選擇框type=color，年、月、日選擇框type=year、type=month、type=day，日期選擇框type=date等等。
* 單選按鈕的分組 – 同一組單選按鈕一次只能選中一個，單選按鈕通過name屬性來分組，name相同的為一組。
* 按鈕的類型 – 當`<input>`標記的type屬性為button, submit, reset時`<input>`標記的形態都是按鈕形狀，button不觸發任何事件，submit觸發表單的post事件，reset觸發重置表單事件。
* 文件上傳 – `<input>`標記，type=file時表現為一個文件上傳組件，可以選擇本地電腦上的文件，提交表單時文件也會上傳到服務器，服務器端可以設置接受條件，如只接受特定擴展名或文件大小小于2M的文件等等。
:-: 
:-: 圖1-4-3
## 練習四 鏈接外部CSS文件
**操作步驟**
1. 打開練習三中的form.html，另存為link.html；再新建一個CSS文件，保存為main.css；
2. 在html文件的`<head></head>`標記之間添加如下代碼，加粗部分為新增代碼； 在Dreamweaver中，這步操作也可以通過單擊右鍵，在彈出式菜單中選擇“附加樣式表”實現。
~~~
<head>
<meta charset="utf-8">
<title>熟悉表單元素</title>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
~~~
:-: 代碼 1-4-4-1
* 外部CSS文件 – CSS用來修飾網頁元素的外觀，可以把CSS代碼和html代碼寫在同一個html文件中，但建議把CSS代碼單獨寫在一個外部CSS文件中，通過link標記把外部CSS文件和html鏈接起來 。
3. 在main.css文件中添加如下代碼1-4-4-2，效果如圖1-4-4，對比圖1-4-3，可以發現html文件顯示的字體，字體大小，字體顏色都發生了改變。
~~~
@charset "utf-8";
/* CSS Document */
body{
font-size: 20px;
font-family: "微軟雅黑";
color:#999;
}
~~~
:-: 代碼 1-4-4-2
* CSS選擇器 – 代碼1-4-4-2中的body是一個標記選擇器，CSS選擇器用來選擇html文件中的一個或一類標記，這里的body表示對html文件中的“所有”`<body>`標記做定義，除了標記選擇器還有類選擇器、ID選擇器、偽類選擇器等。
* CSS屬性格式 – CSS定義放在一對{ }中，一個CSS定義中可以設置多個CSS屬性，每個CSS屬性按照如下格式設置，屬性名:屬性值，多個屬性間用“；”隔開，代碼1-4-4-2設置了body標記的3個CSS屬性。
* font-size屬性 – 字體大小，20px表示網頁正文中的字體大小為20像素。
* font-family屬性 – 字體屬性，用來設置網頁元素的字體，如“宋體”，“黑體”等，代碼1-4-4-2中設置網頁正文的字體為微軟雅黑。
* color屬性 – 文本顏色，屬性值是一個16進制數的6位數，可以表示24位色，如#F08300表示紅色值為#F0，綠色值為#83，藍色值為#00，“#”表示這是一個16進制數，代碼1-4-4-2中屬性值#999是#99999的縮寫；顏色值也可以是顏色的英文單詞，如red表示紅色，green表示綠色等等。修改這個值可以改變文本的顏色，屬性值中的英文對大小寫沒有要求。
:-: 
:-: 圖1-4-4
## 練習五 理解盒子模型
在CSS中，把所有的網頁元素看成一個個的盒子，練習五主要幫助大家來理解CSS中的盒子模型。對照現實中的盒子，主要有盒子的大小、邊框、內邊距、外邊距等幾個屬性，內邊距指的是盒子邊框與盒子內的物品之間留的空隙，盒子的外邊距指的是盒子與盒子之間留的空隙，因為是平面結構，網頁中盒子表現為一個矩形，盒子的大小只需要寬和高兩個屬性。
**操作步驟**
1. 新建一個html文件，保存為box.html，在`<body></body>`標記之間添加如下代碼1-4-5-1，`<body></body>`標記之間為新增代碼。
~~~
<body>
<div class="box1">
<div class="box2"></div>
<div class="box2"></div>
</div>
</body>
~~~
:-: 代碼 1-4-5-1
* `<div></div>`層標記 – 層標記在網頁設計中會大量的應用，主要用做其他網頁元素的容器，進行網頁布局。
* class屬性 – 通過標記的class屬性來設置標記的樣式，多個網頁標記的class屬性可以相同，如代碼1-4-5-1中有兩個層的class屬性值都是box2，這兩個層的樣式效果都受box2這個CSS類控制 。
2. 鏈接外部CSS文件到練習四中做的main.css，在main.css文件中添加如下代碼1-4-5-2，網頁效果如圖1-4-5：
~~~
.box1{
width:200px;
height: 100px;
border: 1px solid #000;
padding: 5px;
}
.box2{
width: 40%;
height: 40%;
background-color: #999;
margin: 10px;
float: left;
}
~~~
:-: 代碼 1-4-5-2
:-: 
:-: 圖1-4-5
* 類選擇器（自定義CSS樣式類） – 練習三中用到了標記選擇器修改`<body>`標記的顯示效果，這個練習中通過類選擇器來修改層的外觀；.box1、.box2是類選擇器（自定義CSS樣式類），用來定義html文件中所有class設置為box1或box2的網頁元素的外觀，類選擇器以符號”.”開頭，后面跟的名字可以自定義。自定義CSS樣式類名以符號“.”開頭，后跟自定義樣式類的名稱，如.box1，樣式類的定義以符號“{”開頭，“}”結尾，如.box1{ }。
* width屬性 – 表示網頁的寬度屬性，可以用固定值，比如200px，也可以用百分比，如40%表示網頁元素的寬度是它的父級容器的40%，如果父級容器的寬度是200px，則當前網頁元素的寬度就是80px，移動端上寬度基本都會用百分比表示。層box2的父級容器是層box1。
* height屬性 – 網頁元素的高度，用法類似width屬性。
* border屬性 – 表示網頁元素的邊框屬性，1px solid #000分別表示邊框的寬度為1個像素，邊框類型為實線，邊框顏色為#000。如果其他屬性不變就是邊框類型改為虛線，可以用dotted屬性值，即1px dotted #000,如果要把邊框的顏色改成紅色，可以把#000改成#f00或直接用英文red。可以對上下左右4條邊框單獨設置外觀，屬性名分別是border-top，border-bottom，border-left，border-bottom，屬性值的寫法和border屬性一樣。
* padding屬性 – 內邊距，CSS3中默認不將內邊距計算到盒子的height屬性和width屬性中。如圖1-4-5中的層box1，width=200px，height=100px，padding=5px，border=1px，則層box1的實際顯示寬度為212px，實際顯示高度112px。
* margin屬性 – 網頁元素的外邊距，不計算在盒子的height屬性和width屬性中。
* background-color屬性 – 設置網頁元素的背景顏色，屬性值是一個16進制數的6位數，可以表示24位色，如#F08300表示紅色值為#F0，綠色值為#83，藍色值為#00，“#”表示這是一個16進制數；屬性值#999是#99999的縮寫。修改這個值可以改變顏色效果，屬性值中的英文大小寫沒有要求。
* float屬性 – 網頁元素默認是流式布局，即從左到右，從上到下，遇到塊級元素則換行，設置了float屬性的塊級元素可以脫離這個文檔流，在父級容器內實現左右浮動。屬性值left表示左浮動，屬性值right表示右浮動，可以把浮動的元素看成是漂浮在當前層的上方。div默認就是塊級元素。
## 練習六 列表標記
html支持無序列表`<ul></ul>`和有序列表`<ol></ol>`，列表項都以`<li>`標記開始。
無序列表和有序列表都是一個項目列表，其中無序列表的列表項使用圓點、菱形等無序符號進行標識，有序列表的列表項使用數字、字母等帶序號的符號進行標識。
1. 新建一個html文件，保存為list.html，在`<body></body>`標記之間添加如下代碼1-4-4-1，加粗部分為新增代碼，預覽效果如圖1-4-6。
~~~
<body>
<ul>
<li>列表項一</li>
<li>列表項二</li>
</ul>
<ul type="square">
<li>列表項一</li>
<li>列表項二</li>
</ul>
<ol>
<li>列表項一</li>
<li>列表項二</li>
</ol>
<ol type="A" start="3">
<li>列表項一</li>
<li>列表項二</li>
</ol>
<ul class="list1">
<li>列表項一</li>
<li>列表項二</li>
</ul>
</body>
~~~
:-: 代碼 1-4-6-1
前兩個是無序列表，列表項的默認標識為圓點，可以通過`<ul>`標記的type屬性進行修改，目前屬性值支持circle、disc、square三種，分別代表圓圈、方塊、菱形。后兩個是有序列表，列表項的默認標識為阿拉伯數字，可以通過`<ol>`標記的type屬性進行修改，目前屬性值支持1、A、I、a、i五種，分別代表阿拉伯數字、大寫英文字母、大寫羅馬數字、小寫英文字母、小寫羅馬數字。有序列表的start屬性可以用來設置起始序號，如圖1-4-6中最后一個列表是從“C”，既序號3開始的。
:-: 
:-: 圖1-4-6
2. 在css中修改列表標記。鏈接外部CSS文件到練習四、五中用過的main.css，在main.css文件末尾添加如下代碼1-4-6-2。
~~~
.list1{
list-style-image: url(picon6.png);
}
~~~
:-: 代碼 1-4-6-2
可以通過css屬性來設置列表項標識，很多時候可能會去除列表項的默認標識，使用別的符號進行標識，那么可以在列表標記`<ul>`或`<ol>`的css定義中聲明“ list-style-type:none;”也可以通過list-style-image把列表項換成一張圖片，如代碼1-4-6-2所示，本練習的最終效果如圖1-4-7所示。
* list-style-image – list-style-image 屬性使用圖像來替換列表項的標識符號。
* url() – url()函數用來指定文件的位置，支持相對路徑。如圖1-4-7，第5個列表的列表項標識換成了圖片，圖片的位置通過url()函數指定，這里的圖片位置是當前目錄下的“picon6.png”文件。
:-: 
:-: 圖1-4-7