列表
无序列表：
使用ul元素定义，列表里的每一项使用li元素包裹
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<ul>
<li>haha</li>
<li>xixi</li>
<li>lala</li>
</ul>
</body>
</html>
有序列表：
使用ol元素定义，每一项使用li元素包裹
ol元素有好几个属性可以控制列表序号的类型和顺序
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<ol type="i" reversed="reversed">
<li>我是第一个</li>
<li>我是第二个</li>
<li>我是第三个</li>
</ol>
</body>
</html>
两个常用的css属性：
- list-style-type
设置列表的标志和序号类型
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style>
ul.a {
list-style-type: square;
list-style-type: hiragana;<!--标志为实心方块，序号为日本平假名字符-->
}
ul.b {
list-style-type: disc;<!--实心圈-->
}
ul.c {
list-style-type: circle;<!--空心圈-->
}
ul.d {
list-style-type: none;<!--无标志-->
}
</style>
</head>
<body>
<ul class="a">
<li>关刀</li>
<li>双巨</li>
<li>大剑</li>
</ul>
<ul class="b">
<li>关刀</li>
<li>双巨</li>
<li>大剑</li>
</ul>
<ul class="c">
<li>关刀</li>
<li>双巨</li>
<li>大剑</li>
</ul>
<ul class="d">
<li>关刀</li>
<li>双巨</li>
<li>大剑</li>
</ul>
</body>
</html>
- list-style-image
使列表的序号变成指定的图片
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style>
ul {
list-style-image: url("img/a.png");
}
</style>
</head>
<body>
<ul>
<li>关刀</li>
<li>双巨</li>
<li>大剑</li>
</ul>
</body>
</html>
列表嵌套：
html5的列表是支持嵌套的
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<ol>
<li>大剑类
<ul>
<li>黑骑士剑</li>
<li>大剑</li>
</ul>
</li>
<li>特大剑类
<ul>
<li>黑骑士大剑</li>
</ul>
</li>
<li>直剑类</li>
</ol>
</body>
</html>
定义列表:
使用dl元素来实现，该元素定义了一个包括术语、定义、以及描述的列表，需要dt和dd元素配合实现，其中dt元素用于定义列表中项目部分的内容，dd元素用于定义描述部分的内容。
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<dl>
<dt>建山床</dt>
<dd>是个狼人</dd>
</dl>
<dl>
<dt>www.baidu.com</dt>
<dt>www.bilibili.com</dt>
<dd>神奇的网站</dd>
<dt>whoami</dt>
<dd>baidudu</dd>
</dl>
</body>
</html>