无序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>评论</title>
</head>
<body>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
</body>
</html>
效果图:
有序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>评论</title>
</head>
<body>
<ol>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>
</body>
</html>
效果图:
有序列表中的type属性可以更改序号如以下
- 数字编号,1.2.3........(默认)
- a 小写字母
- A 大写字母
- i 小写的罗马数字
- I 大写的罗马数字
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<div>
<ol type="a">
<li>我还年轻</li>
<li>我们结婚吧</li>
<li>去年夏天</li>
</ol>
</div>
</body>
</html>
效果图:
有序列表中的styat 表示从第几个序号开始编号,如以下例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<div>
<ol type="a" start="3">
<li>我还年轻</li>
<li>我们结婚吧</li>
<li>去年夏天</li>
</ol>
</div>
</body>
</html>
效果图:
有序列表中改变序号中的某一个序号可以用value,例子如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<div>
<ol>
<li>我还年轻</li>
<li value="5">我们结婚吧</li>
<li>去年夏天</li>
</ol>
</div>
</body>
</html>
效果图:
改变排序的顺序,如倒序,可以用reversed(布尔属性),例子如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<div>
<ol type="A" reversed>
<li>我还年轻</li>
<li>我们结婚吧</li>
<li>去年夏天</li>
</ol>
</div>
</body>
</html>
效果图:
自定义列表dl(术语的解释)-dt(声明)-dd(术语的描述)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<div>
<dl>
<dt>1.怎么申请退货</dt>
<dd>在APP的商品页面购买商品后......</dd>
<dt>2.什么时间收到</dt>
<dd>根据公司的规定,需要.......</dd>
</dl>
</div>
</body>
</html>
效果图: