入坑第二天————列表与表格

最新推荐文章于 2024-09-07 16:56:39 发布

久醉呀

最新推荐文章于 2024-09-07 16:56:39 发布

阅读量104

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qq_35991442/article/details/125859021

版权

前言

	上次我们学习了基本的标签，这次让我们来看一些高级的

一、列表

1.无序列表

		结构：
				<ul>
						<li>列表项1</li>
						<li>列表项2</li>
						<li>列表项3</li>
						...
				</ul>		
	在每个li里放入列表的内容

2.有序列表

	结构：
			<ol>
					<li>列表项1</li>
					<li>列表项2</li>
					<li>列表项3</li>
					...
			</ol>
	与无序列表一样也是在li里放内容

3.代码效果图展示

代码：

<!doctype html>
<html>
	<head>
		<title>网页标题</title>
		<meta charset="utf-8" />
	</head>
	<body>
		<ul>
			<li>列表1</li>
			<li>列表2</li>
			<li>列表3</li>
		</ul>

		<ol>
			<li>列表1</li>
			<li>列表2</li>
			<li>列表3</li>
		</ol>

	</body>
</html>

效果展示：
在这里插入图片描述

二、表格

1.结构

结构：
在这里插入图片描述
属性：
1）border 表格边框
2）cellspacing 单元格与单元格之间的距离
3）cellpadding 内容与单元格四周的距离

***合并单元格
colspan 水平合并单元格
rowspan 垂直合并单元格
 这是表格的一个重要属性  可能有点绕  多多练习

2.效果展示

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" cellspacing="0" width="300">
			<tr><td rowspan="2">11</td><td>22</td><td>33</td></tr>
			<tr><td>22</td><td>33</td></tr>
			<tr><td>11</td><td colspan="2">22</td></tr>
			<tr><td>11</td><td>22</td><td>33</td></tr>
			<tr><td>11</td><td>22</td><td>33</td></tr>
		</table>
	</body>
</html>