HTML学习（二）_创建一个有关“兔子不喜欢三个动物”的有序列表-CSDN博客

本文链接：https://blog.csdn.net/m0_49049653/article/details/117450001

一、列表元素

分类：
1、有序列表
2、无序列表
3、自定义列表

有序列表
（1）使用数字进行标记
（2）列表开始标签为ol
（3）列表项标签li

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>列表元素</title>
</head>
<body>
    <h2>兔子种类</h2>
    <ol type="1">
        <li>长毛兔</li>
        <li>短毛兔</li>
        <li>竖耳兔</li>
        <li>垂耳兔</li>
    </ol>
</body>
</html>

实现效果如下图所示：
在这里插入图片描述

ol的type属性可以决定排序的方式是什么。
type的值有：

1，表示用数字排序1、2、3。一般情况下默认
a，用小写字母排序a、b、c
A，用大写字母排序A、B、C
i，用小写罗马数字排序i、ii、iii
I，用大写罗马数字排序I、II、III

无序列表
（1）使用圈点进行标记
（2）列表开始标签为ul
（3）列表项标签li

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>列表元素</title>
</head>
<body>
    <h2>兔子种类</h2>
    <ul type="disc">
        <li>长毛兔</li>
        <li>短毛兔</li>
        <li>竖耳兔</li>
        <li>垂耳兔</li>
    </ul>
</body>
</html>

实现效果如下图所示：
在这里插入图片描述

type的值有：
1.disc，表示用实体圆心排序。一般情况下默认
2.square，用实体方心排序
3.circle，用空心圆排序

自定义列表
（1）列表开始标签为dl
（2）列表项标签dt
（3）列表定义标签dd

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>列表元素</title>
</head>
<body>
    <h2>兔子种类</h2>
    <dl>
        <dt>根据体型分</dt>
        <dd>巨型兔</dd>
        <dd>大型兔</dd>
        <dd>中型兔</dd>
        <dd>小型兔</dd>
        <dt>根据外形分</dt>
        <dd>短毛兔</dd>
        <dd>短毛兔</dd>
        <dd>竖耳兔</dd>
        <dd>垂耳兔</dd>
    </dl>
</body>
</html>

实现效果如下图所示：
在这里插入图片描述

二、表格元素

表格由 table 标签来定义。每个表格均有若干行（由 tr标签定义），每行被分割为若干单元格（由td标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

优先级排序：
td=th>tr>table

常用属性

属性	功能	值
border	表格边框线	0或1
width	设置宽度	像素数或百分比值
height	设置高度	像素数或百分比值
align	设置水平对齐方式	left(默认)、center、right
valign	设置垂直对齐方式	baseline、top、bottom、middle(默认)
bgcolor	设置背景颜色	#rrggbb或英文单词
rowspan	行合并	数字
colspan	列合并	数字

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格元素</title>
</head>
<body>
    <table border="1">
        <tr>
            <th colspan="4">兔子分类</th>
        </tr>
        <tr>
            <td colspan="2">根据体型分</td>
            <td colspan="2">根据外形分</td>
        </tr>
            <td>巨型兔</td>
            <td>大型兔</td>
            <td>中型兔</td>
            <td>小型兔</td>
        </tr>
            <td>短毛兔</td>
            <td>短毛兔</td>
            <td>竖耳兔</td>
            <td>垂耳兔</td>
        </tr>
    </table>
</body>
</html>

实现效果如下图所示：
在这里插入图片描述