当前位置:   article > 正文

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

字体样式相关属性有什么

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
推荐阅读
相关标签
  

闽ICP备14008679号