目录
1. 表格标签
表格主要是用来显示、展示数据的,一个好的表格可以把繁杂的数据整理的有条理。
1.2 基本语法
<table>
<tr>
<td>表格里的文字</td>
…
</tr>
…
</table>
标签 | 描述 |
<table> | 定义表格的标签 |
<tr> | 表格中的行,必须放在<table>里 |
<td> | 单元格的内容,必须放在<tr>里 |
1.2 表头单元格标签
<th>标签(table head缩写)表示表格的表头部分。它一般位于表格的第一行第一列,单元格里的内容加粗居中显示,达到突出显示的作用。
1.2.1 表头单元格语法
<table>
<tr>
<th>姓名</th>
…
</tr>
…
</table>
1.3 表格属性
在实际开发中不常用,后面用css设置,但是要记住这些属性,在后期的css学习中会使用。
属性名 | 属性值 | 描述 |
align | left、center、right | 表格对齐方式 |
border | 1或者 “ ” | 是否有边框,默认值为无边框 |
cellpadding | 像素值 | 单元格边缘与内容之间的空白,默认1像素 |
cellspacing | 像素值 | 单元格之间的空白,默认2像素 |
width | 像素值或者百分比 | 表格的宽度 |
注意:这些属性要写到table标签里面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table align="center" border="2" cellpadding="0" cellspacing="0" width="200" height="100">
<tr>
<th>姓名</th>
<th>班级</th>
<th>学号</th>
</tr>
<tr>
<td>小米</td>
<td>1班</td>
<td>0122</td>
</tr>
</table>
</body>
</html>
1.3 表格结构标签
因为表格会比较多,可以把表格分为表格头部<thead>和表格主体<tbody>两大部分,使结构清晰化。在实际开发中会经常使用。
1.4 合并单元格
1.4.1 合并单元格的方式
- 跨行合并:rowspan=“合并单元格个数”
- 跨列合并:colspan=“合并单元格个数”
1.4.2 目标单元格
- 跨行:最上方单元格为目标单元格,写合并单元格
- 跨列:最左侧单元格为目标单元格,写合并单元格
1.4.3 合并单元格三步骤
- 确定合并方式(跨行还是跨列)
- 找目标单元格,写合并单元格数量。例如:<td colspan="2"></td>
- 删除多余单元格
以上面的表格为例,我们先要合并第一行的二三个单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table align="center" border="2" cellpadding="0" cellspacing="0" width="200">
<thead>
<tr>
<th>姓名</th>
<th colspan="2">班级</th>
</tr>
</thead>
<tbody>
<tr>
<td>小米</td>
<td>1班</td>
<td>0122</td>
</tr>
</tbody>
</table>
</body>
</html>
2. 列表标签
列表主要是用来布局的,它最大的特点是整齐、整洁、有序。
列表主要分为三大类:无序列表、有序列表、自定义列表
2.1 无序列表(重点)
2.1.1 基本语法
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h4>你喜欢吃什么食物?</h4>
<ul>
<li>奶茶</li>
<li>冰淇淋</li>
<li>炸鸡</li>
</ul>
</body>
</html>
注意:
- 列表项之间无等级之分,它们是并列的;
- ul只能嵌套li,ul里面不能放其他标签或者文字;
- li相当一个容器,可以容纳所有元素
- 无序列表都有自己的属性,在实际开发中用css设置
2.2 有序列表(了解)
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
注意:
- ol只能嵌套li,ol里面不能放其他标签或者文字;
- li相当一个容器,可以容纳所有元素
- 有序列表都有自己的属性,在实际开发中用css设置
2.3 自定义列表(重点)
用于对术语或者名词解释或者描述,如下下效果的实现需要用到自定义列表。
2.3.1 自定义标签语法
<dl>
<dt>名词</dt>
<dd>解释名词1</dd>
<dd>解释名词2</dd>
</dl>
注意:
- <dl>里面只包含<dt><dd>
- <dd>和<dl>没有限制,经常是一个<dt>对应多个<dd>