网站前端的开发环境相当简单，主要用到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