七、列表标签
一)列表的应用场景
场景:在网页中按照“行”展示关联性的内容,如:新闻列表、排行榜等;
特点:按照“行”的方式,整齐显示内容
种类:无序列表、有序列表、自定义列表
二)无序列表(ul)
1.场景:在网页中表示一组无顺序之分的列表,如:新闻列表;
2.标签组成:
标签名 | 说明 |
---|---|
ul | 表示无序列表的整体,用于包裹标签 |
li | 表示无序列表里的每一项,用于包含每一行的内容 |
3.显示特点:列表的每一项前面默认显示圆点标识
4.注意事项:
*ul标签中只允许包含li标签;
*li标签可以包含任意内容。
5.代码格式:
<h1>水果列表</h1>
<ul>
<li>释迦</li>
<li>莲雾</li>
<li>猕猴桃</li>
<li>香蕉</li>
<li>苹果</li>
</ul>
6.显示效果:
三)有序列表(ol)
1.场景:在网页中表示一组有顺序之分的列表,如:排行榜等。
2.标签组成:
标签名 | 说明 |
---|---|
ol | 表示有序列表的整体,用于包裹li标签 |
li | 表示有序列表里的每一项,用于包含每一行的内容 |
3.显示特点:列表的每一项前默认显示序号标识
4.注意事项:
*ol标签中只允许包含li标签;
*li标签里可以包含任意内容。
5.代码格式:
<h1> 山河令男角排行榜 </h1>
<ol>
<li>周子舒</li>
<li>温客行</li>
<li>叶白衣</li>
<li>蝎王</li>
<li>曹蔚宁</li>
<li>张成岭</li>
</ol>
6.显示效果:
四)自定义列表(dl)
1.场景网页的底部导航中通常会使用。
如:
2.标签组成:
标签名 | 说明 |
---|---|
dl | 表示自定义列表的整体,用于包裹dt/dd标签 |
dt | 表示自定义列表的主题 |
dd | 表示自定义列表的针对主题的每一项内容 |
3.显示特点:dd前默认会有缩进效果
4.注意事项:
*dl标签中只允许包含dt/dd标签;
*dd/dt标签可以包含任意内容。
5.代码格式:
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
<dd>订单操作</dd>
</dl>
6.效果显示:
(Alt多选之后,同时按Ctrl+Shift+方向右键,多选文字,剪切,再在需要粘贴的地方用Alt多选,然后粘贴)
五)边框合并
使用场景:让相邻表格边框进行合并,得到细线边框的效果
代码:border-collapse:collapse;