day21总结

1.表单标签(form)
专门用来进行用户信息收集的一个标签，一般要结合表单相关的标签来使用才有意义。
表单相关标签：input、select、textarea等。
主要提供form中子标签的内容的提交和重置功能
1）action属性：提交路径(接口)
2）method属性：提交方式(post/get)
2.input标签
input标签是表单相关标签，可以在form标签中使用，也可以单独使用
1）type
input标签会因为type的不同，功能完全不一样
2)name - 区分；提交（相当于的字典的key）
要不要给这个属性赋值，主要看：1）需不要区分不同的内容 2)需不需要提交这个input标签的值
3)value
value的意义会根据type值的不同而不一样；但是表单提交的时候提交的都是value的值
1)文本输入框 - text
a. value属性 - 给这个属性赋值是在设置输入框的默认值; 修改输入框中的内容，会改变这个属性的值
b. placeholder - 输入框为空的时候的默认显示信息
c. maxlength - 输入框最多能输入的内容的长度
2)密码输入框 - password
a. value属性 - 给这个属性赋值是在设置输入框的默认值; 修改输入框中的内容，会改变这个属性的值
b. placeholder - 输入框为空的时候的默认显示信息
c. maxlength - 输入框最多能输入的内容的长度
3)单选按钮 - radio
a. name属性 - 如果多个选项是一组数据必须保证它们的name属性值一样才能做到多个选项单选
b. value属性 - 不能显示，只能用来提交的
c. checked属性 - 给这个属性赋值为checked让按钮处于默认选中状态
补充: 可以通过将label的for属性和input的id属性保持一致，让label和input进行关联
4)复选按钮 - checkbox
a. name属性 - 如果多个选项是一组数据必须保证它们的name属性值一样
b. value属性 - 不能显示，只能用来提交的
c. checked属性 - 给这个属性赋值为checked让按钮处于默认选中状态
5)普通按钮 - button
value属性 - 按钮上显示的内容
补充：button标签
6)重置按钮 - reset
重置当前重置按钮所在的form标签中的所有的相关标签的值
7)提交按钮 - submit
以‘name=value’的方式提交当前form标签的内容
1.下拉菜单
select标签 - 整个下拉列表
option标签 - 列表中的选项
optgroup标签 - 一个列表选项分组，通过label属性值来设置分组名
(只是在显示上对选项进行分区，不影响提交结果)
2.多行文本域 - textarea
提供一个可以换行输入的输入框
rows属性 - 行数，影响输入框的默认高度
cols属性 - 列数, 影响输入框的宽度
maxlength属性 - 输入的内容的最大长度
autofocus属性 - 值设置为autofocus,页面刷新和加载的时候自动成为焦点
div标签和span标签都是无语义标签,
使用div一般用于对网页中的内容分块和分组
1.什么是CSS
CSS又叫样式表(层叠样式表),是web标准中的表现标准，专门用来针对网页中内容的布局和样式
现在绝大部分使用的是CSS3
2.怎么写CSS
1）.语法
选择器{属性1:属性值1;属性2:属性值2}
2）.说明
a.选择器 - 选中需要设置样式的标签; 在内联样式表中选择需要省略
b.{} - 固定写法
c.属性 - 属性是以'属性:属性值'的形式成对儿出现，多个属性要用分号隔开
d.值 - 如果是数字表示大小，数字后边必须加单位: px(像素), em(空格数)
颜色值: 颜色的英文单词、#十六进制颜色值、rgb(r,g,b)、rgba(r,g,b,透明度)
rgb颜色: r-red(0-255), g-green(0-255), b-blue(0-255)
rgb(255,0,0) == #ff0000 == red
rgb(0,255,0) == #00ff00 == green
rgb(0,0,0) == #000000 == black
rgb(255,255,255) == #ffffff = white
透明度 - 0(完全透明)~1(完全不透明)
3.写在哪儿
1)内联样式表: 将样式写在标签的style属性中
只作用于一个固定的标签
2)内部样式表: 将样式写在style标签中
作用于当前html中所有标签
3)外部样式表: 将样式写css文件中，然后在html中通过link标签导入
可以作用于所有的html中的所有标签
复用性: 外部>内部>内联
优先级: 内联样式表的优先级不管什么情况都是最高、内部和外部的优先级看顺序，谁后写谁优先级高
4.常见属性
color : 设置标签中的字体颜色
background-color : 设置标签的背景颜色
font-size : 字体大小
width : 标签宽度
height : 标签高度
1.什么是选择器
通过选择器选中标签
2.选择器的写法
1)元素选择器(标签选择器)
直接将标签名作为选择器, 选中当前html中对应的所有标签。
例如: a{} - 选中当前html中所有的a标签
2)id选择器
(所有标签都有一个id属性，值自己设置，但是要保证一个html中id值唯一)
将标签的id属性的值前面加#作为选择器, 选中id属性值是指定值的标签
例如: #a - 选中当前html中id值是a的标签
3)类选择器(class选择器)
将标签的class属性的值前面加.作为选择器, 选中class属性值是指定值的标签
例如: .a - 选中当前html中class值是a的所有标签
4)通配符
将*作为选择器，选中当前html中所有的标签
5)群组选择器
将多个选择器用逗号隔开来作为一个选择器，选中每个独立选择器对应的标签
p,a{} - 选中所有的p标签和a标签
div,#a{} - 选中所有的div标签和id值是a的标签
#p1,.c1,.c2{} - 选中id值是p1，class值是c1和c2的所有标签
6)后代选择器
将多个选择器用空格隔开来作为一个选择器
div p{} - 选中所有div标签中的p标签
class属性:
1.一个html中相同的class值可以有多个
2.同一个标签的class属性值可以多个(多个之间用空格隔开)
1.伪类选择器
普通选择器选中的是html中不同的标签；伪类选择器选中的是标签的不同状态
2.语法
普通选择器:状态{属性1:属性值1;属性2:属性值2;...}
1)link - 初始状态,对于a标签来说，link对应的状态是a标签中的连接从来没有成功访问过;(一般只在a标签进行设置)
2)visited - 超链接成功访问过的状态
3)hover - 鼠标悬停在标签上对应的状态（不只针对超链接，其他标签也常用）
4)active - 鼠标按住标签不放对应的状态(主要作用在超链接和按钮)
3.选择器的权重值
权重越大优先级越高, 但是内联样式表的优先级永远最高
元素选择器的权重: 0001 == 1
class选择器的权重: 0010 == 2
id选择器的权重: 0100 == 4
伪类选择器的权重: 0001 == 1
群组选择器的权重: 看单独每个选择器的权重
后代选择器的权重: 所有选择器的权重之和
1.什么是标准流
在没有给标签通过CSS布局的时候，标签在浏览器中有一套默认的布局规则，这个规则就是标准流布局
2.标准流布局规则
1)块级标签 : 一个占一行(不管标签本身的宽度)；设置宽高有效；默认宽度是父标签的宽度，默认高度是内容的高度
例如：p,h1-h6,hr,div....
2)行内标签 : 一行可以有多个；默认大小是内容的大小；设置宽度无效
例如：a,font,label,span
3)行内块标签 : 一行可以显示多个；默认大小是内容的大小；设置宽度有效
例如: input,button,img
3.display属性
block - 块级标签
inline - 行内标签
inline-block - 行内块
none - 隐藏
4.脱流/脱标
只要标签脱流,标准的流的规则全部失效；不管什么样的标签在脱离标准流的情况下都是按照以下规则进行布局：
一行可以显示多个；默认大小是内容的大小；设置宽度有效
浮动和定位都可以让标签脱流
1.float属性
left(左浮动)
right(右浮动)
浮动内容环绕现象:
被环绕标签浮动，环绕的内容的容器标签不浮动
无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”。
显然标准流已经无法满足需求，这就要用到浮动。
浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。
1.什么是浮动元素的脱离文档流?
首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的标准流（网页的正常排版顺序）。
脱离文档流: 就是脱离正常的网页排版顺序。成为浮动流（浮动后的元素就是浮动流）。
简单来说当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是脱离文档流。
1.清除浮动：
清除浮动是清除因为浮动而产生的高度塌陷的问题。
1）高度塌陷
当父标签不浮动，并且不设置固定高度；子标签浮动就会产生高度塌陷的问题
2)清除浮动的方法
a.空盒子法: 在高度会塌陷的标签的最后添加一个空的div,并且设置这个空的div的样式的clear属性为both
b.设置高度会塌陷的标签的样式的overflow属性为hidden
c.万能清除法: 给高度会塌陷的标签的after状态添加样式{display:block;clear:both;content:"";visibility:hidden;height:0;}
再给高度会塌陷的标签添加样式属性zoom的值为1
定位
1.position属性 - 选中定位的标签的参考对象
initial/static - 不定位，默认值；但是body的不是它们
absolute - 绝对定位, 相对第一个position属性不是initial/static的父标签进行定位
relative - 相对定位,相对标准流定位(相对于原标签在标准流中的位置进行定位)
fixed - 相对浏览器定位
sticky - 定位保持网页中最后一个块在最后面（网页滚动的时候在浏览的最下面，网页不超过一屏在内容的最下面）
2.left\right\top\bottom
设置当前标签的左、右、上、下到参考对象的左、右、上、下的距离
注意: 在不给position属性的时候直接设置left\right\top\bottom属性无效
盒子模型
html中每个可见的标签都是一个盒子模型，由content、padding、border、margin组成
1)content - 内容，设置宽和高其实是设置盒子内容的大小；添加子标签是添加在内容上；
设置背景颜色和背景图都会作用于内容部分
2)padding - 内容外面的可见部分(默认没有),有四个方向; 设置padding会让标签变大；
设置背景颜色和背景图都会作用于padding部分
3)border - 边框，有四个方向，可以单独控制每个方向的大小、颜色、样式
4)margin - 内边距，有四个方向；不可见，但是占位置