Night小课堂03 HTML列表和表格

最新推荐文章于 2024-06-15 21:20:00 发布

Night-Zzz

最新推荐文章于 2024-06-15 21:20:00 发布

阅读量62

点赞数 2

文章标签： html 前端

本文链接：https://blog.csdn.net/NoNight_Zzz/article/details/130601947

版权

列表的定义：列表是一种特别的对象集合

集合的定义：先集中，再聚集起来

聚集的定义：多个信息资源排在一起

信息资源的定义：一堆数据，可以是字符也可以是图片等

根据以上的层层解析，对列表有了一定的理解，那么HTML5中是如何实现列表的呢？

列表分类：

1.无序列表 2.有序列表 3.定义列表

1.无序列表：

代码结构：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>无序列表</title>
	</head>
	<body>
		<ul> 
			<li>苹果</li>
			<li>菠萝</li>
			<li>橙子</li>
		</ul>
	</body>
</html>

效果图：

定义：没有顺序，用来对相关且没有顺序，不分先后的事物进行排序

特性：

1.没有顺序，每个<li>标签独占一行（块级元素，文章02有讲解过）

2.默认<li>标签项前面有个实心小圆点

3.常用于网站导航功能中

2.有序列表：

代码结构：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>有序列表</title>
	</head>
	<body>
		<ol> 
			<li>第一名 小A</li>
			<li>第二名 小F</li>
			<li>第三名 小Y</li>
		</ol>
	</body>
</html>

效果图：

定义：有顺序，对相关且有一定先后顺序的事物进行排序

特性：

1.有顺序，每个<li>标签独占一行（块级元素）

2.默认<li>标签项前面有顺序标记

3.常用于需要排序类型的场景，如试卷、问卷选项等

3.定义列表：

代码结构：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>定义列表</title>
	</head>
	<body>
		<dl>
			<dt>水果</dt>
			<dd>香蕉</dd>
			<dd>西瓜</dd>
			<dd>柚子</dd>
		</dl>
	</body>
</html>

效果图：

定义：定义某种关系（一般用于包含和被包含的关系）

特性：

1.没有顺序，每个<dt>标签、<dd>标签独占一行（块级元素）

2.默认没有标记

3.如果存在包含和被包含的关系就可以使用定义列表

三种列表的区别：

类型	说明	项目符号
无序列表	以<ul>标签来实现以<li>标签表示列表项	无序列表中的每项都是平级的,没有级别之分，并且列表中的内容一般都是相对简单的标题性质的网页内容
有序列表	以<ol>标签来实现以<li>标签表示列表项	有序列表ol-li一般用于显示带有顺序编号的特定场合
定义列表	以<dl>标签来实现以<dt>标签定义列表项以<dd>标签定义内容	定义列表一般适用于带有标题和标题解释性内容的场合

类型

说明

项目符号

无序列表

以<ul>标签来实现

以<li>标签表示列表项

无序列表中的每项都是平级的,没有级别之分，并且列表中的内容一般都是相对简单的标题性质的网页内容

有序列表

以<ol>标签来实现

以<li>标签表示列表项

有序列表ol-li一般用于显示带有顺序编号的特定场合

定义列表

以<dl>标签来实现

以<dt>标签定义列表项

以<dd>标签定义内容

定义列表一般适用于带有标题和标题解释性内容的场合

表格：

表格定义：有行有列，多个单元格组成

表格缘由：可以清晰的将多个信息资源组成在一起（如果没有表格就会导致网站中的信息资源杂乱）

表格代码结构：

table：表格标签名称（元素）

border：边界 1px为1个像素

tr：表格中的行标签

td：表格中的单元格标签（列标签）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格</title>
	</head>
	<body>
		<table  border="1px">
			<tr>
				<td>姓名</td>
				<td>性别</td>
				<td>年龄</td>
				<td>体重</td>
			</tr>
			<tr>
				<td>小A</td>
				<td>男</td>
				<td>22</td>
				<td>120</td>
			</tr>
			<tr>
				<td>小B</td>
				<td>男</td>
				<td>25</td>
				<td>130</td>
			</tr>
			<tr>
				<td>小C</td>
				<td>男</td>
				<td>21</td>
				<td>125</td>
			</tr>
		</table>
	</body>
</html>

效果图：

表格跨列：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格跨列</title>
	</head>
	<body>
		<table border="1px">
			<tr>
				<td colspan="2">学生成绩</td>
			</tr>
			<tr>
				<td>小A</td>
				<td>98</td>
			</tr>
		</table>		
	</body>
</html>

效果图：

通过colspan代码实现，col是column列的缩写

表格跨行：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格跨行</title>
	</head>
	<body>
		<table border="1px">
			<tr>
				<td rowspan="2">学生成绩</td>
				<td>小B</td>
			</tr>
			<tr>
				<td>95</td>
			</tr>
		</table>		
	</body>
</html>

效果图：

通过rowspan代码实现，row是行的意思

表格跨行跨列：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格跨行跨列</title>
	</head>
	<body>
		<table border="1px">
			<tr><td colspan="3">学生成绩</td></tr>
			<tr>
				<td rowspan="2">小A</td>
				<td>语文</td>
				<td>98</td>
			</tr>
			<tr>
				<td>数学</td>
				<td>91</td>
			</tr>
			<tr>
				<td rowspan="2">小B</td>
				<td>语文</td>
				<td>95</td>
			</tr>
			<tr>
				<td>数学</td>
				<td>90</td>
			</tr>
		</table>
	</body>
</html>

效果图：