第6章列表与表格——让网站更规整

用户8928967

发布于 2021-08-20 17:03:21

5470

发布于 2021-08-20 17:03:21

文章被收录于专栏：用户8928967的专栏

带着问题去看书学习啦~

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：设置自定义的列表标志

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2021-08-18，如有侵权请联系 cloudcommunity@tencent.com 删除

html

css

网站

本文分享自妮K妮K妮微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

html

css

网站

登录后参与评论

0 条评论

热度