第6章 列表与表格——让网站更规整
2021-08-17 本文已影响0人
夜远曦白
带着问题去看书学习啦~
HTML5＋CSS3＋JavaScript Web 前端开发案例教程（慕课版），微信读书中找到的学习Web前端书籍，第6章开始啦，耶(＾－＾)V
习题
6-1 与定义列表相关的标签有哪些？它们的作用是什么？
<dl>（definition list）定义列表，该元素定义了一个包含术语、定义以及描述的列表。
<dt> 用来定义列表中项目部分的内容。
<dd> 定义描述部分的内容。
6-2 有序列表和无序列表的区别是什么？
- 无序列表（Unordered List）：特征在于提供一种不编号的列表方式，在每一个项目文字之前，以符号作为分项标识。
语法：
<ul>
<li>第1项</li>
<li>第2项</li>
…
</ul>
<ul></ul>表示这一个无序列表的开始和结束，<li>则表示一个列表项的开始。
- 有序列表（Ordered List）：默认情况下，有序列表的序号是阿拉伯数字，通过 type 属性可以调整序号的类型，例如将其修改成字母等。
语法：
<ol type=序号类型>
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
…
</ol>
属性：
属性
无序列表常被用于导航等内容，有序列表则被用于网站中需要排序的内容。
6-3 有序列表的序号类型有哪些？
序号类型：
序号类型
6-4 在HTML中，绘制一张表格通常需要使用哪几种标签？
<table> 标签
<tr> 标签 （table row）行
<th> 标签 （table header cell）表头单元格
<td> 标签 （table data cell）数据单元格
<thead> 标签
<tbody>标签
<tfoot>标签
语法格式：
<table>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
……
</tr>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
……
</tr>
……
</table>
<table> 和 </table> 标签分别表示一个表格的开始和结束；而 <tr> 和 </tr> 标签则分别表示表格中一行的开始和结束，在表格中包含几组 <tr> </tr>，就表示该表格为几行；<td> 和 </td> 标签分别表示一个单元格的开始和结束，也可以说表示一行中包含了几列。
6-5 在HTML中，合并单元格有哪两种方式？
- <td colspan="跨的列数">
- <td rowspan="跨的行数">
跨的列数就是这个单元格在水平方向上跨列的个数，跨的行数是指单元格在垂直方向上跨行的个数。
其他
实践了喽，这些真的是需要实际上操作一下，现在的小例子也就抄抄书中，照着敲一遍也是会加深印象的，加油ヾ(◍°∇°◍)ﾉﾞ
<!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>Demo6</title>
</head>
<body>
<p>NBA东部联盟球队排名前四强</p>
<ul>
<li>多伦多 猛龙</li>
<li> 密尔沃基 雄鹿</li>
<li>底特律 活塞</li>
<li>费城 76人</li>
</ul>
<p>2018年俄罗斯世界杯四强</p>
<ol>
<li>法国队</li>
<li>克罗地亚队</li>
<li>比利时队</li>
<li>英格兰队</li>
</ol>
<table align="center" width="500">
<caption><h2>医院自助排队机</h2></caption>
<tbody>
<tr align="center" bgcolor="#fff979">
<th width="80">姓名</th>
<th width="80">编号</th>
<th width="80">科室</th>
<th width="80">门室</th>
<th width="120">排队人数(人)</th>
</tr>
<tr align="center" bgcolor="#6bffe1">
<td rowspan="2">王明</td> <!--纵向合并两个单元格-->
<td rowspan="2">0203007</td> <!--纵向合并两个单元格-->
<td >检验科</td>
<td >101室</td>
<td>5</td>
</tr>
<tr align="center" bgcolor="#6bffe1">
<td>放射科</td>
<td>403室</td>
<td>20</td>
</tr>
<tr align="center" bgcolor="#ffc3e9">
<td>张晓</td>
<td>0103005</td>
<td>内科</td>
<td>201室</td>
<td>3</td>
</tr><!--此处省略雷同代码-->
</tbody>
</table>
</body>
</html>
运行结果：
result
补充：两个常用的CSS属性
- list-style-type：设置列表的标志
- list-style-image：设置自定义的列表标志
