HTML补充+CSS入门

最新推荐文章于 2024-09-11 14:09:02 发布

pigpigpi

最新推荐文章于 2024-09-11 14:09:02 发布

阅读量280

点赞数 1

本文链接：https://blog.csdn.net/qq_40733968/article/details/107045271

版权

一.HTML补充

1.框架标签

框架标签可以切割页面,将完整的页面切分成独立的几部分
注意:框架标签里没有body


框架集：frameset
当包含两个或两个以上的html页面，称为frameset标签，称为：框架集。
frameset不能和body共存。
	frameset中两个属性：
	rows：由上到下，横向划分
	cols：由左到右，竖向划分

一、frameset
注意 frameset 标签不能和body标签共存
1. 属性
①border
设置框架的边框粗细。
②bordercolor
设置框架的边框颜色。
③frameborder
设置是否显示框架边框。设定值只有0、1；0 表示不要边框，1 表示要显示边框。
④cols
纵向分割页面。其数值表示方法有三种：“30%、30（或者30px）、*”；数值的个数代
表分成的视窗数目且数值之间用“,”隔开。“30%”表示该框架区域占全部浏览器页面区域
的30%；“30”表示该区域横向宽度为30像素；“*”表示该区域占用余下页面空间。例如：
cols="25%,200,*" 表示将页面分为三部分，左面部分占页面30%，中间横向宽度为200像素，页面余下的作为右面部分。
⑤rows
横向分割页面。数值表示方法与意义与cols相同。
⑥framespacing
设置框架与框架间的保留的空白距离。

注意1：
cols与rows两属性尽量不要同在一个<frameset>标签中使用。
即，若想即使用cols又使用rows，可利用frameset嵌套实现
注意2：
<frameset cols="40%,*,*">
意思是：第一个框架占整个浏览器窗口的40%,剩下的空间平均分配给另外两个框架。
<frameset cols="*,*,*,*">
意思是：浏览器窗口等分为四部分。
 
 二、frame
1. 属性
①name
设置框架名称。此为必须设置的属性。
②src
设置此框架要显示的网页名称或路径。此为必须设置的属性。
③scrolling
设置是否要显示滚动条。设定值为auto, yes, no。
④bordercolor
设置框架的边框颜色。
⑤frameborder
设置是否显示框架边框。设定值只有0、1；0 表示不要边框，1 表示要显示边框。
⑥noresize
设置框架大小是否能手动调节。
⑦marginwidth
设置框架边界和其中内容之间的宽度。
⑧marginhight
设置框架边界和其中内容之间的高度。
⑨width
设置框架宽度。
⑩height
设置框架高度。

三、iframe
是浮动的框架（frame），其常用属性与frame类似，其他的主要有以下:
1. 属性
①align
设置垂直或水平对齐方式
②allowTransparency
设置或获取对象是否可为透明。

注意：
iframe标签与frameset、frame标签的验证方法不同，是XHTML 1.0 Transitional。
且iframe是放在body标签之内，而frameset、frame是放在body标签之外。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>框架标签</title>
	</head>
	 <!-- 左右各占50% 
		*表示通配符,即除去50%后,剩余部分所占百分比 -->

	<frameset cols="50%,*" border="1" bordercolor="red" frameborder="1" framespacing="0">
		<!-- noresize设置框架大小是否能手动调节 
				选noresize表示无法调整大小的框架：
		-->
		<frame src="http://www.baidu.com" name="百度一下" noresize="noresize" >
		 第一个占20%,第二个占80%
		<frameset rows="20%,*">
			<frame src="https://mail.163.com/" >
			<frame src="https://www.qq.com/" >
		</frameset>
		
	</frameset>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大司合集</title>
	</head>
	<body>
	<iframe src="//player.bilibili.com/player.html?aid=968635320&bvid=BV1ip4y1U75X&cid=207725397&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
	
	<iframe src="//player.bilibili.com/player.html?aid=841244629&bvid=BV1D54y1i7Kp&cid=207125006&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
	
	</body>
</html>

练习:
使用框架标签,来进行排版
在这里插入图片描述
上面的代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>上边</title>
	</head>
	<body>
		<h1 align="center">---欢迎使用本系统---</h1>
	</body>
</html>

左边的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左边</title>
	</head>
	<body>
	<!--需要在指定的页面中打开（框架标签frame），target中的属性值必须和frame的name值一样-->
		<a href="http://www.baidu.com" target="main">进入百度</a>
		<br>
		<a href="http://www.qq.com">进入qq</a>
		<br>
		<a href="http://www.163.com">进入网易</a>
	</body>
</html>

主页面代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		欢迎使用!
	</body>
		
	</frameset>
</html>

测试代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
		<frameset rows="20%,*">
			<frame src="header.html" >
			<frameset cols="30%,*">
				<frame src="menu.html" >
				 <frame src="main.html" name="main"> 
			</frameset>
			
		</frameset>
	
</html>

成果展示:
在这里插入图片描述

2.多媒体标签

embed 标签

一、基本语法
代码如下:
embed src=url
说明：embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等，Netscape及新版的IE 都支持。url为音频或视频文件及其路径，可以是相对路径或绝对路径。

二、属性设置

1、自动播放：

语法：autostart=true、false

说明：该属性规定音频或视频文件是否在下载完之后就自动播放。

true：音乐文件在下载完之后自动播放；

false：音乐文件在下载完之后不自动播放。


2、循环播放：

语法：loop=正整数、true、false

说明：该属性规定音频或视频文件是否循环及循环次数。

属性值为正整数值时，音频或视频文件的循环次数与正整数值相同；

属性值为true时，音频或视频文件循环；

属性值为false时，音频或视频文件不循环。

3、面板显示：

语法：hidden=ture、no

说明：该属性规定控制面板是否显示，默认值为no。

ture：隐藏面板；

no：显示面板。

4、开始时间：

语法：starttime=mm:ss（分：秒）

说明：该属性规定音频或视频文件开始播放的时间。未定义则从文件开头播放。

5、音量大小：

语法：volume=0-100之间的整数

说明：该属性规定音频或视频文件的音量大小。未定义则使用系统本身的设定。

3.块标签和行标签

(1)概述

块标签:每次占据一大块,默认占据一行  h1-h6
行标签:占据内容长度的位置  b i a

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>块标签和行标签</title>
	</head>
	<body>
		<!-- 块标签 -->
		<h1>啊吧啊吧</h1>
		<h2>啊吧啊吧</h2>
		<h3>啊吧啊吧</h3>
		<!-- 行标签 -->
		<a>外币外币</a>
		<a>外币外币</a>
		<a>外币外币</a>
		<b>are you good 马来西亚</b>
	</body>
</html>

(2)块标签和行标签的典型代表

典型的块标签:
	div标签:非常纯净,默认不带有任何样式（没有宽高，没有背景颜色等等一系列样式)
	因此可以和css相结合使用

典型的行标签
	span标签:纯净的标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 典型的块标签 
			div默认不带有任何样式,纯净,可以结合css使用
		-->
		<div id="">
			外币外币
		</div>
		<div id="">
			外币巴布
		</div>
		
		<!-- 典型的行标签 -->
		<span>
			我要起飞
		</span>
		<span>
			这把我门就遇到了高手了
		</span>
	</body>
</html>

二.CSS入门

1.概述

Cascading Style Sheets 层叠样式表 作用就是用来美化HTML标签 可以降低耦合度

 HTML和CSS结合方式
 方式1:
 	内联样式  是将CSS代码写到HTML标签的内部
 	中间以;相间隔
		 每个标签都有一个style属性，他的值就写CSS代码
		 CSS代码的语法是  属性名:值 值 值
		 style="color: red;font-size: 500px;"
		 层叠：多个样式控制同一个标签，会叠加生效。
		 内联样式的写法缺点：一次只能控制一个标签所展示的样式，代码复用性低，且书写凌乱，不是首选写法。
方式2:
	内部样式 将CSS代码抽离出来，写在一个固定的位置，
	好处就是能够提高代码的复用性。
	但是这种方式，得配合选择器。	
方式3:

2.内联结合方式/行内样式

方式1：内联样式  是将CSS代码写到HTML标签的内部
		中间以;相间隔
		 每个标签都有一个style属性，他的值就写CSS代码
		 CSS代码的语法是  属性名:值 值 值
		 style="color: red;font-size: 500px;"
		 层叠：多个样式控制同一个标签，会叠加生效。
		 内联样式的写法缺点：一次只能控制一个标签所展示的样式，代码复用性低，且书写凌乱，不是首选写法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>html和css结合的方式</title>
	</head>
	
	<body>
		<!-- 方式1:内联样式 -->
		<span id="" style="height: 300px; width: 300px ;color: red;font-size: 100px;">
			芜湖起飞
		</span>
	</body>
</html>

3.CSS页面定位

定位方式分为两种:
	相对定位:第一个元素参照原点，后来的元素参照之前的元素。默认采用相对定位
	绝对定位:每个元素只以原点为参照,与其他元素无关
	position: relative; 相对定位
	position: absolute; 绝对定位
	
如果选用了绝对定位：我们可以设置元素距离原点的上下左右位置
top
left
right
bottom
		 
如果用的是相对定位要设置元素之间的间距，用
margin-top
margin-left
margin-right
margin-bottom

注意:
	行标签对margin-top无效,  margin-left有效
	块标签:对所有属性都起作用 
	行内块标签 具有行标签和块标签的一些特点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- css页面定位 -->
		<!-- position: relative; 相对定位 默认采用相对定位 -->
		
		<h1>一级标题</h1>
		<h2 style="position: relative;">芜湖,起飞</h2>
		<h3>外币外币,外币巴布</h3>
		
		<!-- position: absolute; 绝对定位
			绝对定位:每个元素只以原点为参照,与其他元素无关
		 -->
		 
		 <button type="button" style="position: absolute;">按钮1</button>
		 <button type="button" style="position: absolute;">按钮2</button>
		 <button type="button" style="position: absolute;">按钮3</button>
		 <br>
		 ------------------------------------------------分隔线
	<!--
	如果选用了绝对定位：我们可以设置元素距离原点的上下左右位置
	top
	left
	right
	bottom
	-->
	<h1 style="position: absolute;top: 0px;left: 0px;">我是一个标题1</h1>
	<h1 style="position: absolute;top: 50px;left: 100px;">我是一个标题2</h1>
	<h1 style="position: absolute;top: 100px;left: 200px;">我是一个标题3</h1>
	<h1 style="position: absolute;top: 200px;left: 300px;">我是一个标题4</h1>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<!--  如果用的是相对定位要设置元素之间的间距，用
			 margin-top
			 margin-left
			 margin-right
			 margin-bottom	 
		注意:
		行标签对margin-top + margin-left无效
	-->
	<span id="" style="position: relative; margin-top: 100px; margin-right: 100px;">
		芜湖,起飞
	</span>
	
	<!-- 块标签:对所有属性都起作用 -->
	<div id="" style="margin-top: 300px; margin-left: 300px;">
		这把我门就遇到了高手了
	</div>
	
	
	<!-- button 属于行内块标签 具有行标签和块标签的一些特点 -->
	<button type="button" style="position: relative; margin-top: 300px; margin-left: 300px;">那我现在超市</button>
	<button type="button" style="position: relative;">按钮2</button>
	<button type="button" style="position: relative;">按钮3</button>
	<button type="button" style="position: relative;">按钮4</button>
	
	</body>
</html>

4.行标签、块标签和行内块标签间的转换

display: block; 转换成块标签 
display:inline; 转换成行标签
display:inline-block; 转换成行内块标签

display: none; 隐藏标签，隐藏之后所占的位置不在了
visibility:hidden; 隐藏标签，标签原来占的位置还是在的
visibility:visible; 显示,默认是显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>行标签和块标签间的转换</title>
	</head>
	<body>
		<!-- margin-top不起作用 -->
		<!-- 
		display: block; 转换成块标签 
	    display:inline; 转换成行标签
	    display:inline-block; 转换成行内块标签 
		-->
		
		<!-- 将行标签转换为块标签 
		行内标签的margin-top无效，变为block块标签后，有效 
		-->
		<span id="" style="margin-top: 200px; margin-left: 400px; display: block;">
			外币外币
		</span>
		
		<span id="" style="margin-top: 200px; margin-left: 400px; display: block;">
			外币巴布
		</span>
		
		<!-- 将块标签转换为行标签 
		块标签h转换为行内标签，可以放在一行
		-->
		<h1 style="display: inline;">块标签转为行标签1</h1>
		<h1 style="display: inline;">块标签转为行标签2</h1>
		<h1 style="display: inline;">块标签转为行标签</h1>
		<h1 style="display: inline;">块标签转为行标签</h1>
		<br>
		<!-- 将行标签转换为行内块标签 
		margin-top就有效了
		-->
		<span id="" style=" display: inline-block; margin-top: 50px;">
			行标签转换为行内块标签1
		</span>
		<span id="" style=" display: inline-block; margin-top: 50px;">
			行标签转换为行内块标签2
		</span>
		
		
		<br>
		<!-- 标签的隐藏
		 display: none; 隐藏标签，隐藏之后所占的位置不在了
		 visibility:hidden; 隐藏标签，标签原来占的位置还是在的
		 visibility:visible; 显示
		 -->
		 
		<!-- 改为none后，span所占的位置不在，其他元素会占用span的位置 -->
		<span style="display: none;">外币八部</span>
		<span>外币外币</span>
		
		<!--  visibility:hidden; 隐藏标签，标签原来占的位置还是在的 -->
		<h1 style="visibility: hidden;">标题1</h1>
		<h1>标题2</h1>
		<!--  visibility:visible; 显示 默认就是显示 -->
		<h1 style="visibility: visible;">标题3</h1>
		<h1>标题4</h1>
		<h1>标题5</h1>
	</body>
</html>