HTML和CSS的学习（21—45节）_余弦定理搪瓷杯css-CSDN博客

本文链接：https://blog.csdn.net/m0_74078861/article/details/127466547

这篇教程涵盖了HTML的嵌套列表、表格、表单，CSS的语法格式、颜色表示法、边框样式和字体样式等内容。讲解了如何使用内联样式、内部样式和外部样式，并探讨了ID与Class选择器的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第二十一节：嵌套列表

列表之间可以互相嵌套，形成多层级的列表。

<body>
    <ul>
        <li>
            江苏省
            <ul>
                <li>扬州</li>
                <li>南京</li>
                <li>苏州</li>
            </ul>
        </li>
        <li>
            江西省
            <ul>
                <li>赣州</li>
                <li>南昌</li>
                <li>九江</li>
            </ul>
        </li>
    </ul>
</body>

效果如图

第二十二节：表格标签

注意：之间有嵌套关系的，要符合嵌套规范。

1.标签

<table>:表格的最外层容器
<tr>:定义表表格
<th>:定义表头
<td>:定义表格单元
<caption>:定义表格标题

2.语义化标签

<tHead></tHead>
<tBody></tBody>
<tFoot></tFoot>

注意，在一个table中，tBody是可以出现多次的，但是tHead和tFoot只能出现一次。
如：

<body>
    <table>
        <tHead>
            <tr>
                <th>日期</th>
                <th>天气</th>
                <th>出行情况</th>
            </tr>
        </tHead>
        <tBody>
            <tr>
                <td>2022年10月20日</td>
                <td>晴</td>
                <td>天气晴朗，适合出行</td>
            </tr>
        </tBody>
        <tBody>
            <tr>
                <td>2022年10月21日</td>
                <td>阴</td>
                <td>出行记得加衣</td>
            </tr>
        </tBody>
        <tFoot>
            
        </tFoot>
    </table>
</body>

效果如下图所示：
在这里插入图片描述

第二十三节：表格属性

border：表格边框
cellpadding：单元格内的空间
cellspacing：单元格之间的空间
colspan：合并列
rowspan：合并行
align：左右对齐方式(left,center,right)
valign：上下对齐方式(top,middle,bottom)

<body>
    <table border="1" cellpadding="30" cellspacing="30">
        <caption>天气预报</caption>
        <tHead>
            <tr