003+limou+HTML——（3）HTML列表

limou3434

已于 2023-03-12 10:43:28 修改

阅读量448

点赞数 1

分类专栏： Web三大件（第一版）文章标签： html 前端 javascript

于 2023-03-08 18:06:04 首次发布

本文链接：https://blog.csdn.net/m0_73168361/article/details/129406135

版权

Web三大件（第一版）专栏收录该内容

8 篇文章 0 订阅

订阅专栏

000、前言

列表是网页常见的一种数据排列方式，在HTMl中列表一共有三种：有序列表、无序列表、定义列表（另外“目录列表dir”和“菜单列表menu”已经在HTML5中被废除了，现在都是使用无序列表ul来替代）

001、有序列表：ol、li

（1）一般使用

有序列表有先后之分
用ol、li标签配合使用就可以显示有序列表，而且ol标签内部子标签也只能是li，另外也不要直接把文本放在ol里面
ol即ordered list（有序列表），li即list（列表项）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>网页标题</title>
    </head>

    <body>
        <h1>文本标题1</h1>
        <ol>
            <li>列表01</li>
            <li>列表02</li>
            <li>列表03</li>
        </ol>
       
        <h1>文本标题2</h1>
        <h1>文本标题3</h1>
    </body>
</html>

在这里插入图片描述

（2）利用type属性

利用type属性可以改变列表项符号

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>网页标题</title>
    </head>

    <body>
        <h1>文本标题1</h1>
        <ol type="A">
            <li>列表01</li>
            <li>列表02</li>
            <li>列表03</li>
        </ol>
       
        <h1>文本标题2</h1>
       
        <h1>文本标题3</h1>
    </body>
</html>

在这里插入图片描述

002、无序列表：ul、li

（1）一般使用

无序列表无先后之分
用ul、li标签配合使用就可以显示无序列表，而且ul标签内部子标签也只能是li，另外也不要直接把文本放在ul里面
ul即unordered list（有序列表），li即list（列表项）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>网页标题</title>
    </head>

    <body>
        <h1>文本标题1</h1>
        <ol type="A">
            <li>列表01</li>
            <li>列表02</li>
            <li>列表03</li>
        </ol>
       
        <h1>文本标题2</h1>
        <ul>
            <li>列表01</li>
            <li>列表02</li>
            <li>列表03</li>
        </ul>

        <h1>文本标题3</h1>
    </body>
</html>

在这里插入图片描述

（2）利用type属性

利用type属性可以改变列表项符号

（3）深入了解无序列表

实际上的开发工作中无序列表是用的最多的，只要涉及到数据表示，无序列表就几乎无处不在003、定义列表：dl、dt

定义列表是一组带有特殊含义的列表，一个列表项中含有“条件”和“列表”两部分
dl，即definition（定义列表）
dt，即definition term（定义名词）
dd，即definition description（定义描述）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>网页标题</title>
    </head>

    <body>
        <h1>文本标题1</h1>
        <ol type="A">
            <li>列表01</li>
            <li>列表02</li>
            <li>列表03</li>
        </ol>
       
        <h1>文本标题2</h1>
        <ul>
            <li>列表01</li>
            <li>列表02</li>
            <li>列表03</li>
        </ul>

        <h1>文本标题3</h1>
        <dl>
            <dt>HTML</dt>
            <dd>制作网页的标准语言，控制网页的结构</dd>
            <dt>CSS</dt>
            <dd>层叠样式表，控制网页的样式</dd>
            <dt>Javascript</dt>
            <dd>脚本语言，控制网页的行为</dd>
        </dl>
    </body>
</html>

在这里插入图片描述

004、HTNL语义化

（1）误区

学习HTML的时候，认为一些标签可以被其他的标签轻易实现而认为这个标签没有用。这是一个很大的误区。HTML不同的标签从显示的角度来看确实可以达到互换的效果，比如使用下面的标签代码代替有序列表：

<div>1、HTML</div>
<div>2、CSS</div>
<div>3、Javascript</div>

（2）语义

但是这违背了HTML的初衷，在HTML中，标签都有自己的语义，一般都是优先使用有语义的标签。比如h1标签，表示的是header1，标记的是一个最高级标题，而div和span是无语义的标签。（span标签是一个行内标签，也叫内嵌标签）

（3）调试

①HTML的标签具有语义的标签，可以方便调试，快速找到有错误的代码，具有可读性
②另外语义还对搜索引擎优化（SEO）有极其重要的作用

limou3434

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
003+limou+HTML——（3）HTML列表

列表是网页常见的一种数据排列方式，在HTMl中列表一共有三种：有序列表、无序列表、定义列表
复制链接

扫一扫

专栏目录