一、列表标签
-
列表是一种结构标签
-
可以让网页的内容形成列表格式。
-
-
-
列表标签在HTML中提供提供了4种：
-
无序列表（UnorderList，ul）
就是没有序号的，内容不分先后的列表。
-
有序列表（OrderList，ol）
-
定义列表（DefineList，dl）
-
菜单列表（Menu）
-
-
除了定义列表结构特殊以外，其他的3种列表都有列表项目（List Item, li）。
1 无序列表
-
网页的列表内容一般由列表标签组织展示，ol+li是组合，
- ol标签与li标签之间尽量不要写标签或内容
- 如果列表中有内容，一定要写在li中间
-
列表可以嵌套多层
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 网页的列表内容一般是由列表标签组织展示，ul + li 组合，ul标签和li标签之间尽量不要写标签和内容 --> <!-- 无序列表, unordered list，简写: ul 列表的单项 list item 简写：li --> <ul> 这是ul和li之间 <li>无序列表，第1个列表项</li> <li>无序列表，第2个列表项</li> <li>无序列表，第3个列表项</li> <li>无序列表，第4个列表项</li> </ul> <!-- 列表是可以嵌套的 --> <ul> <li> 第1个列表 <ul> <li> 第1个列表 </li> <li> 第2个列表 </li> <li> 第3个列表 </li> <li> 第4个列表 </li> </ul> </li> <li> 第1个列表 <ul> <li> 第1个列表 </li> <li> 第2个列表 </li> <li> 第3个列表 </li> <li> 第4个列表 </li> </ul> </li> </ul> </body> </html>
2 有序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 网页的列表内容一般由列表标签组织展示，ol+li是组合，ol标签与li标签之间尽量不要写标签或内容
如果列表中有内容，一定要写在li中间
-->
<ol>
这是ol与li之间
<li>无序列表、第1个列表项</li>
<li>无序列表、第2个列表项</li>
<li>无序列表、第3个列表项</li>
<li>无序列表、第4个列表项</li>
</ol>
<hr>
<!-- 列表可以嵌套多层 -->
<ol>
<li>
第一层列表内容
<ol>
<li>第二层列表内容</li>
<li>第二层列表内容</li>
<li>第二层列表内容</li>
</ol>
</li>
<li>
第一层列表内容
<ol>
<li>第二层列表内容</li>
<li>第二层列表内容</li>
<li>第二层列表内容</li>
</ol>
</li>
<li>
第一层列表内容
<ol>
<li>第二层列表内容
<ol>
<li>第三层列表内容</li>
<li>第三层列表内容</li>
</ol>
</li>
<li>第二层列表内容
<ol>
<li>第三层列表内容</li>
<li>第三层列表内容</li>
<li>
第三层列表内容
<ol>
<li>第四层列表内容</li>
<li>第四层列表内容</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
</ol>
</body>
</html>
3 定义列表
-
定义列表的每一个定义项是由dt(Define Title)与dd(Define Description)组成。
-
dl：定义列表标签
-
dt：表示定义项0的标题
-
dd：表示对上一个dt中的标题内容进行描述或补充说明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>
定义列表标签为dl，<br>
定义列表的每一个定义项是由dt(Define Title)与dd(Define Description)组成。<br>
dt 表示定义项0的标题，<br>dd表示对上一个dt中的标题内容进行描述或补充说明</p>
<dl>
<dt>赵本山</dt>
<dd>春晚常驻选手，国内一线大品牌</dd>
<dd>乡村爱情故事，二人转，小品</dd>
<dt>小明</dt>
<dd>国内所有小朋友的同学，每次都从教室里面滚出去的哪一个。</dd>
</dl>
<!-- 定义列表只能用于定义一批的概念的列表中 -->
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dd>属于W3C标准的结构标准</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
<dd>属于W3C标准的外观标准</dd>
<dt>Javascript</dt>
<dd>简称js</dd>
<dd>属于W3C标准的行为标准</dd>
</dl>
</body>
</html>
4 菜单列表
- 菜单列表是HTML版本中新增的列表标签，
- 实际上就是ul标签（无序列表）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 菜单列表是HTML版本中新增的列表标签，实际上就是ul标签（无序列表） -->
<menu>
<li>首页</li>
<li>商品</li>
<li>专题</li>
<li>用户</li>
<li>版权</li>
</menu>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
无序列表, unordered list，简写: ul
列表的单项 list item 简写：li
-->
<ul type="circle">
<li>列表的第一项</li>
<li>列表的第二项</li>
<li>列表的第三项</li>
</ul>
<!--
有序列表, ordered list，简写：ol
列表的单项 list item li
-->
<ol>
<li>列表的第一项</li>
<li>列表的第二项</li>
<li>列表的第三项</li>
</ol>
<!--
和任何一个双标签一样，标签内部可以嵌套的标签来使用。
-->
<ul>
<li>
<p>第一章：开端</p>
<ul>
<li>第一节：下山</li>
<li>第二节：命案</li>
<li>第三节：奇遇</li>
<li></li>
<li></li>
</ul>
</li>
</ul>
<dl>
<dt>赵本山</dt>
<dd>春晚常驻选手，国内一线大品牌</dd>
<dd>乡村爱情故事，二人转，小品</dd>
<dt>小明</dt>
<dd>国内所有小朋友的同学，每次都从教室里面滚出去的哪一个。</dd>
</dl>
<!-- 菜单列表是HTML版本中新增的列表标签，实际上就是ul标签（无序列表） -->
<menu>
<li>首页</li>
<li>商品分类</li>
<li>购物狂欢节</li>
<li>会员中心</li>
</menu>
</body>
</html>
- 几种列表标签中最常用的只有
ul，当然也有新版本的menu标签。其他的2种标签（ol与dl），基本不使用。