HTML列表标签

寒涵含

已于 2024-02-11 03:31:50 修改

阅读量255

点赞数 3

文章标签： html 前端

于 2024-02-11 03:23:46 首次发布

本文链接：https://blog.csdn.net/qq_73625238/article/details/136094005

版权

列表标签

列表整齐，整洁，有序，布局更加简单和方便

分为三种：无序列表，有序列表和自定义列表

一，无序列表（重点）

<ul>表示无序列表，以项目符号呈现表项

<li>表示列表项，内部为一个容器，可以容纳多种元素

无序列表具有自己的样式属性，但是使用过程中使用CSS来设置

<ul>
    <li>表格项1</li>
    <li>表格项2</li>
    <li>表格项3</li>
<ul>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无序列表</title>
</head>
<body>
    <h4>你喜欢的游戏有什么？</h4>
    <ul>
        <li>永劫无间</li> 
        <li>csgo</li> 
        <li>Rust</li> 
        <li>Minecraft</li> 
    </ul>
</body>
</html>

二，有序列表

<ol>表示有序列表，以数字表示

<ol>
    <li>表格项1</li>
    <li>表格项2</li>
    <li>表格项3</li>
<ol>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有序列表</title>
</head>
<body>
    <h4>怎么样好好度过大学？</h4>
    <ol>
        <li>明确方向：考研，保研，就业，考公</li> 
        <li>一心一意准备一个</li>
        <li>（除了保研）可以毕业就行</li> 
    </ol>
</body>
</html>

三，自定义列表（重点）

用于对术语进行解释和描述，无项目符号

<dl> 表示自定义列表

<dt>表示（项目名字）

<dd>表示（项目修饰）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有序列表</title>
</head>
<body>
    <h4>怎么样好好度过大学？</h4>
    <ol>
        <li>明确方向：考研，保研，就业，考公</li> 
        <li>一心一意准备一个</li>
        <li>（除了保研）可以毕业就行</li> 
    </ol>
</body>
</html>