整体介绍
无序列表 有序列表 定义列表 项目开发
标签定义
无序列表
<ul>标签和<li>标签
- 无序列表是没有刻意顺序的列表
- 无序列表使用<ul></ul>标签，每个列表项都是<li></li>标签
<ul>
<li>面包</li>
<li>牛奶</li>
<li>鸡蛋</li>
<li>水果</li>
</ul>
浏览器中每个列表项前会出现一个小圆点 注意事项：
无序列表是一个父子组合标签，上阵父子兵，不能单独出现
当HTML标签形成嵌套，必须注意代码的缩进(Tab键)
<li>标签不能单独使用，它必须放到<ul>或者<ol>中使用
<ul>的子标签只能是<li>
<li>标签是容器，内部可以放任何其他标签
<ul>
<li>面包</li>
<li>
牛奶
<p>要脱脂或低脂的</p>
</li>
<li>鸡蛋</li>
<li>水果</li>
</ul>列表嵌套
<ul>
<li>
<h3>江苏省</h3>
<ul>
<li>南京</li>
<li>苏州</li>
<li>无锡</li>
</ul>
</li>
<li>
<h3>湖北省</h3>
<ul>
<li>武汉</li>
<li>黄石</li>
</ul>
</li>
</ul>无序列表的type属性
<ul type = “circle”>
- 无序列表有type属性，可以定义前导符号的样式，但是在HTML5中已经被废弃，建议使用CSS替代。
有序列表
<ol>标签和<li>标签
- 有序列表是有刻意顺序”的列表
- 浏览器每个列表项前出现1、2、3、4等有序数字
注意事项
<li>标签不能散着放，它必须是<ol>标签或者<ul>标签的子标签 <ol>的子标签只能是<li>标签 <li>标签中可以放任何东西
<ol>标签的type属性
<ol type = “Ⅰ”>
- <ol>标签可以设置type属性，用来设置编号的类型
- 现在网页注重设计感，使用图片作为序号，需要使用到CSS
<ol>标签的start属性
<ol type=“A” start=“5”>
- start属性值必须是一个整数，指定了列表编号的起始值
- 此属性的值应为阿拉伯数字，尽管列表条目的编号类型type 属性可能指定为了罗马数字编号等其他类型的编号
<body>
<h5>考试成绩排名</h5>
<ol type="A" start="5">
<li>小慕</li>
<li>小明</li>
<li>小红</li>
<li>小强</li>
</ol>
</body>考试成绩排名
- 小慕
- 小明
- 小红
- 小强
- A往后数5位就是E，所以有序序号从E开始
- 若<ol type=“A” start=“26”>，值为Z、AA、AB、AC
<ol>标签的reversed属性
<ol reversed>
- reversed属性指定列表中的条目是否是倒序排列的
- reversed属性不需要值，只需要写reversed.单词即可，这是HTML5的全新特性
定义列表
<dl>
<dt>北京</dt>
<dd>我国首都、政治中心、文化中心</dd>
<dt>上海</dt>
<dd>国际经济、金融、科技创新中心</dd>
<dt>深圳</dt>
<dd>经济特区，国际化都市</dd>
</dl>
- 需要逐条给出定义描述的列表，就是定义列表
- 注意下面这些样式可以使用CSS自定义更改，所以不一定长这样
- 北京
- 我国首都、政治中心、文化中心
- 上海
- 国际经济、金融、科技创新中心
- 深圳
- 经济特区，国际化都市
<dl>和<dt>、<dd>标签
- <dl>是定义列表标签，内容交替出现<dt>、<dd>标签
- 也允许<dt>和<dd>不交替出现，而是分别处于不同的定义列表中
使用时机
- 使用什么标签，不应该看样式，应该看语义
- 只要语义上有”解释说明”含义的文字，且为列表形态，应该使用定义列表
例如很多电商页脚底部,当然，也可以使用div盒子标签
