列表与表格

最新推荐文章于 2024-02-19 11:08:35 发布

logical_thinking

最新推荐文章于 2024-02-19 11:08:35 发布

阅读量304

点赞数 2

分类专栏： html的基础知识文章标签： html5 前端 html 青少年编程

本文链接：https://blog.csdn.net/logical_thinking/article/details/126042594

版权

html的基础知识专栏收录该内容

3 篇文章

订阅专栏

这篇博客介绍了HTML5中的列表和表格，包括有序列表(ol)、无序列表(ul)和定义列表(dl)的使用，以及表格(table)的基本属性如border、cellspacing、cellpadding和width、height。这些元素在网页制作中常见且实用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

		<table border="1" cellspacing="0" cellpadding="50" width="300" height="300" bgcolor="#6fb6fb" align="center">
			<tr>
				<td>11</td>
				<td>22</td>
				<td>33</td>
			</tr>
			<tr>
				<td>44</td>
				<td>55</td>
				<td>66</td>
			</tr>
			<tr>
				<td>77</td>
				<td>88</td>
				<td>99</td>
			</tr>
		</table>

前言

随着我们的学习我们开始学列表与表格，在我们使用电脑的时候打开浏览器例如百度首页我们会看到下面的

这就是用到了列表

一、列表有几类？

列表有三大类：有序列表、无序列表以及定义列表。

有序列表：ol

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 有序列表 -->
		<ol>
			<li>a</li>
			<li>b</li>
			<li>c</li>
		</ol>



	</body>
</html>

效果的话可以自己打出来在浏览器页面观看

无序列表：ul

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 无序列表 -->
		<ul>
			<li>a</li>
			<li>b</li>
			<li>c</li>
		</ul>



	</body>
</html>

效果的话可以自己打出来在浏览器页面观看

定义列表 dl

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<dl>
			<dt>水果</dt>
			<dd>西瓜</dd>
			<dd>苹果</dd>
			<dd>香蕉</dd>
		</dl>
		<dl>
			<dt>
				<a href="#">跳下！抱住！掉落这把为陌生人撑起的彩色雨伞</a>
			</dt>
			<dd>
				看见他掉下去的一瞬间
				看见他掉下去的一瞬间
				看见他掉下去的一瞬间
				看见他掉下去的一瞬间
				看见他掉下去的一瞬间
				看见他掉下去的一瞬间
				看见他掉下去的一瞬间
				看见他掉下去的一瞬间
				看见他掉下去的一瞬间
				看见他掉下去的一瞬间
				看见他掉下去的一瞬间
			</dd>
		</dl>
	</body>
</html>

效果的话可以自己打出来在浏览器页面观看

二、表格

表格为我们用到的标签是table

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" cellspacing="0" cellpadding="50" width="300" height="300">
			<tr>
				<td>11</td>
				<td>22</td>
				<td>33</td>
			</tr>
			<tr>
				<td>44</td>
				<td>55</td>
				<td>66</td>
			</tr>
			<tr>
				<td>77</td>
				<td>88</td>
				<td>99</td>
			</tr>
		</table>
	</body>
</html>

可以看到table标签里有 border cellspacing cellpadding width height。这些依次是表格的边框粗细、外边框的宽度、文字与内边框的距离、表格的宽度、高度。