表单标签：（form)
属性：（1）action:向后台服务器的提交地址（访问服务器）
（2）method：提交方式
提交方式常用：get,post(其他的head,put,delete)
get提交方式：
说明： （1）将用户信息提交到地址栏上
后台服务器地址url?key1=value1&key2=value2…
（2）get提交的数据大小有限（不超过4KB）
（3）get方式不适合提交敏感数据 ，例如：密码
密码要提交：需要密码加密
post提交方式：
说明：（1）数据不会提交到地址栏上
http网络协议、 一堆服务器响应头信息、浏览器请求头信息
实体内容：formData
key1=value1&key2=value2…
（2）提交数据大小没有限制
（3）适合敏感数据（密码需要特定加密）
js事件编程：
onsubmit事件：表示表单提交是否成功，返回true,表单提交成功注：
注：表单中的表单项必填的属性：name属性
作用：给系统后台标记当前写的内容（后台可以获取内容）
表单标签的应用场景：注册，登陆
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单标签1</title>
</head>
<!-- form表单标签
两个属性：
action:提交后台的地址
method：提交方式
常用：get,post(其他的head,put,delete)
js事件编程
onsubmit事件：表示表单提交是否成功
返回true,表单提交成功
-->
<body>
<form action="#" method="post" onsubmit="return checkAll()">
用户名：<input type="text" name="username" /><br />
密 码:<input type="password" name="pwd" /><br />
<input type="submit" value="提交" />
</form>
</body>
</html>
结果：
表单项的分类：
input 标签
type=“text”:文本输入框
type=“password”：密码输入框
type=“radio”:单选按钮
type=“checkbox”:复选框
type=“date”(h5提供的日期组件）
type=“tel”(h5提供的组件）
type=“file”:上传文件
type=“button”:普通按钮，必须指定value属性
type=“submit”:提交
type=“reset”:重置按钮
type=”hidden":隐藏域
selsct标签 下拉菜单
option:下拉菜单（应用场景：省市联动）
textarea:文本域（应用场景：个人自我描述）
具体操作实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="#" method="get">
用户名:<input type="text" name="username" placeholder="请输入用户名" /><br />
密码：<input type="password" name="pwd" placeholder="请输入密码" /><br />
性别：
<input type="radio" value="男" name="gender" />男
<input type="radio" value="女" name="gender" />女<br />
想去的公司：
<input type="checkbox" value="华为" name="company" />华为
<input type="checkbox" value="阿里巴巴" name="company" />阿里巴巴
<input type="checkbox" value="腾讯" name="company" />腾讯<br />
出生日期：
<input type="date" name="date" /><br />
手机号：
<input type="tel" name="phone" /><br />
上传图片：
<input type="file" name="photo" />
<!--隐藏域携带数据-->
<input type="hidden" name="id" /><br />
籍贯：
<select name="jiguan">
<option value="请选择">-请选择-</option>
<option value="陕西省">-陕西省-</option>
<option value="重庆">-重庆-</option>
<option value="广东">-广东-</option>
</select>
<br />
自我描述：
<!--
rows:可以写多少行
cols:一行中的字符数
-->
<textarea rows="5" cols="20">
求实创新
</textarea>
<select name="anniu">
<input type="button" value="普通按钮">
<input type="submit" value="提交">
<input type="reset" value="重置">
</select>
</form>
</body>
</html>
结果：
框架标签：frame
一个frame中包含一个html页面，如果框架结构有2个或2个以上的页面组成，称为frameset：框架集
frame属性:
src:链接包含的html
frameset属性：
rows：（从上往下看）横向划分
cols：（从左向右看），每一个部分（frame)占整个部分的百分比
注：
frameset不能和body共存
具体操作：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<frameset rows="20%,*,10%">
<!--每一个frame包含的html页面-->
<frame src="header.html" />
<frameset cols="15%,*">
<frame src="menu.html" />
<!--
frame
name属性：给当前main.html的frame起名称
-->
<frame src="main.html" name="main" />
</frameset>
<frame src="footer.html" />
</frameset>
</html>
main.html实现：
!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<center><strong>欢迎登录学校成绩管理系统</strong></center>
</body>
</html>
header.html实现：（头标签）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<center><h2>xxx学校管理系统</h2></center>
</body>
</html>
结果：
footer.html实现：（版权所有的声明）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<center>XXX学校©1995-2050 </center>
</body>
</html>
menu.html实现（菜单项）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
菜单选项:
<ul>
<!--
target：1)表示打开资源文件的方式：_self,_blank
2)在指定的frame中打开 ：需要frame中的name属性一致
-->
<li><a href="成绩.html" target="main">成绩管理</a></li>
<li><a href="http://www.bai.com">选课管理</a></li>
<li><a href="成绩.html">教务管理</a></li>
</ul>
</body>
</html>
CSS的使用方式：
方式1：行内样式
标签中指定style属性：书写样式
style=“css样式属性1:css样式属性值1；css样式属性2:css样式属性2；…”
弊端：
（1）一次只能控制一个标签
（2）样式代码和html混合使用，不利于后期管理
方式2：内部（内联）样式
需要在head标签 中指定style标签
格式：
选择器{
css样式属性1:css样式属性值1;
…
}
比第一种好，但也不利于管理
cursor:pointer; //默认属性，经过时变为小手
方式3：外部（外联）样式
（1）创建外部的css文件
（2）引入外部的css文件
在head中指定link标签
href属性：链接css文件
rel属性：定格式stylesheet(关联层叠样式表）
具体实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用方式</title>
<style>
a{
font-size:30px;
color:#0F0;
/*去掉下划线*/
text-decoration:none;
/*鼠标经过元素之后，显示小手状态*/
cursor:pointer;
}
</style>
<link href="css/01.css" rel="stylesheet" />
</head>
<body>
</body>
</html>
CSS选择器：
3个基本选择器 （重点）
（1）id选择器
在标签中指定id属性值
特点：id属性值在同一个html页面必须唯一
DOM操作使用js：document.getElementById(“id属性值”)
格式：
#id属性值{
书写样式;
}
（2）class选择器
在标签中指定class属性
特点：在同一个html页面下，多个标签可以指定同名class属性
.class属性值{
书写样式
}
（3）标签（element)选择器
格式：标签名称{
书写样式；
}
优先级：id选择器>class选择器>标签选择器
其他选择器:
并集选择器：
选择器1,选择器2.。。。{
书写样式；
}
交集选择器(子元素选择器)
选择器1 选择器2 选择器3 。。{
书写样式；
}
通配符选择器：*
具体操作实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
/*标签选择器*/
div{
font-size:20px;
color:#00F;
}
/*class选择器*/
.cll{
font-size:30px;
color:#0F0;
}
/*id选择器*/
#dl2{
font-size:35px;
color:#0000FF;
}
/* 并集选择器 ：同时给第一个div和第二个div设置样式*/
.cll,#dl2{
font-size:30px;
color:#F00;
text-decoration: underline;
}
/*交集（子元素）*/
.cll span{
font-size:20px;
color:#F00;
}
*{
font-size: 25px;
color: gray;
}
</style>
<body>
<div class="cl1">div1<span>行内标签</span></div>
<div id="dl2">div2</div>
<div>div3</div>
<span>行内标签</span>
</body>
</html>
