一,列表

1,无序列表

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>列表</title>
</head>
<body>
	<!--无序列表  -->
	<ul>
		<li>无序列表1</li>
		<li>无序列表2</li>
	</ul>

	
</body>
</html>

列表常用的属性: type 定义无序列表的标记形状

type="disc" 实心圆

type="none"无标记 circle 标记为空心圆 square 标记为实心方块

2,有序列表: <ol> <li></li></ol>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>列表</title>
</head>
<body>
	

	<!-- 有序列表 -->
	<ol>
		<li>第一行</li>
		<li>第二行</li>
		
	</ol>

	
</body>
</html>

可选属性:type ="decimal" 标记为数字

decimal-leading-zero 0开头的数字标记

lower-alpha 小写英文字母

upper-alpha 大写英文字母

3,自定义列表

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>列表</title>
</head>
<body>
	

	<!-- 自定义列表 -->
	<dl>	
		<dt>
			<img src="./t01a7a51a3b7bd140ec.jfif" alt="">
			<dd>这是一个三星手机</dd>
			<dd>2000万像素</dd>
			<dd>莱卡双摄</dd>
		</dt>
		<dt>
			下面是一些列表
			<dd>自定义列表一</dd>
			<dd>自定义列表2</dd>
			<dd>自定义列表三</dd>
		</dt>
	</dl>
</body>
</html>

<dl>

<dt>图片

<dd>对图片内容进行解释</dd>

</dt>

<dl>

以上结构,常用于商品展示介绍

二,表格

1,表格基本标签

表格标签<table></table>

tr表示行

td表示表格元素

th表头标签

thead标签,body标签分别表示:表头和身体

caption表示表格的标题

2,常用属性

table的属性

border定义表格的边框属性值可为 1,2,3....

width 定义表格的宽度属性值不需要加单位

align 定义表格的位置属性值有 center left right

cellspacing 定义表格与表格之间的距离属性值不用带单位

cellspadding 定义内的内容距离表格的距离属性值不用带单位

tr 的属性

可以定义tr的的高度 height

3,表格的合并

通过 colspan="合并表格的列数"可以合并列

通过rowspan="合并表格的行数"可以合并表格的行

一下代码演示了表格常用的一些属性,合并方法等

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格</title>
</head>
<body>
	<!-- 这是一个普通的表格 -->
	<table border="1" cellpadding="2" cellspacing="1">
		<tr>
			<td>11</td>
			<td>12</td>
			<td>13</td>
		</tr>
		<tr>
			<td>21</td>
			<td>22</td>
			<td>23</td>
		</tr>
		<tr>
			<td>31</td>
			<td>32</td>
			<td>33</td>
		</tr>
	</table>

	<br>
	<hr>
	<br>

	<!-- 这是一个带有表头的表格 -->
	<table border="1" cellpadding="2" cellspacing="1">
		<tr>
			<th>11</th>  <!--当加hd的时候表格内的字体会加粗,作为一个表头-->
			<th>12</th>
			<th>13</th>
		</tr>
		<tr>
			<th>21</th>
			<td>22</td>
			<td>23</td>
		</tr>
		<tr>
			<th>31</th>
			<td>32</td>
			<td>33</td>
		</tr>
	</table>



	<br>
	<hr>
	<br>

	<!-- 这是一个加了thead的表格,可以将表格分为头和尾两个部分 -->
	<table border="1" cellpadding="2" cellspacing="1"  width="200" height="20" align="center" >
		<thead>
			<th>11</th>
			<th>12</th>
			<th>13</th>			
		</thead>
		<tr>
			<td>21</td>
			<td>22</td>
			<td>23</td>
		</tr>
		<tr>
			<td>31</td>
			<td>32</td>
			<td>33</td>
		</tr>
	</table>

	<br>
	<hr>
	<br>



	<!-- 跨行跨列的练习 -->
	<table border="1" cellpadding="2" cellspacing="1"  width="200" height="20" align="center" >
		<caption>表格跨行,跨列的练习</caption>
		<tr>
			<td colspan="2">11</td>
			<td>13</td>
			<td>14</td>

		</tr>
		<tr>
			<td>21</td>
			<td>22</td>
			<td colspan="2" rowspan="2">23</td>
		</tr>
		<tr>
			<td>31</td>
			<td>32</td>
			
		</tr>
	</table>
</body>
</html>

html列表、表格基本用法