跟着该视频学习,记录笔记:【黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程】https://www.bilibili.com/video/BV14J4114768?p=12&vd_source=04ee94ad3f2168d7d5252c857a2bf358
Day4 内容梳理:
目录
HTML 3.0 表格
3.1 表格标签
表格不是用来布局页面的,而是主要用于显示、展示数据。表格可以让数据以可读性很好的规整形式展示,将繁杂数据以简洁明了的方式展现。
(1)语法
基本标签
<table>
<tr>
<td>单元格内的文字</td>
……
</tr>
……
</table>
<table></table>用于定义表格的标签
<tr></tr>用于定义表格中的行,<tr>双标签必须嵌套在<table>双标签中。
<td></td>用于定义表格中的单元格。<td>双标签必须嵌套在<tr>双标签中。
例子和效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格练习</title>
</head>
<body>
<table>
<tr> <td>姓名</td> <td>性别</td> <td>年龄</td> </tr>
<tr> <td>张三</td> <td>男</td> <td>20</td> </tr>
<tr> <td>李四</td> <td>男</td> <td>21</td> </tr>
</table>
</body>
</html>
表头字体加粗
另外,如果希望表头字体能更加显眼的话,可以把表头的标签从<td></td>换成<th></th>,呈现出居中的粗体字效果。
仍沿用上面的代码,改动如下
效果:
(2)相关属性
在实际开发中不常用到HTML的表格基本属性,因为一般是用CSS来设置。
属性名称 | 属性值 | 描述 |
align | left、center、right | 规定表格相对周围元素的对齐方式。 |
border | 1或”” | 规定表格单元是否拥有边框。 默认为””,表示没有边框。 |
cellpadding | 像素值 | 规定单元边沿与其内容之间的空白,默认1像素。 |
cellspacing | 像素值 | 规定单元格之间的空白,默认2像素。 |
width、height | 像素值或百分比 | 规定表格的宽度、高度。 |
align,把表格放页面中央:
border,给表格加边框:
cellpadding,表格内容和边框之间的距离:
(这里加了20个像素的间距)
cellspacing,规定单元格之间的距离:
(不特地设置的话,默认cellspacing为2像素)
如果把cellspacing设为0,就是最为常见的单线表格:
width、height,给表格设置宽度和高度:
(3)表格结构
基础的结构标签
可将表格划分为两部分:表头区域(<thead>标签)、主体区域(<tbody>标签)。
例子:
合并单元格
合并单元格有两种方式:
- 跨行合并:rowspan=”合并单元格的个数”
- 跨列合并:colspan=”合并单元格的个数”
合并的代码写在目标单元格上。
如果是跨行合并(上图红色),最上侧单元格为目标单元格,在里面写合并代码。
如果是跨行合并(上图蓝色),最左侧单元格为目标单元格,在里面写合并代码。
合并的三个步骤:
第一步,先确定是跨行还是跨列。
第二步,找到目标单元格,在里面写上合并的代码(合并方式=“合并的数量”),比如<td colspan=”2”></td>
第三步,删除多余的单元格。
比如把下图中的2和3合并为一个单元格:(采用跨列合并)
合并前的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格练习</title>
</head>
<body>
<table width="200" height="100" border="1" cellspacing="0">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>
合并后的示图以及代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格练习</title>
</head>
<body>
<table width="200" height="100" border="1" cellspacing="0">
<tr>
<td>1</td>
<td colspan=”2”></td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>
3.2 列表标签
表格用来展示数据,而列表是用来布局的。列表的特点是整齐、有序,用它布局会很方便且自由。
列表分为三类:无序列表、有序列表、自定义列表
标签名 | 列表类型 | 说明 |
<ul></ul> | 无序列表 | 各个列表项无顺序,<li></li>标签之间可以包含任何标签。 |
<ol></ol> | 有序列表 | 各个列表项有顺序,使用相对较少,<li></li>同上。 |
<dl></dl> | 自定义列表 | 只能包含<dd><dt>标签,但<dt><dd>标签之内可以放任何标签。 |
无序列表(重点)
<ul>双标签代表无序列表,其中的列表则以<li>标签定义。
无序列表的基本语法格式:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
……
</ul>
比如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>无序列表</title>
</head>
<body>
<h4>选择哪个选项?</h4>
<ul>
<li>A.XXX</li>
<li>B.YYY</li>
<li>C.ZZZ</li>
</ul>
</body>
</html>
注意:
- 无序列表的各个列表项之间是并列的,没有顺序之分。
- <li></li>之间可以放其他标签,比如:
有序列表
<ol>双标签代表有序列表,各个列表项按照数字升序的方式来排列。
有序列表的基本语法格式:
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
……
</ol>
例子和效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>有序列表</title>
</head>
<body>
<h4>积分排行榜</h4>
<ol>
<li>张三 10000</li>
<li>李四 2000</li>
<li>王五 100</li>
</ol>
</body>
</html>
自定义列表(重点)
<dl>双标签代表自定义列表,还会使用到命名项目的<dt>双标签、解释该项目的<dd>双标签。
自定义列表的基本语法格式:
<dl>
<dt>名词1</dt>
<dd>名词1的解释1</dd>
<dd>名词1的解释2</dd>
……
</dl>
换句话说,如果<dl>标签代表盒子,<dd>标签就是盒子里装的东西,而<dt>是盒子上贴的标签(表明盒子都装了什么)。
例子和效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义列表</title>
</head>
<body>
<h4>其他</h4>
<dl>
<dt> 帮助中心 </dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
<dd>订单操作</dd>
</dl>
</body>
</html>
注意:<dl></dl>标签中只能出现<dd>、<dt>标签,不能出现其他标签。