Html5---无序列表，有序列表，自定义列表

主打的就是一个全栈

已于 2023-05-13 00:08:21 修改

阅读量497

点赞数 1

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

于 2023-04-10 16:42:56 首次发布

本文链接：https://blog.youkuaiyun.com/C221127/article/details/130063497

版权

前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍了HTML5中三种类型的列表：无序列表、有序列表和自定义列表。无序列表以项目符号显示，有序列表则以数字或字母顺序排列，自定义列表可以自定义项和描述。通过实例展示了如何使用HTML标签进行列表的创建和样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

无序列表+有序列表+自定义列表

网页当中的列表

1.无序列表

<ul>

//ul标签声明是无序列表，li声明是列表项
<li>列表项!<li/>

</ul>

练习：

Style 代表风格

使用冒号：

案例实现

(我的电脑盘)

<html>

     <head>

          <meta charset="utf-8">

          <title>HBuilder X练习</title>

     </head>

     <body>

     <h3>我的电脑文件列表</h3>

     <ul>

          <li>我的电脑

          <ul>

               <li>本地磁盘C

               <ul>

                    <li>我的文档</li>

                    <li>我的收藏</li>

               </ul>

               </li>

               <li>本地磁盘D

               <ul>

                    <li>我的游戏</li>

                    <li>我的资料</li>

                    <li>我的电脑</li>

            </ul>

               </li>

          </ul>

          </li>

     </ul>

     </body>

</html>

2.有序列表

<ol>

//Ol标签声明是有序列表
<li>列表项<li/>

</ol>

Type代表属性

< >< >

案例实现

<!DOCTYPE html>

<html>

     <head>

          <meta charset="utf-8">

          <title>HBuilder X练习</title>

     </head>

     <body>

     <h2>HBuilder在线考试试题</h2>

     <ol>

          <li>HTML中，换行使用的标签是（ ）。</li>

          <ol type="A">

          <li>&lt;br/&gt;</li>

          <li>&lt;p&gt;</li>

          <li>&lt;hr&gt;</li>

          <li>&lt;img&gt;</li>

          </ol>

          <li>img标签的（ ）属性用于指定图像的地址。</li>

          <ol type="A">

               <li>alt</li>

               <li>href</li>

               <li>src</li>

               <li>addr</li>

          </ol>

          <li>创建一个超级链接使用的是（ )标签。</li>

          <ol type="A">

               <li>&lt;a&gt;</li>

               <li>&lt;ol&gt;</li>

               <li>&lt;img&gt;</li>

               <li>&lt;hr&gt;</li>

          </ol>

          <li>img标签的（ ）属性用来设置图片与旁边内容的水平距离。</li>

          <ol type="A">

               <li>hspace</li>

               <li>vspace</li>

               <li>border</li>

               <li>alt</li>

          </ol>

          <li>下面HTML结构中，不属于列表结构的是( )。</li>

          <ol type="A">

               <li>ul-li</li>

               <li>ol-li</li>

               <li>dlt-dlt-dd</li>

               <li>p-br</li>

          </ol>

     </ol>

    

     </body>

</html>

3.自定义列表

<dl>

<dt> </dt>项目标题

<dd> </dd>相当于li

</dl>