HTML3

最新推荐文章于 2021-06-24 08:27:11 发布

blake2

最新推荐文章于 2021-06-24 08:27:11 发布

阅读量87

点赞数

文章标签： html

本文链接：https://blog.csdn.net/blake2/article/details/114445078

版权

1.html中的框架元素

通过使用框架，你可以在同一个浏览器窗口中显示不止一个网页内容，不是层层叠叠的在一起，而是显示在不同的区域。通常可以用来做网页的布局。

frameset标记--表示一个框架集【包含框架的集合】，定义了如何将窗口拆分成框架单元。使用frameset标签时候不需要body元素

rows属性--将窗口拆分成上下结构，取值的个数决定了拆分成个数，取值大小数决定了拆分的每一个窗口的比例。

cols属性--将窗口拆分成左右结构，取值的个数决定了拆分成个数，取值大小数决定了拆分的每一个窗口的比例。

frame标记--表示一个框架[每个框架中放入什么文件]

src属性--指定每一个框架中所显示的网页的路径

frameborder 属性用于定义frame表示是否显示边框。设置属性值为 "0" 移除frame的边框。

noresize="noresize"属性frame边框是否可以被拖动改变大小。

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

		<frameset rows="20%,80%,10%">
			<frame src="top.html" frameborder="no" noresize="noresize"></frame>
			<frameset cols="20%,80%">
				<frame src="left.html" frameborder="no" noresize="noresize"></frame>
				<frame name="iframe_right" src="right1.html" frameborder="no" noresize="noresize"></frame>
			</frameset>
			<frame src="bottm.html" frameborder="no" noresize="noresize"></frame>	
		</frameset>	
</html>

2.html中的div和span标记

<div> 元素是块级元素，它可用于组合其他 HTML 元素的容器，实际上就是网页中的一块空白区域，在这个区域中可以包含其他的html元素。浏览器会在其前后显示折行，通常与css一起使用，可以用来设置网页的布局。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>html中的div</title>
		<style>
			div{
				width: 300px;
				height: 300px;
				background-color: chartreuse;
			}
		</style>
	</head>
	<body>
		<h2>div标记【层】</h2>
		<h2>实际上就是网页中的一块空白区域，在这个区域中可以包含其他的html元素。</h2>
		<div>
			<p>这个区域中可以包含其他的html元</p>
			<img src="imgs/avatar2.png"/>
			<br>
			<font>通常与css一起使用,使用css设置div的尺寸个颜色</font>
		</div>
		<font size="6">浏览器会在其前后显示折行。自成一行，占满整行</font>
	</body>
</html>

<span> 元素是内联【行内】元素，可用作文本的容器。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>html中的span元素</title>
		<style>
			span{
				color: blue;
				font-size: 50px;
			}
		</style>
	</head>
	<body>
		<h1>span 元素是内联【行内】元素，可用作文本的容器。</h1>
		<h1>当与 CSS 一同使用时，span元素可用于为部分文本设置样式属性</h1>
		<font size="7" color="red">测试span元素，<span>与CSS 一同使用修改部分文本的样式</span></font>
</h1>
	</body>
</html>

Html中块级元素与行内元素的区别?

块级元素在浏览器显示时，通常会以新行来开始（和结束）。浏览器会在其前后显示折行。

实例: <h1>, <p>, <ul>, <table>,<div>

内联行内元素在显示时通常不会以新行开始。不会单独占据当前行，其后可以继续显示其他元素。

实例: <b>, <td>, <a>, <img>

练习：完成百度的首页

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width:1250px;
				height:600px;
				background-color:white;
			}
		</style>
	</head>
	<body>
		<div>
			<table cellspacing="" cellpadding="2px">
				<tr>
				<td><a href="https://news.sina.com.cn/" target="_blank">新闻</a></td>
				<td><a href="https://www.hao123.com/" target="_blank">hao123</a></td>
				<td><a href="https://map.baidu.com/@12131492,4034273,13z" target="_blank">地图</a></td>
				<td><a href="http://v.hao123.baidu.com/" target="_blank">视频</a></td>
				<td><a href="http://tieba.baidu.com/f/user/passport?jumpUrl=http://tieba.baidu.com" target="_blank">贴吧</a></td>
				<td><a href="http://wuz5.ovtj.cn/?jh=pwkqikantougao&dy=pingtai%2Fqudao&c=xueshuqikanwang&e_creative=46300230806&e_keywordid=222645369138&e_keywordid2=201150415001" target="_blank">学术</a></td>
				<td><a href="https://www.baidu.com/s?tn=news&rtt=1&bsst=1&wd=%E6%9B%B4%E5%A4%9A&cl=2&origin=ps" target="_blank">更多</a></td>
				<td align="right" style="width: 900px;"><a href="https://baike.baidu.com/item/%E8%AE%BE%E7%BD%AE/9987085?fr=aladdin" target="_blank">设置</a></td>
				<td><a href="https://mail.qq.com/" target="_blank">登录</a></td>
				</tr>
			</table>
			<br><br><br><br>
			<center>
			<img src="de0e5cb7452c2084ae9e63054366ec8b.jpeg" width="400px">
			</center>
			<br>
			<table  cellspacing="" cellpadding="" align="center">
				<tr>
					<td>
						<input type="text" name="shurulan" id="" value="" style="width: 550px;height: 30px;"/>
					</td>
					<td>
						<input type="button" name="" id="" value="百度一下" style="color: white;height: 35px;background-color:blue;"/>
					</td>
				</tr>
			</table>
			<br>
			<center>
			<table  cellspacing="20px" cellpadding="">
				<tr>
					<td>百度热搜</td>
					<td align="right"><input type="button" name="huanypi" id="" value="换一换" /></td>
				</tr>
				<tr>
					<td>1 <a href="http://www.k1u.com/trip/83932.html" target="_blank">中国暂停部分人员入境</a></td>
					<td>4 <a href="https://m.mydrivers.com/newsview/743153.html" target="_blank">海底捞将牛肉粒换成味伴侣</a></td>
				</tr>
				<tr>
					<td>2 <a href="http://www.techweb.com.cn/it/2020-11-06/2810223.shtml" target="_blank">华为起诉美国政府16个部门</a></td>
					<td>5 <a href="https://www.163.com/dy/article/G48GQJNJ0525CHJG.html" target="_blank">央视评货拉拉女用户坠亡案</a></td>
				</tr>
				<tr>
					<td>3 <a href="https://news.china.com/socialgd/10000169/20201106/38930998.html" target="_blank">新疆新增新冠肺炎确诊病例6例</a></td>
					<td>6 <a href="https://baijiahao.baidu.com/s?id=1693283937632302684&wfr=spider&for=pc" target="_blank">老人摔跤没人敢扶?真相曝光</a></td>
				</tr>
			</table>
			</center>
		</div>
	</body>
</html>

blake2

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML3

1.html中的框架元素通过使用框架，你可以在同一个浏览器窗口中显示不止一个网页内容，不是层层叠叠的在一起，而是显示在不同的区域。通常可以用来做网页的布局。 frameset标记--表示一个框架集【包含框架的集合】，定义了如何将窗口拆分成框架单元。使用frameset标签时候不需要body元素 rows属性--将窗口拆分成上下结构，取值的个数决定了拆分成个数，取值大小数决定了拆分的每一个窗口的比例。 ...
复制链接

扫一扫