列表标签和表格标签

最新推荐文章于 2025-06-16 21:36:15 发布

Massimo_ycw

最新推荐文章于 2025-06-16 21:36:15 发布

阅读量133

点赞数

分类专栏： HTML 文章标签： html 前端 html5

本文链接：https://blog.youkuaiyun.com/Massimo__JAVA/article/details/124915147

版权

HTML 专栏收录该内容

12 篇文章

订阅专栏

一、补充

行内元素和块元素

块元素：

无论内容多少，该元素独占一行；
例如：p、h1-h6…

行内元素：

内容撑开宽度，左右都是行内元素可以排在一行；
例如：a、strong、em…

二、列表标签

2.1、什么是列表

列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能跟快捷的获得相应的信息。

2.2、列表的分类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--有序列表
应用范围：试卷，问答。。。
-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/C++</li>
</ol>

<!--无序列表
应用范围：导航，侧边栏....
-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/C++</li>
</ul>

<!--自定义列表
dl:标签
dt：列表名称
dd：列表内容
-->
<dl>
    <dt>学科</dt>

    <dd>Java</dd>
    <dd>Python</dd>
    <dd>Linux</dd>
    <dd>C</dd>

    <dt>位置</dt>

    <dd>湖南</dd>
    <dd>湘潭</dd>
    <dd>长沙</dd>
</dl>

</body>
</html>

效果：
在这里插入图片描述

三、表格标签

3.1、为什么使用表格

简单通用
结构稳定

3.2、基本结构

单元格
行
列
跨行
跨列

3.3、简单案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--表格table
行  tr
列  td
-->

<table border="1px">
    <tr>
<!-- colspan  跨列-->
        <td colspan="4">1-1</td>
    </tr>
    <tr>
<!-- rowspan 跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>

<hr>

<!--cellspacing:规定单元格之间的空间 ， cellpadding:规定单元格边缘与其内容的空白-->
<table border="2px" cellspacing="0" cellpadding="2px">
<!-- caption标签：设置表格标题，需要紧跟table标签-->
    <caption>马西莫的成绩</caption>
    <tr>
        <td colspan="3">学生成绩</td>
    </tr>
    <tr>
        <td rowspan="2">Massimo</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">马西莫</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
</table>

</body>
</html>

效果：
在这里插入图片描述