html无序列表有序列表_HTML列表

html无序列表有序列表

HTML provides the convenience to create lists on the webpage. The list could be numbered lists or simply bulletins.

HTML提供了在网页上创建列表的便利。 该列表可以是编号列表,也可以只是公告。

In HTML lists are basically if three types, which are as follows:

HTML中,列表基本上是三种类型,如下所示:

  1. Ordered Lists

    有序列表

  2. Unordered Lists

    无序列表

  3. Description Lists

    说明清单

In this article, we will cover all three lists as follows,

在本文中,我们将涵盖以下所有三个列表,

1)有序列表(<ol>) (1) Ordered lists (<ol>))

The ordered list, as the name specifies an order, the list items here will be arranged in a sequence of numbers, alphabetically or in roman.

有序列表 ,如名称中指定的顺序,此处的列表项将按字母或罗马数字顺序排列。

Example of ordered listing:

有序列表的示例:

<html>

<body>
    <p>Example of ordered listing</p>
    <ol>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
        <li>List item 5</li>
    </ol>
</body>

</html>

Output

输出量

list example 1

type attribute with <ol> list tag

使用<ol>列表标记的type属性

For creating alphabetical or other orders the type attribute is used.

为了创建字母顺序或其他顺序,使用type属性。

The value provides to the type attribute becomes the order of the first element.

提供给type属性的值成为第一个元素的顺序。

For example type="A" gives an alphabetical list where the first element order is "A" and "B" and so on. And, for lower case letters we specify type="a" and for Romans type="i". For capital Romans : "I".

例如, type =“ A”给出了一个字母顺序列表,其中第一个元素顺序为“ A”“ B” ,依此类推。 并且,对于小写字母,我们指定type =“ a” ,对于罗马人,我们指定type =“ i” 。 对于大写罗马书: “ I” 。

Example of ordered listing with type attribute:

具有类型属性的有序列表示例:

<html>

<body>
    <p>Example of ordered listing with type attribute</p>

    <p>Ordered list with uppercase alphabets...</p>
    <ol type="A">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
        <li>List item 5</li>
    </ol>

    <p>Ordered list with lowercase alphabets...</p>
    <ol type="a">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
        <li>List item 5</li>
    </ol>

    <p>Ordered list with uppercase roman...</p>
    <ol type="I">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
        <li>List item 5</li>
    </ol>

    <p>Ordered list with lowercase roman...</p>
    <ol type="i">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
        <li>List item 5</li>
    </ol>

</body>

</html>

Output

输出量

list example 2

2)无序列表(<ul>) (2) Unordered Lists (<ul>))

In an unordered list, the list is represented in the form of a bulleted list, their lists are in any order of numbers or alphabets.

在无序列表中,列表以项目符号列表的形式表示,其列表以数字或字母的任何顺序排列。

Example of unordered listing:

无序列表示例:

<html>

<body>
    <p>Example of unordered listing</p>
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
        <li>List item 5</li>
    </ul>
</body>

</html>

Output

输出量

list example 3

type attribute with <ul> list tag

使用<ul>列表标记的type属性

In an unordered list, the bulletin could be changed to squares, circles, and man more. For this, we use the CSS style attribute with the list-style-type property and here we specify the symbol required.

在无序列表中,公告可以更改为正方形,圆形和更多。 为此,我们将CSS样式属性与list-style-type属性一起使用,并在此处指定所需的符号。

The other symbols that could be given as:

可以给出的其他符号为:

  • Disc: It gives the disc type bulletin to the list elements

    光盘 :将光盘类型公告提供给列表元素

  • Circle: It gives a circle bulletin

    圈子 :给出圈子公告

  • Square: It gives square bulletin

    正方形 :给出正方形公告

  • None: It gives a list with no symbol

    :它给出没有符号的列表

Example of unordered listing with type attribute:

类型属性为无序清单的示例:

<html>

<body>
    <p>Example of unordered listing with type attribute</p>

	<p>Unordered list with type='disc'...</p>
    <ul type="disc">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
        <li>List item 5</li>
    </ul>

	<p>Unordered list with type='circle'...</p>
    <ul type="circle">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
        <li>List item 5</li>
    </ul>
	
	<p>Unordered list with type='square'...</p>
    <ul type="square">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
        <li>List item 5</li>
    </ul>

	<p>Unordered list with type='none'...</p>
    <ul type="none">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
        <li>List item 5</li>
    </ul>
	
</body>

</html>

Output

输出量

list example 4

3)说明清单 (3) Description Lists)

In a description lists, there are terms listed and these terms have descriptions.

在描述列表中,列出了术语,这些术语具有描述。

The description lists are created by the <dl>, <dt> and <dd> tags.

描述列表由<dl> , <dt>和<dd>标签创建。

The <dl> tag defines the list, the <dt> tag specifies the term of the list or the name of the list element and the <dd> tag specifies the description of each term.

<dl>标记定义列表, <dt>标记指定列表的术语或列表元素的名称,而<dd>标记指定每个术语的描述。

Example:

例:

<html>

<body>
    <p>Example of description lists</p>

      <dl>
         <dt>Programming</dt>
         <dd>C, C++, Java, etc.</dd>
         <dt>Courses</dt>
         <dd>MCA, B.Tech, BCA, etc</dd>
      </dl>
	
</body>

</html>

Output

输出量

list example 5

翻译自: https://www.includehelp.com/html/html-lists.aspx

html无序列表有序列表

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值