1.知识补充 - 细线表格
1.不设置border，设置默认值 cellspacing的值为表格线的宽度1
2.设置表格的背景颜色的为表格线的颜色，然后再设置每个单元格的背景颜色和整个表格的背景颜色不一样
2.表单标签
1.表单标签的作用：
搜集用户信息：实质是将表单标签作为容器，来搜集表单标签中其他标签信息，本身没有任何效果
action属性：设置提交地址
method属性：提交方式
点提交按钮，将表单中相关标签以nname = value的形式
按照method属性提供的提交方式，提交给action属性对应的接口
form标签提供了两大功能，1：统一提交；2.重置
2.input标签
既可以放在form标签中，也可单独使用
单标签：typr对应的值不一样，input对应的功能也就不一样
- a.text - 文本输入框
name属性 - 专门用来区分不同的信息，相当于字典的key，
value属性 - 标签内容；指向输入框中内容，设值是设文本输入的默认值
placeholder属性 - 当输入框中没有值的时候输入提示信息
maxlength属性 - 设置输入框最大的位数 - b：passwor属性 - 密码输入框
- c：radion 单选按钮。
name属性：同一属性要求name值必须一样才能单选。
values属性：提交时用来区分被选中的值
checked属性：让单选按钮处于选中状态 - d：checkbox复选框-->
- e：input中的 button按钮
点击提交按钮后会自动提交当前form中，所有设置了name属性相关标签的值
以name = value的方式提交
单纯的button按钮，双标签，使用更暗灵活 - f：reset - 重置按钮
将当前form标签中所有的标签的状态设置为默认状态
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="get">
<font>用户名：</font><input type="text" name="email" placeholder="请输入邮箱。。。"/><br />
<font>电话：</font><input type="text" name="tel" maxlength="11"/><br />
<font>密码：</font><input type="password" name="password" id="" value="" placeholder="密码"/><br />
<input type="radio" name="sex" id="" value="boy" / checked="checked"> <font>男</font>
<input type="radio" name="sex" id="" value="girl" /> <font>女</font> <br />
<input type="radio" name="marry" id="" value="已婚" checked="checked"/"> <font>已婚</font>
<input type="radio" name="marry" id="" value="未婚" /> <font>未婚</font> <br />
<!--checkbox复选框-->
<input type="checkbox" name="hobby" id="" value="钱" /><font>钱</font>
<input type="checkbox" name="hobby" id="" value="钱钱" /><font>钱钱</font>
<input type="checkbox" name="hobby" id="" value="香烟" /><font>香烟</font>
<input type="checkbox" name="hobby" id="" value="美女" /><font>美女</font><br />
-->
<!--reset - 重置按钮
将当前form标签中所有的标签的状态设置为默认状态
-->
<input type="button" name="" id="" value="注册" />
<!--单纯的button按钮，双标签，使用更暗灵活-->
<button>登录</button>
<input type="submit" name="id" value="提交"/>
<input type="reset" name="" id="" value="重置" />
<input type="color" name="" id="" value="" />
<input type="date" name="" id="" value="" />
<input type="datetime" name="" id="" value="2018.11.11" />
<input type="datetime-local" name="" id="" value="" />
<input type="email" name="" id="" value="qq.com" />
</form>
</body>
</html>
3.下拉菜单：selec= option
- a.selec标签- 代表整个下拉菜单
name属性 - 区分提交 - b.option标签 - 下拉菜单的顺序ing
内容 - 显示部分
value属性 - 提交的内容 - c.optgroup：labe = 分组名称
- e.selected = selected设置下拉菜单的默认值
4.多行文本输入框
超出文本的范围可以 搜索
name属性 =提交和区分
rows一次可以显示的行数
cols - 一次最多显示多少个文字
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.下拉菜单（selec= option
<form action="" method="post">
<font>科目</font><select name="学科">
<optgroup label="理科"></optgroup>
<option value="">数学</option>
<option value="">英语</option>
<option value="">物理</option>
<option value="">化学</option>
<option value="">生物</option>
<optgroup label="文科"></optgroup>
<option value="">语文</option>
<option value="">地理</option>
<option value="">历史</option>
<option value="">政治</option>
</select>
<br />
<font>城市</font><select name="province">
<option value="四川">四川</option>
<option value="广东">广东</option>
<option value="湖南">湖南</option>
<option value="云南省">云南省</option>
<option value="贵州省">贵州省</option>
<option value="海南省" selected="selected">海南省</option>
</select>
<select name="city">
<option value="">成都</option>
<option value="">广元</option>
<option value="">东莞</option>
<option value="">长沙</option>
<option value="">昆明</option>
</select>
<!--多行文本输入框-->
<textarea maxlength="10" name="" rows="4" cols="30" placeholder="意见">默认值</textarea>
</form>
</body>
</html>
5.div和span
div和span是无语义标签;一般用来将网页中的标签进行分组和分模块使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>div1</div>
<div>div1</div>
<span>span1</span>
<span>span1</span>
</body>
</html>
6.选择器
选择器{属性名：属性值；属性名2：属性值2}；css提供的选择器写法有十几种，常见的有.
- 1.标签选择器：直接将标签名作为选择器选中当前html文件中所有的指定标签
例如：a{} - 选中当前html中所有的a标签；div{} - 2.id选择器，将标签的id属性值前面加#作为选择器，选择所有id是指定值的标签
例如：#text{} - 选中当前html文件中id属性值是text的所有标签 - 3.class选择器（类型选择器）：将标签的class属性值前面加.作为选择器，选中所有class是指定的标签
例如：.test{}，选中当前html文件中class属性值是test的所有标签 - 4.群组选择器：将多个选择器用，隔开，作为一个选择器，同时选中每个单独的选择器选中所有的标签
p,a,test,text{}，选中所有的p标签a标签，和class值是test以及id值是text的标签 - 5.后代选择器：将多个选择器用 空格隔开，作为一个选择器，从前往后一层一层的找，找到最后一个选择器对应的标签
例如div .test text{} - 选中div标签中class值是test标签中id值text标签
div div p选中div中div中p标签 - 6.通配符：将作为选择器，选中所有的标签{}f
<style type="text/css">
p{
color: #006400;
}
div{
color: red;
}
#text{
/*id选择器*/
background-color:yellow;
}
.test{
width: 300px;
height: 200px;
background-color: skyblue;
}
/*4.群组选择器*/
div,.test{
font-size: 50px;
}
/*5.后代选择器*/
div div{
font-size: 10;
color: aqua;
}
/*6.通配符*/
*{
/*设置文字装饰效果
underline下划线
overline上划线
line through删除线
none - 去掉下划线*/
text-decoration: line-through;
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="">
<div id="">
div1
<div>
div后代选择器
</div>
</div>
<div id="text">
div2
</div>
</div>
<div id="">
外部
</div>
<div class="test">div4</div>
<h1 class="test">我是h1</h1>
<p id="text">p标签测试</p>
</body>
</html>
7.伪类选择器
是用来选中标签的不同的状态（为了标签的不同状态设置不同样式）——
-
1.基本格式
普通选择器：伪类选择器 -
2:伪类选择器
- a - link - 标签的初始状态；一般作用域a标签，表示a标签中的链接，没有成功访问过的对应的状态
标签：link{} - 标签是通过各种选择器来选中的标签 - b - visited
- 超链接访问过后的状态
- c. - hover 鼠标悬停在标签上的时候对应的状态
- e.active 鼠标激活状态，鼠标按下但是还没有弹起的时候的状态
- a - link - 标签的初始状态；一般作用域a标签，表示a标签中的链接，没有成功访问过的对应的状态
-
3.爱恨yuanze
LoVeHAte：当同一个标签需要同事给多个状态添加样式的时候，要遵守爱恨原则
**link visited hover active **
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a{
text-decoration: none;
}
a:link{
color: red;
}
a:visited{
color: #00FFFF;
}
a:hover{
text-decoration: underline;
}
p:hover{
color: #FF0000;
background-color:yellow ;
font-size:40px ;
}
a:active{
color: blue;
}
h1:active{
color: blue;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
<a href="http://www.baidu.co">百度二下</a>
<a href="http://www.baidu.c">百度三下</a>
<p>我是段落</p>
<h1><h1>鼠标释放状态</h1></h1>
</body>
</html>
网友评论