一、 HTML表单标签
HTML表单用于搜集不同类型的用户输入，然后把数据提交给服务器处理。
- 常用的表单标签：
标签 | 作用 |
form | 所有表单标签的根标签 |
input | 输入标签，包括单行输入框、密码框、单选框、复选框、提交按钮等等 |
textarea | 文本域 |
select、option | 下拉列表框 |
form表单中要用submit，如果用button切记要加上type，不然button默认的type是submit,会有影响
<button class="login" type="button">注册</button>
<button type="button" onclick="doValidation();">提交</button>
<input type="button" onclick="doValidation();" value="提交"/>
上面两种写法是对的，功能一样。
<button onclick="doValidation();">提交</button>
如果写成这种，默认为submit，本来doValidation方法里有提交功能了，
再加上按钮也是提交功能，会提交两次。所以使用按钮时最好指定type类型。1.1 form标签属性
属性 | 作用 |
action | 指定表单的提交地址 |
method | 指定表单的提交方式，例如：Get和Post |
enctype | 指定表单数据在发送到服务器之前应该如何编码 |
- Get和Post提交方式的区别：
使用Get方式提交数据，那么这些数据就会显示在地址栏上；使用Post方式提交数据，那么表单的数据就不会显示地址栏上面；
1.2 表单标签的基本属性
属性 | 作用 |
id | 指定元素的唯一标识 |
name | 指定元素的名字 |
style | 指定元素的内联样式 |
class | 指定元素的类名 |
title | 指定提示文本 |
placeholder | 指定输入框的提示信息 |
注意：如果要把表单数据提交给服务器处理，那么表单项就必须要指定name属性。
1.3 事件属性（了解）
HTML4的新特性之一是可以使 HTML 事件触发浏览器中的行为，比方说当用户点击某个 HTML 元素时启动一段 JavaScript。在现代浏览器中内置大量的事件处理器。这些事件处理器会监听特定条件的用户行为，例如：单击鼠标，移动鼠标等等。
1.3.1 窗口事件
窗口事件仅在body和frameset标签中才有效。
1.3.2 表单元素事件
表单元素事件仅在表单元素中才有效。
1.3.3 键盘事件
1.3.4 鼠标事件
注意：键盘事件和鼠标事件在下列元素中无效：base、bdo、br、frame、frameset、head、html、iframe、meta、param、script、style 以及 title 元素。
一、 CSS样式
HTML：定义网页的结构。
CSS：美化网页。
2.1 CSS介绍
层叠样式表（Cascading Style Sheets，简称CSS），是一种用来美化网页的计算机语言。
- 使用层叠样式表的好处：
1） 使得网页内容与网页表现分离；
2） 可以同时多一个或多个元素进行样式化，极大提高了工作效率；
2.2 如何编写CSS
方式一：在style标签中编写CSS
注意：一个HTML文件可以有零个或多个style标签。
方式二：引入外部CSS文件
第一步：新建一个CSS文件；
第二步：在CSS文件中编写CSS代码；
第三步：在HTML中引入CSS文件；
方式三：在元素的style属性中编写CSS
所有元素都可以指定style属性。
一般而言，所有样式会根据以下规则层叠在一个虚拟的样式表中，其中数字4拥有最高优先级。
优先级 | 规则 |
1 | 浏览器缺省设置 |
2 | 外部样式表 |
3 | 内部样式表（位于<head>标签内部） |
4 | 内联样式表（位于HTML元素内部） |
2.3 CSS注释
HTML的注释：<!-- 注释内容 --->
CSS的注释：/*注释的内容*/
2.4 CSS选择器
CSS语法由三部分组成：选择器、属性和值。选择器
body {
color:blue;
}
上面的CSS代码的作用是将body元素内的文字颜色设置为蓝色。其中，body是选择器，而包括在花括号内的的部分是声明。声明依次由两部分构成：属性和值，color为属性，blue为值。
2.3.1 标签选择器
标签选择器就是根据元素的名字查找元素并进行样式化，其定义格式：
tag_name {
样式列表…
}
2.3.2 类选择器
类选择器就是根据元素的class属性查找元素并进行样式化，其定义格式：
.class_name {
样式列表…
}
2.3.3 ID选择器
ID选择器就是根据ID属性查找元素并进行样式化，其定义格式：
#ID {
样式列表…
}
选择器的优先级：
ID > CLASS > 标签 > *
2.3.4 交集选择器
交集选择器就是对选择器1中的选择器2进行样式化，其定义格式：
选择器1 选择器2 … {
样式列表…
}
2.3.5 并集选择器
并集选择器就是同时对多个选择器进行样式化，其定义格式：
选择器1, 选择器2, … {
样式列表…
}
2.3.6 通用选择器
通用选择器就是对所有元素进行样式化，其定义格式：
* {
样式列表…
}
通用选择器一般用于指定页面的默认样式。注意：通用选择器的优先级最低。
2.3.7 伪类选择器
伪类选择器是对元素处于某一个特定状态进行样式化。
元素的状态：
:link | 未访问状态，只对a标签有效 |
:visited | 已访问状态，只对a标签有效 |
:hover | 鼠标划过时候的状态 |
:active | 鼠标选定时候的状态 |
2.4 CSS属性
2.4.1 背景属性
1. background-color
background-color用于指定背景颜色。它的值可以是：
尽管在大多数情况下没有必须使用 transparent。不过如果您不希望某元素拥有背景色，同时又不希望用户对浏览器的颜色设置影响到您的设计，那么设置 transparent值还是有必要的。
2. background-image
background-image用于为元素指定背景图像。例如：
3. background-repeat
background-repeat用于设置背景图像是否平铺。它的值可以是：
repeat-x | 图像在水平方向上重复 |
repeat-y | 图像在垂直方向上重复 |
no-repeat | 不允许图像在任何方向上平铺 |
4.background-position
background-position用于指定背景图像的位置。为background-position属性提供值的方法有许多种。
1） 可以是关键字：top、bottom、left、right和center。通常，这些关键字会成对出现，例如：left top（图像放置在元素内边距的左上角）。如果只出现一个关键字，则认为另一个关键字是
2） 可以是长度值，例如：50px 100px（图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上）。
background-position :50px 100px;
1） 可以是百分比，例如：50% 50%（图像的左上角放置在元素内边距的中心）。
background-position :50% 100%;
2.4.2 字体和文本属性
属性 | 描述 |
font-size | 设置字体的大小 |
font-weight | 设置字体的重量，例如：字体加粗bold |
text-indent | 设置文本缩进的距离，它的值可以像素px、字体的尺寸em或百分比 |
text-align | 设置文本的对齐方式；它的值可以是：left（左对齐）、居中（center）、右对齐（right）、两端对齐（justify） |
text-decoration | 设置文本修饰 |
letter-spacing | 设置文本内容的距离 |
text-transform | 处理文本的大小写，它的值可以是：none、uppercase（大写）、lowercase（小写）、capitalize（驼峰） |
1. font-size
font-size属性用于设置字体的尺寸。它的值可以是：
2. font-weight
font-weight用于设置文本的粗细。它的值可以是：
注意：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
3. text-indent
text-indent用于设置文本块中首行文本的缩进。如果使用负值，那么首行会缩进到左边。它的值可以是：
4. text-align
text-align用于设置文本的对齐方式。它的值可以是：
left | 左对齐 |
right | 右对齐 |
center | 居中对齐 |
justify | 水平两边对齐 |
5. text-decoration
text-decoration用于给文本添加修饰。它的值可以是：
6. letter-spacing
letter-spacing用于修改字符或字母之间的间隔。正数代表增加间隔，负数代表减少间隔。
7. text-transform
text-transform用于处理文本的大小写。它的属性值有：
默认值
2.4.3 表格样式
表格属性用于设置表格布局。表格属性有：
注意：border-collapse和border-spacing属性不能够同时存在。
2.4.4 边框样式
边框样式用于设置元素边框的宽度、颜色和风格，其主要属性有：
border-width | 设置元素边框的宽度 |
border-color | 设置元素边框的颜色 |
border-style | 设置元素边框的风格，它的值有：solid（实线）、dotted（点线）、dashed（虚线）、double（双线） |
另外，CSS还允许对元素的各条边设置边框样式，如下表所示：
border-left-width | 设置元素左边框的宽度 |
border-left-color | 设置元素左边框的颜色 |
border-left-style | 设置元素左边框的风格 |
border-right-width | 设置元素右边框的宽度 |
border-right-color | 设置元素右边框的颜色 |
border-right-style | 设置元素右边框的风格 |
border-top-color | 设置元素上边框的颜色 |
border-top-style | 设置元素上边框的风格 |
border-top-width | 设置元素上边框的宽度 |
border-bottom-color | 设置元素下边框的颜色 |
border-bottom-style | 设置元素下边框的风格 |
border-bottom-width | 设置元素下边框的宽度 |
除此以外，CSS还允许把元素边框的宽度、颜色、风格合在一起设置，如下表所示：
border-left | 设置元素左边框的宽度、颜色或风格 |
border-right | 设置元素右边框的宽度、颜色或风格 |
border-top | 设置元素上边框的宽度、颜色或风格 |
border-bottom | 设置元素下边框的宽度、颜色或风格 |
最后，如果元素四条边的边框都相同，可以把它们都写在一起。例如：border：2px solid red。
2.4.5 盒子模型
盒子模型用于处理元素内容、内边距、边距和外边距。
1. 内边距padding
内边距就是内容与边框之间的距离。内边距的边缘是边框，如下图所示：
内边距的CSS样式:
padding | 设置内边距 |
padding-left | 设置左内边距 |
padding-right | 设置右内边距 |
padding-top | 设置上内边距 |
padding-bottom | 设置下内边距 |
2. 外边距margin
外边距是指边框以外的部分。外边距默认是透明的，因此不会遮挡后面的任何元素。
- 外边距的CSS样式：
margin | 设置元素的外边距 |
margin-left | 设置元素的左外边距 |
margin -right | 设置元素的右外边距 |
margin -top | 设置元素的上外边距 |
margin -bottom | 设置元素的下外边距 |
注意：外边距可以是正数，也可以是负数。
温馨提示：在CSS中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的尺寸。例如：假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，看下图：
2.4.6 定位属性
元素定位就是把HTML元素放在页面的某一个位置。CSS有三种定位类型：普通流、浮动和绝对定位。除非专门指定，否则所有元素都是在普通流中定位。也就是说，所有元素的位置都是由元素在HTML中的位置决定。
- 指定元素的定位类型的CSS属性：
position | 指定定位类型。它的值有：absolute（绝对定位）、relative（相对定位）、fixed（固定定位） |
left | 指定元素左上角的横坐标 |
top | 指定元素左上角的纵坐标 |
1. 相对定位
相对定位可以这样理解：如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
例如：如果将元素的top属性设置为20像素，left属性设置为 30像素，那么就会在原位置顶部下面创建20像素的空间，左边创建30像素的空间，也就是将元素向右下方向移动，如下图所示：
注意：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
2. 绝对定位
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同。普通流中其它元素的布局就像绝对定位的元素不存在一样。
例如：
上面设置框2为绝对定位，left为30像素，top为20像素。由于使用绝对定位，框2原来的位置被删除，因此框3会移动到框1后面。
3. 固定定位
与绝对定位一样，使用固定定位的元素在页面中也不占据空间。但是，固定定位不会随着页面的滚动而滚动。
4. 浮动定位
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
例如：下图把框1向由浮动。所以可以看到，右图的框2和框3会向上移动，占据框1原先的空间。
例如：1）下面左图框1向左浮动，所以框2和框3会占据框1原先空间。但是由于框1浮动起来，所以，框1会覆盖框2。2）右图把三个框都向左浮动，可以看到框2的左边框碰到框1右边框，框3的左边框碰到框2的右边框，三个框呈现水平排列。
但是，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
