<body>
表单:用来收集用户的资料
<form action="提交到哪里去" method="提交方式"></form>
action="提交数据的页面地址"
# 空地址
method="提交方式"
get:
1.在地址栏提交,不安全
2.有可能造成数据丢失
3.通常向数据获取数据,不会改变数据库数据
4.提交速度快
post:
1.不在地址栏提交,安全
2.不会造成数据丢失
3.通常向数据库发送数据,会改变数据库数据
4.提交速度慢
表单元素:
input
type:"text" 单行文本输入框
type:"password" 密码框
type:"submit" 提交按钮
type:"button" 空按钮
value:按钮内容
name:数据返回名称
css样式: 层叠样式表,让页面变得更好看
css样式语法:
选择器{属性:值;}
p{font-size:30px;/*文本大小*/}
b{color:red;}/*文本颜色*/
css样式创建方式:
内部样式:
在head标签中添加
<style type="text/css">
选择器{属性:值;}
</style>
外部样式:
1: 创建一个独立的html文件,后缀为.html
2: 创建一个独立的css文件,后缀为.css
3: 关联
引入方式一:(推荐使用)
在html页面中的head标签中添加
<link rel="stylesheet" type="text/css" href="css文件地址">
rel="stylesheet" 关联="层叠样式表"
type="text/css" 类型="文本类型的样式表"
href="css文件地址"
引入方式二:(了解)
在html页面中的style标签中的第一行添加
@import url("css文件地址");
两种引入方式的区别:
1: 本质不同,link是标签,@import是css提供的一种写法
2: 加载顺序不同,link同时加载,@import后加载
3: 兼容性问题,link没有兼容性问题,@import低版本ie不兼容
4: DOM操作,link能被操作,而@import不能被操作
内联样式:
<标签 style="属性:值;"></标签>
<标签 style="属性:值;"/>
样式表优先级:
内联样式 > 内部样式 / 外部样式
选择器: 选中指定的元素
类型选择器(标签选择器): div a u p h1...
标签名{} 例:div{}
id选择器:
<标签 id="box"></标签>
#box{}
【注】一个页面中,相同的id值有且仅有一个
一个id中只有一个值注
类选择器(class选择器):
<标签 class="box"></标签>
.box{}
【注】一个页面中,相同的class值可以有多个
一个class中,可以有多个值
通常用来写样式,具有重用性
群组选择器/并集选择器
选择器1,选择器2,选择器3{} 选中1 2 3,最后选中的是3个元素
.box,.btn,#box,a{}
交集选择器:
选择器1选择器2{} 选中选择器1,且选择器1还能通过选择器2的方式选中
<div class="box1"></div>
div.box1{}
通配符:选中页面中所有的元素
*{margin:0;padding:0;}
包含选择器(后代选择器):
选择器1 选择器2 选择器3{} 选中1里面的2里面的3,最终选中的是3
子选择器:
选择器1 > 选择器2{} 选中1里面的子元素2
伪类选择器:
a:link{} 未访问之前
a:visited{} 访问过后
a:hover{} 鼠标悬停
a:active{} 鼠标按下
【注】有顺序要求,爱恨原则 LoVe - HAte
.box1:hover{} 鼠标移入box1,改变box1
.box1:hover .box2{} 鼠标移入box1,改变box2
</body>
