vscode——HTML的列表

最新推荐文章于 2024-04-18 12:07:41 发布

iheyu

最新推荐文章于 2024-04-18 12:07:41 发布

阅读量733

点赞数 2

分类专栏： html 文章标签：无序列表ul+li 有序列表ol+li 自定义列表 dl+dt+dd dt标题+dd内容

本文链接：https://blog.csdn.net/iheyu/article/details/99738579

版权

html 专栏收录该内容

54 篇文章 2 订阅

订阅专栏

1.列表分为三类：

1.无序列表——>是有内容组成的——>用的标签是 "ul+li" 组合——>列表中的成员无顺序关系

2.有序列表——>是有内容组成的——>用的标签是 "ol+li" 组合——>列表中的成员有顺序关系

3.自定义列表——>是有内容标题+内容组成的——>用的标签是 "dl+dt（标题）+dd（内容）" 组合——>没有顺序关系的

2..无序列表
1.快捷写法——> li{无序列表$}*6 + 回车
<!DOCTYPE html>
<html lang="en">
<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>
    <ul>
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
        <li>无序列表4</li>
        <li>无序列表5</li>
        <li>无序列表6</li>
    
    </ul>
</body>
</html>

2.把实心的黑点变成——>空心的点——>ul的type属性——>  <ul type="circle">
<!DOCTYPE html>
<html lang="en">
<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>
    <ul type="circle"> 
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
        <li>无序列表4</li>
        <li>无序列表5</li>
        <li>无序列表6</li>
    
    </ul>
</body>
</html>
最新的写法：<ul style="list-style-type:circle"> ——>实现效果是一样的——>一般情况下用到的特别少;

3.有序列表
<!DOCTYPE html>
<html lang="en">
<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>
    <ol>
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
        <li>有序列表4</li>
        <li>有序列表5</li>
        <li>有序列表6</li>
    </ol>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<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>
    <ul style="list-style-type:circle"> 
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
        <li>无序列表4</li>
        <li>无序列表5</li>
        <li>无序列表6</li>
    
    </ul>
    <ol>
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
        <li>有序列表4</li>
        <li>有序列表5</li>
        <li>有序列表6</li>
    </ol>

    <dl>
        <dt>标配1</dt>
        <dd>内容1</dd>
        <dd>内容1</dd>
        <dd>内容1</dd>
        <dt>标题2</dt>
        <dd>内容2</dd>
        <dd>内容2</dd>
        <dd>内容2</dd>

    </dl>
</body>
</html>

iheyu

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vscode——HTML的列表

1.列表分为三类：1.无序列表——>是有内容组成的——>用的标签是 "ul+li" 组合——>列表中的成员无顺序关系2.有序列表——>是有内容组成的——>用的标签是 "ol+li" 组合——>列表中的成员有顺序关系3.自定义列表——>是有内容标题+内容组成的——>用的标签是 "dl+dt（标题）+dd（内容）" 组合——>没有顺序关...
复制链接

扫一扫

专栏目录