前端基础HTML4(4)一.列表 1.有序列表概念：有顺序或侧重顺序的列表。 2.无序列表概念：无顺序或不侧重顺序的

一.列表

1.有序列表

概念：有顺序或侧重顺序的列表。

<h2>要把大象放冰箱总共分几步</h2>
<ol>
    <li>把冰箱门打开</li>
    <li>把大象放进去</li>
    <li>把冰箱门关上</li>
</ol>

2.无序列表

概念：无顺序或不侧重顺序的列表。

<h2>我想去的几个城市</h2>
<ul>
    <li>成都</li>
    <li>上海</li>
    <li>西安</li>
    <li>武汉</li>
</ul>

3.列表嵌套

概念：列表中的某项内容，又包含一个列表。

<h2>我想去的几个城市</h2>
<ul>
    <li>成都</li>
    <li>
        <span>上海</span>
        <ul>
            <li>外滩</li>
            <li>杜莎夫人蜡像馆</li>
            <li><a href="https://www.opg.cn/">东方明珠</a></li>
            <li>迪士尼乐园</li>
        </ul>
    </li>
    <li>西安</li>
    <li>武汉</li>
</ul>
注意： li 标签最好写在 ul 或 ol 中，不要单独使用。

4.自定义列表

概念：所谓自定义列表，就是一个包含术语名称以及术语描述的列表。

<h2>如何高效的学习？</h2>
<dl>
    <dt>做好笔记</dt>
        <dd>笔记是我们以后复习的一个抓手</dd>
        <dd>笔记可以是电子版，也可以是纸质版</dd>
    <dt>多加练习</dt>
        <dd>只有敲出来的代码，才是自己的</dd>
    <dt>别怕出错</dt>
        <dd>错很正常，改正后并记住，就是经验</dd>
</dl>

二.表格

1. 基本结构

一个完整的表格由：表格标题、表格头部、表格主体、表格脚注，四部分组成。

2. 表格涉及到的标签

table：表格
caption：表格标题
thead：表格头部
tbody：表格主体
tfoot：表格注脚
tr：每一行
th、td：每一个单元格（备注：表格头部中用th，表格主体、表格脚注中用：td ）

3.具体编码：

<table border="1">
    <!-- 表格标题 -->
    <caption>学生信息</caption>
    <!-- 表格头部 -->
    <thead
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>民族</th>
            <th>政治面貌</th>
        </tr>
    </thead>
    <!-- 表格主体 -->
    <tbody>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>18</td>
            <td>汉族</td>
            <td>团员</td>
        </tr>

        <tr>
            <td>李四</td>
            <td>女</td>
            <td>20</td>
            <td>满族</td>
            <td>群众</td>
        </tr>

        <tr>
            <td>王五</td>
            <td>男</td>
            <td>20</td>
            <td>回族</td>
            <td>党员</td>
        </tr>

        <tr>
            <td>赵六</td>
            <td>女</td>
            <td>21</td>
            <td>壮族</td>
            <td>团员</td>
        </tr>
    </tbody>

    <!-- 表格脚注 -->
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>共计：4人</td>
        </tr>
    </tfoot>
</table>

2.常用属性

<table>是表格

width：设置表格宽度。

height：设置表格最小高度，表格最终高度可能比设置的值大。

border：设置表格边框宽度。

cellspacing：设置单元格之间的间距。

<thead>是表格头部。

height：设置表格头部高度。

align：设置单元格的水平对齐方式，可选值如下：
1. left：左对齐
2. center：中间对齐
3. right：右对齐
valign：设置单元格的垂直对齐方式，可选值如下：
1. top：顶部对齐
2. middle：中间对齐
3. bottom：底部对齐
<tbody>：表格主体，常用属性与<thead>相同。
<tr>：行，常用属性与<thead>相同。
<tfoot>：表格脚注，常用属性与<thead>相同。
<td>：普通单元格。

width：设置单元格的宽度，同列所有单元格全都受影响。

heigth：设置单元格的高度，同行所有单元格全都受影响。

align：设置单元格的水平对齐方式。

valign：设置单元格的垂直对齐方式。

rowspan：指定要跨的行数。

colspan：指定要跨的列数。
<th>：表头单元格。常用属性与<td>相同。

注意点：
1. <table> 元素的 border 属性可以控制表格边框，但 border 值的大小，并不控制单元格边框的宽度。
只能控制表格最外侧边框的宽度，这个问题如何解决？—— 需要靠 CSS 控制。
2. 默认情况下，每列的宽度，需要看这一列单元格最长的那个文字。
3. 给某个 th 或 td 设置了宽度之后，他们所在的那一列的宽度就确定了。
4. 给某个 th 或 td 设置了高度之后，他们所在的那一行的高度就确定了。

3. 跨行跨列

rowspan ：指定要跨的行数。
colspan ：指定要跨的列数。

例如：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
</head>

<body>
    <table border="1" cellspacing="0">
        <caption>课程表</caption>
        <thead>
            <th>1-1</th>
            <th>1-2</th>
            <th>1-3</th>
            <th>1-4</th>
            <th>1-5</th>
            <th>1-6</th>
            <th>1-7</th>
            <th>1-8</th>
        </thead>
        
        <tbody>
            <tr>
                <td>2-1</td>
                <td>2-2</td>
                <td>2-3</td>
                <td>2-4</td>
                <td>2-5</td>
                <td>2-6</td>
                <td>2-7</td>
                <td>2-8</td>
            </tr>
            <tr>
                <td>3-1</td>
                <td>3-2</td>
                <td>3-3</td>
                <td>3-4</td>
                <td>3-5</td>
                <td>3-6</td>
                <td>3-7</td>
                <td>3-8</td>
            </tr>
            <tr>
                <td>4-1</td>
                <td>4-2</td>
                <td>4-3</td>
                <td>4-4</td>
                <td>4-5</td>
                <td>4-6</td>
                <td>4-7</td>
                <td>4-8</td>
            </tr>
            <tr>
                <td rowspan="2">5,6-1</td>
                <td>5-2</td>
                <td>5-3</td>
                <td colspan="2">5-4-5</td>
                <!-- <td>2-5</td> -->
                <td>5-6</td>
                <td>5-7</td>
                <td>5-8</td>
            </tr>
            <tr>
                <!-- <td>6-1</td> -->
                <td>6-2</td>
                <td>6-3</td>
                <td>6-4</td>
                <td>6-5</td>
                <td>6-6</td>
                <td>6-7</td>
                <td>6-8</td>
            </tr>
            <tr>
                <td>7-1</td>
                <td>7-2</td>
                <td>7-3</td>
                <td>7-4</td>
                <td>7-5</td>
                <td>7-6</td>
                <td>7-7</td>
                <td>7-8</td>
            </tr>
            <tr>
                <td>8-1</td>
                <td>8-2</td>
                <td>8-3</td>
                <td>8-4</td>
                <td>8-5</td>
                <td>8-6</td>
                <td>8-7</td>
                <td>8-8</td>
            </tr>

        </tbody>
        
        <tfoot></tfoot>
    </table>
</body>

</html>

二.常用标签补充

<br> 换行
<hr> 分割
<pre> 按原文显示（一般用于在页面中嵌入大段代码）

注意点：
1. 不要用<br>来增加文本之间的行间隔，应使用<p>元素，或CSS的margin属性。
2. <hr>的语义是分隔，如果不想要语义，只是想画一条水平线，那么应当使用CSS完成。