HTML之列表

TerryCai 发布于2019-04-23 13:13 / 2380人阅读

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

列表有三种类型：

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

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

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

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

开始。

一、有序列表格式：

<ol>
      <li>第一个列表项li>
      <li>第二个列表项li>
      <li>第三个列表项li>
ol>

运行结果：

第一个列表项
第二个列表项
第三个列表项

不同类型的有序列表：

1.编号列表：

<ol>
   <li>第一列表项li>
   <li>第二列表项li>
   <li>第三列表项li>
   <li>第四列表项li>
ol>
<ol start="50">
   <li>第五十列表项li>
   <li>第五十一列表项li>
   <li>第五十二列表项li>
   <li>第五十三列表项li>
ol>

运行结果：

第一列表项
第二列表项
第三列表项
第四列表项

第五十列表项
第五十一列表项
第五十二列表项
第五十三列表项

2.字母列表：

<ol type="A">
   <li>第A列表项li>
   <li>第B列表项li>
   <li>第C列表项li>
   <li>第D列表项li>
ol>
 <ol type="a">
    <li>第a列表项li>
    <li>第b列表项li>
    <li>第c列表项li>
    <li>第d列表项li>
 ol>

运行结果：

第A列表项
第B列表项
第C列表项
第D列表项

第a列表项
第b列表项
第c列表项
第d列表项

3.罗马数字列表：

<ol type="I">
 <li>Applesli>
 <li>Bananasli>
 <li>Lemonsli>
 <li>Orangesli>
ol>  
 <ol type="i">
  <li>Applesli>
  <li>Bananasli>
  <li>Lemonsli>
  <li>Orangesli>
 ol>

运行结果：

Apples
Bananas
Lemons
Oranges

Apples
Bananas
Lemons
Oranges

二、无序列表格式：

<ul>
  <li>无序列表项1li>
  <li>无序列表项2li>
  <li>无序列表项3li>
  <li>无序列表项4li>
ul>

运行结果：

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

不同类型的无序列表：

1.圆点列表：

<ul style="list-style-type:disc">
  <li>无序列表项1li>
  <li>无序列表项2li>
  <li>无序列表项3li>
  <li>无序列表项4li>
ul>

运行结果：

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

2.圆圈列表：

<ul style="list-style-type:circle">
  <li>无序列表项1li>
  <li>无序列表项2li>
  <li>无序列表项3li>
  <li>无序列表项4li>
ul>

运行结果：圆点变成圆圈

  ◦无序列表项1

  ◦无序列表项2

  ◦无序列表项3

  ◦无序列表项4

3.正方形列表：

<ul style="list-style-type:square">
  <li>无序列表项1li>
  <li>无序列表项2li>
  <li>无序列表项3li>
  <li>无序列表项4li>
ul>

运行结果：圆点变成方形

  ◾无序列表项1

  ◾无序列表项2

  ◾无序列表项3

  ◾无序列表项4

三、自定义列表：

<dl>
  <dt>Coffeedt>
  <dd>- black hot drinkdd>
  <dt>Milkdt>
  <dd>- white cold drinkdd>
dl>

运行结果：

Coffee
- black hot drink
Milk
- white cold drink

四、嵌套列表：

<ul>
  <li>Coffeeli>
  <li>Tea
    <ul>
      <li>Black teali>
      <li>Green tea
        <ul>
          <li>Chinali>
          <li>Africali>
        ul>
      li>
    ul>
  li>
  <li>Milkli>
ul>

运行结果：

•Coffee

•Tea
    
      ◦Black tea

      ◦Green tea
        
          ◾China

          ◾Africa

•Milk

超融合服务器私有云 html 凹形之体 html5新特性之webrtc html列表 html 列表滚动

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

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

Markdown之新手教程

摘要：之新手教程什么是是一种标记语言，不是编程语言。这种感觉只有在上手用过一次以后才能了解奇妙之处。其次是在开源网站的影响，等开源社区使用来进行内容编写及发布。入门教程说到这了，下面给大家安利一个在线的编辑器供大家练手使用。 Markdown之新手教程什么是Markdown? Markdown是一种标记语言，不是编程语言。（相信很多刚开始学习的新手和我一样，最起初的时候把HTML都当是一...

justjavac 2019-08-05 12:47 评论0 收藏0
HTML+CSS复习之HTML基础篇

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

genefy 2019-08-29 12:35 评论0 收藏0
HTML+CSS复习之HTML基础篇

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

MrZONT 2019-08-01 16:51 评论0 收藏0
HTML之表单

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

bang590 2019-04-23 13:12 评论0 收藏0
CSS学习笔记(十) 界面组件之表单

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

andot 2019-08-28 18:05 评论0 收藏0