HTML 框架、列表和table标签练习第二个模块2

最新推荐文章于 2024-09-22 15:25:59 发布

抹泪的知更鸟

最新推荐文章于 2024-09-22 15:25:59 发布

阅读量1.5k

点赞数

分类专栏： HTML+CSS+JavaScript 文章标签： html html5 前端

本文链接：https://blog.csdn.net/qq_51596354/article/details/122405202

版权

本文介绍了HTML框架中的iframe标签及其用法，包括案例展示如何使用iframe加载外部页面。接着详细讲解了HTML的列表类型，如无序列表、有序列表和列表嵌套，并给出相关案例。最后，提供了四个作业，包括制作方块导航器、使用table构建企业主页、电商页面设计和一个环保主题页面的设计，以增强实际操作能力。

摘要由CSDN通过智能技术生成

HTML 框架和table标签练习

作业

HTML 框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

HTML`中有很多框架标签，但是大多数都弃用了，沿用至今的就是`<iframe>

iframe标签

iframe语法:

<iframe src="URL"></iframe>

iframe属性：

属性	值	描述
align	left \|right\| top\| middle \|bottom	~~HTML5 不支持。HTML 4.01 已废弃~~。规定如何根据周围的元素来对齐
scrolling	yes\| no \|auto	~~HTML5 不支持~~。规定是否在 `<iframe>` 中显示滚动条。
height	像素	规定 `<iframe>` 的高度。
name	name	规定 `<iframe>`的名称。
src	URL	规定在 `<iframe>` 中显示的文档的 URL。
width	像素	规定 `<iframe>`的宽度。

案例07

iframe可以显示一个目标链接的页面，目标链接的属性必须使用的name属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>框架</title>
	</head>
	<body>
		<table border="1" cellspacing="0" cellpadding="0" height="100%" width="100%">
			<tr>
				<th width="15%">
					<a href="https://www.baidu.com" target="myframe">百度</a>
					<hr/>
					<a href="https://www.tmall.com/" target="myframe">天猫</a>
					<hr/>
					<a href="https://www.sina.com.cn/" target="myframe">新浪</a>
				</th>
				<th width="85%">
					<iframe src="https://www.aliyun.com/" name="myframe" width="100%" height="600"></iframe>
				</th>
			</tr>
		</table>
	</body>
</html>

HTML 列表

HTML列表有三种：无序列表、有序列表、自定义列表

无序列表

无序列表使用两个标签，组成一个整体使用。

标签	描述
`<ul>`	无序列表
`<li>`	有序列表和无序列表的一个列表项

无序列表有三种类型，使用type属性来设置列表的显示符号

属性	描述
`type="circle"`	空心圆
`type="disc"`	实心圆
`type="square"`	实心方块

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>无序列表</title>
	</head>
	<body>
		<ul type="circle">
			<li>无序列表</li>
			<li>无序列表</li>
			<li>无序列表</li>
		</ul>
		<ul type="disc">
			<li>无序列表</li>
			<li>无序列表</li>
			<li>无序列表</li>
		</ul>
		<ul type="square">
			<li>无序列表</li>
			<li>无序列表</li>
			<li>无序列表</li>
		</ul>
	</body>
</html>

效果展示

在这里插入图片描述

案例08

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>无序列表</title>
	</head>
	<body>
		<h4>无序列表（默认:type="disc"）</h4>
		<ul>
			<li>PHP</li>
			<li>HTML</li>
		</ul>
		<h4>无序列表（type="circle"）</h4>
		<ul type="circle">
			<li>PHP</li>
			<li>HTML</li>
		</ul>
		<h4>无序列表（type="square"）</h4>
		<ul type="square">
			<li>PHP</li>
			<li>HTML</li>
		</ul>
	</body>
</html>

效果展示

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-76VES3EY-1641782056605)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220108212952748.png)]$

有序列表

有序列表使用两个标签，组成一个整体使用。

标签	描述
`<ol>`	有序列表
`<li>`	有序列表和无序列表的一个列表项

有序列表有五种：

属性	描述
`type="1"`	数字序号
`type="a"`	有小写字母序号
`type="A"`	大写字母序号
`type="i"`	小写罗马序号
`type="I"`	大写罗马序号

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>有序列表</title>
	</head>
	<body>
		<ol type="1">
			<li>有序列表</li>
			<li>有序列表</li>
			<li>有序列表</li>
		</ol>
		<ol type="a">
			<li>有序列表</li>
			<li>有序列表</li>
			<li>有序列表</li>
		</ol>
		<ol type="A">
			<li>有序列表</li>
			<li>有序列表</li>
			<li>有序列表</li>
		</ol>
		<ol type="i">
			<li>有序列表</li>
			<li>有序列表</li>
			<li>有序列表</li>
		</ol>
		<ol type="I">
			<li>有序列表</li>
			<li>有序列表</li>
			<li>有序列表</li>
		</ol>
	</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SlyqReTB-1641782056606)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220108213024256.png)]$

列表嵌套

列表和其他标签一样，可以想和嵌套，并且可以实现各种不同的效果

案例9

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML列表</title>
	</head>
	<body>
		<dl>
			<dt>HTML列表</dt>
			<dd>知识点梳理</dd>
			<dd>
				<ol type="1">
					<li>
						无序列表
						<ul>
							<li type="circle">空心圆circle</li>
							<li type="disc">实心圆disc</li>
							<li type="square">实心方块square</li>
						</ul>
					</li>
					<li>
						有序列表
						<ol>
							<li type="1">数字：1</li>
							<li type="a">小写字母a</li>
							<li type="A">大写字母a</li>
							<li type="i">小写字母i</li>
							<li type="I">大写字母I</li>							
							<li type="1">数字：6</li>
						</ol>
					</li>
					<li>
						自定义列表
						<dl>
							<dt>自定义列表标题</dt>
							<dd>自定义列表选项</dd>
						</dl>
					</li>
				</ol>
			</dd>
		</dl>
	</body>
</html>

效果展示

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LzwXX7hN-1641782056607)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220110103257093.png)]$

作业

作业1制作方块导航器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>导航器</title>
	</head>
	<body>
		<h3>作业1</h3>
		<table cellpadding="50" width

最低0.47元/天解锁文章