week8-Day2

1.表单标签form

1.1应用场景

value:给输入框默认值,输入值之前需要先删除默认值;
palceholder:给输入框输入值,背景为透明;

两种提交方式get和post的区别
    get提交:提交到地址栏上,不安全,提交数据的大小是由限制的
    post提价:不会提交到地址栏上,相对安全,提交数据大小无限制

应用场景:登录注册
        修改用户信息/添加新的用户...
        
重要属性:
    表单的提交地址:
    action="本地地址或者远程服务器地址/本地静态页面"
    表单的提交方式:
    method:常用两种get/post
    

1.2常见的表单项

input标签
    属性type="text"  文本输入框
       type="password"   密码输入框
       type="hidden"  隐藏域(没有效果显示,但是会携带参数)
       type="date"  日期组件
       type="radio" 单项按钮(需要给相同的name属性)
       type="email" 邮箱组件
       type="checkbox" 复选框,多选
       type="file"   文件上传组件
       type="botton" 普通按钮,一般是value属性
       type="submit"  提交按钮
       type="reset"   重置按钮
       
       
select标签(传统方式:多个选项选一个)
    下拉菜单
    下拉选项 option
文本域textarea
    rows:指定行数
    cols:一行书写的字符数

2.框架标签frame和框架集标签frameset

框架标签feame:一个fream中只有一个html
​
如果整个结构是由很多个html组成,不能使用frame,需要框架及来表示
    frame src属性="包含的html路径"
​
当多个html页面组成整个结构,需要使用frameset,框架集标签,不能body共存,直接在body前面先执行;
    <frameset rows="由上而下划分的每一个站所占的权重百分比">--*通配符:代表剩下的权重百分比
        <frame src="所在的html页面">
    <frameset cols="由左到右划分的每一个站所占的权重百分比">
        <frame src="所在的html页面">

3.CSS入门

CSS:Casecading Style Sheet 层叠样式表
书写方式1:行内样式
    每一个标签中都有style属性="样式属性名称1:属性值1;样式属性2:属性值2"
    
    弊端:(局部可以使用,不建议全部使用)
    1)一次只能控制一个标签
    2)样式代码和html代码混合一起使用
    
方式2:内联样式(内部样式)--不利于维护
可以通过某种选择器,将指定的标签全部选中,在head标签体中加入style标签
    选择器类型{
    样式属性名称1:属性值1;
    样式属性名称2:属性值2;
    }
    
    弊端:
    样式代码和html代码混合一起使用
​
​
​
方式3:外部方式
单独创建一个独立的css文件,放在css文件中,在某个html页面中的head标签体中
    rel固定属性:关联层叠样式表
    <link href="引入外部的css文件" real="stylesheet">

4.CSS选择器

1)标签选择器(element选择器)
    在head书写style标签
    标签名称{
    样式属性:属性值
    ...
    } 
​
2)类选择器
同一个html页面中,标签中可以存在相同的class属性值
    .class{
    样式属性:属性值
    ...
    }
​
3)id选择器
    同一个heml页面中,id属性值必须唯一
    如果id重复了,后面通过javascript
    document对象.getElemntById("id属性值");通过id属性值获取标签对象;
    书写方式:#id属性值{
    样式属性:属性值
    }
    好处:在不同的浏览器上,在html页面加入id属性值,保证浏览器的兼容性;
​
4)子元素选择器(交集选择器)
    选择器1 选择器2{//选择器2选中的标签是选择器1选中的标签的子标签
    属性名称:属性值
    }
5)并集选择器
    选择器1,选择器2{//将选择器1选中的标签和选择器2选中的标签,同时选中,加入样式
    属性名称:属性值
    }

4.1 CSS伪类选择器

描述一个标签的状态
1)link状态:鼠标没有访问的状态
2)hover状态:鼠标经过的状态
3)active状态:鼠标激活的状态(点击,但是没有松开状态)
4)visited:鼠标访问状态(点击后,松开了)
​
样式:
    选择器:状态名称(不区分大小写){
    样式属性名称:属性值
    }
    
循环效果:
    hover必须在link和visited之后
    active必须在hover之后

5. CSS背景样式

背景颜色:background-color
背景图片:background-image
	如果这个背景图片没有占满浏览器,它会在x轴,y轴进行复制
	
设置图像是否重复以及如何重复background-repeat
	默认值:repeat(x轴和y轴都重复)
		repeat-x:x轴重复
		repeat-y:y轴重复
		no-repeat:不重复
background-position:设置图片的起始位置
	默认位置:left  top

背景的简写属性:必须按照先后顺序
background:
	background-color background-image background-repeat background-position

6.边框

6.1边框的属性

边框的颜色:
    上边框颜色:border-top-color
    下边框颜色:border-bottom-color
    左边框颜色:border-left-color
    右边框颜色:border-right-color

边框的宽度:
    上边框的宽度:border-top-width
    下边框的宽度:border-bottom-width
    左边框的宽度:border-left-width
    右边框的宽度:border-right-width

边框的样式(显示边框,必须指定样式)
border-方向-style
	solid  单实线
	dashed 虚线
	dotted 点
	double 双实线

6.2边框的简写属性

边框的颜色/宽度/样式简写属性:
	border-colour/border-width/border-style
特点:
	1)有默认的方向:上 右 下 左
	2)某一边没有设置颜色/宽窄/样式,会和对边的颜色/宽窄/样式一致
	
边框最终的简写格式:
border:border-width border-style border-color;

7.浮动float

浮动:
    浮动的框可以向左或向右移动,直到它的边缘碰到包含框或另一个浮动框的边框为止;由于浮动框不在文档的普通流中(不存在),所以文档的普通流中的边框表现的就像浮动框不存在一样;

浮动属性float
	left  左浮动
	right 右浮动

清除浮动clear
	both   两边都不浮动
	left   左边不浮动
	right  右边不浮动