目录
列表定义
表格是用来显示数据的,而列表就是用来布局的。
列表最大的特点就是整齐、整洁、有序,它作为布局会更加自由和方便。
无序列表(重点)
<ul>标签标识html页面中项目的无序列表,列表项使用<li>标签来定义。
格式
<ul> <li>列表项</li> <li>列表项</li> </ul>
练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>无序列表</title> </head> <body> <h4>用户喜爱食物调查</h4> <ul> <li>苹果</li> <li>桃子</li> <li>香蕉</li> </ul> <!-- <ul></ul>中只能嵌套<li></li>,直接在标签中输入其他标签或者文字的做法是不允许的。 <li>中可以放任何元素 --> </body> </html>结果演示
有序列表(理解)
定义
有序列表会按照一定的顺序排列定义
在html中,<ol>标签用于定义有序列表,列表顺序以数字显示,并且用<li>标签来定义列表项。
<ol> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ol>
练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>有序列表</title> </head> <body> <h4>食物排行榜</h4> <ol> <li>苹果</li> <li>西瓜</li> <li>橘子</li> <!-- 有序列表注意事项和无序列表注意事项相同 --> </ol> </body> </html>结果演示
自定义列表(重点)
定义
<dl>用于定义描述列表的,该标签必须和<d>(定义项目名字)和<dd>(描述每一个项目的成员)一起使用。
<dl> <dt>名词1</dt> <dd>名词1成员</dd> <dd>名词1成员</dd> </dl>
练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自定义列表</title> </head> <body> <dl> <dt>关于我们</dt> <dd>官方微信</dd> <dd>联系我们</dd> <!-- <dl>中只能包含<dt><dd>标签 --> </dl> </body> </html>结果演示