HTML教程
HTML5教程
HTML参考手册

如何在HTML中展示列表?

在HTML中,我们可以创建三种类型的列表:
无序列表 有序列表 描述列表

无序列表

无序列表是顺序或顺序无关紧要的项的集合或集合。如果我们要在 HTML 文档中创建无序列表以显示网页上的项目,则遵循下面给出的步骤。使用这些步骤,我们可以轻松创建 无序列表
第1步:新建一个HTML文件,输入简单的html代码。
<!Doctype Html>
<Html>
<Head>
<Title>
创建无序列表
</Title>
</Head>
<Body>
下面列表是一个无序列表:
</Body>
</Html>
第2步: <body>标签 ,中创建无序列表。
<Body>
<ul>
</Body>
第3步:我们使用 <ul>标签来显示列表,键入开头的<li>标签然后,在键入每个项目之后,我们还需要关闭<li>标签。
<Body>
<ul>
<li> 第一个无序项 </li>
<li> 第二个无序项 </li>
</Body>
第4步::创建所有列表项后,通过结束标签来关闭列表。
<Body>
<ul>
<li> 第一个无序项1 </li>
<li> 第一个无序项2 </li>
<li> 第一个无序项3 </li>
<li> 第一个无序项4 </li>
<li> 第一个无序项5 </li>
<li> 第一个无序项6 </li>
</ul>
</Body>
第5步:保存HTML文件在浏览器中运行该文件。
<!Doctype Html>
<Html>
<Head>
<Title>
Create Unordered list
</Title>
</Head>
<Body>
The list which is shown below is an unordered list:
<ul>
<li> First Unordered item </li>
<li> Second Unordered item </li>
<li> Third Unordered item </li>
<li> Fourth Unordered item </li>
<li> Fifth Unordered item </li>
<li> Sixth Unordered item </li>
</ul>
</Body>
</Html>
上述Html代码的输出显示在以下屏幕快照中:
如何在HTML中创建列表

有序列表

如果我们要在HTML文件中创建 有序列表,那么按照下面步骤我们可以轻松地创建一个有序列表。
第1步:我们在文本编辑器中键入Html代码,我们要在其中创建有序列表的文本编辑器。
<!Doctype Html>
<Html>
<Head>
<Title>
Create ordered list
</Title>
</Head>
<Body>
The list which is shown below is an ordered list:
</Body>
</Html>
第2步:在<body>中输入<ol>标签,该标签用于按顺序显示项目。
<Body>
<ol>
</Body>
第3步:使用<li>标签显示列表,键入每个列表项<li>开始标签,在每个项后关闭<li>标签。
<Body>
<ol>
<li> apple </li>
<li> Mango </li>
</Body>
第4步:键入所有列表项,通过结束标签来关闭列表。
<Body>
<ol>
<li> apple </li>
<li> Mango </li>
<li> Pineapple </li>
<li> Orange </li>
<li> Banana </li>
</ol>
</Body>
第5步:最后,我们保存HTML文件,然后在浏览器中运行该文件。
<!Doctype Html>
<Html>
<Head>
<Title>
Create ordered list
</Title>
</Head>
<Body>
The list which is shown below is an ordered list:
<ol>
<li> apple </li>
<li> Mango </li>
<li> Pineapple </li>
<li> Orange </li>
<li> Banana </li>
</ol>
</Body>
</Html>
上述HTML代码的输出显示在以下屏幕截图中:
如何在HTML中创建列表

描述列表

描述列表是具有其描述和定义的项目列表。
如果我们要在HTML文档中创建"描述"列表,以在网页上显示这些项目及其描述那么我们遵循以下步骤。使用这些步骤,我们可以轻松地创建描述列表。
第1步:在文本编辑器中键入Html代码。
<!Doctype Html>
<Html>
<Head>
<Title>
创建一个描述列表
</Title>
</Head>
<Body>
下面演示如何创建描述列表:
</Body>
</Html>
第2步:在<body>中输入<dl>标签,该标签用于按顺序显示项目。
<Body>
<dl>
</Body>
第3步:使用<dt>标签,写完所有列表项之后,我们关闭<dt>标签。
<Body>
下面演示如何创建描述列表:
<dl>
<dt> <b>
HTML
</b> </dt>
</Body>
第4步:使用<dd>标签定义每个列表的描述。
<Body>
The list which is shown below is an description list:
<dl>
<dt> HTML </dt>
<dd>
超文本标签语言 </dd>
<dt> CSS </dt>
<dd> Cascading Stle sheet </dd>
<dt> UL </dt>
<dd> Unordered List </dd>
</Body>
第5步:关闭<dt>标签。
<Body>
The list which is shown below is an description list:
<dl>
<dt> HTML </dt>
<dd>
Hyper Text Markup Language </dd>
<dt> CSS </dt>
<dd> Cascading Stle sheet </dd>
<dt> UL </dt>
<dd> Unordered List </dd>
</dl>
</Body>
第6步:保存HTML文件在浏览器中运行该文件。
<!Doctype Html>
<Html>
<Head>
<Title>
Create Description list
</Title>
</Head>
<Body>
The list which is shown below is an description list:
<dl>
<dt> <b>
HTML
</b> </dt>
<dd>
Hyper Text Markup Language
</dd>
<dt> <b>
CSS
</b>
</dt>
<dd>
Cascading Stle sheet
</dd>
<dt> <b>
UL
 </b> </dt>
<dd>
Unordered List
</dd>
<dt> <b>
OL
</b>
</dt>
<dd>
Ordered List
</dd>
</dl>
</Body>
</Html>
上述HTML代码的输出显示在以下屏幕截图中:
如何在HTML中创建列表
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4