一、表单
1.表单的作用：用来收集用户的信息的;
2.表单组成：表单域、提示信息、表单控件。
3.表单框（表单域） form
作用：表单控件必须写在表单框内，才具有自身的功能效果
4.表单控件 input
type 决定此表单控件是什么功能
text 文本框
password 密码框
button 自定义按钮，搭配value使用，value内写按钮上的文字
submit 提交按钮，搭配name使用,给提交的标签写个name，用来提交数据,默认带提交两个字
reset 重置按钮，清空表单框内的标签内容
按钮的高度包括包括了border和padding
name 当数据提交时，数据的名称
value 当给按钮写value时，他是按钮上边的文字
二、ps基本操作
1.ps打开图片 直接将图片拖拽至ps
2.调整刻度尺 ctrl+r 出刻度尺
3.刻度尺单位 开发时，我们使用像素单位。右键你的刻度尺，选择设为像素
4.量取尺寸 左侧工具栏有一个虚线矩形框，用这个量取尺寸，w为宽，h为高
5.放大缩小图片 ctrl+"+"号 ctrl+"-"号
6.做辅助线 从标尺上可以拉出一条辅助线，如果不需要了的话，可以重新拉回到标尺
7.吸取颜色 左侧工具栏最下边有两个色板，点击可以吸取颜色，或点击吸管工具
8.切图 划框选中——ctrl+c复制——ctrl+n新建面板——ctrl+v粘贴——ctrl+s选择路径保存(注意保存为jpeg格式)
三、css基础
层叠性质：有多个选择器或一个选择器对某个或某几个标签中的多条样式进行选择，如果多个选择器都赋给某个或某几个标签相同属性，样式的作用范围发生了重叠
1.概念：css又叫做层叠样式表，作用就是如何修饰网页信息的显示样式。
2.目前遵循的是W3C发布的CSS3.0规范，目前仍持续更新。
3.css样式表——内部样式表、外部样式表、行内（内联）样式
(1)外部样式表
概念：写在html文件之外的css文件中，通过在html的head标签中，
使用link标签与html建立关联关系，叫做外部样式表。
例:<link rel="stylesheet" href="../css/style.css">
(2)内部样式表
概念写在html文件的head标签内部的style标签中，因为是写在html内的，
所以不需要额外再建立关联关系。这个就是内部样式表
例：<style>
h3{
color:red;
}
</style>
(3)行内样式
概念：写在html标签内部，写在标签的style属性的属性值内,不需要再写选择器。
例：<p style='color:red;'>我是p标签</p>
(4)补充问题：三种样式表是否有优先级顺序呢？
有，但是仅仅只是行内样式具有较高的优先级。内部样式表和外部样式表不存在优先级关系。当选择器权重相同时，后写的覆盖先写的.(权重相同，谁距离html近，谁优先生效）
link和@import的区别
1.link是css提供的一种方式,import是css提供的方式
2.link引用CSS时候,页面载入的时候同时加载,@import需要页面网页完全载入后加载
3.link是XHTML标签,没有兼容问题,@import在CSS2.1提出的,低版本的浏览器不支持
4.link支持使用javascript控制DOM去改变样式,但是@import不支持
4.css的基本结构
CSS语法： 选择器{声明;声明;声明;}
——选择器 告诉文件我们要去修饰谁（修饰的目标）
——声明 属性:属性值;
规律总结：
<1>css由选择器和声明组成，选择器写在{}之前，声明写在{}之内，可以写多个声明，用";"间隔开
<2>声明由属性和属性值组成，属性和属性值之间用":"号连接，用分号结尾。
5.几个简单的css属性
color 字体颜色
background-color 背景颜色
6.css生效优先级
在一个html中，可以引入多个css文件，当多个选择器选中同一个目标时，在给这个目标写同一个声明，权重相同的情况下，后写的覆盖先写的。
7.css选择符（选择器）
<1>标签选择器
例：p{color:red;}
<2>id选择器 #
特点：id名具有唯一性，一个页面中，不能够出现两个相同的id名。
案例： #box{color:red;}
<p id="box">我id叫做box</p>
注意事项：一样的id名，在css中没啥影响，在js中问题较大，不要给自己挖坑，
如果需要两个名字一样，去用class选择器，别用id选择器。
<3>class选择器（类选择器） .
特点:class选择器在一个页面中可以使用任意次相同的class名。
案例: .box1{color:yellow;}
<p class="box1">我class叫做box1</p>
<p class="box1">我class叫做box1</p>
<4>群组选择器 ,
特点：群组选择器用","号隔开各个选择器相当于给不同类型的选择器临时拉了一个分组。用来写共同样式。
案例: #box,.box1,p{background-color:yellow}
<h4 class='box1'></h4>
<h2 id='box'></h2>
<p></p>
<5>通配符 *
特点：可以选中页面中的所有元素，但是显示优先级比较低。任何一个选择器都能够把他覆盖掉；
案例： *{margin:0;padding:0;} //作用是清除所有元素默认的填充和间距
<6>包含选择器 选择器1 选择器2{}
特点：选中选择器1下边所有层级中的选择器2
案例: ul li{color:red;}
<ul>
<p>我是走错门的p标签</p>
<div>我是一个div
<li>我是div里边的li</li>
</div>
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
</ul>
<7>伪类选择器
特点：当元素处于某种状态下，被选中
:link 超链接初始状态
:visited 超链接访问后的状态
:hover 元素鼠标悬停时的状态
:active 超链接被激活时的状态
注意：
(1）hover除了可以写给a标签之外，其他标签也可以使用。
（2）超链接写这些伪类状态时，需要保持link——visited——hover——active的顺序（lvha驴哈）。
8.选择器权重
作用：当多个选择器选中同一个元素，并且都为其定义了相同属性的样式，权重较高的一项优先生效。
css权重用四位数字表示 0 0 0 0;
!important 加权重，不管其他你怎么写，我权重最大
行内样式 1000
id选择器 0100
class选择器 0010
标签选择器 0001
通配符 0~1之间
包含选择器 选择器中各个选择器权重相加之和
群组选择器 群组选择器权重各算各的
总结：
<1>写css时,若多个选择器选中同一个元素,并为其添加相同属性时,谁权重大谁优先生效
<2>在权重相同时，谁距离代码近谁优先生效。
一、文本属性
1.字体大小 font-size
(1)默认字体大小为16px
(2)最小字体大小为12px
(3)设计师在设计图纸时，字体大小一般会设计为双数。
(4)关于单位：单位除了px之外还有百分比、vh、vw、em、rem、pt
(5)补充 em为相对父元素字体大小
2.字体类型 font-family
(1)字体类型可以设置多种，每种字体类型之间用","隔开，计算机从左往右依次识别，
能识别哪个就用哪个，如果都不识别，就是用计算机默认字体。
(2)window默认字体为微软雅黑。
(3)如果字体名称为中文或者由多个英文单词组成时，需要加引号。
3.字体颜色 color
自然界三基色 红、黄、蓝
计算机三基色 红、绿、蓝
属性值取值：
英文颜色单词
#开头16进制颜色 0-9 a-f #ff0000 #f00
rgb颜色取值 rgb(0-255,0-255,0-255) 分别代表红、绿、蓝三个色域
4.字体粗细 font-weight
取值 100-900
300 细体
400 默认粗细 normal
700 加粗 bold
900 极粗 bolder
5.文本倾斜 font-style
取值 italic 斜体字
*oblique 字体倾斜
*normal （默认值）取消倾斜，常规显示
6.水平对齐方式 text-align
取值 center 居中
left 左对齐
right 右对齐
justify 两端对齐
注意：justify对中文无效，而且需要在多行内容时，才能看出来效果,最后一行不适用两端对齐。
7.行高 line-height
含义：单行文本的高度，文字会出现在行高的中间。
注意：我们可以借助文字会出现在行高的正中间的特性来实现垂直居中的效果。
但是，此方法仅适用于单行文本。
8.文本修饰属性 text-decoration
取值 *none 取消文本修饰
underline 添加下划线
overline 添加上划线
*line-through 添加删除线
9.首行缩进 text-indent 支持负数
10.宽 width 11.高 height
CSS 继承
指我们设置上级(父级)的CSS样式，上级（父级）及以下的子级（下级）都具有此属性，一般只有文字文本具有继承特性，如文字大小(font-size)、文字加粗(font-weight)、文字颜色(color)、字体(font-family)等。
样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上
继承是发生在祖先后后代之间的
继承的设计是为了方便我们的开发，利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，这样只需设置一次即可让所有的元素都具有该样式。
注意，并不是所有的样式都会被继承，
比如 背景相关的，布局相关的等这些样式都不会被继承。
二、复写属性：
1. font复合属性：font:weight style size/line-height family;
补充：font的复写属性中，字体类型和字体大小无法省略，所以不是特别好用，一般不推荐使用。
2. list-style:none 取消列表的默认样式
list-style-type
list-style-image
list-style-position
三、边框 border
哪些设置可以去掉边框？border:0;和border:none;
1.复写属性 border
(1)案例：border:10px solid #000; 四条边10像素宽度、实线黑色边框
(2)结构：border: 线宽 线型 颜色;
<1> border-width 线宽
<2>border-style 线型
solid 实线
dashed 虚线
double 双线
dotted 点划线
none 取消边框
<3>border-color 线色
(3)单一方向边框
border-left 左边框
border-right 右边框
border-top 上边框
border-bottom 下边框
(4)border-width、border-style、border-color可以定义多个属性值
一个值 上下左右四条边样式
两个值 上下、左右
三个值 上、左右、下
四个值 上、右、下、左
总结：按照顺时针渲染
四、背景属性 background
1.背景色 background-color
取值 颜色单词、#16进制颜色、rgb()颜色
2.背景图 background-image
不支持透明的图片格式是jpg
案例:background-image:url(../images/pkq.jpg);
特点：
(1)当同时使用背景图和背景色时，背景色在下层，背景图在上层。背景图盖着背景色
(2)当背景图比元素大时，背景图会被裁切显示
(3)当背景图比元素小时，背景图会平铺显示
3.背景图是否平铺 background-repeat
取值 repeat 平铺（默认值）
no-repeat 不平铺
repeat-x 沿x轴平铺
repeat-y 沿y轴平铺
4.背景图定位 background-position
有两个参数 第一个参数控制x轴水平位置，第二个参数控制y轴垂直位置
第一个参数 正数向右，负数向左
第二个参数 正数向下 负数向上
(1)可以只写一个参数，当只写一个像素参数时，默认是x轴的参数，Y轴参数补全一个center;
(2)当参数是关键字时，另外一条轴补全一个center
参数取值
(1)像素
(2)关键词 left/center/right top/center/bottom
5.背景图大小 background-size
用法一：跟两个属性值，一个代表占据元素宽度，一个代表占据元素高度,
但仅写一个值时，默认为宽度大小，高度随着宽度等比放大缩小。
用法二：cover、contain 可将背景图满屏显示,不会使图片变形
cover 满屏，但是会以图片较短边为基准放大缩小，容易出现裁切。
contain 满屏，以图片较长边为基准放大缩小，容易出现留白平铺的情况。
100% 满屏，但是会改变图片的宽高比例，会拉伸图片
6.背景图的固定background-attachment
fixed固定 scroll滚动(默认值)
特点：仅对背景图有效，fixed时，背景图会固定到屏幕的摸个位置，不随元素进行滚动。当超出元素范围时，不显示。
7.复写属性
(1)结构 background:颜色 图片地址 是否平铺 固定或滚动 位置/大小;
二、浮动 float 让竖着的元素横着显示
1.常用的p标签、div标签、h系列标签等等这些默认独占一行的元素，在不写宽度时
宽度默认100%，写宽度时，宽度写多少显示多少，但仍旧独占一行，有剩余空间，
空着也不和其他元素并排显示。
2.float属性可以改变元素之间的位置关系,使原本默认独占一行并且纵向显示的元素，变得根据大小决定占据多大空间，并且横向显示。
3.属性值
left 左浮动， right 右浮动， none 不浮动
4.浮动特点：
1.根据属性值决定向哪边浮动，让竖着的元素横着显示，父元素放不下才会换行。
2.元素浮动后，会半脱离文档流（元素脱离但文字内容无法脱离）
3.浮动元素只会对同级的后边的元素造成影响。
5.注意：
(1)一般我们用浮动的话，同级元素要浮动最好都浮动，不浮动都别浮动。
(2)浮动为半脱离文档流。
(3)添加浮动后，改变元素在父元素中的位置。
(4)父元素不写高度，子元素浮动会造成高度塌陷。（现阶段不要忘记给父元素写高度）
6.清除浮动 clear
清除浮动是为了解决浮动带来的负面影响
left清除左浮动影响 right清除右浮动影响 *both清除两侧浮动影响
注意:写给浮动元素后边的元素，使当前元素不受上边浮动元素的影响。
7.关于元素默认宽度和默认高度
独占一行的标签（div、h1-h6、p、ul、li、ol）常态下默认宽度为100%,高度由内容撑开。
以上标签在浮动状态下，默认宽度由内容撑开，默认高度也由内容撑开。
三、盒模型
1.盒模型的组成：外边界/外边距 margin、边框 border、内间距/内填充 padding、内容区域(content)
2.标准盒模型
组成结构 content+padding+border+margin
宽度计算: content(width)+2*padding+2*border
高度计算： content(height)+2*padding+2*border
3.padding 内间距、内填充
(1)在内容区域和border之间,作为填充和内容区域背景保持一致。但是子元素和内容不会出现在padding中
(2)用途：
——用来确定盒模型边界和文字内容区域之间的间距
——给父元素写padding，用来确认子元素和父元素之间的间距
(3)其他属性
padding-top 上填充
padding-left 左填充
padding-right 右填充
padding-bottom 下填充
(4)关于取值
一个值 四个方向填充
二个值 上下填充、左右填充
三个值 上填充、左右填充、下填充
四个值 上、右、下、左
(5)padding容易出现理解误区的内容
<1>在使用padding确认此元素和子元素之间的位置关系时，如果需要此元素大小保持不变，只是让子元素位置变动，需要怎么办？
答:给父元素添加padding时，会改变父元素的大小。如果想要让父元素大小保持不变,
需要在父元素原本的宽高上减去我们需要添加的padding大小。
<2>padding添加给谁，改变谁的大小，并不会撑大父元素,只是说在父元素中多占了一部分空间。
<3>margin可以给负值，padding不可以
4.margin
(1)在border之外，用来确认两个元素之间或者父元素和子元素之间的位置关系。
(2)其他属性
margin-top
margin-bottom
margin-left
margin-right
(3)参数取值
一个值 四个方向间距
二个值 上下间距、左右间距
三个值 上间距、左右间距、下间距
四个值 上、右、下、左
(4)特点：
<1>在写四个方向上的margin时，未浮动状态下,margin-right某些时候可能会因为右侧没有参照物而看不到效果，但是实际上也是生效的。只要有参照物，即可看到。
<2>两个元素的上下margin会重叠显示，以较大的间距为准来显示。
<3>两个元素的左右margin会相加显示。
<4>父元素下的第一个子元素添加margin-top时，会出现在父元素身上。
解决:
1.给父元素添加padding来确认和子元素位置关系不给第一个子元素写margin-top
2.给父元素添加overflow:hidden;(后边讲原因)
3.父元素添加float也可以解决这个问题，但是float会改变位置。不建议主动添加。
4.给父元素设置边框线border
(5)margin的左右居中 auto;
margin:0 auto; 元素距离上下为0，左右自适应。
5.确认父元素和子元素之间的位置关系
1）给父元素添加padding,使子元素出现在被挤压后的内容区域内，从而改变位置关系。
2）给子元素添加margin,来确认子元素和父元素之间的间距，从而改变位置关系。
1 .怪异盒模型
- 什么是怪异盒模型？
在浏览器页面中，我们日常使用的盒模型结构为标准盒模型，但是在某些低版本ie浏览器中，他的盒模型结构为怪异盒模型。
(2)如何将标准盒模型变为怪异盒模型？
box-sizing:border-box;
(3)标准盒模型和怪异盒模型差异：
怪异盒模型的padding和border算在width之内,简单的说怪异模型中，width外边直接是margin
怪异盒模型 实际宽度=width=content+padding*2+border*2
标准盒模型padding和border出现在width之外
标准盒模型 实际宽度=width(content)+padding*2+border*2
2.单行文本溢出显示省略号
(1)overflow 溢出属性
visible 默认值（显示）
*hidden 溢出隐藏
overflow:hidden可以用来解决高度塌陷，margin-top出现在父元素身上的问题
scroll 出现滚动条
*auto 溢出显示滚动条,没有溢出则不显示
inherit; 继承父元素，父元素写什么overflow属性，他就是什么效果
(2)空余空间 white-space
normal（默认值）多个空格时，只识别一个空格，不识别换行，文字到达边界自动换行。
*nowrap 多个空格时，只识别一个空格，不识别换行，文字到达边界也不换行。
pre 识别全部空格，识别换行。但是到达边界后，不会自动换行
pre-wrap 识别全部空格，识别换行。但是到达边界后，自动换行
pre-line 多个空格时，只识别一个空格，识别换行，文字到达边界自动换行
inherit 继承父元素，父元素什么效果，他什么效果
(3)text-overflow（单独使用无效）
clip 默认值，不显示省略号（...）;
ellipsis 显示省略标记；
(4)单行文本溢出显示省略号
当单行文本溢出显示省略号需要同时设置以下声明：
1、容器宽度：width：200px；
2、强制文本在一行内显示:white-space：nowrap;
3、溢出内容为隐藏：overflow：hidden；
4、溢出文本显示省略号：text-overflow：ellipsis;
5.版权符 ©
FORE
一、元素类型
1.块元素 block
特点:(1)默认独占一行，纵向显示
(2)可以定义宽和高
(3)一般作为盒子使用，用来容纳其他元素（块元素、内联元素、内联块元素）
常见标签：div、h1-h6、p、ul、li、ol、dl、dd、dt
注意事项：p标签只能用来容纳内联元素和内联块元素，不能作为块元素的父元素2.内联元素(行内) inline
特点：(1)默认不独占一行，横向显示，放不下了才换行
(2)默认不可以定义宽和高
(3)内联元素可以定义padding、border、margin等属性，但是这些属性的上下值只有视觉效果,没有布局效果。
常见标签：i、em、b、strong、s、del、u、a、span
3.内联块元素(行内块) inline-block;
特点:(1)默认不独占一行，横向显示，放不下了才换行
(2)可以定义宽和高
(3)基本上内联块元素都带有自身的默认大小
常见标签：img、input、textarea(文本域)、select(下拉框)
二、元素类型转换 display
1.属性值
block 块元素
inline 内联元素
inline-block 内联块元素
none 元素隐藏
注意：
(1)在使用display:none;我们一般不会写划过自身，让自身消失的效果。
(2)display:none使元素消失，若想要让元素出现，只需要类型不是none即可。
2.其他属性
flex 弹性盒 （第三周最后一天讲）
grid 网格布局 （第四周考前一天讲）
3.不常用属性
list-item:列表项，将元素转换成列表。li的默认类型。
table：以表格形式显示 table表格的默认类型。
table-row：以表格行形式显示 tr表格的行的默认类型。
table-cell：以表格列形式显示 td表格的列默认类型。
4.css中存在的元素类型隐式转换
(1)float 会将元素标签转换成块元素
(2)position (定位，明天讲)
(3)display:flex (第三周最后一天讲)
三、inline-block元素特点：
1.对齐方式 inline-block元素对齐方式不太整齐我们可以通过vertical-align进行调整
(1)vertical-align 取值
top 顶线对齐
middle 中线对齐
baseline 基线对齐（默认值）
bottom 底线对齐
2.三像素间距问题
块元素和内联块元素之间存在这三像素间距。
解决：
(1)问题原因是出在元素类型上，直接将内联块转为块元素。display:block.
(2)给内联块元素设置不是默认值的vertical-align:top/bottom/middle属性。
3.标签内文字和图片对齐方式是不一样的，那么我们如何将他们在行高内对齐呢？
答：给标签写个行高，然后给图片设置一个vertical-align:middle;
四、置换元素和非置换元素
置换元素概念：内容不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，一般拥有固有尺寸，
没有实际的内容，浏览器根据元素的属性和属性值，来决定元素的具体显示内容，大部分的置换元素的元素类型为行内块inline-block。
非置换元素：HTML中除了可置换元素外，其它都是非置换元素。
FIVE
一、定位属性 position
1.static (默认值)无特殊定位
*2.relative 相对定位
相对自身原有的位置进行定位，根据偏移量进行位移。不脱离标准文档流，元素仍在原本的位置占据空间
*3.absolute 绝对定位
相对于自身的定位父级(包含块)进行定位。完全脱离文档流，元素不占据原本的位置空间，根据偏移量进行位移。
4.fixed 固定定位
依照浏览器窗口可视区域进行定位。不随滚动条滚动，脱离文档流
5.sticky 粘性定位
不脱离文档流，在文档中仍占据原本空间。针对于距离自身最近的滚动元素进行定位。
在达到临界值之前，正常显示。到达临界值后，出现吸附效果。
二、偏移量
top 上
left 左
right 右
bottom 下
注意：top和bottom同时存在是，top优先生效
left和right同时存在时，left优先生效
三、定位层级 z-index
特点：
1.定位元素会遮盖未定位元素，如果都定位了，后写的元素会遮盖先写的元素
2.z-index 默认值auto 后写的定位元素层级顺序靠上
3.取值：number(数字) 数字越大，层级越靠上（1.数值为整数2.数值也可以为负）数字后面不能加单位
4.z-index仅对定位元素有效
Position定位属性设置absolute,relative,fixed属性值,添加z-index属性会有效
四、包含块(定位父级)
1.作用：给绝对定位提供坐标参考，是绝对定位的参照物。
2.包含块和绝对定位的应用:绝对定位会一层一层向上寻找包含块，
如果父元素是包含块，就针对于父元素进行定位。
如果父元素不是包含块，则会继续向上级寻找，直到找到body为止。
3.如何成为包含块：设置了定位属性(relative、absolute、fixed、sticky)的元素都是包含块。
4.既然很多种方法都能成为包含块，为什么主要使用relative;
答：子绝父相，其他定位方式都具有一些特性，就算不设置偏移量也会对父元素造成影响，relative不具有这些额外特性。在父元素不需要定位时，不会对父元素造成影响。
五、定位属性和float之间的区别
1.absolute定位属性完全脱离文档流，float属性半脱离文档流
absolute定位属性脱离文档流后，文字内容也会跟着脱离
float脱离文档流后，文字还留在原本的位置上。
2.浮动和absolute定位都能够改变元素的位置关系，absolute定位相对来说更加精确和灵活。但是定位会产生覆盖。
3.什么时候用定位什么时候用float呢？
一般情况下都使用float,但是如果出现发生覆盖的场景，则使用定位，能用浮动就不要用定位。
六、关于定位的拓展
*1.元素在父元素水平垂直居中
方法1:
(1)给父元素添加position:relative;
(2)给子元素添加position:absolute;
(3)给子元素设置top:50%;left:50%;
(4)给子元素设置margin-left:负的二分之一子元素宽度;margin-top:负的二分之一子元素高度;
方法2:
(1)给父元素添加position:relative;
(2)给子元素添加position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
*2.元素在页面可视区域内水平垂直居中
方法1:
(1)给元素添加position:fixed;
(2)给元素设置top:50%;/left:50%;
(3)给元素设置margin-left:负的二分之一元素宽度;
margin-top:负的二分之一元素高度;
方法2: 给元素添加以下属性
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
3.父元素子元素在父元素中垂直、水平居中
display:flex;
justify-content:center；
align-items:center，
子元素自动居中 （伸缩盒布局）
4.自适应元素定位问题
自适应元素设置相对定位：宽度仍然是百分百，定位生效
自适应元素设置绝对定位：宽度由内容区域撑开，定位生效。
七、锚记(锚点)
作用：在同一页面内的不同位置进行跳转。或者跳转到某个页面的某个id位置。
用法：
（1）给锚记目标元素标签起一个id名 <div id='xxx'></div>
(2)给a标签的href属性绑定这个id名 <a href='#xxx'>去锚记的地方</a>
八、透明
（1）opacity 元素透明
含义：元素标签及其子元素整体透明
取值 0-1 0代表全透明 1代表不透明
opacity:0和display:none的区别：
display:none;为消失，元素在页面中不再占据空间。
而opacity:0;只是完全透明了。仍在占据空间位置
注意：IE8及以下版本不支持opacity属性
（2）rgba() 颜色透明
rgba中的rgb分别代表红、绿、蓝三个颜色的色域，取值范围为0-255之间的整数
a代表透明度，取值范围为0-1之间
注意：IE8及以下版本不支持rgba()属性
IE9及以下版本写透明使用filter:alpha(opacity=value); value取值范围为0-100之间
SIX
一、表格
1.概念：
(1)作用：用来展示数据
(2)用途：多用于后台管理系统。
(3)基本结构
<table> 表格
<tr> 行
<td>1-1</td> 单元格
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</table>
(4)标签
1.table 表格
2.tr 行
3.td 单元格
2.表格标签及属性
table 所支持的标签属性
1.border 边框粗细（默认没有边框）
给单元格和表格加边框，可以写不同宽度来改变"表格"边框的宽度
2.bordercolor 边框颜色
3.width 宽度 支持数值，不需要带单位(默认为px像素单位)，也可以写百分比
height 高度 支持数值，不需要带单位(默认为px像素单位)，也可以写百分比
4.align 表格位置 left/center/right 靠左/居中/靠右
5. bgcolor 表格背景色
6.cellpadding 单元格内填充
7.cellspacing 单元格外间距
8.*rules 表格内边框的线型 all 全线型 /cols竖线线型/ rows横线线型
2.tr 所支持的标签属性
tr标签所支持的标签属性
1.height 单行高度
支持数值，不需要带单位(默认为px像素单位)，也可以写百分比
2.align 单行文字水平对齐方式
left(默认值)/center/right 左对齐/居中/右对齐
3.bgcolor 单行背景色
4.valign 单行文本垂直对齐方式
top/middle(默认值，居中)/bottom 靠上/居中/靠下
3.td 所支持的标签属性
td标签所支持的标签属性
1.width 列宽度,如果此列给多个td写列宽度，则最大的生效
支持数值，不需要带单位(默认为px像素单位)，也可以写百分比
2.height 行高度,如果此行给多个td写行高度，则最大的生效
支持数值，不需要带单位(默认为px像素单位)，也可以写百分比
3.align 单个单元格水平对齐方式
left/center/right 靠左/居中/靠右
4.valign 单个单元格垂直对齐方式
top/middle/bottom 上/居中/下
5.bgcolor 单个单元格背景色
*6.rowspan 合并行 （纵向合并）
合并n行时，需要将此行下侧对应n-1行中，分别删除一个td
*7.colspan 合并列 （横向合并）
合并n列时，需要删除此单元格后对应的n-1个单元格
注意：在合并行和合并列时，如果某行或者某列从来没有单独存在过，
那么这一行或者这一列则不再占据表格空间。如果需要解决此bug,
需要给td单独设置大小。
注意：在写表格时，有内容的单元格会占据更多的空间，从而挤压没有内容的单元格。这个时候可以定义一下单元格大小。
3.表格中的css属性
(1)border-collapse 是否合并边框线，写给table
*collapse 合并
separate 不合并
(2)border-spacing 单元格外间距
(3)empty-cells 是否隐藏空白单元格
hide 隐藏
show 显示(默认值)
(4)table-layout 表格布局算法（是否自适应空间宽度
auto(默认值) 根据内容自动分配宽度，元素不会超出单元格
fixed 根据table宽度平均分配每个单元格宽度
4.表格补充标签
(1)表格行分组
thead 表格标头 可以不写
补充thead中一般使用th，th代表表格标题的含义，自带加粗和水平居中。
tbody 表格主体，一个表格中存在一个，就算不去写，表格也会补全出来
tfoot 表格尾部 可以不写
(2)表格列分组
标题
colgroup 表格列分组
属性
span 将几列分为一组
(3)caption 表格标题，需要放在table里边
二、表单
1.作用:收集用户数据信息
2.表单标签
(1)form 表单
——method 请求方式
*get
*post
put
delete
——action 接口地址
(2)表单控件
<1>input
——name 传递参数时的参数名
——value 在按钮身上为按钮上的文字，在输入框中，为输入框默认内容，
总结：value最主要的作用为提交数据时，提交的内容。在输入框中，value可以被我们输入的内容改变。
——placeholder 输入框没有内容时的提示文本信息
——type 决定此input控件具体是什么
属性值 text 文本框
password 密码框
submit 提交按钮
reset 重置按钮
button 普通按钮
file 文件框
color 拾色框
radio 单选框
checkbox 复选框
<2>select 下拉列表（需要配合option使用）
option 为下拉列表中的列表项
<3>textarea 文本域
支持resize属性
resize:none 禁止缩放（不可调动）
3.绑定表单提示信息 label
案例：
<label for="xx">账号：</label>
<input type="text" id="xx">
展示效果为————点击“账号”二字，input获取到光标。
使用：<1>给表单控件起一个id名
<2>把id名写在label的for属性的属性值中
4.补充标签
fieldset 表单字段集
legend 字段集标题
写在form内，对form内的表单控件进行分类。
lengend需要写在fieldset里边
619
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
