关于前端的一些学习记录（3）

（继续记录(2)中的标签部分的学习）

一、标签 之 列表标签

标签分为无序列表、有序列表和自定义列表。

1.无序列表

应用场景：如新闻栏，菜单栏等等...

标签名	说明
ul	表示无序列表的整体，用于包裹标签
li	表示无序列表的每一项，用于包含每一行的内容

显示特点：列表的每一项默认显示 圆点 “·” 标识（如果想去除，在后期CSS中学习到）；

注意点：（1）ul标签中只允许包含li标签；

(2)li标签可以包含任何内容。

例：

<ul>
    <li>香蕉</li>
    <li>苹果</li>
    <li>橙子</li>
    <li>草莓</li>
</ul>

2.有序列表

应用场景：排名、价目表等等...

标签名	说明
ol	表示有序列表的整体，用于包裹li标签
li	表示有序列表的每一项，用于包含每一行的内容

显示特点：列表的每一项前默认显示序号标识；

注意点：（1）ol标签中只允许包含li标签；

（2）li标签可以包含任意内容。（和上面的无需标签相仿）

例：

<ol>
    <li>张三：100</li>
    <li>李四：99</li>
    <li>王五：98</li>
</ol>

3.自定义列表

应用场景：在一些官方网页的最下端有一些任务选项，那些任务选项就是利用自定义列表写出来的

标签名	说明
dl	表示自定义列表的整体，用于包裹dt/dd标签
dt	表示自定义列表的主题
dd	表示自定义列表的针对主题的每一项内容

显示特点：“dd” 前会默认显示缩进效果，至于想做改变缩进或者是改变字体的美化效果，还是在CSS中讲述，目前只需要显示正常~。

注意点：（1）dl标签中只允许包含dt/dd标签；

（2）dt/dd标签可以包含任意内容。

二、标签 之 表格标签

 应用场景：在网页中以  “行+列”  的单元格的方式整齐展示各数据，例如：学生的成绩单

基本标签：

标签名	说明
table	表格整体，可用于包裹多个tr
tr	表格每行，可用于包裹td
td	表格单元格，可用于包裹内容

注意点：标签的嵌套关系：table > tr > td；

例：

<!--table 包含 tr, tr 包含 td-->
<table>
    <tr>
        <td>姓名</td>
        <td>成绩</td>
        <td>评价</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>100</td>
        <td>你真是个小机灵鬼</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>99</td>
        <td>你太菜了</td>
    </tr>
</table>

(PS:简述一下，如果去跑这段代码的话是无法显示出表格的，只是一群无序堆叠的文字)

所以，添加表格属性才能显示出具体的表格来。

.1表格属性

使用场景：设置表格相关属性。

常见相关属性：

属性名	属性值	显示效果
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

注：不难发现，在敲代码时，VScode没有像其他标识符那样，在你给出几个字母时跳出几个备选项。这是因为实际开发时，针对于样式效果（有但不限于宽、高等变量）还是在后期的CSS中讲述与学习。

具体代码：

<table border="1" width="1000" height="600">
    <tr>
        <td>姓名</td>
        <td>成绩</td>
        <td>评价</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>100</td>
        <td>你真是个小机灵鬼</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>99</td>
        <td>你太菜了</td>
    </tr>
</table>

.2表格标题和表头单元格标签

应用场景：在表格中表示整体大标题和一列小标题

标签：

标签名	名称	说明
caption	表格大标题	表示表格整体大标题，默认在表格整体顶部居中显示
th	表头单元格	表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示

注：caption标签书写在table标签内部 ；th标签书写在tr标签内部（用于替换td标签）

再次完善后的代码：

<table border="1">
    <caption><strong>成绩单</strong></caption>
    <tr>
        <td>姓名</td>
        <td>成绩</td>
        <td>评价</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>100</td>
        <td>你真是个小机灵鬼</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>99</td>
        <td>你太菜了</td>
    </tr>
</table>

.3表格的结构标签

使用场景：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰

结构标签：

标签名	名称
thead	表格头部
tbody	表格主体
tfoot	表格底部

注意点：表格结构标签内部用于包裹 tr 标签 ；表格的结构标签可以省略。

继续使用上述例子，加上标签即可:

<table border="1">
    <caption><strong>成绩单</strong></caption>
    <thead>
        <tr>
            <td>姓名</td>
            <td>成绩</td>
            <td>评价</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>100</td>
            <td>你真是个小机灵鬼</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>99</td>
            <td>你太菜了</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>这只是一句总结的话</td>
            <td>这只是一句总结的话</td>  
            <td>这只是一句总结的话</td>      
        </tr>
    </tfoot>
</table>

PS:加上结构标签后，其实没有可视的变化，但是对于浏览器来说，执行效率更高了！

.4表格的合并单元格标签

合并原则：左上原则

上下合并时，保留最上的，删除其他；左右合并时，保留最左的，删除其他。

具体标签：

属性名	属性值	说明
rowspan	合并单元格的个数	跨行合并，将多行的单元格垂直合并
colspan	合并单元格的个数	跨列合并，将多列的单元格水平合并

同一个结构中的标签才能够合并，不能跨结构合并（thead、tbody、tfoot不同结构不能合并）

代码如下：

<table border="1">
    <caption><strong>成绩单</strong></caption>
    <thead>
        <tr>
            <td>姓名</td>
            <td>成绩</td>
            <td>评价</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td rowspan="2">100</td>
            <td>你真是个小机灵鬼</td>
        </tr>
        <tr>
            <td>李四</td>
            <!--删除这一行！！！--><td>99</td>
            <td>你太菜了</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>这只是一句总结的话</td>
            <td>这只是一句总结的话</td>  
            <td>这只是一句总结的话</td>      
        </tr>
    </tfoot>
</table>

效果：李四原先99分也变成100分，此处只显示一个100（具体格式与excel表格格式完全一致）

表格标签部分的学习到此结束，如果您喜欢，希望能得到您的点赞；如果您想同我一起学习，欢迎关注我，咱们一起加油！