案例一 完成注册页面的编写
学习:
div+css 布局的美化
form表单 收集用户数据
1.form表单标签(最重要,必须掌握):
1)form表单最重要的三句话:
1.作用:收集用户数据
2.name 属性------参数名
3.value 属性-----参数值
2)<form></form>属性:
(1)action: 请求路径:控制表单的提交地址,默认是当前页面
(2)method: 请求方式
get:默认 会在地址栏 原有url地址 加上?参数名=参数值&参数名=参数值.....
不太安全 传输数据大小有限制 1KB
post: 不限制数据的大小
不在地址栏显示,相对安全
3)form子标签的:
(1)input 输入框
type:
text:默认值 文本
password:密码
radio:单选
checkbox:多选
file:文件上传
button:普通按钮
submit:提交按钮
reset:重置按钮
date:日期框 没人用
image: 没人用
hidden:隐藏域(不在页面显示,但仍提交数据)
(2)select 下拉选择框
子标签option
(3)textare 文本域
cols:列
rows:行
(4)button 按钮 (input可替代)
(5)通用属性值 name 属性:
1.给单选框和多选框分组
2.如果你希望提交该输入框的内容,必须给输入框起名
(6)通用属性值 value 属性:
1.给输入框按钮类型 起名
2.value属性 就是该输入框提交的时候的值
(7)默认值:
1.对于 text password hidden 默认值都是value属性决定
2.对于单选框 多选框 由checked属性控制 checked="checked"
3.下拉选择框 默认由selected属性控制 selected="selected"
4.textarea 默认值 直接写在标签体内
div+css 布局
css就是用来美化页面
css 层叠样式表
div:html标签
块级标签 独占一行
span标签:
特点:
没有特点就是最大的特点
css语言:
语法:
css选择器{
css属性名:css属性值;
css属性名:css属性值;
…..
}
将css引入hmtl中:
1.内联样式表
<xxx style="css属性名:css属性值;css属性名:css属性值;"/>
2.内部样式表
在head下写子标签
<style>
css代码
</style>
3.外部样式表
在head的写下子标签
<link href="外部的css文件">
css引入就近原则 ??
css选择器:
id选择器 必须掌握的
html: <xxx id="x"/>
css: #x{...}
class(类)选择器
html: <xxx class="y"/>
css: .y{}
元素(标签选择器):
html:<xxx/>
css:xxx{}
属性选择器:
html:<xxx xyz="w" />
css:[xyz='w']{}
通常情况下会配合元素选择器一起使用
伪类选择器
锚伪类选择器
分组选择器:
选择器1,选择器2{
css代码
}
节省代码
后代选择器
父选择器 后代选择器{
}
子代选择器
父选择器>后代选择器{
}
选择器优先级
越特殊优先级越高
id>属性选择器和class选择器>元素选择器
css样式
背景相关的
背景颜色:background-color
背景图片:background-image:url("路径")
宽高:
width:
height:
文本:
颜色:color
对齐方式:text-align
缩进:text-ident:
text-decoration:去掉下划线 上划线
字体:
大小:font-size
家族:font-family
风格:font-style 斜体
粗细:font-weight bold
边框:
border:边框
粗细 样式 颜色
浮动和清除浮动:
float:left|right
clear:both|left|right
display:显示
none:不显示
block:显示
inline:行内显示
盒子模型:
border:边框
padding:内边距
margin:外边距
上右下左