02前端核心技术-HTML排版(二级菜单在底部)

想踢球考研的java

已于 2022-03-13 16:32:17 修改

阅读量633

点赞数

分类专栏： Web前端开发文章标签： html elementui vue.js

于 2022-03-12 20:00:29 首次发布

本文链接：https://blog.csdn.net/weixin_43624810/article/details/123448938

版权

Web前端开发专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML中的表格元素，包括<table>、<th>、<tr>、<td>等标签及属性，展示了创建表格的实例，并讨论了表格的样式设置。接着，讲解了HTML框架的概念，特别是<iframe>标签的使用，以及如何通过框架实现页面内链接的展示。最后，概述了HTML列表的类型，如无序列表和有序列表，并给出二级菜单的经典案例。

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

HTML 表格

HTML表格标签

标签	描述
`<table>`	表格
`<th>`	表格的表头单元格
`<tr>`	表格的行
`<td>`	表格单元格
`<caption>`	表格标题
`<thead>`	表格的头部区域
`<tbody>`	表格的中间主体部分
`<tfoot>`	表格的底部区域

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格</title>
	</head>
	<body>
		<table>
			<tr>
				<th>第1行第1列</th>
				<th>第1行第2列</th>
				<th>第1行第3列</th>
			</tr>
			<tr>
				<td>第2行第1列</td>
				<td>第2行第2列</td>
				<td>第2行第3列</td>
			</tr>
		</table>
	</body>
</html>

`<table>`属性

属性	值	描述
align	left \|center\| right	HTML5 不支持。HTML 4.01 已废弃。规定表格相对周围元素的对齐方式。
bgcolor	rgb(x,x,x) #xxxxxx 颜色名称	HTML5 不支持。HTML 4.01 已废弃。规定表格的背景颜色。
cellpadding	像素	HTML5 不支持。单元边格沿与其内容之间的空白。
cellspacing	像素	HTML5 不支持。单元格之间的空白。
width	像素\|百分百	HTML5 不支持。表格的宽度。
height	像素\|百分百	HTML5 不支持。表格的高度
border	像素，默认值1	规定表格单元是否拥有边框。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>表格</title>
	</head>

	<body>
		<table width="80%" bgcolor="aqua" align="center">
			<caption>受理统计系统</caption>
			<tr height="50">
				<th>受理员</th>
				<th>受理数</th>
				<th>自办数</th>
				<th>直接解答</th>
				<th>同意</th>
				<th>比例</th>
				<th>数量</th>
				<th>比例</th>
				<th>建议件</th>
				<th>诉求件</th>
				<th>咨询件</th>
			</tr>
			<tr bgcolor="blueviolet">
				<td>王艳</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr bgcolor="#c3c3c3">
				<td>总计</td>
				<td>20</td>
				<td>20</td>
				<td>20</td>
				<td>20</td>
				<td>20</td>
				<td>20</td>
				<td>20</td>
				<td>20</td>
				<td>20</td>
				<td>20</td>
			</tr>
		</table>
	</body>
</html>

<th>和<td>属性

属性	值	描述
align	left\| right \|center	HTML5 不支持。规定单元格内容的水平对齐方式。
bgcolor	rgb(x,x,x) \|#xxxxxx \|颜色名称	HTML5 不支持。HTML 4.01 已废弃。规定单元格的背景颜色。
height	像素\|百分百	HTML5 不支持。HTML 4.01 已废弃。设置单元格的高度。
valign	top\| middle\| bottom \|baseline	HTML5 不支持。规定单元格内容的垂直排列方式。
width	像素\|百分百	HTML5 不支持。HTML 4.01 已废弃。规定单元格的宽度。
colspan	列数	规定单元格可横跨的列数。Column
rowspan	列数	设置单元格可纵跨的行数。Row

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>`的宽度。

<iframe>可以显示一个目标链接的页面，目标链接的属性必须使用<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"`	实心方块

有序列表

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

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

有序列表有五种：

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

二级菜单经典案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    ul{
      list-style: none;
    }
    .first{
        height: 40px;
        line-height: 40px;
        font-size: 22px;
        text-align: center;
        background-color: yellowgreen;
        width: 100px;
    }
    .second li{
        height: 30px;
        line-height: 30px;
        font-size: 18px;
        text-align: center;
    }
    .second{
        display: none;
        width: 100px;
    }
    .bigBlock li:hover .second{
        display: block;
    }
</style>
<body>
<ul class="bigBlock">
    <li>
        <div class="first">一级菜单</div>
        <ul class="second">
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
</ul>
</body>
</html>