资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/HTML之列表

HTML之列表

TerryCai / 2748人阅读

摘要：列表有三种类型有序列表列表项使用数字来标记无序列表列表项使用粗体圆点典型的小黑圆圈进行标记。自定义列表自定义列表以标签开始。

列表有三种类型：

有序列表：列表项使用数字来标记

无序列表：列表项使用粗体圆点（典型的小黑圆圈）进行标记。

自定义列表：自定义列表以

标签开始。每个自定义列表项以
开始。每个自定义列表项的定义以
开始。

一、有序列表格式：

</>复制代码 
  1. <ol>
  2.       <li>第一个列表项li>
  3.       <li>第二个列表项li>
  4.       <li>第三个列表项li>
  5. ol>

运行结果：

  1. 第一个列表项
  2. 第二个列表项
  3. 第三个列表项

不同类型的有序列表：

1.编号列表：

</>复制代码 
  1. <ol>
  2.    <li>第一列表项li>
  3.    <li>第二列表项li>
  4.    <li>第三列表项li>
  5.    <li>第四列表项li>
  6. ol>
  7. <ol start="50">
  8.    <li>第五十列表项li>
  9.    <li>第五十一列表项li>
  10.    <li>第五十二列表项li>
  11.    <li>第五十三列表项li>
  12. ol>

运行结果：

  1. 第一列表项
  2. 第二列表项
  3. 第三列表项
  4. 第四列表项
  1. 第五十列表项
  2. 第五十一列表项
  3. 第五十二列表项
  4. 第五十三列表项

2.字母列表：

</>复制代码 
  1. <ol type="A">
  2.    <li>第A列表项li>
  3.    <li>第B列表项li>
  4.    <li>第C列表项li>
  5.    <li>第D列表项li>
  6. ol>
  7.  <ol type="a">
  8.     <li>第a列表项li>
  9.     <li>第b列表项li>
  10.     <li>第c列表项li>
  11.     <li>第d列表项li>
  12.  ol>

运行结果：

  1. 第A列表项
  2. 第B列表项
  3. 第C列表项
  4. 第D列表项
  1. 第a列表项
  2. 第b列表项
  3. 第c列表项
  4. 第d列表项

3.罗马数字列表：

</>复制代码 
  1. <ol type="I">
  2.  <li>Applesli>
  3.  <li>Bananasli>
  4.  <li>Lemonsli>
  5.  <li>Orangesli>
  6. ol>  
  7.  <ol type="i">
  8.   <li>Applesli>
  9.   <li>Bananasli>
  10.   <li>Lemonsli>
  11.   <li>Orangesli>
  12.  ol>

运行结果：

  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges
  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges

二、无序列表格式：

</>复制代码 
  1. <ul>
  2.   <li>无序列表项1li>
  3.   <li>无序列表项2li>
  4.   <li>无序列表项3li>
  5.   <li>无序列表项4li>
  6. ul>

运行结果：

  • 无序列表项1
  • 无序列表项2
  • 无序列表项3
  • 无序列表项4

不同类型的无序列表：

1.圆点列表：

</>复制代码 
  1. <ul style="list-style-type:disc">
  2.   <li>无序列表项1li>
  3.   <li>无序列表项2li>
  4.   <li>无序列表项3li>
  5.   <li>无序列表项4li>
  6. ul>

运行结果：

  • 无序列表项1
  • 无序列表项2
  • 无序列表项3
  • 无序列表项4

2.圆圈列表：

</>复制代码 
  1. <ul style="list-style-type:circle">
  2.   <li>无序列表项1li>
  3.   <li>无序列表项2li>
  4.   <li>无序列表项3li>
  5.   <li>无序列表项4li>
  6. ul>

运行结果：圆点变成圆圈

</>复制代码 
  1.   ◦无序列表项1
  2.   ◦无序列表项2
  3.   ◦无序列表项3
  4.   ◦无序列表项4

 

3.正方形列表：

</>复制代码 
  1. <ul style="list-style-type:square">
  2.   <li>无序列表项1li>
  3.   <li>无序列表项2li>
  4.   <li>无序列表项3li>
  5.   <li>无序列表项4li>
  6. ul>

运行结果：圆点变成方形

</>复制代码 
  1.   ◾无序列表项1
  2.   ◾无序列表项2
  3.   ◾无序列表项3
  4.   ◾无序列表项4

 

三、自定义列表：

</>复制代码 
  1. <dl>
  2.   <dt>Coffeedt>
  3.   <dd>- black hot drinkdd>
  4.   <dt>Milkdt>
  5.   <dd>- white cold drinkdd>
  6. dl>

运行结果：

</>复制代码 
  1. Coffee
  2. - black hot drink
  3. Milk
  4. - white cold drink

四、嵌套列表：

</>复制代码 
  1. <ul>
  2.   <li>Coffeeli>
  3.   <li>Tea
  4.     <ul>
  5.       <li>Black teali>
  6.       <li>Green tea
  7.         <ul>
  8.           <li>Chinali>
  9.           <li>Africali>
  10.         ul>
  11.       li>
  12.     ul>
  13.   li>
  14.   <li>Milkli>
  15. ul>

运行结果：

</>复制代码 
  1. •Coffee
  2. •Tea
  3.     
  4.       ◦Black tea
  5.       ◦Green tea
  6.         
  7.           ◾China
  8.           ◾Africa
  9. •Milk

 

GPU云服务器 云服务器 html 凹形之体 html5新特性之webrtc html列表 html 列表滚动

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1599.html

相关文章

  • HTML+CSS复习之HTML基础篇

    摘要：规定元素的上下文菜单。上下文菜单在用户点击元素时显示。规定元素仍未或不再相关。规定是否对元素进行拼写和语法检查。规定元素的行内样式。 一些说明 写在前面：HTML和CSS，当你了解所有规则后，你应该多写页面并记录你出现的问题，这才是学习HTML和CSS的最佳方法 这是我学习一段时间之后，再次回顾HTML，希望大家也对HTML有不一样的认识 我把HTML标签分成两大类，重要的和不重要的，...

    genefy 评论0 收藏0

  • HTML+CSS复习之HTML基础篇

    摘要：规定元素的上下文菜单。上下文菜单在用户点击元素时显示。规定元素仍未或不再相关。规定是否对元素进行拼写和语法检查。规定元素的行内样式。 一些说明 写在前面：HTML和CSS，当你了解所有规则后，你应该多写页面并记录你出现的问题，这才是学习HTML和CSS的最佳方法 这是我学习一段时间之后，再次回顾HTML，希望大家也对HTML有不一样的认识 我把HTML标签分成两大类，重要的和不重要的，...

    MrZONT 评论0 收藏0

  • HTML之表单

    摘要：表单元素是允许用户在表单中输入内容比如文本域下拉列表单选框复选框等等。文本域文本域通过标签来设定，当用户要在表单中键入字母数字等内容时，就会用到文本域。表单： 表单是一个包含表单元素的区域。 表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。 表单使用表单标签 来设置: . inpu...

    bang590 评论0 收藏0

  • CSS学习笔记(十) 界面组件之表单

    摘要：概述表单与其他页面元素的作用不同。属性用于指定服务器上用来处理表单数据的文件的。所谓控件，是对表单中用来收集数据的各种表单组件的通称，包括文本框复选框单选按钮等输入类型。 1.概述 表单与其他页面元素的作用不同。其他元素是把服务器发过来的内容显示给用户，而表单则是 把用户的信息发送给服务器。 form 元素有两个必要的属性：action 和 method。action 属性用于指定...

    andot 评论0 收藏0

发表评论

登陆后可评论

0条评论

TerryCai

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<