01-div和span

div
划分模块
双标签
独占一行
span
划分模块
双标签
不独占一行

02-表单

表单 收集用户信息
表单域
form
action 数据提交的地址
数据提交后跳转的地址
method 数据提交的方式
get 默认 明文直接展示在地址栏上
post
get和post的区别
1. get用来获取数据 获取列表 获取详情
post 用来发送数据 发送消息 发送表单数据
2. get发送的数据会明文展示在url, 相对不安全
post发送的数据会放在请求头中
3. get发送的数据有大小限制，post没有
表单控件
input
type 表单控件的类型
文本输入框
type =’text’
value 文本输入框的初始值
placeholder 文本输入框没有值的时候的提示文字
maxlength 文本输入框最大输入长度
name 文本输入框的表标识
密码输入框
type=’password’
value 密码输入框的初始值
placeholder 密码输入框没有值的时候的提示文字
maxlength 密码输入框最大输入长度
name 密码输入框的表标识
提交按钮
type = ‘submit’
value 提交按钮的文字
重置按钮
type = ‘reset’
value 重置按钮的文字
普通按钮
type =’button’
value 普通按钮的文字

03-css介绍及语法

css 网页的表现
层叠样式表 级联样式表
css语法
选择器 声明
选择器： 要添加样式的对象
声明：属性 属性值
选择器 {
属性: 属性值;
属性1: 属性值1;
}

1. 先写html， 再写css
2. 选择器和花括号，属性和属性值之间的空格，回车可以被忽略
3. 所有的符号都是英文
4. 只有最后一条声明可以不写分号

css样式表
- 内部样式表
在html文件中head标签里面的最下面用style标签书写样式
- 外部样式表
1. 需要在外部新建一个css文件，在里面书写代码
2. 和html文件建立联系
- 在html文件中head标签里面的最下面用link标签的href属性引入
rel = ‘stylesheet’ 关联外部样式表
- 在html文件中head标签里面的最下面用style
@import url(); 引入
* link和@import的区别
1. link是html提供的方式，@import是css提供的方式
2. link引入的文件是边下载边加载， @import引入的文件下载后再加载
3. link引入的文件可以被js操作，@import不可以
- 内联样式表 行内样式表
在标签中用html属性style书写样式，属性值是css代码
<标签名 style=’属性: 属性值; 属性: 属性值;’></标签名>

04-选择器权重及伪类选择器

选择器权重
内联样式表 id选择器 class选择器 标签选择器 通配符
1000 0100 0010 0001 0000
!important 权重10000
继承的样式权重 0
包含和子代权重相加
群组选择器权重看自身
伪类选择器权重10

伪类选择器
:link 超链接未访问
:visited 超链接访问过
:hover 鼠标移入
:active 鼠标按下
:focus 元素获取焦点（只有input和a标签才能使用）
:link :visited :hover :active同时使用有先后顺序，
顺序 爱恨原则 love-hate

05-背景图属性总结

background:
background-color 颜色
默认 透明色transparent
background-image 背景图
默认 none
url()
background-repeat 背景图平铺
默认 repeat
no-repeat
repeat-x
repeat-y
background-position 背景图定位
默认 0 0 left top
水平 垂直
数值
百分比 容器的大小 - 图片的大小
方位词
background-attachment 背景图固定
默认 scroll
fixed 固定在浏览器左上角
background-size 背景图大小
默认 auto auto 图片的尺寸
写法一 宽度 高度
数值
百分比 参考容器的大小
auto 默认
写法二
contain 适配最短边 图片不变形
cover 适配最长边 图片不变形
简写
background: 颜色 图片 平铺 定位/大小 固定
img和背景图区别
- 背景图用于不变的图片 小图标
- img 用于会变化的场景 商品图 轮播图， 超出容器边界仍然可见的图片
精灵图 雪碧图 sprite
原理： 通过背景图定位的方式实现不同图片的展示
优点：
1. 节省图片体积
2. 节省网络请求
png jpg gif
1. png gif 支持透明色
2. png 适合色彩单一 jpg适合彩色丰富的图片

06-边框属性

边框
边框颜色
边框宽度
边框样式
默认为none
solid 实线
dashed 虚线
dotted 点线
double 双实线
单边边框的单一属性
border-方位词(top/right/bottom/left)-属性(color/style/width)
下边框的宽度
border-bottom-width
单边边框的综合写法
border-方位词(top/right/bottom/left): 颜色 宽度 样式
1-4边边框的单一样式
border-属性(color/width/style)
一个值 四边
两个值 上下 左右
三个值 上 左右 下
四个值 上 右 下 左
四边边框的综合写法
border: 颜色 宽度 样式

三角形
1. 元素宽高设置为0
2. 设置四边的边框
3. 去掉不要的边框的颜色,保留需要的边框的颜色