List tags supported by html: unordered list, ordered list and definition list (introduction)-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

List tags supported by html: unordered list, ordered list and definition list (introduction)

青灯夜游

Sep 20, 2018 pm 05:32 PM

html

In a sense, anything that is not descriptive text can be considered a list. For example: the census, the solar system, the family tree, the tour menu, or even all your friends can be represented as a list or a list within a list. So what are the html list styles? This chapter brings you the list tags supported by html: unordered list, ordered list and custom list (introduction). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. html unordered list

The unordered list is a list of items in no order. Use ●□◇ in front of each column. ◆ and other symbols are used to indicate distinction.

htmlUnordered list starts with

; the type attribute of the unordered list has three optional values. These three options are: disc solid garden, circle hollow garden, and square small square. The default attribute is disc solid garden.
Basic syntax:
```
<ul>
    <li type="value"> 项目1</li>
    <li type="value"> 项目2</li>
    <li type="value"> 项目3</li>
</ul>
```
Copy after login
The value is the bullet type (type type). The type type of the unordered list is:
html unordered list code example:
```
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>html---无序列表</title>
	</head>
	<body>
		<ul>
			<li>默认的无序列表</li>
			<li>默认的无序列表</li>
			<li>默认的无序列表</li>
		</ul>
		<ul>
			<li type="circle">添加circle属性</li>
			<li type="circle">添加circle属性</li>
			<li type="circle">添加circle属性</li>
		</ul>
		<ul>
			<li type="square">添加square属性</li>
			<li type="square">添加square属性</li>
			<li type="square">添加square属性</li>
		</ul>
	</body>
</html>
```
Copy after login
Rendering:
You can also use the css list-style-type attribute to define The html unordered list style of the picture above.
2. html ordered list
An ordered list is a list of items arranged in alphabetical or numerical order. Pay attention to ordered lists. The result is a sequential number. If a list item is inserted or deleted, the number will be automatically adjusted.
htmlOrdered list starts with
1. tag.
  Basic syntax:
```
<ol type="value1" start="value2">
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
</ol>
```
  Copy after login
  value1 represents the type of bullet in the ordered list (type type), value2 represents the value at the beginning of the item. start is the number at the beginning of the number, such as start=2, then the number Starting from 2, if starting from 1, you can omit it, or set value="n" in the
2. tag to change the specific number of the list line item, such as
3. . type=The type of numbers, letters, etc. used for numbering. For example, type=a, then English letters are used for numbering. To use these attributes, place them in the initial tag of
  1. .
    Ordered list type types are:
    html ordered list code example:
```
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>html---有序列表</title>
	</head>
	<body>
		<ol>
        <li>默认的有序列表</li>
        <li>默认的有序列表</li>
        <li>默认的有序列表</li>
    </ol>
    <ol  type="a" start="2">
        <li>第1项</li>
        <li>第2项</li>
        <li>第3项</li>
        <li value="20">第4项</li>
    </ol>
    <ol  type="I" start="2">
        <li>第1项</li>
        <li>第2项</li>
        <li>第3项</li>
    </ol>
	</body>
</html>
```
    Copy after login
    Rendering:
    You can also use the css list-style-type attribute to define the html ordered list style in the above picture.
    3. html custom list
    The custom list is not just a list of items, but a combination of items and their comments.
    htmlCustom lists start with a
    tag. Each custom list item begins with
    . The definition of each custom list item begins with
    . Used to explain and describe terms or nouns. There are no bullets in front of the list items of the custom list.
    Basic syntax:
    <dl> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2</dd> <dt>名词2</dt> <dd>名词2解释1</dd> <dd>名词2解释2</dd> </dl>
    Copy after login
    html Custom list code example:
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>html---有序列表</title> </head> <body> <dl> <dt>计算机</dt> <dd>用来计算的仪器 ... ...</dd> <dt>显示器</dt> <dd>以视觉方式显示信息的装置 ... ...</dd> </dl> </body> </html>
    Copy after login
    Rendering:
    
    4. A brief introduction to the css list-style-type attribute
    
    The list-style-type attribute sets the type of list item tag.
    
    Possible values are:

The above is the detailed content of List tags supported by html: unordered list, ordered list and definition list (introduction). For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn