一、输入标签和表单标签
1.输入标签
<input>标签：
其功能是主要是完成网页上的一些输入功能
其中输入样式的设置是依靠type属性来完成
type属性的常用属性值：
1.text，文本框，可以用作用户账号输入
2.password，密码框
3.radio，单选框，如果需要让单选框应有互斥效果，就需要给多个单选框添加name属性，属性值设置为相同，还可以通过checked属性设置某个选项被默认选中
4.checkbox，复选框，复选框没有互斥效果，就算添加了name属性也不会产生互斥效果
5.file，文本框
...
textarea标签：
如果需要进行大量文字的输入，那么最好不要采用type属性中的文本框，而是要使用文本域标签textarea
select标签：
实现下拉框要使用下拉框标签（select标签），其中通过option标签添加下拉框内容，在option标签中使用selected属性设置某个现象被默认选中，在select标签中通过multiple属性可以实现多个下拉框选项同时出现
练习代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--文本框-->
账号<input type="text" /> <br />
<!--密码框-->
密码<input type="password" /> <br />
<!--
单选框 radio
如果需要让多个单选框有互斥效果，就需要给多个单选框添加name属性，且name属性的值相等
可以通过checked属性控制某个选项被默认选中
-->
性别
<input type="radio" name="sex" checked="checked"/>男
<input type="radio" name="sex"/>女 <br />
<!--
复选框 checkbox 没有互斥效果
就算添加了name属性也不会产生互斥效果
-->
爱好
<input type="checkbox" name="hobby"/>足球
<input type="checkbox" name="hobby"/>篮球
<input type="checkbox" name="hobby"/>羽毛球
<input type="checkbox" name="hobby"/>乒乓球
<br />
<!--文件框-->
请选择照片
<input type="file" /> <br />
<!--文本域-->
个人简介
<textarea style="width: 200px;height: 200px;">请介绍一下你自己</textarea> <br />
<!--
下拉框 select option
select标签会默认显示第一个option标签内容
multiple属性：显示多个下拉框内容
selected属性：设置一个标签为默认选中的内容
-->
籍贯
<select multiple="multiple">
<option selected>-请选择省份-</option>
<option>河南</option>
<option>河北</option>
<option>山东</option>
<option>北京</option>
<option>上海</option>
</select>
</body>
</html>
效果如下：
2.输入标签练习
输入标签可以和表格标签联合使用，使得页面更加美观
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table width="30%" align="center" border="1px" cellspacing="0px">
<tr>
<td>账号</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" />
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" checked/>男
<input type="radio" name="sex"/>女
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox" />足球
<input type="checkbox" />篮球
<input type="checkbox" />乒乓球
<input type="checkbox" />羽毛球
</td>
</tr>
<tr>
<td>请选择照片</td>
<td>
<input type="file" />
</td>
</tr>
<tr>
<td>个人简介</td>
<td>
<textarea style="width: 200px;height: 200px;">请介绍一下你自己</textarea>
</td>
</tr>
<tr>
<td>籍贯</td>
<td>
<select>
<option>-请选择省份</option>
<option>北京</option>
<option>上海</option>
<option>南京</option>
<option>广州</option>
<option>深圳</option>
</select>
</td>
</tr>
</table>
</body>
</html>
效果：
3.表单标签
表单标签是与用户交互并提交数据的标签，可以将网页上输入的数据提交至服务器，主要通过form表单标签完成。
form标签的使用方法：
1.使用form标签包裹数据提交的范围
2.通过action属性确定数据要提交的地址
3.通过method属性确定提交的方式
①get方式
1.数据通过地址栏传递，因为地址栏有长度限制，所以传递的数据有限
2.地址栏只能放文字，所以get方式只能提交文本类型的数据，不能上传文件
3.数据显示在地址栏上，数据相对不安全
在此阶段，get标签更容易看到数据提交情况，所以练习时可以以采用get方式提交
②post方式提交
1.数据不通过地址栏，单独打包成数据包发送，数据包大小一般认为没有限制，所以传输的数据量大
2.数据包可以放文字，也可以放文件，可以上传文件
3.数据不显示在地址栏上，所以数据相对于get方式更安全
4.准备一个提交按钮
不能是button button只是一个简单的按钮，不具备提交功能
应该用submit submit具备提交数据的功能
submit必须在from表单内部，标志提交的是当前所在表单
5.给多需要提交数据的输入框添加name和value属性
name属性是给数据起名字的，为了让后台区分不同数据的含义
value属性用于定义提交的数据，表示提交数据的内容，有些输入框，比如文本框，就可以不需要value属性，因为输入的文本就是value内的内容
6.可以设置一个清空按钮 使用reset
注意：不是所有拥有name和value属性的标签都可以提交，能提交的只有输入框
练习代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1.使用form标签包裹数据提交的范围
2.通过action属性确定数据要提交的地址
3.通过method属性确定提交的方式
get方式
1.数据通过地址栏传递，因为地址栏有长度限制，所以传递的数据有限
2.地址栏只能放文字，所以get方式只能提交文本类型的数据，不能上传文件
3.数据显示在地址栏上，数据相对不安全
post方式提交
1.数据不通过地址栏，单独打包成数据包发送，数据包大小一般认为没有限制，所以传输的数据量大
2.数据包可以放文字，也可以放文件，可以上传文件
3.数据不显示在地址栏上，所以数据相对于get方式更安全
4.准备一个提交按钮
不能是button button只是一个简单的按钮，不具备提交功能
应该用submit submit具备提交数据的功能
submit必须在from表单内部，标志提交的是当前所在表单
5.给多需要提交数据的输入框添加name和value属性
name属性是给数据起名字的，为了让后台区分不同数据的含义
value属性用于定义提交的数据，表示提交数据的内容，有些输入框，比如文本框，就可以不需要value属性，因为输入的文本就是value内的内容
6.可以设置一个清空按钮 使用reset
注意：不是所有拥有name和value属性的标签都可以提交，能提交的只有输入框
-->
<form action="https://www.baidu.com/" method="get">
账号<input type="text" name="username"/> <br />
密码<input type="password" name="psd"/> <br />
性别
<input type="radio" name="sex" value="man" checked="checked"/>男
<input type="radio" value="falman" name="sex"/>女 <br />
爱好
<input type="checkbox" name="hobby" value="1"/>足球
<input type="checkbox" name="hobby" value="2"/>篮球
<input type="checkbox" name="hobby" value="3"/>羽毛球
<input type="checkbox" name="hobby" value="4"/>乒乓球
<br />
请选择照片
<input type="file" /> <br />
个人简介
<textarea name="self" style="width: 200px;height: 200px;">请介绍一下你自己</textarea> <br />
籍贯
<select name="where">
<option value="0" selected>-请选择省份-</option>
<option value="1">河南</option>
<option value="2">河北</option>
<option value="3">山东</option>
<option value="4">北京</option>
<option value="5">上海</option>
</select>
<br />
<input type="submit" value="提交"/>
<input type="reset" value="清空"/>
</form>
</body>
</html>
效果：
地址栏上显示的数据 ：
二、框架标签
框架标签的作用是：将多个不同页面组织后显示在同一个页面上
1.iframe标签
作用：可以在当前网页上引入其他网页
src属性：引入网页地址，也可以是本地地址
iframe标签可以和a标签一起使用
1.先给iframe标签添加name属性
2.给a标签添加target属性，属性值为已设置的iframe标签的name值，就可以将超链接打开方式设置为iframe页面
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
框架标签的作用：将多个不同的页面组织显示在同一个页面上
iframe标签：可以在当前网页上引入其他的网页
src属性：引入网页地址，可以是本地地址
iframe标签可以和a标签一起使用
1.先给iframe标签添加name属性
2.给a标签添加target属性，属性值为已设置的iframe标签的name值，就可以将超链接打开方式设置为iframe页面
-->
<iframe src="https://www.baidu.com" width="40%" height="400px"></iframe>
<iframe src="01输入标签.html" width="40%" height="400px" name="myifr"></iframe>
<br />
<a href="http://www.jd.com" target="myifr">京东</a>
<a href="http://www.taobao.com" target="newifr">淘宝</a>
<iframe width="40%" height="400px" name="newifr"></iframe>
</body>
</html>
效果：
2.frameset标签和frame标签
frameset标签是将多个网页在同一个网页上进行区域划分的标签，其中每个frame标签都是一个区域
需要注意的是，使用frameset标签时不可以有bady标签
1.frameset标签设置上下结构：
rows属性表示上下结构，其中的属性值为每个网页部分所占页面的大小，*表示除去具体大小部分之外的所有部分都属于*
border属性表示各部分之间交汇线的粗细
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--
frameset标签是将多个网页在同一个网页上进行区域划分的标签，其中每个frame标签都是一个区域
需要注意的是，使用frameset标签不可以有bady标签
-->
<!--
上下结构：rows表示上下结构，其中的值为每个部分所占页面的大小，*表示除去具体大小部分之外的所有部分都属于*
border表示各部分之间交汇线的粗细
-->
<frameset rows="200px,*,400px" border="1px">
<frame src="01输入标签.html"/>
<frame src="02输入标签练习.html"/>
<frame src="http://taobao.com" />
</frameset>
</html>
效果：
2.frameset标签设置左右结构：
cols属性表示左右结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--
frameset标签是将多个网页在同一个网页上进行区域划分的标签，其中每个frame标签都是一个区域
需要注意的是，使用frameset标签不可以有bady标签
-->
<!--
上下结构：rows表示上下结构，其中的值为每个部分所占页面的大小，*表示除去具体大小部分之外的所有部分都属于*
border表示各部分之间交汇线的粗细
-->
<frameset cols="200px,200px,*">
<frame src="01输入标签.html"/>
<frame src="02输入标签练习.html"/>
<frame src="http://taobao.com" />
</frameset>
</html>
效果：
3.frameset标签的嵌套
frameset标签可以和超链接一起使用，需要把frame标签添加name属性，然后在超链接添加target属性，属性值为所需要的frame标签的name值。
主代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--
frameset标签的嵌套
可以和超链接一起使用，需要把frame标签添加name属性，然后在超链接添加target属性，属性值为所需要的frame标签的name值
-->
<frameset rows="200px,*,200px" border="1px">
<frame src="01输入标签.html"/>
<frameset cols="200px,*">
<frame src="lift.html"/>
<frame src="https://taobao.com" name="right"/>
</frameset>
<frame src="http://taobao.com" />
</frameset>
</html>
主代码中所引用的lift.html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="http://baidu.com" target="right">百度</a> <br />
<a href="http://jd.com" target="right">京东</a> <br />
<a href="http://taobao.com" target="right">淘宝</a>
</body>
</html>效果：
三、快标签和行内标签
块标签 ：块元素 在页面上独占一行的标签，如p标签等
行内标签 ：行内元素 在页面上不会独占一行的标签，如font标签等
span标签：行内标签 ，一般用于在网页上划定一个范围，一般结合CSS样式，帮助我们确定某些现实效果的作用范围
div标签：块标签 ， 一般用于做网页的布局
在进行网页布局设计中，有两个方法可以使用，一个是使用table，一个是使用div，通常情况下我们不推荐使用table做网页布局，因为table太过紧凑，如果使用table后网页布局需要修改，那么可能整个网页可能都要进行改正，而div就更灵活一点。
练习代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
块标签 ：块元素 在页面上独占一行的标签
行内标签 ：行内元素 在页面上不会独占一行的标签
span：行内标签 ，一般用于在网页上划定一个范围，一般结合CSS样式，帮助我们确定某些现实效果的作用范围
div：块标签 ， 一般用于做网页的布局
在进行网页布局设计中，有两个方法可以使用，一个是使用table，一个是使用div
通常情况下我们不使用table做网页布局，因为table太过紧凑，如果使用table后网页布局需要修改，那么可能整个网页可能都要进行改正
而div就更灵活一点
-->
<p>
只是一段测试性文字，测试span标签的作用,
<span style="color: red;">我想把这段文字变红色</span>,
<span style="color: yellow;">我想把这段文字变黄色</span>,
<span style="color: blue;">我想把这段文字变蓝色</span>
</p>
<div style="border: 1px solid red;width: 400px;height: 200px;">div标签是块标签，独占一行</div>
</body>
</html>
效果：
四、CSS的三种引入方式
1.什么是CSS？
HTML：搭建网页的主体结构，相当于毛坯房
CSS：修饰网页 让网页更漂亮，相当于精装修
JS：做交互，相当于智能家电
2.CSS的引入方式
1.行内式
借助标签的style属性引入
style属性的语法格式为：style:"样式名1:样式值1;样式名2:样式值2;..."
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span style="font-size: 40px;color: red;background-color: yellow;font-family: '楷体';">Hello World</span>
</body>
</html>
2.内嵌式引入
将CSS样式的代码抽取出来，通过选择器确定样式作用的范围
在head标签中，使用使用一对style标签定义CSS样式
在style标签中，注释写法为：/* */
内嵌式的好处：减少相同代码的编写量，减少代码的维护工作量
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--内嵌式-->
<style>
/*选择器*/
span{
font-size: 40px;
color: blue;
background-color: lightyellow;
font-family: "宋体";
}
</style>
</head>
<body>
<span>Hello World</span>
</body>
</html>
3.连接式引入
行内式只能将样式作用于当前标签
内嵌式可以将样式作用于多个标签，但不能作用于其他网页
链接式可以将样式的范围扩大到多个不同网页
链接式可以将CSS代码放入独立的.css文件中，可以使当前页面更加简洁
每一个需要引入样式的HTML文件，在head标签中使用link标签引入css文件即可
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--链接式
link标签中的属性：
href属性：指向css文件的位置
rel属性：告诉浏览器我们要引入的是一个什么样的文件 stylesheet：样式表
type属性：引入文件的类型 text/css：文本类型的css文件
其中rel属性和type属性可以不写
-->
<link rel="stylesheet" type="text/css" href="css/mycss.css"/>
</head>
<body>
<span>Hello World</span>
</body>
</html>
css样式文件：
font{
font-size: 60px;
color: green;
background-color: gray;
font-family: "微软雅黑";
}4.当三种引入方式同时作用于同一个标签，如果样式有冲突，谁离得近，谁的优先级更高
优先级原则：就近原则
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--内嵌式-->
<style>
/*选择器*/
span{
font-size: 40px;
color: blue;
background-color: lightyellow;
font-family: "宋体";
}
</style>
<!--链接式
link标签中的属性：
href属性：指向css文件的位置
rel属性：告诉浏览器我们要引入的是一个什么样的文件 stylesheet：样式表
type属性：引入文件的类型 text/css：文本类型的css文件
其中rel属性和type属性可以不写
-->
<link rel="stylesheet" type="text/css" href="css/mycss.css"/>
</head>
<body>
<!--
1.行内式引入
借助标签的style属性引入
style属性的语法格式为：style:"样式名1:样式值1;样式名2:样式值2;..."
2.内嵌式引入
将CSS样式的代码抽取出来，通过选择器确定样式作用的范围
在head标签中，使用使用一对style标签定义CSS样式
在style标签中，注释写法为：/* */
内嵌式的好处：减少相同代码的编写量，减少代码的维护工作量
3.连接式引入
行内式只能将样式作用于当前标签
内嵌式可以将样式作用于多个标签，但不能作用于其他网页
链接式可以将样式的范围扩大到多个不同网页
链接式可以将CSS代码放入独立的.css文件中，可以使当前页面更加简洁
每一个需要引入样式的HTML文件，在head标签中使用link标签引入css文件即可
4.当三种引入方式同时作用于同一个标签，如果样式有冲突，谁离得近，谁的优先级更高
优先级原则：就近原则
-->
<span style="font-size: 40px;color: red;background-color: yellow;font-family: '楷体';">Hello World</span>
<br />
<span>Hello World</span>
<br />
<font>Hello World</font>
</body>
</html>
五、CSS的选择器
1.三大基本选择器
1.标签名选择器
给页面所有同名的标签定义样式的选择器
语法：标签名{样式}
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
标签名选择器
给页面所有同名的标签定义样式的选择器
语法：标签名{样式}
-->
<style type="text/css">
span{
font-size: 40px;
background-color: gray;
font-family: "微软雅黑";
color: red;
}
</style>
</head>
<body>
<span id="s1">门前大桥下</span>
<br />
<span id="s2">游过一群鸭</span>
<p id="p1">快来快来数一数</p>
<p id="p2">真呀真多呀</p>
<p id="p2" class="c1">小燕子，穿花衣</p>
<h1 id="ha" class="c1">年年春天来这里</h1>
<a href="http://baidu.com" class="c1" target="_blank">百度一下儿歌小燕子</a>
</body>
</html>
效果截图
2. id选择器
一般body中的任何一个标签都有id属性
id属性的值一般在同一个网页上是不允许有重复值
id属性一般用于帮助我们定位到页面上唯一的一个标签
id属性值命名有规则：
①不能有空格和一些特殊字符
②特殊字符中仅可以使用_和$,但不推荐使用$，因为$会和jquery命名冲突
③不能以数字为开头
推荐写法 ：应为字母开头，数字放在后面
语法： #id值{样式}
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
id选择器
一般body中的任何一个标签都有id属性
id属性的值一般在同一个网页上是不允许有重复值
id属性一般用于帮助我们定位到页面上唯一的一个标签
id属性值命名有规则：
不能有空格和一些特殊字符
特殊字符中仅可以使用_和$,但不推荐使用$，因为$会和jquery命名冲突
不能以数字为开头
推荐写法 应为字母开头，数字放在后面
语法： #id值{样式}
-->
<style type="text/css">
#p1{
background-color: lightskyblue;
color: yellow;
font-size: 50px;
font-family: "楷体";
border: darkred 1px dotted;
width: 400px;
}
</style>
</head>
<body>
<span id="s1">门前大桥下</span>
<br />
<span id="s2">游过一群鸭</span>
<p id="p1">快来快来数一数</p>
<p id="p2">真呀真多呀</p>
<p id="p2" class="c1">小燕子，穿花衣</p>
<h1 id="ha" class="c1">年年春天来这里</h1>
<a href="http://baidu.com" class="c1" target="_blank">百度一下儿歌小燕子</a>
</body>
</html>
效果截图：
3.类选择器
一般body中的所有标签都有class属性
多个不同的标签可以有相同的class属性值
通过标签的class属性确定样式的作用范围
语法：.class属性值{样式}
举栗代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
类选择器
一般body中的所有标签都有class属性
多个不同的标签可以有相同的class属性值
通过标签的class属性确定样式的作用范围
语法：.class属性值{样式}
-->
<style type="text/css">
.c1{
color: lightyellow;
background-color: darkblue;
font-size: 40px;
width: 400px;
text-decoration: none;
font-family: "微软雅黑";
}
</style>
</head>
<body>
<span id="s1">门前大桥下</span>
<br />
<span id="s2">游过一群鸭</span>
<p id="p1">快来快来数一数</p>
<p id="p2">真呀真多呀</p>
<p id="p2" class="c1">小燕子，穿花衣</p>
<h1 id="ha" class="c1">年年春天来这里</h1>
<a href="http://baidu.com" class="c1" target="_blank">百度一下儿歌小燕子</a>
</body>
</html>
效果截图：
4.总练习代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
标签名选择器
给页面所有同名的标签定义样式的选择器
语法：标签名{样式}
-->
<style type="text/css">
span{
font-size: 40px;
background-color: gray;
font-family: "微软雅黑";
color: red;
}
</style>
<!--
id选择器
一般body中的任何一个标签都有id属性
id属性的值一般在同一个网页上是不允许有重复值
id属性一般用于帮助我们定位到页面上唯一的一个标签
id属性值命名有规则：
不能有空格和一些特殊字符
特殊字符中仅可以使用_和$,但不推荐使用$，因为$会和jquery命名冲突
不能以数字为开头
推荐写法 应为字母开头，数字放在后面
语法： #id值{样式}
-->
<style type="text/css">
#p1{
background-color: lightskyblue;
color: yellow;
font-size: 50px;
font-family: "楷体";
border: darkred 1px dotted;
width: 400px;
}
</style>
<!--
类选择器
一般body中的所有标签都有class属性
多个不同的标签可以有相同的class属性值
通过标签的class属性确定样式的作用范围
语法：.class属性值{样式}
-->
<style type="text/css">
.c1{
color: lightyellow;
background-color: darkblue;
font-size: 40px;
width: 400px;
text-decoration: none;
font-family: "微软雅黑";
}
</style>
</head>
<body>
<span id="s1">门前大桥下</span>
<br />
<span id="s2">游过一群鸭</span>
<p id="p1">快来快来数一数</p>
<p id="p2">真呀真多呀</p>
<p id="p2" class="c1">小燕子，穿花衣</p>
<h1 id="ha" class="c1">年年春天来这里</h1>
<a href="http://baidu.com" class="c1" target="_blank">百度一下儿歌小燕子</a>
</body>
</html>
效果截图：
2.其他选择器
1.层级选择器
通过层级关系定位样式的作用范围
层级选择器的每个层级的确定可以是标签名、id、class
每个层次之间用空格隔开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
层级选择器
通过层级关系定位样式的作用范围
层级选择器的每个层级的确定可以是标签名、id、class
每个层次之间用空格隔开
-->
<style>
#p1 .c1{
color: red;
}
</style>
</head>
<body>
<span>两只老虎爱跳舞</span>
<p id="p1">
<font id="f1">
<span class="c1">小兔子乖乖拔萝卜</span>
</font>
<br />
<span>
我和小鸭子学走路
</span>
</p>
<input class="i" type="text"/>
<br />
<input class="i" type="password"/>
<br />
<input class="i" type="password" />
<br />
<input class="i" type="text"/>
<br />
<h1 id="ha">你爱我</h1>
<h2 class="ch">我爱你</h2>
<font id="f2">
<span class="c1">蜜雪冰城</span>
</font>
<p id="p2">甜蜜蜜</p>
</body>
</html>
效果截图
2.属性选择器
根据标签的某个属性的特定属性值确定样式的作用范围
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
属性选择器
根据标签的某个属性的特定属性值确定样式的作用范围
-->
<style type="text/css">
input[type=text]{
width: 400px;
height: 40px;
}
</style>
</head>
<body>
<span>两只老虎爱跳舞</span>
<p id="p1">
<font id="f1">
<span class="c1">小兔子乖乖拔萝卜</span>
</font>
<br />
<span>
我和小鸭子学走路
</span>
</p>
<input class="i" type="text"/>
<br />
<input class="i" type="password"/>
<br />
<input class="i" type="password" />
<br />
<input class="i" type="text"/>
<br />
<h1 id="ha">你爱我</h1>
<h2 class="ch">我爱你</h2>
<font id="f2">
<span class="c1">蜜雪冰城</span>
</font>
<p id="p2">甜蜜蜜</p>
</body>
</html>
效果截图：
3.分组选择器
可以将多个不同层级关系，不同class属性、id属性、标签名同时使用相同的样式效果
每组之间用逗号隔开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
分组选择器
可以将多个不同层级关系，不同class属性、id属性、标签名同时使用相同的样式效果
每组之间用逗号隔开
-->
<style>
h1,.ch,#f2 .c1,#p2{
color: blue;
background-color: yellow
}
</style>
</head>
<body>
<span>两只老虎爱跳舞</span>
<p id="p1">
<font id="f1">
<span class="c1">小兔子乖乖拔萝卜</span>
</font>
<br />
<span>
我和小鸭子学走路
</span>
</p>
<input class="i" type="text"/>
<br />
<input class="i" type="password"/>
<br />
<input class="i" type="password" />
<br />
<input class="i" type="text"/>
<br />
<h1 id="ha">你爱我</h1>
<h2 class="ch">我爱你</h2>
<font id="f2">
<span class="c1">蜜雪冰城</span>
</font>
<p id="p2">甜蜜蜜</p>
</body>
</html>
效果截图：
4.总代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
层级选择器
通过层级关系定位样式的作用范围
层级选择器的每个层级的确定可以是标签名、id、class
每个层次之间用空格隔开
-->
<style>
#p1 .c1{
color: red;
}
</style>
<!--
属性选择器
根据标签的某个属性的特定属性值确定样式的作用范围
-->
<style type="text/css">
input[type=text]{
width: 400px;
height: 40px;
}
</style>
<!--
分组选择器
可以将多个不同层级关系，不同class属性、id属性、标签名同时使用相同的样式效果
每组之间用逗号隔开
-->
<style>
h1,.ch,#f2 .c1,#p2{
color: blue;
background-color: yellow
}
</style>
</head>
<body>
<span>两只老虎爱跳舞</span>
<p id="p1">
<font id="f1">
<span class="c1">小兔子乖乖拔萝卜</span>
</font>
<br />
<span>
我和小鸭子学走路
</span>
</p>
<input class="i" type="text"/>
<br />
<input class="i" type="password"/>
<br />
<input class="i" type="password" />
<br />
<input class="i" type="text"/>
<br />
<h1 id="ha">你爱我</h1>
<h2 class="ch">我爱你</h2>
<font id="f2">
<span class="c1">蜜雪冰城</span>
</font>
<p id="p2">甜蜜蜜</p>
</body>
</html>
3.伪类选择器
什么是伪类：伪类用于定义元素的特殊状态。
例如，它可以用于：
①设置鼠标悬停在元素上时的样式
②为已访问和未访问链接设置不同的样式
③设置元素获得焦点时的样式
伪类选择器可以是同时使用，也可以是单个使用
如果是同时使用，要注意顺序
伪类选择器的语法格式：选择器:伪类{}
对同一对象进行伪类修饰时，选择器尽量一致
link设置未访问的链接
visited设置已访问的链接
hover设置当鼠标悬停在链接上时
active设置鼠标已选择的链接
注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！
伪类名称对大小写不敏感
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
什么是伪类：伪类用于定义元素的特殊状态。
例如，它可以用于：
设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式
伪类选择器可以是同时使用，也可以是单个使用
如果是同时使用，要注意顺序
伪类选择器的语法格式：选择器:伪类{}
对同一对象进行伪类修饰时，选择器尽量一致
link设置未访问的链接
visited设置已访问的链接
hover设置当鼠标悬停在链接上时
active设置鼠标已选择的链接
注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！
伪类名称对大小写不敏感
* */
a:link{
color: black;
text-decoration: none;
}
a:visited{
color: blue;
}
a:hover{
color: yellow;
}
a:active{
color: gray;
}
#a2:link{
color: black;
text-decoration: none;
}
#a2:visited{
color: blue;
}
#a2:hover{
color: yellow;
}
#a2:active{
color: gray;
}
div{
border: 1px double orange;
width: 400px;
height: 300px;
background-color: red;
}
div:hover{
background-color: yellow;
}
div:active{
background-color: gainsboro;
}
</style>
</head>
<body>
<a id="a1" href="http://baidu.com" target="_blank">百度</a>
<br />
<a id="a2" href="http://taobao.com" target="_blank">淘宝</a>
<br />
<div></div>
</body>
</html>
目录
扫一扫
860
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
