03_HTML进阶标签与CSS入门

雨翼轻尘2026-06-12 9:20

【HTML和CSS】

主要内容

1.输入标签和表单标签

2.框架标签

3.CSS介绍和三种引入方式

4.CSS选择器

学习目标

知识点 要求
输入标签 掌握
表单标签 掌握
Iframe 了解
frameset和frame 熟悉
css概念引入 了解
css引入方式 掌握
三大基本选择器 掌握
其他选择器 了解
伪类选择器 熟悉

第一节：输入标签和表单标签

（1）输入标签

1、案例1

🍉案例1

⭐重点

<1><font style="color:#DF2A3F;">input</font>标签（单标签）：输入框

type属性决定了输入框的类型（文字/密码/单选框/复选框/文件/文本域/下拉框）

  • 文字 text
    • 文本框只能单行输入，并且无法通过width和height来调整输入框的大小
  • 密码 password（输入的时候是点的形式）
  • 单选框 radio
    • 设置多个单选框，name属性使用同一个值，就可以形成互斥的效果
    • 通过checked属性控制其中某一个选项被选中（打开网页时默认被选了）
  • 复选框 checkbox（多个可以同时被选中）
    • 就算添加了name属性，也不会产生互斥效果，可以多个同时被选中
    • 可以添加checked属性，用来控制打开网页时默认选中的选项
  • 文件输入框 file
    • 点击"浏览"之后可以选择本地文件，加载进来并不意味着可以显示在网页上

<2><font style="color:#DF2A3F;">textarea</font>标签（双标签）：文本域

<3><font style="color:#DF2A3F;">select</font>标签（双标签）：下拉框

  • 使用option子标签设置下拉选项
    • 默认第一个选项为初始展示在页面的选项，可以使用selected属性来设置初始选项
  • 使用multiple属性设置选项全部展现在页面上

🌱代码

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 1.文本框 text -->
		账号：<input type="text" />
		<br />
		
		<!-- 2.密码框 password(输入时有隐藏效果) -->
		密码：<input type="password" />
		<br />
		
		<!-- 3.单选框 radio
				   name属性值相同时，可以有互斥效果
				   checked属性控制某一个选项默认被选中
				   (属性值也是checked,属性值与属性名相同时可以省略属性值只写属性名),
           若有多个checked会默认选最后一个-->
		性别：<input type="radio" name="gender" /> 男 
			 <input type="radio" name="gender" checked="checked"/> 女
		<br />
		
		<!-- 4.多选框  checkbox
				   name属性相同时，也不能产生互斥效果(永远具有多选效果)
				   checked属性可以控制打开网页默认选中的选项，属性值与属性名相同，可以省略属性值-->
		爱好：<input type="checkbox" checked="checked"/> 篮球
			 <input type="checkbox" /> 足球
			 <input type="checkbox" checked/> 乒乓球
			 <input type="checkbox" /> 羽毛球
			 <input type="checkbox" /> 保龄球
		<br />
		
		<!-- 5.文件输入框 file -->
		请选择文件：<input type="file" />
		<br />
		
		<!-- 6.文本域 textarea标签 
				   双标签中间的文字会展示在网页上
				   用style属性控制宽和高(CSS样式)-->
		个人简介：<textarea style="width:200px;height:100px;">请介绍一下你自己</textarea>
		<!-- <input type="text" width="200px" height="200px" /> 宽和高无法控制文本输入框的大小，并且只能在一行上面输入，无法换行 -->
		<br />
		
		<!-- 7.下拉框 select标签
			     使用option子标签来设置下拉选项,
			     默认将第一个option作为初始选项，也可以使用selected属性来设置初始选项;
			     使用multiple属性可以将选项全部展现在页面上-->
		籍贯：
		<select multiple="multiple">
			<option>吉林</option>
			<option>长沙</option>
			<option>重庆</option>
			<option>武汉</option>
			<option>青岛</option>
			<option selected="selected">-请选择省份-</option>
		</select>
		
	</body>
</html>

🍺输出

2、案例2

练习结合表格 标签对输入标签进行处理。

<1> 做出表中内容

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		账号：<input type="text" />
		密码：<input type="password" />
		性别：<input type="radio" name="sex" checked="checked"/>男 <input type="radio" name="sex" /> 女
		爱好：<input type="checkbox" /> 篮球
			 <input type="checkbox" /> 足球
			 <input type="checkbox" /> 羽毛球
			 <input type="checkbox" /> 保龄球
		请选择照片：<input type="file" />
		个人简介：<textarea style="width:200px;height:100px;">请介绍一下你自己</textarea>
		籍贯：<select>
				<option>吉林</option>
				<option>长沙</option>
				<option>黑龙江</option>
				<option>青岛</option>
				<option selected="selected">-请选择省份-</option>
			 </select>
	</body>
</html>

输出：

<2>做出表格

七行两列的表格：

html 复制代码 
<table border="1px" cellspacing="0px" width="30%" align="center">
	<tr>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
	</tr>
	
</table>

输出：

<3> 合并

🌱代码

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1px" cellspacing="0px" width="40%" >
			<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="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:100px;">请介绍一下你自己</textarea>
				</td>
			</tr>
			<tr>
				<td>籍贯</td>
				<td>
					<select>
						<option>吉林</option>
						<option>长沙</option>
						<option>黑龙江</option>
						<option>青岛</option>
						<option selected="selected">-请选择省份-</option>
					</select>
				</td>
			</tr>
			
		</table>
	</body>
</html>

🍺输出

（2）表单标签

1、form与action

上面我们做了一个表格，现在往里面输入一些内容：

上面的信息已经输入完成了，但是这个信息还在浏览器上，如何将浏览器提交给后台的服务器呢？

虽然现在我们没有写对应的处理程序，但是不妨碍我们把数据往后台服务器去提交。

可以往任何一个服务器的地址上去提交，我们不是看服务器如何去接收，我们要看的是浏览器能不能把数据往后面提交。

如何让浏览器把信息往上提交？

<font style="color:#DF2A3F;">form</font>表单就是可以将这些信息往后台提交的一种标签。

form表单标签在网页上没有任何的显示效果，它是将网页上输入的数据向后台传递数据所使用的标签。

<1>

将刚才写的代码拿过来：

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		账号
		<input type="text" />
		<br />
		
		密码
		<input type="password" />
		<br />
		
		性别
		<input type="radio" name="sex" checked="checked"/>男 
		<input type="radio" name="sex" /> 女
		<br />

		爱好
		<input type="checkbox" /> 篮球
		<input type="checkbox" /> 足球
		<input type="checkbox" /> 羽毛球
		<input type="checkbox" /> 保龄球
		<br />

		请选择照片
		<input type="file" />
		<br />

		个人简介
		<textarea style="width:200px;height:100px;">请介绍一下你自己</textarea>
		<br />

		籍贯
		<select>
			<option>吉林</option>
			<option>长沙</option>
			<option>黑龙江</option>
			<option>青岛</option>
			<option selected="selected">-请选择省份-</option>
		</select>
		
	</body>
</html>

输出：

<2>

现在要将这些数据，提交到服务器，那么需要用form标签将他们包裹起来。如下：

<3>

接下来，需要用action属性确定数据提交的地址，如下：

但是现在我们并不会搭建服务器，那么暂时就随便写一个地址即可。

比如写百度官网的地址。现在我们关注的是数据能否提交过去，而不是看后台能不能接收数据。

2、method

<4>

接下来需要用method属性来确定提交的方式。

提交的方式不同，决定了可以携带的数据量不同，也决定了数据回来的方式不同。

<5>

⭐有两种提交方式，get和post。

  • 使用<font style="color:#DF2A3F;">form</font>标签 包裹数据提交的范围
    • 通过<font style="color:#DF2A3F;">action</font>属性确定 数据要提交的地址
    • 通过<font style="color:#DF2A3F;">method</font>属性确定 **提交的方式 **
  • ①<font style="color:#DF2A3F;">get</font>方式提交
    • 数据通过地址栏 传递 地址栏有长度限制 传递的数据量有限
    • 地址栏只能放文字 get方式只能提交文本类型的数据 不能上传文件
    • 数据显示在地址栏上 数据相对不安全
  • ②<font style="color:#DF2A3F;">post</font>方式提交
    • 数据不通过地址栏 单独打成数据包 发送 数据包大小一般认为没有限制 传输的数据量大
    • 数据包可以放文字 也可以放文件 可以上传文件
    • 数据不显示在地址栏上 的 数据相对安全（相对于get来说安全，若是想在浏览器看到也是可以看到的）
  • ③准备一个提交按钮
    • 不能是button button只是一个简单的按钮 不具备提交功能
    • 应该用<font style="color:#DF2A3F;">submit</font> submit具备提交数据的功能
    • submit 必须在form表单内部 标志提交的是当前所在的表单
  • ④给需要提交数据的输入框 添加name 和 value属性
    • <font style="color:#DF2A3F;">name</font>属性给数据起名字的 为了让后台区分不同数据的含义
    • <font style="color:#DF2A3F;">value</font>用于定义提交的数据 （可以后面在网页上写）

这里我们选择"get"方式提交，可以在地址栏看到数据，可以证明数据是否被提交。如下：

做一个button"提交"按钮：

点击一下这个"提交"按钮，就应该把数据往之前写的地址（百度为例）上面发。

但是此时没有任何反应：

现在使用"submit"提交按钮，可以看到跳转至百度网址上了：

3、name与value

如何知道是否真的被提交了？

这里可以添加name和value属性：

可以看到，网页上面会自动写入123，所以这里的value属性可以不写 ，打开网页之后再写也行。

假设现在输入的账号是abc：

点击"提交"按钮之后：

现在可以看到确实提交给后台了。

name属性的作用很大，如果此时写了name属性 ：账号<input type="text" name="username" />，那么提交至后台的时候，就可以知道这里的abc是什么了，如下：

若是不写 name属性：账号<input type="text" />，网址接收到的只有abc数据，不知道这个abc是账号还是密码还是什么其他的数据：

可以看到这里并没有写：（不加name属性，数据传过去也没有意义，提交不成功）

写了name属性，服务器就可以通过它知道这个名字的含义。

再举个例子，这里将"账号"和"密码"都用name属性起名字：

输入账号为123456，密码为123456：

点击"提交"之后，网址栏上面会显示（通过地址栏的信息，来确定数据确实发送给服务器了，只不过此时服务器没有任何反应而已）：

说完了get方式提交，若是现在使用post方式提交：

再次输入信息，然后点击"提交"，可以发现地址栏没有任何显示（数据没有展示），我们并不知道数据是否被提交了。如下：

若是想看到数据也是可以的，在网页中按快捷键F12：

然后输入数据：

点击"提交"按钮：

🌱代码

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- form标签    包裹要提交的数据
			   action属性  设置要提交到的地址
			   method属性  设置提交的方式
				  get方式:地址栏、只能文字、相对不安全
				  post方式：数据包、可以放文字文件、相对安全-->
		<form action="http://www.baidu.com" method="get">
			<!-- 添加name属性和value属性
				 name:给数据起名字(随便起),为了让后台区分不同数据的含义(发来的数据是账号还是密码)
				 value:比如账号后面的文本框里面放的值(有的可以不写，后面自己输入)-->
			账号
			<input type="text" name="username" />
			<br />
			
			密码
			<input type="password" name="password"/>
			<br />
			
			性别
			<input type="radio" name="sex" checked="checked"/>男 
			<input type="radio" name="sex" /> 女
			<br />

			爱好
			<input type="checkbox" /> 篮球
			<input type="checkbox" /> 足球
			<input type="checkbox" /> 羽毛球
			<input type="checkbox" /> 保龄球
			<br />

			请选择照片
			<input type="file" />
			<br />

			个人简介
			<textarea style="width:200px;height:100px;">请介绍一下你自己</textarea>
			<br />

			籍贯
			<select>
				<option>吉林</option>
				<option>长沙</option>
				<option>黑龙江</option>
				<option>青岛</option>
				<option selected="selected">-请选择省份-</option>
			</select>
			<br />
			
			<!-- 提交按钮 
				   button不具备提交功能
				   submit具有提交功能,提交所在的表单-->
			<!-- <input type="button" value="提交" /> -->
			<input type="submit" value="提交" />
		</form>
	</body>
</html>

4、指定value

上面说了，name属性是为了让浏览器知道这个数据是什么含义的。

value属性是用于显示提交的数据是什么的，有的可以不用写在代码中，在网页中填写具有一样的效果。

针对不同的输入标签，value属性的用法是不一样的。

文本输入框text，可以不用写value属性，在网页中填写具有一样的效果：账号<input type="text" name="username" />。

看一下地址栏结构：

①文本

html 复制代码 
<!-- 文本 text
     不需要指定value值，网页中输入的值就是提交的值-->
账号
<input type="text" name="username" />

②密码

html 复制代码 
<!-- 密码 password
     不需要指定value值，网页中输入的值就是提交的值-->
密码
<input type="password" name="password"/>

③单选框

html 复制代码 
<!-- 单选框 radio
			只能有一个数据可以被提交上去,需要使用value属性来指定值-->
性别
<input type="radio" name="sex" value="男" checked="checked"/>男 
<input type="radio" name="sex" value="女" /> 女

④复选框

html 复制代码 
<!-- 4.复选框 checkbox
			需要使用value属性来指定值(比如指定1是篮球，如果在网页中勾选了篮球，地址栏就会有hobby=1)-->
爱好
<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" /> 保龄球

⑤文本域

html 复制代码 
<!-- 文本域 textarea 
		 不需要使用value属性来指定值,在网页中输入的数据就是要提交的值-->
个人简介
<textarea style="width:200px;height:100px;" name="introduce" >请介绍一下你自己</textarea>

⑥下拉框（注意name属性和value属性放置的位置）

html 复制代码 
<!-- 下拉框 select 
			不需要设置value属性,选中了哪一个option,提交到网址上面的就是哪一个;
			若是不想在地址栏显示option标签中的汉字，也可以设置相应的value值用于在地址栏显示-->
籍贯
<select name="provience" >
	<option value="jilin">吉林</option>
	<option value="changsha">长沙</option>
	<option value="heilongjiang">黑龙江</option>
	<option value="qingdao">青岛</option>
	<option selected="selected">-请选择省份-</option>
</select>

🌱代码

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- form标签    包裹要提交的数据
			   action属性  设置要提交到的地址
			   method属性  设置提交的方式
				  get方式:地址栏、只能文字、相对不安全
				  post方式：数据包、可以放文字文件、相对安全-->
		<form action="http://www.baidu.com" method="get">
			<!-- 添加name属性和value属性
				 name:给数据起名字(随便起),为了让后台区分不同数据的含义(发来的数据是账号还是密码)
				 value:比如账号后面的文本框里面放的值(有的可以不写，后面自己输入)-->
				 
			<!-- 1.文本 text
			     不需要指定value值，网页中输入的值就是提交的值-->
			账号
			<input type="text" name="username" />
			<br />
			
			<!-- 2.密码 password
			     不需要指定value值，网页中输入的值就是提交的值-->
			密码
			<input type="password" name="password"/>
			<br />
			
			<!-- 3.单选框 radio
				     只能有一个数据可以被提交上去,需要使用value属性来指定值-->
			性别
			<input type="radio" name="sex" value="男" checked="checked"/>男 
			<input type="radio" name="sex" value="女" /> 女
			<br />

			<!-- 4.复选框 checkbox
				     需要使用value属性来指定值(比如指定1是篮球，如果在网页中勾选了篮球，地址栏就会有hobby=1)-->
			爱好
			<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 />

			<!-- 5.文件 file
				  后续文件上传再处理(暂时不讲) -->
			请选择照片
			<input type="file" />
			<br />

			<!-- 6.文本域 textarea 
				   不需要使用value属性来指定值,在网页中输入的数据就是要提交的值-->
			个人简介
			<textarea style="width:200px;height:100px;" name="introduce" >请介绍一下你自己</textarea>
			<br />

			<!-- 7.下拉框 select 
				     不需要设置value属性,选中了哪一个option,提交到网址上面的就是哪一个;
				     若是不想在地址栏显示option标签中的汉字，也可以设置相应的value值用于在地址栏显示-->
			籍贯
			<select name="provience" >
				<option value="jilin">吉林</option>
				<option value="changsha">长沙</option>
				<option value="heilongjiang">黑龙江</option>
				<option value="qingdao">青岛</option>
				<option selected="selected">-请选择省份-</option>
			</select>
			<br />
			
			<!-- 提交按钮 
				   button不具备提交功能
				   submit具有提交功能,提交所在的表单-->
			<!-- <input type="button" value="提交" /> -->
			<input type="submit" value="提交" />
		</form>
	</body>
</html>

🍺输出

输入一些值：

点击"提交"：

地址栏显示的数据如下：

html 复制代码 
https://www.baidu.com/?username=123456&password=111111&sex=男&hobby=2&hobby=3&introduce=你好世界&provience=长沙

5、补充

<1>

🍖Q：是不是只要有name属性与value属性的标签，就都可以被提交呢？

假设现在有一个段落标签，给它加上name属性与value属性：

html 复制代码 
<!-- 任意标签 -->
<p name="p" value="pvalue">这里是一个段落</p>

在网页上点击"提交"按钮之后：

可以看见并没有提交成功：

所以，不是只要有name属性与value属性的标签，就都可以被提交。

必须是输入框，添加name属性与value属性的标签，才可以被提交。

<2>

填入所有信息之后，我想按一个按钮，使得数据都清空。

使用reset：

html 复制代码 
<!-- 清空按钮 reset -->
<input type="reset" value="清空" />

看一下效果：

（3）代码

🌱代码

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!--
  步骤：
	①使用 form标签 包裹数据提交的范围
	②通过action属性确定数据要提交的地址
	③通过method属性确定提交的方式 
	get方式
	1数据通过地址栏传递  地址栏有长度限制 传递的数据量有限
	2地址栏只能放文字 get方式只能提交文本类型的数据 不能上传文件
	3数据显示在地址栏上 数据相对不安全
	post方式提交
	1数据不通过地址栏 单独打成数据包发送 数据包大小一般认为没有限制 传输的数据量大
	2数据包可以放文字 也可以放文件 可以上传文件
	3数据不显示在地址栏上的 数据相对安全
  
	④准备一个提交按钮   
	不能是button  button只是一个简单的按钮 不具备提交功能
	应该用submit  submit具备提交数据的功能
	submit 必须在form表单内部 标志提交的是当前所在的表单
  
	⑤给需要提交数据的输入框添加name 和 value属性
	name属性给数据起名字的 为了让后台区分不同数据的含义
	value用于定义提交的数据 
	-->
	<body>
		<!-- form标签    包裹要提交的数据
			 action属性  设置要提交到的地址
			 method属性  设置提交的方式
				get方式:地址栏、只能文字、相对不安全
				post方式：数据包、可以放文字文件、相对安全-->
		<form action="http://www.baidu.com" method="get">
			<!-- 添加name属性和value属性
				 name:给数据起名字(随便起),为了让后台区分不同数据的含义(发来的数据是账号还是密码)
				 value:比如账号后面的文本框里面放的值(有的可以不写，后面自己输入)-->
				 
			<!-- 1.文本 text
			     不需要指定value值，网页中输入的值就是提交的值-->
			账号
			<input type="text" name="username" />
			<br />
			
			<!-- 2.密码 password
			     不需要指定value值，网页中输入的值就是提交的值-->
			密码
			<input type="password" name="password"/>
			<br />
			
			<!-- 3.单选框 radio
				  只能有一个数据可以被提交上去,需要使用value属性来指定值-->
			性别
			<input type="radio" name="sex" value="男" checked="checked"/>男 
			<input type="radio" name="sex" value="女" /> 女
			<br />

			<!-- 4.复选框 checkbox
				   需要使用value属性来指定值(比如指定1是篮球，如果在网页中勾选了篮球，地址栏就会有hobby=1)-->
			爱好
			<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 />

			<!-- 5.文件 file
				  后续文件上传再处理(暂时不讲) -->
			请选择照片
			<input type="file" />
			<br />

			<!-- 6.文本域 textarea 
				   不需要使用value属性来指定值,在网页中输入的数据就是要提交的值-->
			个人简介
			<textarea style="width:200px;height:100px;" name="introduce" >请介绍一下你自己</textarea>
			<br />

			<!-- 7.下拉框 select 
				  不需要设置value属性,选中了哪一个option,提交到网址上面的就是哪一个;
				  若是不想在地址栏显示option标签中的汉字，也可以设置相应的value值用于在地址栏显示-->
			籍贯
			<select name="provience" >
				<option value="jilin">吉林</option>
				<option value="changsha">长沙</option>
				<option value="heilongjiang">黑龙江</option>
				<option value="qingdao">青岛</option>
				<option selected="selected">-请选择省份-</option>
			</select>
			<br />
			
			<!-- 任意标签 不可以被提交 -->
			<p name="p" value="pvalue">这里是一个段落</p>
			
			<!-- 提交按钮 
				 button不具备提交功能
				 submit具有提交功能,提交所在的表单-->
			<!-- <input type="button" value="提交" /> -->
			<input type="submit" value="提交" />
			
			<!-- 清空按钮 reset -->
			<input type="reset" value="清空" />

		</form>
	</body>
</html>

第二节：框架标签

作用：将多个不同的页面组织后显示在同一个页面上。

（1）iframe标签

可以在当前网页上引入其他的网页。

html 复制代码 
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- iframe标签 -->
		<iframe></iframe>
	</body>
</html>

看一下：

<1> 放入网页路径

假设要放入一个百度网页：

html 复制代码 
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- iframe标签 
			 src属性:引入其他网页
			 width属性:设置宽度
			 height属性:设置高度(不要用百分比,屏幕的高度是无限的,所以需要用像素)-->
		<iframe src="http://www.baidu.com" width="50%" height="400px"></iframe>
	</body>
</html>

效果如下：

<2> 放入本地路径

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- iframe标签 (不会独占一行)
			 src属性:引入其他网页
			 width属性:设置宽度
			 height属性:设置高度(不要用百分比,屏幕的高度是无限的,所以需要用像素)-->
		<iframe src="http://www.baidu.com" width="40%" height="400px"></iframe>
		<iframe src="02输入标签练习.html" width="40%" height="400px"></iframe>
		
	</body>
</html>

效果如下：

<3>

现在有两个超链接：

html 复制代码 
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- iframe标签 (不会独占一行)
			 src属性:引入其他网页
			 width属性:设置宽度
			 height属性:设置高度(不要用百分比,屏幕的高度是无限的,所以需要用像素)-->
		<iframe src="http://www.baidu.com" width="40%" height="400px"></iframe>
		<iframe src="02输入标签练习.html" width="40%" height="400px"></iframe>
		
		<a href="http://www.jd.com">京东</a>
		<a href="http://www.taobao.com">淘宝</a>
		
	</body>
</html>

我希望点击超链接标签之后可以将页面跳转至刚才的两个框里面。

需要借助a标签的一个<font style="color:#DF2A3F;">target</font>属性，之前已经说过了几个属性值：

现在我们想要在自己设定的框里面打开链接，需要给框起一个name名字，然后填入target属性中即可。

京东网页现在不允许嵌入了：

那我们换成小破站吧：

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- iframe标签 (不会独占一行)
			 src属性:引入其他网页
			 width属性:设置宽度
			 height属性:设置高度(不要用百分比,屏幕的高度是无限的,所以需要用像素)-->
		<iframe src="http://www.baidu.com" width="40%" height="400px" name="ifr1"></iframe>
		<iframe src="02输入标签练习.html" width="40%" height="400px" name="ifr2"></iframe>
		
		<!-- 超链接
			 target中填入对应的name,可以点击超链接之后在该框中打开链接-->
		<a href="http://www.bilibili.com" target="ifr1">b站</a>
		<a href="http://www.taobao.com" target="ifr2">淘宝</a>
		
	</body>
</html>

看一下效果：

（2）frame和frameset

做网页划分。

可以看一下下面的网页，分为上下左右的结构：

1、上中下三部分

假设现在要将网页分为上中下三部分，每个部分对应一个网页：

将网页划分为上中下三部分：

用<font style="color:#DF2A3F;">rows</font>属性来设置每个部分在高度上占多少：

🌱代码

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- <body> -->
		<frameset rows="200px,*,200px">
			<frame src="top.html" />
			<frame src="http://www.baidu.com"/>
			<frame src="bottom.html"/>
		</frameset>
	<!-- </body> -->
</html>

🍺输出

2、上下两部分

🌱代码

html 复制代码 
	<!-- 2.划分为上下两部分 -->
	<frameset rows="200px,*">
		<frame src="top.html" />
		<frame src="http://www.baidu.com"/>
	</frameset>

🍺输出

可以用border属性设置两个部分的边线宽度：

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- 1.划分为上中下三部分 -->
	<!-- <body> -->
		<!-- <frameset rows="200px,*,200px">
			<frame src="top.html" />
			<frame src="http://www.baidu.com"/>
			<frame src="bottom.html"/>
		</frameset> -->
	<!-- </body> -->
	
	<!-- 2.划分为上下两部分 -->
	<frameset rows="200px,*" border="0px">
		<frame src="top.html" />
		<frame src="http://www.baidu.com"/>
	</frameset>
	
</html>

输出：

3、左中右三部分

将网页分为左中右三列，需要用到<font style="color:#DF2A3F;">cols</font>属性。

🌱代码

html 复制代码 
	<!-- 3.划分为左中右三部分 -->
	<frameset cols="200px,400px,*">
		<frame src="01输入标签.html" />
		<frame src="http://www.bilibili.com" />
		<frame src="http://www.baidu.com" />
	</frameset>

🍺输出

4、左右两部分

直接将刚才左中右的其中一个删了就好。

🌱代码

html 复制代码 
	<!-- 4.划分为左右两部分 -->
	<frameset cols="400px,*">
		<frame src="http://www.bilibili.com" />
		<frame src="http://www.baidu.com" />
	</frameset>

🍺输出

5、整体代码

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- 1.划分为上中下三部分 rows属性 -->
	<!-- <body> -->
		<frameset rows="200px,*,200px">
			<frame src="top.html" />
			<frame src="http://www.baidu.com"/>
			<frame src="bottom.html"/>
		</frameset>
	<!-- </body> -->
	
	<!-- 2.划分为上下两部分 -->
	<frameset rows="200px,*" border="0px">
		<frame src="top.html" />
		<frame src="http://www.baidu.com"/>
	</frameset>
	
	<!-- 3.划分为左中右三部分 cols属性-->
	<frameset cols="200px,400px,*">
		<frame src="01输入标签.html" />
		<frame src="http://www.bilibili.com" />
		<frame src="http://www.baidu.com" />
	</frameset>
	
	<!-- 4.划分为左右两部分 -->
	<frameset cols="400px,*">
		<frame src="http://www.bilibili.com" />
		<frame src="http://www.baidu.com" />
	</frameset>
	
</html>

6、复合结构

假设要做下图的这种复合结构。

总体分为三部分：上中下。

中间的一部分又分为左右两部分。左边有超链接，点击超链接之后，对应的网页会显示在右边的区域。

<1> 总体为上中下

html 复制代码 
	<frameset rows="200px,*,200px">
		<frame src="01输入标签.html"/>
		<frame />
		<frame src="bottom.html"/>
	</frameset>

输出：

<2>中间部分分为左右两列

html 复制代码 
	<frameset rows="200px,*,200px">
		<frame src="01输入标签.html"/>
		<frameset cols="200px,*">
			<frame  />
			<frame  />
		</frameset>
		<frame src="bottom.html"/>
	</frameset>

输出：

<3>中间部分，第一列放置三个超链接，点击之后可以在右边展示网页

可以单独做一个网页，放置三个超链接：

left.html

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 超链接 -->
		<a href="http://www.taobao.com" target="ifr1">淘宝</a>
		<a href="http://www.baidu.com" target="ifr1">百度</a>
		<a href="http://www.bilibili.com" target="ifr1">B站</a>
	</body>
</html>

注意给左边的界面引入的是上面left.html网页，右边的界面起一个name名字为ifr1 ，三个超链接点开显示的位置target就是ifr1。

html 复制代码 
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<frameset rows="200px,*,200px">
		<frame src="01输入标签.html"/>
		<frameset cols="200px,*">
			<frame src="left.html" />
			<frame name="ifr1"/>
		</frameset>
		<frame src="bottom.html"/>
	</frameset>

</html>

输出：

第三节：css介绍和三种引入方式

（1）块标签与行内标签

块标签 >>>> 块元素 在页面上独占一行的标签

行内标签 >>>> 行内元素 在页面上不会独占一行的标签

1、span

<font style="color:#DF2A3F;">span</font>：行内标签（不会独占一行） 一般用于在网页上划定一个范围，一般结合CSS样式，帮助我们确定某些显示效果的作用范围。

现在有一段文字：

html 复制代码 
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>
		怎么重构？在这位研究员看来，未来企业不会再像今天这样去采购ERP、OA、CRM这些标准化的软件包，
		而直接买一套AI服务器，部署一套方便调用的中间层模型和数据库，
		然后业务需求报上去让AI自动生成企业需要的ERP，自动转出OA。
		"此前，软件是程序员一行行代码写出来的，以后的软件都是AI写出来的。"
		</p>
	</body>
</html>

我想让每一行设置为不同的颜色。可以先用span标签包裹上，然后设置不同的属性。比如：

span属性很少，基本上都是结合CSS样式，也就是结合style属性来进行样式的处理的。比如：

html 复制代码 
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>
			<span style="color:red;">怎么重构？在这位研究员看来，未来企业不会再像今天这样去采购ERP、OA、CRM这些标准化的软件包，</span>
			<span style="color:blue;">而直接买一套AI服务器，部署一套方便调用的中间层模型和数据库，</span>
			<span style="color:green;">然后业务需求报上去让AI自动生成企业需要的ERP，自动转出OA。</span>
			<span style="color:yellow;">"此前，软件是程序员一行行代码写出来的，以后的软件都是AI写出来的。"</span>
		</p>
	</body>
</html>

输出：

span用于划定样式作用的范围，在这个范围之内可以分别用不同样式来修饰目标。span是行内标签，中间不换行。

2、div

<font style="color:#DF2A3F;">div</font> ：块标签（独占一行） 一般用于做网页的布局。

比如现在有一段文字，用div包裹起来：

页面中显示的时候，可以看到独占一行（注意这里的红色框是我后来标上的）：

使用CSS样式调整一下显示出边线：

输出：

我们还可以设置小方块的宽和高，让它不要占满一行了：

html 复制代码 
	<!-- 2.div 块标签,独占一行 -->
	<div style="border:1px solid orangered;width:200px;height:200px;">
		对于模型，这位研究员抛出一个有点"反常识"的观点：不要投大语言模型，要投数据。
		模型说白了就是数据喂出来的，核心壁垒不在算法，而在数据。
	</div>

输出：

div做出的这样的小框，有什么作用呢？

可以打开京东首页来观察一下：

可以看到一个网页被分为了多个小方块，可以采用两种方式来做这种形式：

第一种是table，将整个网页做成一个巨大的表格，大块用跨行跨列去处理。（尽量不使用table，因为紧密性会很高，想要调整其中的某一个部分则需要对整个网页进行重新调整）

另一种方式就是div，将网页中的每一个小方块用一个div来替代，多个div可以将网页分为很多小方块。（推荐使用，调整其中一个小块，对其他小块的影响很小）

3、整体代码

🌱代码

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 1.span 行内标签,中间不换行 -->
		<p>
			<span style="color:red;">怎么重构？在这位研究员看来，未来企业不会再像今天这样去采购ERP、OA、CRM这些标准化的软件包，</span>
			<span style="color:blue;">而直接买一套AI服务器，部署一套方便调用的中间层模型和数据库，</span>
			<span style="color:green;">然后业务需求报上去让AI自动生成企业需要的ERP，自动转出OA。</span>
			<span style="color:yellow;">"此前，软件是程序员一行行代码写出来的，以后的软件都是AI写出来的。"</span>
		</p>
		
		<!-- 2.div 块标签,独占一行 -->
		<div style="border:1px solid orangered;width:200px;height:200px;">
			对于模型，这位研究员抛出一个有点"反常识"的观点：不要投大语言模型，要投数据。
			模型说白了就是数据喂出来的，核心壁垒不在算法，而在数据。
		</div>
	</body>
</html>

🍺输出

（2）什么是CSS

HTML 搭建网页的主体结构 毛坯房

CSS 修饰网页 让网页更漂亮 精装修

JS 做交互 智能家电

（3）CSS的引入方式

1、行内式引入

借助标签的style属性引入

<font style="color:#DF2A3F;">style</font>属性中的值 语法为 "样式名:样式值; 样式名:样式值;"

【案例】

假设现在有span包裹的一段文字：

现在想要给这句话加上不同的样式：

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 1.行内式引入
			   借助style属性引入-->
		<span style="font-size:20px;color:blue;background-color: greenyellow;">
			欢迎来到门的世界！
		</span>
	</body>
</html>

输出：

2、内嵌式

将css样式的代码抽取出来，通过选择器 确定样式作用范围。

在head标签中 ，使用一对<font style="color:#DF2A3F;">style</font>标签，定义css样式。

在style标签中 注释写法 /* */

减少相同代码的编写量，减少代码的维护工作量。

【案例】

假设现在有多个span，每个span有相同的样式：

现在想让所有字的颜色都改为红色，那么需要一个个修改。

我们发现，相同的代码大量重复出现。

可以在head标签中定义一个选择器，用style标签框起来，写上标签的名字比如span，然后将样式写入花括号当中即可。如下：

该选择器可以通过span这个名字，定位到当前网页上所有span标签的样式修饰。

🌱代码

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 选择器 -->
		<style>
			span{
				font-size:20px;color:lightcoral;background-color: greenyellow;
			}
		</style>
	</head>
	<body>
		<!-- 2.内嵌式 -->
		<span >
			欢迎来到楚门的世界！
		</span>
		<br />
		
		<span >
			欢迎来到楚门的世界！
		</span>
		<br />
		
		<span >
			欢迎来到楚门的世界！
		</span>
		<br />
		
	</body>
</html>

🍺输出

3、链接式

  • 行内式 只能将样式作用于当前标签。
  • 内嵌式 可以将样式作用于多个标签 ，不能作用于其他网页。
  • 链接式 可以将样式的作用范围扩大多个不同网页 。
    • 链接式可以将CSS代码放入独立的<font style="color:#DF2A3F;">.css</font>文件中，可以使当前页面更加简洁。
    • 每一个需要引入样式的HTML 在head标签中使用 <font style="color:#DF2A3F;">link</font>标签引入css文件即可。

【案例】

现在新建一个css样式文件：

然后将刚才内嵌式的选择器中的span以及其包裹的代码 一起拿过来，注意不用再写style标签了。

内嵌式在写的时候需要加上style标签，这是在告诉浏览器，这里面装的全是css代码。

现在链接式我们将代码都转移到css文件当中了，css文件本身就标志着这里面只能放css代码，所以此时就不需要再写style标签了。

接下来在head标签中，使用link标签引入css样式文件。

注意：

🌱代码

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<!-- 3.链接式
			   link标签 
			     href属性:指向文件的位置
			     rel属性:告诉浏览器引入的是什么类型的文件(stylesheet是样式表)
			     type属性:比如text/css表示引入的是文本类型的css(可以不写)-->
		<link href="css/mycss.css" rel="stylesheet" type="text/css" />
		
	</head>
	<body>
		<span >
			欢迎来到楚门的世界！
		</span>
		<br />
		
		<span >
			欢迎来到楚门的世界！
		</span>
		<br />
		
		<span >
			欢迎来到楚门的世界！
		</span>
		<br />
		
	</body>
</html>

🍺输出

注意：

链接式的好处就是，多个网页当中，也有span需要使用这个样式的时候，可以直接引入css文件。比如：

4、整体代码

①07CSS的引入方式

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 2.选择器 -->
		<style>
			span{
				font-size:20px;color:lightcoral;background-color: greenyellow;
			}
		</style>
		
		<!-- 3.链接式
			link标签 
			   href属性:指向文件的位置
			   rel属性:告诉浏览器引入的是什么类型的文件(stylesheet是样式表)
			   type属性:比如text/css表示引入的是文本类型的css(可以不写)-->
		<link href="css/mycss.css" rel="stylesheet" type="text/css" />
		
	</head>
	<body>
		<!-- 1.行内式引入
			   借助style属性引入-->
		<span style="font-size:20px;color:blue;background-color: greenyellow;">
			欢迎来到门的世界！
		</span>
		<br />
		
		<!-- 2.内嵌式 -->
		<span >
			欢迎来到楚门的世界！
		</span>
		<br />
		
		<span >
			欢迎来到楚门的世界！
		</span>
		<br />
		
		<span >
			欢迎来到楚门的世界！
		</span>
		<br />
		
	</body>
</html>

②mycss.css

html 复制代码 
span{
	font-size:20px;color:lightcoral;background-color: greenyellow;
}

5、补充

当三种引入方式同时作用于同一个标签，如果样式有冲突，谁的优先级更高，优先级原则、就近原则。（行内式最近，直接作用于当下的标签，优先级最高）

第四节：css的选择器

（1）三大基本选择器

一般不推荐直接在标签上面直接写style样式，因为代码的复用度很低，除非这个样式只是临时使用一下：

大部分情况都是使用内嵌式或者链接式：

不论是使用内嵌式还是链接式，都需要使用选择器 才能知道这个样式作用于哪个标签上。

以下是就算后台人员也要熟练使用的选择器：标签名选择器、id选择器、类选择器。

1、标签名选择器

标签名选择器也叫元素选择器。

给页面所有同名的标签定义样式的选择器。

语法为 <font style="color:#DF2A3F;">标签名{样式}</font>

比如：

🌱代码

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<!-- 1.标签名选择器 -->
		<style>
			span{
				background-color:skyblue;
				font-size:30px;
				font-family: "楷体";
				color: mediumvioletred;
			}
		</style>
	</head>
	<body>
		<span>今天是2026年6月7日，高考进行中...</span>
		<br />
		
		<span>祝各位考生旗开得胜！金榜题名！</span>
		<br />
		
		<p>以梦为马，不负韶华</p>
	</body>
</html>

🍺输出

同样我们也可以写p标签，将样式作用于p标签上：

2、id选择器

一般body中的任何一个标签 都有id属性。

id属性的值 一般在同一个网页上是不允许有重复值。span标签、p标签等都会有自己的id属性，名字不能有重复。

id属性一般用于帮助我们定位到页面上唯一的一个标签。

id属性值命名有规则：

  • 不能有空格和一些特殊符号
  • 特殊符号中仅可以使用 _ ，不推荐 $，会和jquery命名冲突
  • 不能以数字为开头
  • 推荐写法 应为字母开头数字放在后面

语法为 <font style="color:#DF2A3F;">#id值{样式}</font>

比如给id值为p1的地方加一个样式：

🌱代码

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<!-- 2.id选择器 -->
		<style>
			#p1{
				border:1px dotted blue;
				background-color:greenyellow;
				color:red;
				width:100px;
				height:100px;
			}
		</style>
	</head>
	<body>
		
		<span id="s1">今天是2026年6月7日，高考进行中...</span>
		<br />
		
		<span id="s2">祝各位考生旗开得胜！金榜题名！</span>
		<br />
		
		<p id="p1">以梦为马，不负韶华</p>
	</body>
</html>

🍺输出

如果id相同 ，显示样式会相同，但是这种写法极其不规范：

3、类选择器

一般body中的所有标签 都有<font style="color:#DF2A3F;">class</font>属性。

多个不同的标签 可以有相同的class属性值。

通过标签的class属性确定样式的作用范围。

语法为<font style="color:#DF2A3F;"> .class属性值{样式}</font>

上面说了id值不能重复，但是现在想要两个不同的标签使用相同的样式：

🌱代码

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<!-- 3.类选择器 -->
		<style>
			.c1{
				background-color: aquamarine;
				font-size: 40px;
				font-family: "微软雅黑";
				color:black;
				text-decoration:none;
			}
			
		</style>
	</head>
	<body>
		<p id="p3" class="c1">高考加油！</p>
		<h1 id="ha" class="c1">今天是个好天气</h1>
		
		<!-- #表示访问当前网页 -->
		<a href="#" class="c1">LuckyDay</a>
	</body>
</html>

🍺输出

注意这几个属性的含义：

4、整体代码

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<!-- 1.标签名选择器 -->
		<style>
			span{
				background-color:skyblue;
				font-size:30px;
				font-family: "楷体";
				color: mediumvioletred;
			}
		</style>
		
		<!-- 2.id选择器 -->
		<style>
			#p1{
				border:1px dotted blue;
				background-color:greenyellow;
				color:red;
				width:100px;
				height:100px;
			}
		</style>
		
		<!-- 3.类选择器 -->
		<style>
			.c1{
				background-color: aquamarine;
				font-size: 40px;
				font-family: "微软雅黑";
				color:black;
				text-decoration:none;
			}
			
		</style>
	</head>
	<body>
		
		<span id="s1">今天是2026年6月7日，高考进行中...</span>
		<br />
		
		<span id="s2">祝各位考生旗开得胜！金榜题名！</span>
		<br />
		
		<p id="p1">以梦为马，不负韶华</p>
		
		<p id="p2">年少莫欺少年穷，潜水怎能困蛟龙</p>
		
		<p id="p3" class="c1">高考加油！</p>
		<h1 id="ha" class="c1">今天是个好天气</h1>
		
		<!-- #表示访问当前网页 -->
		<a href="#" class="c1">LuckyDay</a>
	</body>
</html>

（2）其他选择器

(了解 熟悉)

1、层级选择器

通过层次关系 定位样式的作用范围。

层级选择器的每个层级的确定可以是标签名 id class。

<1>

比如，现在我想将样式作用于p标签里面的span上：

如果按照之前的写法，会将样式作用于所有的span上：

想要将样式仅仅作用于p标签里面的span，可以这样来写：

<2>

当然也可以有三层：

<3>

如果p标签有id值，也可以使用它的id：

<4>

如果不写font，则作用于p标签下面的所有font：

可以用class来标明想要作用的span标签：

每个层级之间，使用标签名或者id或者类都是可以的。

🌱代码

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    <!-- 1.层级选择器  -->
		<style>
			#p1 .s1{
				color:red;
			}
		</style>
	</head>
	<body>
		<span>近几天，市场剧烈波动，"AI泡沫论"甚嚣尘上。</span>
		
		<p id="p1">
			<font>
				<span class="s1">桥水基金创始人达利欧说：AI市场存在泡沫，而且水平"相对较高"。</span>
				<br />
			</font>
				<span class="s2">英伟达CEO黄仁勋说：AI存在巨大机会，算力需求才刚刚开始爆发。</span>
		</p>
	</body>
</html>

🍺输出

2、属性选择器

根据标签的某个属性的特定属性值确定样式的作用范围。

现在有两个输入框，若是直接作用于input，会将两个框都变大：

现在只想让密码框变大：

也不一定只写标签名input，可以给每个input添加class属性，比如：

属性选择器外面的那一层，可以是标签名/类/id

🌱代码

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    
		<!-- 2.属性选择器 -->
		<style>
			.i[type=password]{
				width:300px;
				height: 40px;
			}
		</style>
	</head>
	<body>
		<input class="i" type="text" />
		<input class="i" type="password" />
		<input class="i" type="password" />
	</body>
</html>

🍺输出

3、分组选择器

可以将多个不同层级关系 不同class属性 id 标签名同时使用相同的样式效果。

比如现在有四个标签，我想作用于这些标签上，它们id不同，class也不同，标签名也不同：

可以使用分组选择器，下面的这种写法不对：

需要使用逗号：

将四个标签都写上：

🌱代码

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<!-- 3.分组选择器 -->
		<style>
			h1 ,.ch,.s3,#pa{
				color:skyblue;
			}
		</style>
		
	</head>
	<body>
		<h1 id="ha">回到2026年，AI行业的泡沫看起来更大。</h1>
		<h2 class="ch">AI泡沫其实已经在破了，只不过很多人没意识到。</h2>
		<span class="s3">回看波澜壮阔的科技史，熊彼特提出的"创造性毁灭"永远都在上演。</span>
		<p id="pa">市场给AI基础设施的估值偏高，并不意味着一定会崩盘。</p>
	</body>
</html>

🍺输出

4、整体代码

🌱代码

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 1.层级选择器 -->
		<style>
			#p1 .s1{
				color:red;
			}
		</style>
		
		<!-- 2.属性选择器 -->
		<style>
			.i[type=password]{
				width:300px;
				height: 40px;
			}
		</style>
		
		<!-- 3.分组选择器 -->
		<style>
			h1 ,.ch,.s3,#pa{
				color:skyblue;
			}
		</style>
		
	</head>
	<body>
		<span>近几天，市场剧烈波动，"AI泡沫论"甚嚣尘上。</span>
		
		<p id="p1">
			<font>
				<span class="s1">桥水基金创始人达利欧说：AI市场存在泡沫，而且水平"相对较高"。</span>
				<br />
			</font>
				<span class="s2">英伟达CEO黄仁勋说：AI存在巨大机会，算力需求才刚刚开始爆发。</span>
		</p>
		
		<input class="i" type="text" />
		<input class="i" type="password" />
		<input class="i" type="password" />
		
		<h1 id="ha">回到2026年，AI行业的泡沫看起来更大。</h1>
		<h2 class="ch">AI泡沫其实已经在破了，只不过很多人没意识到。</h2>
		<span class="s3">回看波澜壮阔的科技史，熊彼特提出的"创造性毁灭"永远都在上演。</span>
		<p id="pa">市场给AI基础设施的估值偏高，并不意味着一定会崩盘。</p>
	</body>
</html>

🍺输出

（3）伪类选择器

1、a标签

写一个超链接：

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="http://www.baidu.com">百度</a>
	</body>
</html>

输出蓝色带有下划线的样式：

鼠标按住不动会变成红色：

可以修改鼠标悬停时的颜色：

将鼠标放在"百度"上面，会变成黄色：

还有其他几种状态：

html 复制代码 
/* 未访问的链接(该链接还没有被访问过) */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

先在当前网页按住Ctrl+Shift+Delete清除访问记录：

🌱代码

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			
			/* 1.未访问的链接 */
			a:link{
				color:cyan;
        text-decoration: none;
			}
			
			/* 2.访问过的链接 */
			a:visited{
				color:gray;
			}
			
			/* 3.鼠标悬停 */
			a:hover{
				color:greenyellow;
				
			}
			
			/* 4.点住不动 */
			a:active{
				color:orangered;
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com">百度</a>
	</body>
</html>

🍺输出

还未访问的链接是天蓝色，悬停在上面是绿黄色，点住不动是橘色，访问过的链接是灰色。

⭐注意

伪类选择器可以四个同时使用，也可以单个使用。

如果是四个一块使用，注意顺序。

  • <font style="color:crimson;background-color:rgba(222, 222, 222, 0.3);">a:hover</font> （悬停）必须在 CSS 定义中的 <font style="color:crimson;background-color:rgba(222, 222, 222, 0.3);">a:link</font> (未访问)和 <font style="color:crimson;background-color:rgba(222, 222, 222, 0.3);">a:visited</font> （已访问）之后，才能生效！
  • <font style="color:crimson;background-color:rgba(222, 222, 222, 0.3);">a:active</font>（点住不动） 必须在 CSS 定义中的 <font style="color:crimson;background-color:rgba(222, 222, 222, 0.3);">a:hover</font> （悬停）之后才能生效！
  • 伪类名称对大小写不敏感。

2、div标签

伪类选择器不仅适用于a标签，还可以在非超链接标签上进行使用的。

比如适用于div标签，但不涉及到访问过、未访问过。这里试一下悬停。

🌱代码

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			/* <1> a标签 */
			
			/* 1.未访问的链接 */
			a:link{
				color:cyan;
				text-decoration: none;
			}
			
			/* 2.访问过的链接 */
			a:visited{
				color:gray;
			}
			
			/* 3.鼠标悬停 */
			a:hover{
				color:greenyellow;
				
			}
			
			/* 4.点住不动 */
			a:active{
				color:orangered;
			}
			
			
			/* <2> div标签 */
			div{
				border:1px double greenyellow;
				width: 100px;
				height:100px;
				background-color: lightblue;
			}
			div:hover{
				background-color: yellow;
			}
			
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com">百度</a>
		<div></div>
	</body>
</html>

🍺输出

可以看到悬停时变为了黄色：

第五节：总结回顾

:::info 【输入标签】 input标签 :::
type属性 属性值
text 文本框
password 密码框
radio 单选框
checkbox 复选框
button 按钮
file 文件上传
:::color1 【文本域】 textarea标签 :::
:::color2 【下拉框】 select标签 :::
option子标签
:::success 【表单标签】 form标签 :::
在页面上没有显示效果 用于划定数据的提交范围
action属性 用于定义提交的地址
method属性 用于定义数据提交的方式
get 数据通过地址栏提交 数据量小 只能提交文本 相对不安全
post 数据单独打包发送 数据量大 可以提交文本和文件 相对安全
要求form内部的所有输入框有name 属性 通过value定义提交的值
name属性 用于让服务器区分数据的含义
提交按钮 input type='submit' 提交
type=reset 清空表单所有数据
::: 【框架标签】 :::
用于在当前网页引入其他网页
可以将多个网页整合到一个网页上
iframe标签 src属性 引入网页的地址
frameset 将网页划分上下 /左右 rows="20%,*,200px" /左右 cols="第一部分的宽度,...,..." 的几个部分
使用frameset要求当前网页不能有body标签
frame 上面分为了几部分，就要有几个frame src属性 引入网页的地址
::: 【CSS】 :::
做网页美化的，三种引入方式
行内式 通过标签的style属性引入 直接定义当前标签的CSS样式
内嵌式 在head标签中 使用一对style标签引入 通过选择器定位样式的作用范围
链接式 单独定义css外部样式文件 在head中 使用link标签 引入外部样式文件
::: 【三大基本选择器】 :::
标签名选择器 定位到页面上所有的同名标签 标签名{样式名:样式值;样式名:样式值; ... ...}
id选择器 通过id定位到页面上唯一的一个标签 #id值{样式名:样式值;样式名:样式值; ... ...}
class选择器 通过class属性定位到页面多个可以是不同名字的标签 .class值{样式名:样式值;样式名:样式值; ... ...}
::: 【其他选择器】 :::
层级选择器 通过父级元素逐层找到子元素 父级元素选择器 子元素选择器{}
属性选择器 通过指定标签名和属性值的方式 标签名[属性名=属性值]{}
分组选择器 选择器1,选择器2,...,选择器n{}
::: 【伪类选择器】 :::
用于分别定义标签的四种状态
未访问过 :link{}
访问过 :visited{}
鼠标悬停 :hover{}
鼠标激活(鼠标按住不放) :active{}
hover 必须在 link 和 visited 之后 active必须在hover之后
相关推荐
云水一下1 小时前
Vue.js从零到精通系列（六）：组合式函数与逻辑复用——打造自己的 Hooks 工具箱
前端·javascript·vue.js
IT_陈寒1 小时前
Java的ArrayList扩容把我坑惨了，原来是这样搞的
前端·人工智能·后端
snow@li1 小时前
Charles：软件能力深度解析 / 跨平台 HTTP/HTTPS 代理调试工具 / 客户端与互联网之间的中间人代理 / 拦截、查看、篡改所有网络流量
前端
UXbot1 小时前
移动端UI设计工具选型指南：iOS与Android设计标准支持对比
android·前端·低代码·ios·交互·团队开发·ui设计
程序员黑豆1 小时前
AI全栈开发 - Java：数据类型
java·前端
江华森1 小时前
Tomcat 10 实战部署指南：从零到生产级 Web 容器
java·前端·tomcat
放下华子我只抽RuiKe51 小时前
FastAPI 全栈后端（五）：后台任务与消息队列
前端·javascript·react.js·ai·前端框架·fastapi·ai编程
丷丩1 小时前
MapLibre GL JS第44课：生成并添加缺失图标
前端·javascript·gis·mapblibre gl js
热门推荐
01《置身钉内》原文-可播放阅读02Claude Code、Codex、Cursor三分天下：2026年AI编程Agent生态全景剖析03【AI】2026 年具身智能模型和世界模型总结04AI科技热点日报 | 2026年6月1日052026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？06GitHub 镜像站点072026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf082026年6月AI行业全景：从百模大战到Agent元年，这30天发生了什么？09Codex 下载安装指南：Windows 和 macOS 官方版下载10【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法