Web design: HTML list tags

Unordered list
Ordered list
Custom list

1. Unordered list

The labels for unordered lists are:

<ul>无序列表</ul>

Define an unordered list:

<li>Define a list item;

<ul>There is also a type attribute in the tag, which specifies the symbol of the unordered list;

The values of type are as follows:

disc: solid dot, default value
circle: hollow circle
square: solid square

Example:

 <ul type="circle">
    <li>湖南</li>
    <li>江苏</li>
    <li>河南</li>
    <li>郑州</li>
</ul>

2. Ordered list

The label of the ordered list is

<ol>有序列表</ol>

The abbreviation of ordered list, an ordered list is actually a list with a sequence number,

The value of the type attribute is:

1. The serial number is 1.2.3.4...
A. The serial number is ABCD……
a. The serial number is abcd......
The serial number of I is I.II.III.IV...
The serial number of i is i.ii.iii.iv.......

Example:

<ol type="A"start="1">
    <li>湖南</li>
    <li>嘉兴</li>
    <li>河南</li>
    <li>广东</li>
</ol>

Effect picture:

Hunan
Jiaxing
Henan
Guangdong

3. Custom list

The structure of the custom label is:

<dl>自定义标签</dl>

Define a custom list

<dt>The title of the list item
<dd>Description of the list item

Example:

<body>
<dl>
    <h3>唐诗三百首</h3>
    <dt>静夜思</dt>
    <dd>床前明月光，疑是地上霜。举头望明月，低头思故乡。</dd>
    <dt>绝句</dt>
    <dd>迟日江山丽，春风花草香。泥融飞燕子，沙暖睡鸳鸯。</dd>
</dl>
</body>

Example:

<html>
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
	爱好
	<ol type="A" start="3">
		<li>玩手机
		<li>看电视
		<li>听音乐
	</ol>
	<!-- ol定制有序列表，type属性设置有序列表前每一项前的系数，包含（a，A，i，I，1） -->
	<!-- start属性设置系数从那一项开始 -->
	<!-- li定制有序列表中单独的一项 -->
	<hr>
	爱好
	<ul type="square">
		<li>玩手机
		<li>看电视
		<li>听音乐
	</ul>
	<!-- ul定制无序列表，type定制每一项前的系数类型，包含（disc，square，circle） -->
	<hr>
	<dl>
		<dt>爱好
		<dd>玩手机
		<dd>看电视
		<dd>听音乐
	</dl>
	<!-- dl定制列表，dt定制列表标题，dd定制列表项目 -->
	<hr>
</body>
</html>