小小林熬夜学编程

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

热门标签

html常见的标签与使用 CSS选择器 CSS字体文本边框背景表格相关样式 CSS浮动使用一些简答题_字体样式相关属性有什么

作者：小小林熬夜学编程 | 2024-02-18 20:32:00

踩

字体样式相关属性有什么

html常见的文本标签

标题标签

写法：<h1> 一级标签 </h1>
		<h2> 二级标签 </h2>
		<h3> 三级标签 </h3>
		<h4> 四级标签 </h4>
		<h5> 五级标签 </h5>
		<h6> 六级标签 </h6>
范围：h1-h6(从大到小) 
功能：作为标题使用，并且依据重要性递减。
默认属性：自动加粗
1
2
3
4
5
6
7
8
9

分割线标签

写法：<hr/>
特点：没有开始标签 
1
2

段落标签

写法：<p>这是段落标签</p>
特点：这一段内容的前后都会带换行效果。
1
2

段落缩进标签

写法：<blockquote>这是段落缩进标签</blockquote>
1

滚动标签

写法：<marquee>这是滚动标签</marquee>
常用的属性：
	scrollamount:设置滚动速度：正整数的值（值越大，速度越快）
	behavior:滚动方式：
		slide :滚动某边框停止掉
		scroll:穿梭滚动（默认值）
		alternate:交替滚动
    direction:滚动方向
		left:从右到左（默认值）
		right:从左到右
		up:向上滚动
        down:向下滚动
bgcolor:背景颜色（颜色的英文单词或十六进制数）
1
2
3
4
5
6
7
8
9
10
11
12
13

格式标签

加粗标签

写法：<strong>我变粗了！</strong>
		<b>我变粗了</b>
strong和b是同样的效果
区别：strong有“文章语言语气强调”
		b只是普通加粗
1
2
3
4
5

斜体标签

写法：<em>我快倒了！</em>
		<i>我快倒了</i>
em和i是同样的效果
区别：em有语气强调
		i只是普通斜体
1
2
3
4
5

换行标签

写法：<br/>
作用：换个行
1
2

预先排版的文本展示标签

写法：<pre>
	 我
	 想怎
	 么样就怎
	 么样
	</pre>
作用：按照文本的格式原封不动的进行浏览器输出
1
2
3
4
5
6
7

计算机的编码代码标签

写法：<code>
		function checkUser(){
			alert("hello") ;
		}
	</code>
此标签用于表示计算机源代码或者其他机器可以阅读的文本内容，把文本变成等宽内容，暗示此段文本是源程序代码。
1
2
3
4
5
6

上下标标签

作用：一般情况用在网站门户首页 下面底部栏的版权所有信息或者注册商标信息。
1

上标标签

写法：x<sup>2</sup>
运行结果：x²
1
2

下标标签

写法CO<sub>2</sub>
运行结果：CO₂
1
2

html转义字符

浏览器解析(所有现代浏览器:谷歌/火狐/ie/edge/欧朋浏览器/洋葱浏览器...)
转义字符:
	&copy; 等价于©
	&reg; 等价于®
	&nbsp; 等价于一个空格
	&ensp; 等价于两个空格
	&lt; 等价于<
	&gt; 等价于>
1
2
3
4
5
6
7
8

超链接

超链接标签

写法：<a htef="#" target="_blank">超链接，点我跳转</a>
属性:
	href:链接到的资源地址url(统一资源定位符)
		url统一资源定位符的组成:
			协议+域名+端口 :网站默认都是将端口80(省略不写)
			http://www.baidu.com
	target:打开资源文件的方式
				_blank:新建一个窗口打开
				_self:(默认值),当前窗口直接打开	
协议:
	file:// 本地文件协议
	http:// http协议
	https://  适合发送隐私数据
	jdbc:mysql:// (jdbc的mysql协议)
	thunder://迅雷协议
	mailto:  邮件协议
	...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

以下为具体代码举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接标签</title>
	</head>
	<body>
		<a href="01_html常见的文本标签.html" target="_blank">点击跳转</a>
		<br/>
		<a href="http://www.baidu.com" target="_blank">进入百度</a>
		<br/>
		<a href="thunder://www.dytt8.net" target="_blank">高速通道-《米奇妙妙屋》</a>
		<br/>
		<a href="http://www.dytt8.net" target="_blank">普通通道-《米奇妙妙屋》</a>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

超链接的使用方式

方式一:跳转链接
	a标签的href:从一个页面链接到到另一个页面
方式二:锚链接
	写法：
	同一个页面下
		1)创建锚点(跳转标记) 
			<a name="锚点名称"></a>
		2)创建跳转到锚点的链接地址
			<a href="#锚点名称">文本...</a>
	不同页面下
		1)创建锚点(跳转标记)
			<a name="锚点名称"></a>
        2)创建跳转到锚点的链接地址
			<a href="跳转到另一个页面地址的url地址#锚点名称">
1
2
3
4
5
6
7
8
9
10
11
12
13
14

图像标签

img标签

写法：<img src="#图片链接" 
			title="图像标题" 
			width=”10px" 
			height="10px“ 
			alt="图片失效了" 
			align="right" />
一些基本属性：
	src:链接到图片资源地址 (相对路径)
		相对路径注意事项:页面存储位置是否在同级目录下
		(绝对路径:就是直接指定磁盘上的具体图片位置)
	title:图像的标题文字提示
	设置宽和高:
		width和height 单位为px或者是权重百分比%
	alt:替代文本 (当图片链接失效了,给文字提示信息)
	align:(左右浮动)
		left(左对齐)
		right(右对齐)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

图像链接

将img标签包裹在a标签中, 在a标签中设置图像链接跳转地址。
写法：<a href="adv.html" target="_self">
			<img src="img/OIP-C.jpg"
				 width="400px"
				 height="300px"
				 align="right"/>
		</a>
1
2
3
4
5
6
7

表格

表格标签

写法：
<table>
	<caption>这是一个三行三列表格</cation>
		<tr>
			<th></th>
			<th></th>
			<th></th>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>
子标签caption:指定表格的标题内容
	tr:行标签
	th:表头(特殊单元,居中加粗)
	td:数据表内容普通单元格
table标签的常见属性:
	border="表格边框大小"
	cellspacing="单元格的边框和table边框的距离"
	width和height:表格宽度和高度像素或者百分比
	bgcolor:背景颜色
表格单元格的合并属性:
	合并行(行合并)rowspan="所占的单元格的数量"
	合并列(列合并)colspan="单元格的数量"
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

以下是具体代码举例：

代码用到了以上所有标签和标签属性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格标签</title>
	</head>	
	<body>
		<table border="1px" 
				align="center"
				cellspacing="0"
				bgcolor="pink"
				width="500px"
				height="500px"
				>
			<caption>学生成绩表</caption>
		<tr>
			<th>学号</th>
			<th>姓名</th>
			<th>班级</th>
			<th>成绩</th>
		</tr>
		<tr align="center">
			<td>2012</td>
			<td>张三</td>
			<td>1班</td>
			<td>80</td>
		</tr>
		<tr align="center">
			<td>2013</td>
			<td>李四</td>
			<td>2班</td>
			<td>98</td>
		</tr>
		<tr align="center">
			<td>2014</td>
			<td>王五</td>
			<td rowspan="2">3班</td>
			<td>100</td>
		</tr>
		<tr align="center">
			<td>2015</td>
			<td>赵六</td>
			<!-- <td>3班</td> -->
			<td>90</td>
			<tr align="center">
				<td colspan="3">平均成绩</td>
				<!-- <td></td>
				<td></td> -->
				<td>未知</td>
			</tr>
		</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
47
48
49
50
51
52
53
54

表格嵌套

以下是具体代码举例：

<!-- 表格嵌套举例 简单的页面-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格嵌套</title>
	</head>
	<body>
<!-- 大的表格一行一列 -->
		<table border="1px" cellpadding="0" width="100%">
			<tr>
				<!-- 第一部分:头部Logo部分 -->
				<table>
					<tr>
						<td>
							<img src="img/英特尔大logo.jpg" 
								 align="center" 
								 width="900px"/>
						</td>
						<td align="left">
							<a href="https://world.taobao.com/wow/z/oversea/SEO-SEM/ovs-pc-login"
								target="_blank">登录</a>
							<a href="https://world.taobao.com/wow/z/oversea/SEO-SEM/ovs-pc-register"
								target="_blank">注册</a>
						</td>
					</tr>	
				</table>
				<!-- 第二部分 导航条 -->
				<table>
				
				<!-- 每一个标签都有style样式 -->
				<!-- <tr style="background-color: black;"> -->
				<tr>
					<td>
						<a href="#"
							target="_blank">首页</a>
						<a href="#"
							target="_blank">CPU</a>
						<a href="#"
							target="_blank">主板套餐</a>
						<a href="#"
							target="_blank">固态硬盘</a>
					</td>
				</tr>
				</table>
				<!-- 第三部分:轮播图指定图片 -->
				<table>
					<tr>
						<td>
							<img src="./img/intel轮播图1.jpg" width="100%" />
							<img src="img/intel轮播图2.jpg" width="100%" />
						</td>
					</tr>
				</table>
				<!-- 第四部分:热门商品 -->
				<table>
					<tr>
						<td>
							<a href=product_info.html
								target="_blank">
							<img src="./img/热门商品1.png">
							</a>
							<a href=product_info.html
								target="_blank">
								
								
							<img src="./img/热门商品2.png">
							</a>
							<a href=product_info.html
								target="_blank">
							<img src="./img/热门商品3.png">
							</a>
						</td>
					</tr>
				</table>
			</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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

<!-- prduct_info.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品信息</title>
	</head>
	<body>
		处理器真好
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11

块标签

块标签div

写法：<div>这是div块标签</div>
块级的块标签，定义一块，默认占满一行，进行内容的显示。
	1）默认占满一行。
	2）会自动换行。
适用于大量数据展示。
1
2
3
4
5

块标签span

写法：<span>这是span块标签</span>
行级的块标签，一行上定义一个块，进行内容的显示。
1）有多少内容，就会占用多大空间。
2）不会自动换行。
适用于少量数据展示
1
2
3
4
5

块标签的应用场景

div标签应用场景

应用网页布局
使用div将任意html元素(标签)包裹起来,
在通过css(Casading Style Sheet:层叠样式表)进行样式修饰达到一种层级布局的效果。
1
2
3

span标签应用场景

相对于div进行少量数据的块标签显示。
1

列表

无序列表

列表项前面有标记（实心圆点符号、空心圆点符号和实心小正方形符号等）。
写法：<ul>
		<li></li>
		<li></li>
		<li></li>
	</ul>

ul属性 type="指定列表项前面的标记"
		disc:实心圆点
		cicle:空心圆点
		square:实心小正方形
子标签li（列表项）
1
2
3
4
5
6
7
8
9
10
11
12

以下是具体代码举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>无序列表</title>
		<!-- <style>
		ul li{
			display:inline;
		}
		</style> -->
	</head>
	<body>

		你喜欢的篮球明星是？
		<ul type="cicle">
			<li>
				<a href="#">科比</a>
			</li>
			<li>
				<a href="#">詹姆斯</a>
			</li>
			<li>
				<a href="#">乔丹</a>
			</li>
			<li>
				<a href="#">kk</a>
			</li>
		</ul>
	</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

有序列表

列表项前面有标记（阿拉伯数字、罗马数字和大小写字母等）。
写法:<ol>
		<li></li>
		<li></li>
		<li></li>
	</ol>
ol属性 type="指定列表项前面的标记"
		默认值:1.....
		其他标记
			A
			I
子标签li（列表项）
1
2
3
4
5
6
7
8
9
10
11
12

以下是具体代码举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>有序列表</title>
	</head>
	<body>
		cxr是个啥？
		<ol type="">
			<li>sz</li>
			<li>bm</li>
			<li>hh</li>
			<li>pz</li>
		</ol>
		
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

自定义列表

写法：<dl>
		<dt></dt>
			<dd></dd>
		<dt></dt>
			<dd></dd>
	</dl>
dl:定义自定义列表
	dt：自定义的列表项
		dd:自定义列表项中的具体内容
1
2
3
4
5
6
7
8
9

以下是具体代码举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自定义列表</title>
	</head>
	<body>
		<p>公司项目部架构如下</p>
		<dl>
			<dt>项目总监</dt>
			<dd>技术总监</dd>
			<dd>架构总监</dd>
			<dd>管理总监</dd>
			<dt>攻城狮</dt>
			<dd>攻城狮1</dd>
			<dd>攻城狮2</dd>
			<dd>攻城狮3</dd>
		</dl>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

表单元素

最常见表单的应用场景

用户通过表单提交,将用户数据提交到服务器端登录或者注册.
1

以下是具体代码举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单元素</title>
	</head>
<!--
	最常见表单的应用场景:
		用户通过表单提交,将用户数据提交到服务器端
		登录或者注册
 -->
	<body>
		<!-- 表单标签form-->
		<form action="server.html" method="get">
		<!-- input type="text" 文本输入框
			value属性:给输入框指定的默认值 
			h5的新增属性
			 placeholder="输入框的提示文字" (鼠标光标进入输入框提示文字消失了)
			 
			 表单项必须给定name属性 ="见名知意",给后端标记用户输入的具体内容(否则,action地址不知道前端提交的内容)
		 -->
		用户名：<input type="text" 
						name="wyh" 
						placeholder="请输入用户名" /> 
		<br/>
		<!-- 密码输入框 -->
		密&ensp;&ensp;码：<input type="password" 
								name="123"
								placeholder="请输入密码" />
		<br/>
		<!-- input type="submit" 提交按钮(特殊按钮) -->
		<input type="submit" value="登录" />
		<br/>
		</form>
		
		<!-- 表单标签form-->
		<form action="server.html" method="post">\
		<!-- input type="text" 文本输入框
			value属性:给输入框指定的默认值 
			h5的新增属性
			 placeholder="输入框的提示文字" (鼠标光标进入输入框提示文字消失了)
			 
			 表单项必须给定name属性 ="见名知意",给后端标记用户输入的具体内容(否则,action地址不知道前端提交的内容)
		 -->
		用户名：<input type="text" 
						name="wyh" 
						placeholder="请输入用户名" /> 
		<br/>
		<!-- 密码输入框 -->
		密&ensp;&ensp;码：<input type="password" 
								name="123"
								placeholder="请输入密码" />
		<br/>
		<!-- input type="submit" 提交按钮(特殊按钮) -->
		<input type="submit" value="登录" />
		<br/>
		</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

表单中常见的表单项

输入相关的组件:
	<input type="text"/> 文本输入框
	<input type="password"/> 密码输入框
	<input type="radio"/>  单项按钮
	<input type="checkbox"/> 复选框
	<input type="file"/> 文件上传组件
	<input type="date"/> 日期组件  yyyy/MM/dd(这种格式年份/月份/月中日期)
	<input type="button" value="按钮的默认值"/> 普通按钮	
	<input type="submit"/> 特殊的提交按钮:将表单项提交到form的action地址上
	<input type="rest"/> 重置清空
	<input type="email"/> 输入有效的时候必须有@标记	
下拉菜单:
	<select>
		<option>下拉选项</option>
	</select>
文本域:
	<textarea> (网页简历,自我介绍:写一段文本)</textarea>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

以下是具体代码举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常见的表单项</title>
	</head>
        <body>
            <form action="server.html" method="get">
                用户名：
                <input type="text" 
                        placeholder="请输入用户名"
                        name="name" />
                <br/>
                密&ensp;&ensp;码：
                <input type="password"
                        placeholder="请输入密码"
                        name="password"/>
                <br/>

                性&ensp;&ensp;别：
                <!-- 同一组信息:给定同名的name属性:给后端标记用户选的内容是什么 -->
                <input type="radio" 
                        value="0"
                        name="sex" />男
                <input type="radio"
                        value="1"
                        name="sex" />女
                <br/>
                爱&ensp;&ensp;好：
                <!-- 同一组信息:给定同名的name属性:给后端标记用户选的内容是什么 -->
                <input type="checkbox"
                        value="yuanshen"
                        name="hobby"/>yuanshen
                <input type="checkbox"
                        value="lol"
                        name="hobby"/>lol
                <input type="checkbox"
                        value="cf"
                        name="hobby"/>cf
                <br/>
                籍&ensp;&ensp;贯：
                <!-- 下拉菜单 -->
                <select>
                    <option value="blank">请选择</option>
                    <option value="0">山西省</option>
                    <option value="1">山东省</option>
                    <option value="2">河北省</option>
                    <option value="3">河南省</option>
                </select>	
                <br/>
                出生日期：
                <input type="date"
                        name="birthday"/>
                <br/>
                <!-- 文件上传组件 -->
                上传图片：
                <input type="file" 
                        name="photo" />
                <br/>
                自我介绍：
                <!-- 文本域
                        rows:指定行数
                        cols:一行支持的列数
                -->
                <textarea cols="30" rows="5">
                    chenxinrushigeshazi
                </textarea>
                <br/>
                邮&ensp;&ensp;箱：
                <input type="email"
                        name="my_email"
                        placeholder="请输入你的邮箱地址"/>
                <br/>
                <!-- 普通按钮 -->
                <input type="button" value="点我没用" />
                <br/>
                <input type="submit" value="提交" />
                <input type="reset" 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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

<!-- server.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>后台服务器地址</title>
	</head>
	<body>
		正在校验中！
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11

table嵌套表单

以下是具体代码举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>格式优雅的表单</title>
<!-- 
			table不能嵌套form,form是可以嵌套table的
-->
	</head>
	<body background="img/bg.jpg">
		<form action="server.html" method="get">
			<table border="0px" 
					cellspacing="0" 
					width="1000"
					 height="500"
					 align="center"
					 bgcolor="white">
				<caption><b>注册用户</b></caption>
				
					<tr align="center">
						<td>用户名：</td>
						<td>
						<input type="text" 
								placeholder="请输入用户名"
								name="name" />
						</td>
					</tr>
					
					<tr align="center">
						<td>密&ensp;&ensp;码：</td>
						<td>
							<input type="password"
					placeholder="请输入密码"
					name="password"/>
						</td>
					</tr>
					
					<tr align="center">
						<td>性&ensp;&ensp;别：</td>
						<td>
							<input type="radio" 
								value="0"
								name="sex" />男
						<input type="radio"
								value="1"
								name="sex" />女
						</td>
					</tr>
					<tr align="center">
						
						<td>爱&ensp;&ensp;好：</td>
						<td>
							<input type="checkbox"
									value="yuanshen"
									name="hobby"/>yuanshen
							<input type="checkbox"
									value="lol"
									name="hobby"/>lol
							<input type="checkbox"
									value="cf"
									name="hobby"/>cf
						</td>
					</tr>
					
					<tr align="center">
						
						<td>籍&ensp;&ensp;贯：</td>
						<td>
							<select>
								<option value="blank">请选择</option>
								<option value="0">山西省</option>
								<option value="1">山东省</option>
								<option value="2">河北省</option>
								<option value="3">河南省</option>
							</select>
						</td>
					</tr>
					
					<tr align="center">
						
						<td>出生日期：</td>
						<td>
							<input type="date"
									name="birthday"/>
						</td>
					</tr>
					<tr align="center">
						<td colspan="2">
							<input type="submit" value="注册" />
						</td>
					</tr>
			</table>
		</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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

<!-- server.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>后台服务器地址</title>
	</head>
	<body>
		正在校验中！
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11

框架标签

frameset框架集

注意：不能和body一块用，要么body标签去掉,要么在body前面去使用frameset
写法：<frameset> </frameset>
一些属性：
	rows="由上而下看的每一个部分占用的权重百分比"
	cols="由左到右看的每一个部分占用的权重百分比"
frameset框架集能与frameset框架集和frame框架嵌套使用。
1
2
3
4
5
6

frame框架

写法：<frame> </frame>
1

以下是具体代码举例：

<!-- index.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>xxx后台管理系统</title>
	</head>
	
	<!-- frameset框架集 不能和body一块用
	    要么body标签去掉,要么在body前面去使用frameset
	 -->	
	 
	 <!-- 框架集
		rows="由上而下看的每一个部分占用的权重百分比"
	 -->
	<frameset rows="20%,*">
		<!-- 20%属于logo头部页面 -->
		<frame src="header.html" />
		
		<!-- *:代表属于的部分(整个从左到右整体部分) 又可以从左到右划分两部分
				
		 -->
		<frameset cols="15%,*">
			<!-- 15%属于左边菜单 -->
			<frame src="menu.html" />
			<!-- *,剩余中间主页 -->
			<!-- 
			  src:框架包含的页面地址
				name属性:给框架其名称标识
			 -->
			<frame src="main.html" name="main" />
		</frameset>
	</frameset> 
	<!-- <body>
	</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

<!-- main.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>主页面</title>
	</head>
	<body>
		<img src="../img/主页面.jpg" />
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11

<!-- menu.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li>
				<!-- 如果超链接在框架中 frame使用,target指定为在哪一个frame中打开
				 target必须和frame中的name属性名称一致 
				 -->
				<a href="main.html" target="main">首页</a>
			</li>
			<li>
				<a href="product/product_lists.html" target="main">酷睿i9</a>
			</li>
			<li>
				<a href="product/product_lists - 副本.html" target="main">酷睿i7</a>
			</li>
			<li>
				<a href="product/product_lists - 副本 (2).html" target="main">酷睿i5</a>
			</li>
			<li>
				<a href="#">酷睿i3</a>
				</li>
		</ul>
	</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

<!-- header.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>头部页面</title>
	</head>
	<body>
		<div>
			<img src="../img/英特尔大logo.jpg" 
				width="100%"
				height="100px"/>
		</div>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!-- product_lists - 副本 (2).html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>酷睿i5</title>
	</head>
	<body>
		<table border="1px" 
			align="center" 
			cellspacing="0" >
			<tr>
				<th>商品编号</th>
				<th>商品名称</th>
				<th>商品价格</th>
				<th>商品型号</th>
				<th>商品生产企业</th>
				<th>商品图片</th>
			</tr>
			<tr>
				<td>1</td>
				<td>酷睿i5-13900KF</td>
				<td>5849</td>
				<td>13代i5新品</td>
				<td>intel</td>
				<td>
					<img src="../../img/酷睿i9（1）.jpg_.webp" />
				</td>
			</tr>
			<tr>
				<td>2</td>
				<td>酷睿i5-13900K</td>
				<td>5649</td>
				<td>13代i5新品</td>
				<td>intel</td>
				<td>
					<img src="../../img/酷睿i9（2）.jpg_.webp" />
				</td>
			</tr>
			<tr>
				<td>3</td>
				<td>酷睿i5-13900KS</td>
				<td>6849</td>
				<td>13代i5新品</td>
				<td>intel</td>
				<td>
					<img src="../../img/酷睿i9（1）.jpg_.webp" />
				</td>
			</tr>
			<tr>
				<td>4</td>
				<td>酷睿i5-14900KS</td>
				<td>8849</td>
				<td>13代i5新品</td>
				<td>intel</td>
				<td>
					<img src="../../img/酷睿i9（2）.jpg_.webp" />
				</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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

<!-- product_lists - 副本 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>酷睿i7</title>
	</head>
	<body>
		<table border="1px" 
			align="center" 
			cellspacing="0" >
			<tr>
				<th>商品编号</th>
				<th>商品名称</th>
				<th>商品价格</th>
				<th>商品型号</th>
				<th>商品生产企业</th>
				<th>商品图片</th>
			</tr>
			<tr>
				<td>1</td>
				<td>酷睿i7-13900KF</td>
				<td>5849</td>
				<td>13代i7新品</td>
				<td>intel</td>
				<td>
					<img src="../../img/酷睿i9（1）.jpg_.webp" />
				</td>
			</tr>
			<tr>
				<td>2</td>
				<td>酷睿i7-13900K</td>
				<td>5649</td>
				<td>13代i7新品</td>
				<td>intel</td>
				<td>
					<img src="../../img/酷睿i9（2）.jpg_.webp" />
				</td>
			</tr>
			<tr>
				<td>3</td>
				<td>酷睿i7-13900KS</td>
				<td>6849</td>
				<td>13代i7新品</td>
				<td>intel</td>
				<td>
					<img src="../../img/酷睿i9（1）.jpg_.webp" />
				</td>
			</tr>
			<tr>
				<td>4</td>
				<td>酷睿i7-14900KS</td>
				<td>8849</td>
				<td>13代i7新品</td>
				<td>intel</td>
				<td>
					<img src="../../img/酷睿i9（2）.jpg_.webp" />
				</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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

<!-- product_lists,html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>酷睿i9</title>
	</head>
	<body>
		<table border="1px" 
			align="center" 
			cellspacing="0"
			width="1000" >
			<tr>
				<th>商品编号</th>
				<th>商品名称</th>
				<th>商品价格</th>
				<th>商品型号</th>
				<th>商品生产企业</th>
				<th>商品图片</th>
				<th>修改信息</th>
			</tr>
			<tr>
				<td>1</td>
				<td>酷睿i9-13900KF</td>
				<td>5849</td>
				<td>13代i9新品</td>
				<td>intel</td>
				<td>
					<img src="../../img/酷睿i9（1）.jpg_.webp" />
				</td>
				<td>
					<a href="#">修改</a>
					<a href="#">删除</a>
				</td>
			</tr>
			<tr>
				<td>2</td>
				<td>酷睿i9-13900K</td>
				<td>5649</td>
				<td>13代i9新品</td>
				<td>intel</td>
				<td>
					<img src="../../img/酷睿i9（2）.jpg_.webp" />
				</td>
				<td>
					<a href="#">修改</a>
					<a href="#">删除</a>
				</td>
			</tr>
			<tr>
				<td>3</td>
				<td>酷睿i9-13900KS</td>
				<td>6849</td>
				<td>13代i9新品</td>
				<td>intel</td>
				<td>
					<img src="../../img/酷睿i9（1）.jpg_.webp" />
				</td>
				<td>
					<a href="#">修改</a>
					<a href="#">删除</a>
				</td>
			</tr>
			<tr>
				<td>4</td>
				<td>酷睿i9-14900KS</td>
				<td>8849</td>
				<td>13代i9新品</td>
				<td>intel</td>
				<td>
					<img src="../../img/酷睿i9（2）.jpg_.webp" />
				</td>
				<td>
					<a href="#">修改</a>
					<a href="#">删除</a>
				</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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

新增元素video元素

浏览器需要flash插件,浏览器通过video元素进行视频的播放
	video元素
		属性:width:宽度 以及height:高度
		controls="controls"  h5的video控制视频播放
	source子标签:指定 加载视频连接地址 src属性
		type="媒体类型 举例.mp4/.mp3/.ogg等等都是媒体类型"
1
2
3
4
5
6

以下是具体代码举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>video</title>
	</head>
	<body>
		<video height="500px" width="700px" controls="controls">
			<source type="audio/mp4" src="mp4/OPPO-京东.mp4"></source>
			<!-- 添加多个source标签 -->
		</video>
		<p style="font-weight: bold;">gege </p>
			<p style="font-size:20px;font-weight: 900;">2023年7月13日19:57:32</p>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

CSS使用方式

行内样式

1) (如果某个页面中某个位置单独去使用某个样式,可以使用行内样式)
		每一个标签都有style属性="css代码"
			样式名称:值;样式名称2:值2;...
1
2
3

内部样式(内联)

在style标签体 通过
	选择器{
		样式属性名称:值;
		样式属性名称2:值2;
	}
写法：<style>
		/* 选择器 */
		a{
			text-decoration: none;
			color: skyblue;
			font-size: 50px;
		}
	</style>
优点:一次性控制多个标签
弊端:css代码和html标签混合使用,不利于后期管理(阅读性差)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

外部方式(外联)

方式3:外部方式(外联) 导入css文件 
		link的href属性导入css文件地址
		link写法：<link href="#" rel="stylesheet" />
			rel:固定写法 stylesheet:系统库中的层叠样式表
1
2
3
4

以下是具体代码举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS的使用方式</title>
	</head>
	<!-- <style>
		/* 选择器 */
		a{
			text-decoration: none;
			color: skyblue;
			font-size: 50px;
		}
	</style> -->
	<link href="css/mycss.css" rel="stylesheet" />
	<body>
		<a href="#" 
			style="text-decoration: none;
					color: rosybrown;
					font-size: 40px;">点我1111</a>
		<a href="#">点我试试</a>
		<a href="#">别点我</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

<!-- 1.行内样式 -->
	<body>
		<p style="text-decoration:none;color:red;font-size:20px;">2023年7月13日19:57:32</p>
	<body>
<!-- 2.内部样式 -->
     <style>
         p{
             font-size:20px;
             coloer:red;
             text-decoration:none;
         }
     </style>
     <body>
         <p>2023年7月13日20:07:24</p>
     </body>
<!-- 3.外部样式 -->
	<!-- mycss.css -->
        p{
        	font-size:20px;
            coloer:red;
            text-decoration:none;
        }
	<!-- css.html -->
        <body>
            <p>2023年7月13日20:12:29</p>
        </body>
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

常见的CSS选择器

id选择器

id选择器(同一个页面标签id属性值必须"唯一")
写法: #id属性值{
		样式名称:值;
		...
		} 
id选择器优先级最大
1
2
3
4
5
6

class 类选择器

同一个页面标签元素的class属性值是可以重复的	
写法: .class属性值{
			属性名称:值;
			属性名称2:值2;
			...
			}
class 类选择器优先级次于id选择器
1
2
3
4
5
6
7

标签名称选择器

写法： 标签名称{
			样式属性:值;
			...
		}
		
	优先级:
		标签名称选择器 < class选择器 < id选择器
1
2
3
4
5
6
7

后代选择器

写法： 标签1 标签2{
			样式属性:值;
			...
			}
作用：标签1后包含标签2的所有相关标签样式属性都对于改变。
1
2
3
4
5

并集选择器

写法：标签1，标签2{
			样式属性:值;
			...
			}
作用：同时选中多个标签
1
2
3
4
5

伪类选择器

锚伪类:
		将一个标签的状态划分为以下几种:
			1)鼠标未访问过的状态 link
			2)鼠标经过这个元素的状态 hover
			3)鼠标经过了并且点击在这个元素状态:active
			4)鼠标访问的状态(上面3)之后的,点击并且松开了) visited
	代码:
	选择器:状态名称(不区分大小写)

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
		在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
		伪类名称对大小写不敏感。
1
2
3
4
5
6
7
8
9
10
11
12

以下为具体代码举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>

		<style>
			/* 鼠标未访问*/
			a:link{
				font-size: 40px;
				color: red;
			}
			/* 鼠标访问过的状态 */
			a:visited{
				font-size: 30px;
				color: blue;
			}
			/* 鼠标经过 */
			a:hover{
				font-size: 45px;
				color: pink;
			}
			/* 激活状态 */
			a:active{
				font-size: 30px;
				color: green;
			}
		</style>
	</head>
	<body>
		<a href="02_h5新增video元素.html" target="_blank">恒大商城</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

CSS字体相关的样式属性

font-family:字体库的类型:楷体/宋体/其他/黑体
font-style:字体样式
			normal:文字正常显示(正常体:默认值)
			italic:文字"斜体"
font-weight:属性指定字体的粗细
			适当加粗:bold
font-size:字体大小
1
2
3
4
5
6
7

CSS之文本样式

文本样式:color
	color: deepskyblue;
文本对齐方式:text-align
			left:默认值 左对齐
			center:居中
			right:右对齐
文本装饰:text-decoration:
			underline:设置下划线
			overline:上划线
			line-through中划线
			none:去掉文本修饰
			line-through
设置字母大写:uppercase/lowercase
			text-transform: uppercase;
文本缩进:第一行文本设置 缩进效果
			text-indent: 500px;
行高:line-height 属性用于指定行之间的间距
			line-height: 60px;
单词间距:word-spacing
			系统认定中文,必须两个字组成一个单词
		word-spacing: 20px;
为文本添加阴影:text-shadow
		垂直和水平阴影 默认2px  后面可以指定颜色
         text-shadow: 2px 2px firebrick;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

CSS之边框样式属性

边框有四个边: 
	颜色/宽度/样式(必须有)(单实线/虚线/点/双实线)
		边框颜色
		边框宽度
		边框样式
	给四个边设置边框的颜色
		border-top-color: blueviolet;
		border-right-color: rosybrown;
		border-bottom-color: aqua;
		border-left-color: violet;		
				
	给四个边的边框设置宽度
		border-top-width: 5px;
		border-right-width: 6px;
		border-bottom-width: 7px;
		border-left-width: 8px;
	四个边框的样式
		solid:单实线
		double:双实线
		dotted:点
		dashed:虚线
		border-top-style: dashed;
		border-right-style: dotted;
		border-bottom-style: double;
		border-left-style: groove;
有简写属性格式(将四个边的颜色/宽度和样式进行简写)
		border-color:
		border-width:
		border-style: 
		
		border:
			特点:默认的方向 上右下左
			某一边没有设置颜色/宽度/样式,会补齐对边的颜色/宽度/样式
边框四个角的弧度:
		border-radius: 5px;
	高度和宽度:
		width: 150px;
				height: 150px;
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

CSS背景样式属性

background-color:背景颜色
	background-color: darkgray; */
background-image:背景图像
		这个图像尺寸没有屏幕这么大,图像出现x轴和y抽重复
		background-image: url(#); */
background-repeat:设置图像是否重复以及如何重复
		repeat:x轴 /y轴重复(默认值:跟图像的分辨率尺寸相关)
		repeat-x:x轴重复
		repat-y:y轴重复
		no-repeat:不重复
			background-repeat: no-repeat;
background-position:背景图像的起始位置
		浏览器中显示的位置 left ,center ,right
			图像位置 top,center,bottom
				background-position: left top ;
背景附着: fixed背景图像固定,不会随着页面滚动而滚动
		scorll:会随着其余部分滚动而滚动
			background-attachment: scroll;
 background的简写属性:
		background:background-color background-image background-repeat backgound-position；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

CSS列表样式

list-style-type 设置列表项的标记类型
	disc:默认值 实心圆点
	circle:空心圆点
	square:实心小正方形
	none:去掉列表项的标记
	list-style-type: none;
让列表项的内容，水平排列：
	display: inline;
list-style-image:自定义列表前面的标记类型
	list-style-image: url(); 	
1
2
3
4
5
6
7
8
9
10

CSS表格

border-collapse 属性设置是否将表格边框折叠为单一边框：
						collapse:合并
1
2

CSS盒子模型（框模型）

控制div边距

万物皆盒子! 
	就是通过div将一个大的页面划分成很多块;
	每一个块里面存储很多html元素,然后在通过css样式控制视图
控制div内边距
	padding: 20px 0 0 40px;
	padding-top: 30px;
	padding-right: 30px;
	padding-bottom: 30px;
	padding-left: 30px;	
	简写：（对应上右下左）
	padding: 300px 0 0 400px;
控制div外边距
	margin-top: 30px;
	margin-right: 30px;
	margin-bottom: 30px;
	margin-left : 30px;
	简写：（对应上右下左）
	margin: 100px 0 0 200px;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

CSS盒子模型的使用_注册页面

以下为具体代码举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册页面</title>
		<!--
			盒子模型:
			将任意的标签都可使用div包起来
		-->
		<style>
			body{
				background: #FAEBD7;
			}
			/* 修饰外面大的div样式 */
			.div1{
				border:1px solid black;
				width: 400px;
				height: 400px;
				/* 外边距的简写属性 */
				/* margin-left: 400px;
				margin-top: 120px; */
				margin: 260px 0 0 725px;
				background: url(img/intel轮播图2.jpg);
				/* 边框四个角为圆角 */
				border-radius: 5px;
			}
			.div2{
				margin: 50px 0 0 100px;
			}
			.div3{
				margin: 50px 0 0 100px;
			}
			.div4{
				margin: 50px 0 0 83px;
			}
			.div5{
				margin: 50px 0 0 100px;
			}
			.div6{
				margin: 30px 0 0 160px;
			}
			div{
				color: orangered;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<form>
				<div class="div2">
				用户名：<input type="text" 
								placeholder="请输入用户名" />
				</div>
				<div class="div3">
				密&ensp;&ensp;码：<input type="password"
										placeholder="请输入密码"/>
				</div>
				<div class="div4">
				确认密码：<input type="password" 
								placeholder="请再次输入密码"/>
				</div>
				<div class="div5">
				邮&ensp;&ensp;箱：<input type="text" 
										placeholder="请输入邮箱" />
				</div>
				<div class="div6">
				<input type="submit" value="注册" />
				<input type="submit" value="登录" />
				</div>
			</form>
		</div>
	</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
62
63
64
65
66
67
68
69
70
71
72
73

CSS浮动

CSS浮动概念

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中(不占据一行空间,单独的浮块)，所以文档的普通流中的块框表现得就像浮动框不存在一样。
1
2

以下为具体代码举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS浮动属性</title>
		<style>
			#div1{
				border: 1px solid red;
				background-color: blue;
				width: 300px;
				height: 300px;
				float: left;
			}
			#div2{
				border: 1px solid yellow;
				background-color: red;
				width: 300px;
				height: 300px;
				float: left;
			}
			#div3{
				border: 1px solid blue;
				background-color: yellow;
				width: 300px;
				height: 300px;
				float: right;
		</style>
	</head>
	<body>
		<div id="div1">
			div1
		</div>
		<div id="div2">
			dir2
		</div>
		<div id="div3">
			dir3
		</div>
	</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

CSS浮动使用

以下为具体代码举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动页面</title>
		<style>
			.div_header{
				height: 25px;
				background-color: #000000;
			}
			/* 两个中间div加入一个空div,给class或者id */
			.div_blank{
				background-color: black;
				width: 100%;
				/* 清除浮动 clear属性:both:两边都不浮动(通用)
				
						clear:left左边不浮动/right:右边不浮动
				 */
				clear: both;
			}
			.div_header1{
				float: left;
			}
			.div_header2{
				float: right;
			}
		</style>
	</head>
	<body>
		<!-- 大的主页 -->
		<div class="div_header">
			<!-- 第一部分：导航栏1 -->
			<div class="div_header1">
				<select>
					<option>中国大陆</option>
					<option>小日子</option>
					<option>小棒子</option>
				</select>
				<a href="#">请登录</a>
				<a href="#">请注册</a>
				<a href="#">手机淘宝</a>
				<a href="#">无障碍浏览</a>
			</div>
			<!-- 第二部分：导航栏2 -->
			<div class="div_header2">
				<a href="#">我的淘宝</a>
				<a href="#">购物车</a>
				<a href="#">收藏夹</a>
				<a href="#">商品分类</a>
				<a href="#">免费开店</a>
			</div>
		</div>
		<!-- 背景颜色 -->
		<div class="div_blank">
		</div>
		<div>
			<input type="text" />
			<input type="submit" value="搜索" src="#" />
		</div>
	</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

一些简答题：

超链接标签的href可以指定某个url地址,请描述关于url地址协议如果是http协议,它的的执行流程?

	以访问百度为例：href指定百度的url地址，向系统发送request请求，然后系统通过访问hosts文件寻找是否存在百度域名对应的IP地址，若找到，则访问此地址；若找不到，则通过调用网卡驱动联网访问DNS服务器，通过DNS服务器寻找百度服务器，找到百度的IP地址后，向超链接标签response响应,成功访问到百度。
1

表单提交的get和post有什么区别? 请描述。

	在使用get方式提交时，提交的内容会显示在地址栏上，而使用post方式提交时，提交的内容不会显示在地址栏上，但使用浏览器的检查功能，可以查看到表单的数据。所以说，使用post提交相对于get提交安全。
	get提交的内容的数据量较小，如果超过会导致数据不完整；而使用post提交的数据是通过IO流传输，能够传输的数据量大。get是从服务器上获取数据，post是向服务器传输数据。
1
2

表单form的action和method是什么。

	action的值为URL，是指定提交表单后，表单所到达的地址。
	method的值为get或者post，是指定表单提交的方式。
-----------------------------------------------------------------------
	action属性是用来指定跳转后端服务器的地址。（url-统一资源定位符）
	url和uri的区别：（url是uri的子集）
		url是带上具体的协议 http：//域名：端口号/项目名称/登录接口，范围小
		uri （url的一部分 “/项目名称/登录接口”）没有明确的协议，范围大
method属性是用来指定提交表单的方法。
1
2
3
4
5
6
7
8

input type=“button” 和 input type=“submit” 这两个都是按钮有什么不一样的地方?

	input type="button"的按钮只是能够点击而input type="submit"的按钮可以点击，并且在点击后会提交input项的所有信息到后端的服务器上。
1

CSS是什么和它的作用是什么？

	CSS是层叠样式表，作用是控制html元素，给html进行修饰，使其达到一种效果。
1

框架标签frame的src和name属性是什么？什么是farmeset框架集？

frame:框架标签
	一个frame包含一个html页面，src="链接的html页面地址"
							name="给页面所在框架起一个名称"
frameset:框架集
	当整个结构有两个或者两个以上的html页面组成，必须使用框架集frameset
		rows:由上而下划分的每一个部分所占的权重百分比；在通过frame规定某一个html的页面位置
		cols:由左到右划分每一个部分所占的权重百分比
1
2
3
4
5
6
7

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

html常见的标签与使用 CSS选择器 CSS字体文本边框背景表格相关样式 CSS浮动使用 一些简答题_字体样式相关属性有什么

html常见的文本标签

标题标签

分割线标签

段落标签

段落缩进标签

滚动标签

格式标签

加粗标签

斜体标签

换行标签

预先排版的文本展示标签

计算机的编码代码标签

上下标标签

上标标签

下标标签

html转义字符

超链接

超链接标签

超链接的使用方式

图像标签

img标签

图像链接

表格

表格标签

表格嵌套

块标签

块标签div

块标签span

块标签的应用场景

div标签应用场景

span标签应用场景

列表

无序列表

有序列表

自定义列表

表单元素

最常见表单的应用场景

表单中常见的表单项

table嵌套表单

框架标签

frameset框架集

frame框架

新增元素video元素

CSS使用方式

行内样式

内部样式(内联)

外部方式(外联)

常见的CSS选择器

id选择器

class 类选择器

标签名称选择器

后代选择器

并集选择器

伪类选择器

CSS字体相关的样式属性

CSS之文本样式

CSS之边框样式属性

CSS背景样式属性

CSS列表样式

CSS表格

CSS盒子模型（框模型）

控制div边距

CSS盒子模型的使用_注册页面

CSS浮动

CSS浮动概念

CSS浮动使用

一些简答题：

超链接标签的href可以指定某个url地址,请描述关于url地址协议如果是http协议,它的的执行流程?

表单提交的get和post有什么区别? 请描述。

表单form的action和method是什么。

input type=“button” 和 input type=“submit” 这两个都是按钮有什么不一样的地方?

CSS是什么和它的作用是什么？

框架标签frame的src和name属性是什么？什么是farmeset框架集？

html常见的标签与使用 CSS选择器 CSS字体文本边框背景表格相关样式 CSS浮动使用一些简答题_字体样式相关属性有什么