自学web前端开发3（HTML）

原创已于 2024-03-06 22:44:52 修改 · 443 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #开发语言 #html

于 2024-03-03 16:10:18 首次发布

本文详细介绍了HTML中的列表标签（有序、无序和自定义），以及表格标签的使用，包括基本标签、属性设置、结构标签和合并单元格的方法。通过实例演示了如何创建和定制这些元素以满足不同场景的需求。

一、列表标签

1.1列表的应用场景

列表包括有序列表、无序列表和自定义列表，用于按照展示行相互关联的内容

1.2无序列表

在网页中表示一组无顺序之分的列表

<ul>
    <li>无序列表1</li>
    <li>无序列表2</li>
    <li>无序列表3</li>
    <li>无序列表4</li>
</ul>

注意：

列表的每一项前默认显示圆点标识
ul标签中只允许包含li标签
li标签可以包含任意内容

1.3有序列表

在网页中表示一组有顺序之分的列表

<ol>
    <li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表3</li>
    <li>有序列表4</li>
</ol>

注意：

列表的每一项前默认显示序号标识
ol标签中只允许包含li标签
li标签可以包含任意内容

1.4自定义列表

<dl>
     <dt>主题</dt>
     <dd>内容1</dd>
     <dd>内容2</dd>
     <dd>内容3</dd>
</dl>

注意：

dd前会默认显示缩进效果
dl标签只允许包含dd/dt标签
dd/dt标签可以包含任意内容

二、表格标签

2.1基本标签

表格整体 table

表格每行 tr

表格单元格 td

<table>
    <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
        <td>第一行第三列</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
        <td>第二行第三列</td>
    </tr>
    <tr>
        <td>第三行第一列</td>
        <td>第三行第二列</td>
        <td>第三行第三列</td>
    </tr>
</table>

2.2表格的基本属性

border 属性值为数字表示内边框宽度

width 属性值为数字表示表格的宽

height 属性值为数字表示表格的高

注意：实际开发中样式应该用CSS设置

2.3表格的标题和表头单元格标签

表格大标题 caption

表头单元格 th

    <table border="1">
        <caption><strong>三行三列</strong></caption>
        <tr>
            <th></th>
            <th>第一列</th>
            <th>第二列</th>
            <th>第三列</th>    
        </tr>
        <tr>
            <th>第一行</th>
            <td>第一行第一列</td>
            <td>第一行第二列</td>
            <td>第一行第三列</td>
        </tr>
        <tr>
            <th>第二行</th>
            <td>第二行第一列</td>
            <td>第二行第二列</td>
            <td>第二行第三列</td>
        </tr>
        <tr>
            <th>第三行</th>
            <td>第三行第一列</td>
            <td>第三行第二列</td>
            <td>第三行第三列</td>
        </tr>
    </table>

运行效果

3.4表格的结构标签

表格的结构标签同于给表格的内容进行分类，突出表格的不同部分、

    <table border="1">
        <caption><strong>三行三列</strong></caption>
        <thead>
        <tr>
            <th></th>
            <th>第一列</th>
            <th>第二列</th>
            <th>第三列</th>    
        </tr>
        </thead>
        <tbody>
        <tr>
            <th>第一行</th>
            <td>第一行第一列</td>
            <td>第一行第二列</td>
            <td>第一行第三列</td>
        </tr>
        <tr>
            <th>第二行</th>
            <td>第二行第一列</td>
            <td>第二行第二列</td>
            <td>第二行第三列</td>
        </tr>
        <tr>
            <th>第三行</th>
            <td>第三行第一列</td>
            <td>第三行第二列</td>
            <td>第三行第三列</td>
        </tr>
        </tbody>
        <tfoot>
            <th>总结</th>
            <td>第一列</td>
            <td>第二列</td>
            <td>第三列</td>
        </tfoot>
    </table>

使用表格的结构标签不会改变视觉效果，但是能提升浏览器的识别效率

3.5合并单元格

3.5.1场景

将水平或垂直单元格合并成一个单元格，即水平合并和垂直合并

3.5.2代码实现

合并单元格步骤

明确需要合并的单元格
通过左上原则（上下合并保留上，左右合并保留左）确定删除谁、保留谁
给保留的单元格设置：跨列合并（水平合并）（colspan）或跨行合并（垂直合并）(rowspan)
设置属性值为合并的单元格个数

    <table border="1">
        <caption><strong>三行三列</strong></caption>
        <thead>
        <tr>
            <th></th>
            <th>第一列</th>
            <th>第二列</th>
            <th>第三列</th>    
        </tr>
        </thead>
        <tbody>
        <tr>
            <th>第一行</th>
            <td colspan="3">第一行的三列</td>
        </tr>
        <tr>
            <th>第二行</th>
            <td rowspan="2">第一行的两行</td>
            <td>第二行第二列</td>
            <td>第二行第三列</td>
        </tr>
        <tr>
            <th>第三行</th>
            <td>第三行第二列</td>
            <td>第三行第三列</td>
        </tr>
        </tbody>
        <tfoot>
            <th>总结</th>
            <td>第一列</td>
            <td>第二列</td>
            <td>第三列</td>
        </tfoot>
    </table>