HTML零基础入门教学第三期：列表与表格制作-初晴小屋

660cea040c201619

本期学习目标

掌握无序列表、有序列表、自定义列表，学会搭建导航栏；熟练制作规整表格，适配API数据展示、站点数据排版

一、三大列表标签

1. 无序列表（圆点列表）

标签： <ul> 外层 + <li> 列表项

默认黑色小圆点，常用于导航、分类

<ul>
    <li>首页</li>
    <li>接口大全</li>
    <li>使用教程</li>
    <li>联系我们</li>
</ul>

2. 有序列表（数字排序）

标签： <ol> 外层 + <li> 列表项

自动按123排序，适合步骤教程、排行

<ol>
    <li>打开官网</li>
    <li>注册账号</li>
    <li>获取接口密钥</li>
    <li>对接使用</li>
</ol>

3. 自定义列表（图文释义）

<dl> 包裹， <dt> 标题， <dd> 解释内容

适合名词介绍、参数说明

<dl>
    <dt>白茶API</dt>
    <dd>稳定高速免费接口平台</dd>
    <dt>官网地址</dt>
    <dd>bcapi.ccwu.cc</dd>
</dl>

二、列表实用小技巧

– 去掉列表默认圆点：后续CSS可实现，纯HTML可先用样式属性简写

– 列表嵌套：li里面可继续放ul/ol，做二级菜单

三、表格核心标签

基础组成

– <table> 定义表格整体

– <tr> 表格行

– <td> 单元格

– <th> 表头单元格（自动居中加粗）

基础表格写法

<table border="1" cellpadding="5" cellspacing="0">
    <tr>
        <th>接口名称</th>
        <th>请求方式</th>
        <th>状态</th>
    </tr>
    <tr>
        <td>随机视频</td>
        <td>GET</td>
        <td>正常可用</td>
    </tr>
    <tr>
        <td>天气查询</td>
        <td>GET</td>
        <td>维护中</td>
    </tr>
</table>

属性讲解

– border：表格边框粗细

– cellpadding：单元格内边距

– cellspacing：单元格间距，设0无缝贴合

合并单元格

1. 跨行合并 rowspan=”行数”

2. 跨列合并 colspan=”列数”

四、完整实战案例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML第三期 列表表格</title>
</head>
<body>
    <h2>网站导航列表</h2>
    <ul>
        <li><a href="https://bcapi.ccwu.cc" target="_blank">白茶API官网</a></li>
        <li>接口分类</li>
        <li>开发文档</li>
    </ul>
    <hr>
    <h2>接口使用步骤</h2>
    <ol>
        <li>进入官网登录</li>
        <li>挑选所需接口</li>
        <li>复制调用地址</li>
        <li>嵌入程序使用</li>
    </ol>
    <hr>
    <h2>接口数据统计表</h2>
    <table border="1" cellpadding="6" cellspacing="0">
        <tr>
            <th>接口类型</th>
            <th>数量</th>
            <th>是否免费</th>
        </tr>
        <tr>
            <td>娱乐类接口</td>
            <td>36</td>
            <td>全部免费</td>
        </tr>
        <tr>
            <td>工具类接口</td>
            <td>22</td>
            <td>基础免费</td>
        </tr>
    </table>
</body>
</html>

五、本期知识点总结

1. 学会三种列表用法，轻松制作页面导航

2. 掌握表格搭建、属性调整、简单合并单元格

3. 可制作接口展示表、数据排行、使用教程页面

4. 实现文字链接+列表+表格组合排版

下期预告

第四期：表单标签学习，制作登录框、注册框、留言提交页面，搭建简易提交交互页面

文章版权归作者所有，未经允许请勿转载。

THE END