HTML（四）：列表与表格

最新推荐文章于 2021-11-20 17:02:24 发布

不知名的MasaNvi

最新推荐文章于 2021-11-20 17:02:24 发布

阅读量214

点赞数

文章标签： html html5 javascript

本文链接：https://blog.csdn.net/weixin_43936723/article/details/119565350

版权

HTML 专栏收录该内容

7 篇文章 3 订阅

订阅专栏

一、列表

1.1、列表简介

列表在网页中一般是最为常见的一种数据排列方式，我们在浏览网页时最频繁的见到列表的身影。
例如：我们在浏览淘宝网页时，左侧的导航栏，右侧的功能栏，均通过列表进行排列呈现在网页上。
淘宝列表在HTML中，我们将列表分为三种情况：有序列表、无序列表、定义列表
在有序列表中，列表项之间有先后顺序之分。在无序列表中，列表项之间是没有先后顺序之分。

这里代码例子呈现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p>这里是有序列表</p>
		<ol>
			<li>A</li>
			<li>B</li>
			<li>C</li>
			<li>D</li>
		</ol>
		<p>这里是无序列表</p>
		<ul>
			<li>a</li>
			<li>b</li>
			<li>c</li>
			<li>d</li>
		</ul>
	</body>
</html>

这里效果呈现

列表呈现
这里给体验下有序和无序列表的情况

1.2、有序列表

从上面我们已经了解到有序列表情况，列表项是有顺序的。有序列表从ol开始到**/ol**结束，其中有序列表一般采用数组或者字母作为顺序，默认情况下采用数字顺序。
注意：ol标签搭配li标签使用，二者不可单独使用，并且ol标签的字标签只能是li标签，不能为其他标签。

1.2.1、type属性

在HTML中，通过type属性更改列表符号。默认情况下为数字列表

附：type属性值

属性值	列表项符号
1	阿拉伯数字：1、2、3…
a	小写英文字母：a、b、c…
A	大写英文字母：A、B、C…
i	小写罗马数字：i、ii、iii…
I	大写罗马数字：I、II、III…

对于后续，我们可通过CSS样式进行配置从而弃用type属性。

1.3、无序列表

与有序列表相比，无序列表比较容易理解，无序列表没有顺序表达。在默认情况下，无序列表的列表符号是●，我们也可以通过type进行修改

1.2.1、type属性

在HTML中，通过type属性更改列表符号。默认情况下为●

附：type属性值

属性值	列表项符号
disc	实心圆 ●
circle	空心圆 ○
square	正方形 ■

对于后续，我们可通过CSS样式进行配置从而弃用type属性。

二、表格

在HTML中，表格有表格、行、单元格三者构成：
语法格式

<table>
	<tr>
		<td>格1</td>
		<td>格2</td>
	</tr>
	<tr>
		<td>格3</td>
		<td>格4</td>
	</tr>
</table>

其中：

tr（table row）：表格行
td（table data cell）：表格单元格

在表格中有多少组 tr 就有多少行。

完整结构

表格中除了table标签、tr标签、td标签这三个部分外，还包括caption、th等。

表格标题：caption

注：表格一般都会有一个标题，可以使用caption实现。默认情况下位于表格第一行
表头单元格：th
区分：th与td本质上都是单元格，但是并不代表两者可以互换。

显示上：浏览器以“粗体”、“居中”显示th标签的内容，但是td标签不会
语义上：th标签位于表头，td标签位于表行

语义化

一个完整表格包含：table、caption、tr、th、td，深入学习，引入thead、tbody、tfoot三个标签。
其中：thead为表头、tbody为表身、tfoot为表脚

合并行：rowspan

语义：<td rowspan=“跨越的行数“></td>

合并列：colspan

语义：<td colspan==“跨越的列数“></td>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>*{margin: 50px auto;padding: 0px;}table{width: 150px;height: 150px;text-align: center;}</style>
	<body>
		<table border="1">
			<thead>
				<tr>
					<td colspan="3">这是表头</td> 
				</tr>
			</thead>
			<tbody>
				<tr>
					<th>1</th>
					<th>2</th>
					<th>3</th>
				</tr>
				<tr>
					<td rowspan="2">4</td>
					<td>5</td>
					<td>6</td>
				</tr>
				<tr>
					<td>7</td>
					<td>8</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="3">这是表格脚部</td>
				</tr>
			</tfoot>
		</table>
	</body>
</html>