繁依Fanyi0

这个屌丝很懒，什么也没留下！

热门标签

HTML【常用的标签】、CSS【选择器】

作者：繁依Fanyi0 | 2024-05-19 13:56:30

踩

day45

HTML

继day44，w3cschool

常用的标签

k) 表格

表格由 table 标签来定义。每个表格均有若干行（由 tr 标签定义），每行被分割为若干单元格（由标签定义）。字母 td指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
完整的表格：

<table border="1" cellspacing="20px" cellpadding="5px">
	<thead> ---- 表头
	    <tr><th>Header</th></tr>	
	</thead>
	<tbody> --- 表内容
		<tr><td>Data</td></tr>	
	</tbody>			
	<tfoot> -- 表末尾
		<tr><td>Data</td></tr>
	</tfoot>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

常用：

table - 表格【存在，才有方框格子】
border设置边框【1表示一个像素，px省去了】
tr - 行
  th - 列（加粗、居中）
  td - 列（向左对齐）
1
2
案例1：采用表格来展示学员数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>

		<table border="1" width="300px">
			
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
			</tr>
			
			<tr>
				<td>小白</td>
				<td>女</td>
				<td>27</td>
			</tr>
			<tr>
				<td>小黑</td>
				<td>女</td>
				<td>23</td>
			</tr>
			<tr>
				<td>大雷</td>
				<td>女</td>
				<td>25</td>
			</tr>
			<tr>
				<td>小化</td>
				<td>女</td>
				<td>24</td>
			</tr>
			
		</table>
		
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

运行：
表格1

案例2：模拟计算器表格

跨行和跨列的单元格

Colspan:可横跨的列数

Rowspan：可横跨的行数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
        	rowspan="2" -- 占2行
        	colspan="2" -- 占2列
        -->	
		<table border="1" width="300px" height="400px">
			
			<tr>
				<th>C</th>
				<th>-></th>
				<th>+</th>
				<th>-</th>
			</tr>
			<tr>
				<th>7</th>
				<th>8</th>
				<th>9</th>
				<th>*</th>
			</tr>
			<tr>
				<th>4</th>
				<th>5</th>
				<th>6</th>
				<th>/</th>
			</tr>
			<tr>
				<th>1</th>
				<th>2</th>
				<th>3</th>
				<th rowspan="2">=</th>
			</tr>
			<tr>
				<th colspan="2">0</th>
				<th>.</th>
			</tr>
			
		</table>
		
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

运行：
计算器表格

l) 表单

HTML 表单用于收集用户输入
元素定义 HTML 表单：
<form> 
form elements
</form>
1
2
3
HTML 表单包含表单元素。

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

input：组件type属性text、password、radio【name属性相同情况下单选】、checkbox、file不同代表不同
submit【按钮，value设置按钮上的字】、image图片按钮、reset、button
默认选中checked
普通按钮扩展：onclick单击事件绑定一个函数【弹窗alert】

select：【下拉列表】option里写下拉内容
textarea：【文本域】注意：br会显示换行
可以设置只读属性、宽高、style设置固定大小【样式】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<form>
			
			输入框：<input type="text" /><br />
			密码框：<input type="password"/><br />
			单选框：
				<input type="radio" name="xxx"/>
				<input type="radio" name="xxx"/>
				<input type="radio" name="xxx"/>
				<br />
			多选框：
				<input type="checkbox" />
				<input type="checkbox" />
				<input type="checkbox" />
				<input type="checkbox" />
				<br />
			上传文件：<input type="file" /><br />
			下拉列表：
				<select>
					<option>aaa</option>
					<option>bbb</option>
					<option>ccc</option>
					<option>ddd</option>
					<option>eee</option>
				</select>
				<br />
			文本域：
				<textarea style="resize: none;" cols="20" rows="5" readonly="readonly">高山流水</textarea>
				<br />
				
			<input type="submit" value="提交按钮" /><!--将表单数据提交给服务器-->
			<input type="image" src="../img/星空一花.jpg" width="30px"/><!--和提交按钮的功能一致-->
			<input type="reset" value="重置按钮" /><!--将表单数据重置，就类似于清除-->
			<input type="button" value="普通按钮" onclick="fun01()"/>
			<button onclick="fun02()">普通按钮</button>
		</form>
		
		<script type="text/javascript">
			
			function fun01(){
				//弹框
				alert("山好");
			}
			
			function fun02(){
				//弹框
				alert("水好");
			}
			
		</script>
		
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

普通按钮可以自定义样式；函数相当于java中的方法；绑定单机事件

运行：点击按钮触发
表单1

案例：提交数据

action=“服务器地址” 设置服务器地址
method=“post” 设置请求方式（get/post）
get：服务器地址?键=值&键=值
post：服务器地址 + 数据包
注意：post请求的安全级别比get请求更高，所以表单传输大概率会选择post请求

注意：表单里的数据要想传给服务器，表单组件必须有name属性
做实验代码时用get好查看【地址那里可以看结果值】

<!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="password" placeholder="请输入密码..." /><br />
			性别：
				<input type="radio" name="sex" value="man" checked="checked"/>男
				<input type="radio" name="sex" value="woman"/>女
				<br />
			爱好：
				<input type="checkbox" name="hobbies" value="football" checked="checked"/>足球
				<input type="checkbox" name="hobbies" value="basketball"/>篮球
				<input type="checkbox" name="hobbies" value="shop"/>购物
				<br />
			城市：
				<select name="city">
					<option value="beijing">北京</option><!--设置value：数据库唯一标识-->
					<option value="shanghai">上海</option>
					<option value="guangzhou">广州</option>
					<option value="shengzheng">深圳</option>
					<option value="chengdu" selected="selected">成都</option>
					<option value="chongqing">重庆</option>
					<option value="dongguan">东莞</option>
				</select>
				<br />
			
			<input type="submit" value="注册" />
			
		</form>
		
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

运行：点击注册后，虽然现在找不到文件，但可以查看get格式显示
提交表单

补充说明：常见名词的解释

WWW：万维网（world wide web），它是提供网站相关服务，人们可以通过万维网服务进行网上聊天、网上冲浪、网购、搜索资料、查看天气、查看新闻、交友聊天等。

W3C：万维网联盟创建于1994年.是Web技术领域最具权威和影响力的国际中立性技术标准机构。我们学的html、css等标准都是由此机构主导制定。
HTTP：超文本传输协议（HTTP，HyperText Transfer Protocol），也就是浏览器和服务器端的网页传输数据的约束和规范。

CSS

CSS 概述
• CSS 指层叠样式表 (Cascading Style Sheets)
• 样式定义如何显示 HTML 元素
• 是为了解决内容与表现分离的问题
• 多个样式定义可层叠为一
• 样式通常存储在样式表中

理解：内容与样式一起写会难处理，即分离

选择器

选择器，选择你所需要修饰的HTML元素

通配符选择器

通配符选择器 – *

style【head标签里面】*{}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			*{
				color: red;
			}
			
		</style>
	</head>
	<body>
		
		<h1>一级标签</h1>
		<h2>二级标签</h2>
		<h3>三级标签</h3>
		<h4>四级标签</h4>
		<h5>五级标签</h5>
		<h6>六级标签</h6>
		
		<p>用良心做教育</p>
		<p>做真实的自己</p>
		
		<span>匠心育人</span>
		<span>初心至善</span>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

运行：
通配符选择器

基本选择器

基本选择器：
标签选择器：p、h。。。。。。
类选择器：【.开头】class属性标记
ID选择器：【#开头】id属性标记

标签选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 * 知识点：基本选择器 -- 标签选择器
			 */
			
			p{
				color: red;
			}
			
		</style>
	</head>
	<body>
		
		<h1>一级标签</h1>
		<h2>二级标签</h2>
		<h3>三级标签</h3>
		<h4>四级标签</h4>
		<h5>五级标签</h5>
		<h6>六级标签</h6>
		
		<p>用良心做教育</p>
		<p>做真实的自己</p>
		
		<span>匠心育人</span>
		<span>初心至善</span>
		
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

运行：
标签选择器

类选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 * 知识点：基本选择器 -- 类选择器
			 * 注意：类选择器使用.开头
			 */
			
			.myclass{
				color: red;
			}
			
		</style>
	</head>
	<body>
		
		<h1 class="myclass">一级标签</h1>
		<h2>二级标签</h2>
		<h3 class="myclass">三级标签</h3>
		<h4>四级标签</h4>
		<h5 class="myclass">五级标签</h5>
		<h6>六级标签</h6>
		
		<p>用良心做教育</p>
		<p>做真实的自己</p>
		
		<span>匠心育人</span>
		<span>初心至善</span>
		
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

运行：
类选择器

ID选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 * 知识点：基本选择器 -- ID选择器
			 * 
			 * 注意：
			 * 		id选择器使用#开头
			 * 		id唯一，不能重复
			 */
			
			#myid{
				color: red;
			}
			
		</style>
	</head>
	<body>
		
		<h1 id=myid>一级标签</h1>
		<h2>二级标签</h2>
		<h3>三级标签</h3>
		<h4>四级标签</h4>
		<h5>五级标签</h5>
		<h6>六级标签</h6>
		
		<p>用良心做教育</p>
		<p>做真实的自己</p>
		
		<span>匠心育人</span>
		<span>初心至善</span>
		
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

运行：
ID选择器

三种基本选择器的优先级

ID选择器 > 类选择器 > 标签选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			p{color: red;}
			
			.myclass{color: green;}
			
			#myid{color: blue;}
			
			
		</style>
	</head>
	<body>
		
		<p id="myid" class="myclass">用良心做教育</p>
		
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

运行：
基本选择器的优先级别

群组选择器

群组选择器【就是选择器组合作用】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			/*
			 * 知识点：群组选择器
			 */
			
			h1,p,span{color: red;}
			
		</style>
	</head>
	<body>
		
		<h1>一级标签</h1>
		<h2>二级标签</h2>
		<h3>三级标签</h3>
		<h4>四级标签</h4>
		<h5>五级标签</h5>
		<h6>六级标签</h6>
		
		<p>用良心做教育</p>
		<p>做真实的自己</p>
		
		<span>匠心育人</span>
		<span>初心至善</span>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

运行：
群组选择器

派生选择器

通过依据元素在其位置的上下文关系来定义样式

派生选择器：
后代选择器
子代选择器【直系】
相邻兄弟选择器【作用在后者】

后代选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 * 知识点：派生选择器/上下文关系选择器 -- 后代选择器
			 */
			
			ul a{color: red;}
			
		</style>
	</head>
	<body>
		
		<ul>
			<li>
				<a href="#">超链接1</a>
			</li>
			<li>
				<a href="#">超链接2</a>
			</li>
			<li>
				<a href="#">超链接3</a>
			</li>
		</ul>
		
		<ul>
			<li>
				<a href="#">超链接4</a>
			</li>
			<li>
				<a href="#">超链接5</a>
			</li>
			<li>
				<a href="#">超链接6</a>
			</li>
			<li>
				<a href="#">超链接7</a>
			</li>
		</ul>
		
		<a href="#">超链接8</a>
		<a href="#">超链接9</a>
		<a href="#">超链接10</a>
		
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

运行：
后代选择器

子代选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 * 知识点：派生选择器/上下文关系选择器 -- 子代选择器
			 */
			
			li>a{color: red;}
			
		</style>
	</head>
	<body>
		
		<ul>
			<li>
				<a href="#">超链接1</a>
			</li>
			<li>
				<a href="#">超链接2</a>
			</li>
			<li>
				<a href="#">超链接3</a>
			</li>
		</ul>
		
		<ul>
			<li>
				<a href="#">超链接4</a>
			</li>
			<li>
				<a href="#">超链接5</a>
			</li>
			<li>
				<a href="#">超链接6</a>
			</li>
			<li>
				<a href="#">超链接7</a>
			</li>
		</ul>
		
		<a href="#">超链接8</a>
		<a href="#">超链接9</a>
		<a href="#">超链接10</a>
		
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

运行：
子代选择器

相邻兄弟选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 * 知识点：派生选择器/上下文关系选择器 -- 相邻兄弟选择器
			 * 
			 * 注意：效果作用在后者
			 */
			
			a+a{color: red;}
			
		</style>
	</head>
	<body>
		
		<ul>
			<li>
				<a href="#">超链接1</a>
			</li>
			<li>
				<a href="#">超链接2</a>
			</li>
			<li>
				<a href="#">超链接3</a>
			</li>
		</ul>
		
		<ul>
			<li>
				<a href="#">超链接4</a>
			</li>
			<li>
				<a href="#">超链接5</a>
			</li>
			<li>
				<a href="#">超链接6</a>
			</li>
			<li>
				<a href="#">超链接7</a>
			</li>
		</ul>
		
		<a href="#">超链接8</a>
		<a href="#">超链接9</a>
		<a href="#">超链接10</a>
		
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

运行：
相邻兄弟选择器

属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。
例子 1
如果您希望把包含标题（title）的所有元素变为红色，可以写作：
*[title] {color:red;}

例子 2
与上面类似，可以只对有 href 属性的锚（a 元素）应用样式：
a[href] {color:red;}

例子 3
还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。
例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：
a[href][title] {color:red;}

其中属性+值【进一步限制作用范围】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 * 知识点：属性选择器
			 * 
			 * 单个属性：
			 * 		input[placeholder]{color: red;}
			 * 
			 * 单个属性+值：
			 * 		input[placeholder="请输入账号..."]{color: red;}
			 * 
			 * 多个属性：
			 * 		input[name][placeholder]{color: red;}
			 * 
			 * 多个属性+值：
			 * 		input[name="name"][type="text"]{color: red;}
			 */
			input[placeholder="请输入账号..."]{color: red;}
			
		</style>
	</head>
	<body>
		
		<form action="服务器地址" method="get">
			
			账号：<input type="text" name="username" placeholder="请输入账号..." /><br />
			密码：<input type="password" name="password" placeholder="请输入密码..." /><br />
			确认密码：<input type="password" name="repassword" /><br />
			姓名：<input type="text" name="name" /><br />
			性别：
				<input type="radio" name="sex" value="man" checked="checked"/>男
				<input type="radio" name="sex" value="woman"/>女
				<br />
			爱好：
				<input type="checkbox" name="hobbies" value="football" checked="checked"/>足球
				<input type="checkbox" name="hobbies" value="basketball"/>篮球
				<input type="checkbox" name="hobbies" value="shop"/>购物
				<br />
			城市：
				<select name="city">
					<option value="beijing">北京</option>
					<option value="shanghai">上海</option>
					<option value="guangzhou">广州</option>
					<option value="shengzheng">深圳</option>
					<option value="chengdu" selected="selected">成都</option>
					<option value="chongqing">重庆</option>
					<option value="dongguan">东莞</option>
				</select>
				<br />
			
			<input type="submit" value="注册" />
			
		</form>
		
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

运行：以单个属性+值为例
属性选择器

伪类

CSS 伪类用于向某些选择器添加特殊的效果。

锚伪类

在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

注意：颜色网上搜

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 * 知识点：锚伪类
			 * 理解：监听超链接的各种状态（未访问、已访问、鼠标悬停、鼠标按下）
			 */
			a:link {color: #FFCCFF}		/* 未访问的链接 */
			a:visited {color: #66FF66}	/* 已访问的链接 */
			a:hover {color: #33FFFF}	/* 鼠标移动到链接上 */
			a:active {color: #000033}	/* 选定的链接 */
		</style>
	</head>
	<body>
		
		<a href="http://www.jd.com">京东</a>
		
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

运行：未访问>选中>点击未松开鼠标>访问后返回
锚伪类

样式的优先级

知识点：样式的优先级别
分类：
内部样式表
外部样式表
行内样式表

优先级别：
行内样式 > 内部样式或外部样式（内外部样式表要看加载顺序）

理解：
为什么行内样式最优先呢？
因为行内样式最后加载

注意：【…/退回上一级，同级才能获取】
内外部样式【加载顺序，即哪个在前面】，行内样式在两者之后

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
        
        <!--外部样式表-->
		<link rel="stylesheet" type="text/css" href="../../css/new_file.css"/>
		
		<!--内部样式表-->
		<style type="text/css">
			p{color: red;}
		</style>
		
	</head>
	<body>
		
		<!--行内样式-->
		<p style="color: blue;">用良心做教育</p>
		
	</body>
</html>

外部样式css/new_file.css
p{
	color: green;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

运行：
样式的优先级别

小结

HTML 常用的标签

CSS选择器

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/593174