[从零开始学前端]html常用标签2

最新推荐文章于 2024-08-17 14:58:02 发布

还不能起飞~

最新推荐文章于 2024-08-17 14:58:02 发布

阅读量134

点赞数

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

本文链接：https://blog.csdn.net/time_limited/article/details/106444200

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这次继续来介绍html的一些有点小复杂的常用标签

html常用标签

- - - table标签
    - list标签

table标签

<table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
直接上案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table</title>
</head>

<body>
    <h4>表格作用</h4>
    <p>表格是用来显示，表示数据的，现在已经不用表格来布局</p>
    <table border="1" cellspacing="">
        <thead>
            <tr>
                <th>属性名</th>
                <!--th: table head 表头-->
                <th>属性值</th>
                <th>描述</th>
            </tr>
            <!--tr是一行-->

        </thead>
        <tbody>

            <tr>
                <td>align</td>
                <!--td:table data 定义一个单元格 -->
                <td>left,right,center</td>
                <td>整个表格在父标签中的对齐方式，不是表格内容的对齐方式</td>
            </tr>
            <tr>
                <td>border</td>
                <td>number</td>
                <td>表格的边框</td>
            </tr>
            <tr>
                <td>cellpadding</td>
                <td>number</td>
                <td>单元格内部内容与边框的距离</td>
            </tr>
            <tr>
                <td>cellspacing</td>
                <td>number</td>
                <td>单元格之间的距离</td>
            </tr>
            <tr>
                <td>width/height</td>
                <td>number or %</td>
                <td>设置表格长宽</td>
            </tr>

        </tbody>
        <!--thead与tbody无实际意义thead中必须有th-->
    </table>
    <br />
    <br />
    <table border="1" cellspacing="" width="400">
        <!--合并单元格-->
        <thead>
            <tr>
                <th>1</th>
                <th>2</th>
                <th>3</th>
                <th>4</th>
                <th>5</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td colspan="2">1</td>
            </tr>
            <tr>
                <td rowspan="2">2</td>
                <td>2</td>
                <td>2</td>
                <td>2</td>
                <td>2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>3</td>
                <td>3</td>
                <td>3</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

效果如下：
在这里插入图片描述
细节都在代码和图中了，因为table用的不多就不再详细说明了。

list标签

list标签有三种

ol：有序列表
ul：无序列表
dl：自定义列表

具体使用方法直接见代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h4>which kind of food do you like?</h4>
    <ul>
        <!--无序列表-->
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
    </ul>
    <!--无序列表的各个列表项之间没有顺序关系只有并列关系-->
    <!--ul中只能嵌套li-->
    <!--li标签是一个容器可以容纳几乎所有元素-->
    <h4>葫芦娃兄弟</h4>
    <ol>
        <!--有序列表-->
        <li>红娃</li>
        <li>橙娃</li>
        <li>黄娃</li>
        <li>绿娃</li>
        <li>青娃</li>
        <li>蓝娃</li>
        <li>紫娃</li>
    </ol>
    <!--ol中只能嵌套li-->
    <dl>
        <!--自定义列表-->
        <dt>关注我们</dt>
        <dd>官方微信</dd>
        <dd>官方微博</dd>
        <dd>官方网站</dd>
    </dl>
    <!--dl中只能出现dt，dd 个数都没有限制-->
</body>
</html>