html表单的设计与使用
文本框和密码框
表单中最常用的就是文本框和密码框。
姓名：<input type="text" name="name" value=""><br>
VIP密码：<input type="password" name="password" value=""><br>
- type:定义输入框的类型。text是普通的文本框。password是密码框。
- name：描述用户输入的是什么。
- value:用户输入的内容，也是提交到服务器的值。
单选框和复选框
在使用表单时，为了减少用户的操作，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
type:当type="radio"时，控件为单选框。当type="checkbox"时，控件为复选框。
value：提交数据到服务器的值（后台程序PHP使用）。
name：告诉服务器，我们提交的这个value值代表的什么。
checked：当设置checked="checked"时，该选项被默认选中。
下拉列表框
下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。
<select name="beans">
<option value="House Blend">House Blend</option>
<option value="Bolivia">Shade Grown Bolivia Supremo</option>
<option value="Guatemala">Organic Guatemala</option>
<option value="Kenya">Kenya</option>
</select>
value：提交数据到服务器的值。
selected="selected"：设置selected="selected"属性，则该选项就被默认选中。
下拉列表也可以进行多选操作，在<select>标签中设置multiple="multiple"属性，就可以实现多选功能，在windows操作系统下，进行多选时按下Ctrl键同时进行单击（在Mac下使用Command+单击），可以选择多个选项。
多行文本
当用户需要在表单中输入大段文字时，需要用到文本输入域。
<textarea rows="行数" cols="列数">文本</textarea>
<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。
name：指定输入框的名字。
cols ：多行输入域的列数。
rows ：多行输入域的行数。
在<textarea></textarea>标签之间可以输入默认值。
上传
在实际开发中，我们经常会遇到要求用户上传头像图片或者添加附件在表单中的场景。
在HTML中，文件上传同样也使用input标签。
<input type="file"/>
提交按钮
在表单中有两种按钮可以使用，分别为：提交按钮、重置。当用户需要提交表单信息到服务器时，需要用到提交按钮。当我们需要重置表单信息的时候，需要用到重置按钮。
提交按钮
type：只有当type值设置为submit时，按钮才有提交作用。
value：按钮上显示的文字。
<input type="submit" value="提交">
提交按钮
当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。
<input type="reset" value="重置">
type：只有当type值设置为reset时，按钮才有重置作用。
value：按钮上显示的文字。
CSS基础
CSS样式规则
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）希望设置的样式属性（style attribute）。
CSS加载的方式
引入外部文件
<link href="outer.css" rel="stylesheet" type="text/css"></link>
HTML文档中使用<link>元素引入外部样式文件，引入外部样式文件应在<head>元素中增加<link>子元素。
选择器
通配符选择器
使用"*"表示通配符，用来选择页面所有元素的样式。
*{ margin:0;
padding:0;}
类选择器
类选择器指定的样式对指定class属性的元素起作用。使用“.”标识一个类选择符，类名可以任意。
.myclass{...}
ID选择器
ID选择器中的样式会对具有指定id属性的HTML元素起作用。
HTML元素以id属性来设置id选择器,CSS中id选择器以"#"来定义。
需要注意的是id在HTML文档中具有唯一性，是不可以重复的。
#idValue{ ...}
包含选择器
包涵选择器用于指定处于某个选择器对应的内部元素。
h1 em {color:red;}
子选择器
子选择器要求目标选择器必须作为外部选择器对应的元素的直接子元素**。**
parent>child{width: 200px; height: 35px;}
<style>
</style>
<div class="a">
<p>A smooth, mild <span class="b">blend of coffees</span> from Mexico, </p>
<div>A smooth, <p>mild</p>mild</div>
</div>
群组选择器
群组选择器使用逗号对选择符进行分隔。
我们可以将逗号读成“和”。
h1,p,myClass,#main{
font-size:20px;
}