1.2 列表与表格

列表

有序列表ol

<ol type="属性值">
    <li>墨隐好帅</li>
    <li>阿巴阿巴</li>
    <li>墨隐好帅</li>
    <li>阿巴阿巴</li>
</ol>

无序列表ul

<ul type="属性值">
    <li>墨隐好帅</li>
    <li>阿巴阿巴</li>
    <li>墨隐好帅</li>
    <li>阿巴阿巴</li>
</ul>

注：无序列表的 ul 的子元素里只能是 li 。

自定义列表dl

<dl>
    <dt>列表名称</dt>
    
    <dd>列表内容</dd>
    <dd>墨隐好帅</dd>
    <dd>阿巴阿巴</dd>
    
    <dt>列表名称</dt>
    
    <dd>列表内容</dd>
    <dd>墨隐好帅</dd>
    <dd>阿巴阿巴</dd>
</dl>

type属性（前5个位有序列表）

属性值列表符号
1 1、2、3……
a a、b、c……
A A、B、C……
i i、ii、iii……
I I、II、III……
disc 实心圆
circle 空心圆
square 方块

 

表格

语义化

语义化在编程中是一个很重要的东西，它主用于把程序分类可以一眼看出结构

表格的语义化就把表格分为：

表头thead

表身tbody

表脚tfoot

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表格</title>
        <style type="text/css">
            table,tr,th,td{border:1px solid silver;}
        </style>
    </head>
    <body>
        <table><!--这里表示内容为表格-->
            
            <caption>考试成绩表</caption><!--表格标题-->
            <thead><!--表头-->
                <tr><!--表示换行-->
                    <th>姓名</th><!--单元格内容加粗-->
                    <th>语文</th>
                    <th>数学</th>
                </tr>
            </thead>
            
            <tbody><!--表身-->
                <tr>
                    <td>张三</td><!--普通单元格-->
                    <td>99</td>
                    <td>99</td>
                </tr>
                 <tr>
                    <td>李四</td>
                    <td>99</td>
                    <td>99</td>
                 </tr>
            </tbody>
​
            <tfoot><!--表脚-->
                 <tr>
                    <td>平均分</td>
                    <td colspan="2">99</td>
                     <!--合并行：rowspan;合并列：colspan-->
                </tr>
            </tfoot>
        
        </table>
    </body>
</html>

 

posted @   始墨......至隐  阅读(463)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示