导航组件和表格元素

导航组件

列表

ul>li : 无序列表

ol>li : 有序列表

dl>dt+dd : 自定义列表

链接

<a href="" target="_blank"></a>

href=”” 链接地址,如果链接无法识别自动下载

target=”_blank”新标签页打开链接,默认_self当前页面跳转

图片

<img src="" alt="">

src图片路径
alt图片备注

表格

<table>
    <!-- 标题 -->
    <caption></caption>
    <thead>
        <tr>
          <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
          <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
        </tr>
    </tfoot> 
</table>

跨行合并表格 rowspan=”x”

跨列合并表格 colspan=”x”

导航组件

列表

ul>li : 无序列表

ol>li : 有序列表

dl>dt+dd : 自定义列表

链接

<a href="" target="_blank"></a>

href=”” 链接地址,如果链接无法识别自动下载

target=”_blank”新标签页打开链接,默认_self当前页面跳转

图片

<img src="" alt="">

src图片路径
alt图片备注

导航组件

表格

<table>
    <!-- 标题 -->
    <caption></caption>
    <thead>
        <tr>
          <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
          <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
        </tr>
    </tfoot> 
</table>

跨行合并表格 rowspan=”x”

跨列合并表格 colspan=”x”

border-collapse: collapse;去除重复边框

课程表

<!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>课程表</title>
    <style>
        table{
            width: 600px;
            height: 500px;
            border: 1px solid black;
            text-align:center;
            /* 去除边框重复 */
            border-collapse: collapse;
        }
        th{
            width: 100px;
            height: 30px;
            border: 1px solid black;
        }
        td{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <table>
        <!-- 标题 -->
        <caption><h3>课程表</h3></caption>
        <!-- 表头 -->
        <thead>
            <tr>
                <th> </th>
                <th>节次</th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
            </tr>
        </thead>
        <!-- 内容 -->
        <tbody>
            <tr>
                <!-- rowspan 跨行合并表格 -->
                <td rowspan="4">上午</td>
                <td>第1节</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>第2节</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>第3节</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>第4节</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <!-- colspan:跨列合并表格 -->
                <td colspan="7">午休</td>
            </tr>
            <tr>
                <td rowspan="4">下午</td>
                <td>第5节</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>第6节</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>第7节</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>第8节</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</body>
</html>