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中,列表基本上是三种类型,如下所示:
-
Ordered Lists
有序列表
-
Unordered Lists
无序列表
-
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
输出量
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
输出量
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
输出量
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
输出量
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
输出量
html无序列表有序列表
上一篇: List练习 - 扑克牌(Java)