HTML中的文本、清单和表格内容元素的详细说明

Vincent_Vang

已于 2023-12-16 14:44:30 修改

阅读量502

点赞数 1

分类专栏： HTML 文章标签： html css 前端 java css3

于 2023-05-06 14:27:31 首次发布

本文链接：https://blog.csdn.net/vincent_vang/article/details/130525402

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

一、文本内容元素`<div>`
二、清单（也称做列表）
三、表格 Table

一、文本内容元素`<div>`

HTML <div> 元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器，在不使用CSS的情况下，其对内容或布局没有任何影响。

定义和用法

<div>可定义文档中的分区或节（division/section）。

<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

用法

<div>是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过<div>的 class 或 id 应用额外的样式。

不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。

可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。

支持的浏览器

在这里插入图片描述

注意：

<div>中避免使用其他有关文本内容、内容分区这样的元素，因为在<div>中使用会将其分成多个小块，而不是一个整体。

<body>
    <div>
        生活有一点，我不是太喜欢，
        <p>
            那就是他总让更懂事的人来承担糟糕的感受和结果。
        </p>
        <address>
            独木舟
        </address>
    </div>
</body>

原本应该是占全部<div>元素，结果被分成一小块了。
在这里插入图片描述

而其他元素各占一小块。

二、清单（也称做列表）

1.`<ul>` 无序清单（也称作无序列表）

HTML <ul> 元素（或称 HTML 无序列表元素）表示一个内可含多个元素的无序列表或项目符号列表。

定义和用法

<ul>标签定义无序列表。

浏览器支持：

在这里插入图片描述
<ul>是以清单项目(list item) 为子元素

    <ul>
        无序清单
        <li>无序列表</li>
        <li>unordered list</li>
        <li>以 清单项目(list item) 为子元素</li>
    </ul>

在这里插入图片描述
其中子元素前的项目符号有三个，但并不推荐使用：

disc
square
circle

分别效果：

（disc）

    <ul>
        无序清单
        <li type="disc">无序列表</li>
        <li type="disc">unordered list</li>
        <li type="disc">以 清单项目(list item) 为子元素</li>
    </ul>

在这里插入图片描述

（square）

    <ul>
        无序清单
        <li type="square">无序列表</li>
        <li type="square">unordered list</li>
        <li type="square">以 清单项目(list item) 为子元素</li>
    </ul>

在这里插入图片描述
（circle）

    <ul>
        无序清单
        <li type="circle">无序列表</li>
        <li type="circle">unordered list</li>
        <li type="circle">以 清单项目(list item) 为子元素</li>
    </ul>

在这里插入图片描述

2.`<ol>` 有序清单（也称作有序列表）

HTML <ol> 元素表示有序列表，通常渲染为一个带编号的列表。

定义和用法

<ol> 标签定义有序列表。

浏览器支持：

在这里插入图片描述
<ol>是以清单项目(list item) 为子元素

    <ol>
        有序清单
        <li>有序列表</li>
        <li>ordered list</li>
        <li>以 清单项目(list item) 为子元素</li>
    </ol>

在这里插入图片描述
其中也可以通过“type = “” ”修改标记类型种类，其中包括五种标记类型：

1 ：标记符号为阿拉伯数字

    <ol>
        有序清单(标记符号：1)
        <li type="1">有序列表</li>
        <li type="1">ordered list</li>
        <li type="1">以 清单项目(list item) 为子元素</li>
    </ol>

在这里插入图片描述

A ：标记符号为大写英文字母

    <ol>
        有序清单(标记符号：A)
        <li type="A">有序列表</li>
        <li type="A">ordered list</li>
        <li type="A">以 清单项目(list item) 为子元素</li>
    </ol>

在这里插入图片描述

a ：标记符号为小写英文字母。

<ol>
    有序清单(标记符号：a)
    <li type="a">有序列表</li>
    <li type="a">ordered list</li>
    <li type="a">以 清单项目(list item) 为子元素</li>
</ol>

在这里插入图片描述

I ：标记符号为大写罗马数字

    <ol>
        有序清单(标记符号：I)
        <li type="I">有序列表</li>
        <li type="I">ordered list</li>
        <li type="I">以 清单项目(list item) 为子元素</li>
    </ol>

在这里插入图片描述

i ：标记符号为小写罗马数字

    <ol>
        有序清单(标记符号：i)
        <li type="i">有序列表</li>
        <li type="i">ordered list</li>
        <li type="i">以 清单项目(list item) 为子元素</li>
    </ol>

在这里插入图片描述

定义清单

HTML <dl> 元素 （或 HTML 描述列表元素）是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键 - 值对列表)。

定义和用法：

<dl> 标签定义了定义列表（definition list）。

<dl>标签用于结合 <dt>（定义列表中的项目）和 <dd>（描述列表中的项目）。

浏览器支持:

在这里插入图片描述
定义清单也被称作定义列表，英文全称是 definitinon list,在定义清单内可以定义术语( definitinon term ),在术语之后紧跟定义描述 ( definitinon description )

<body>
    <h6>定义清单</h6>
        <dl>
            <dt>definitinon list</dt>
            <dd>定义列表</dd>
            <dd>定义描述 ( definitinon description )</dd>
            <dt>定义术语( definitinon term )</dt>
        </dl>
</body>

在这里插入图片描述

三、表格 Table

The HTML table model allows authors to arrange data – text,
preformatted text, images, links, forms, form fields, other tables,
etc. – into rows and columns of cells.

HTML 表格模型允许作者将数据——文本、预格式化文本、图像、链接、表单、表单域、其他表格等——排列到单元格的行和列中。

    <table align="center">
        <caption>
            <b>购物清单</b>
        </caption>
        <tr>
            <th>商品名</th>
            <th>数量</th>
            <th>价格（元）</th>
        </tr>
        <tr>
            <td>牙刷</td>
            <td>2</td>
            <td>10.5</td>
        </tr>
        <tr>
            <td>毛巾</td>
            <td>4</td>
            <td>24</td>
        </tr>
        <tr>
            <td>衣架</td>
            <td>20</td>
            <td>16.8</td>
        </tr>
        <tr>
            <td>牙刷</td>
            <td>2</td>
            <td>10.5</td>
        </tr>
    </table>

在这里插入图片描述
可以通过 rowspan（纵向合并）和 colspan（横向合并）将指定行数或是列数合并。

                <tr>
                    <th rowspan="2">学号</th>
                    <th rowspan="2">姓名</th>
                    <th colspan="3">成绩</th>
                </tr>