HTML 列表标签:从基础到高级的完整指南
短信预约 -IT技能 免费直播动态提醒
无序列表(ul) 无序列表不使用数字或符号编号,而是使用项目符号(通常是圆点)。使用
- 和
<ul>
<li>列表项 1</li>
<li>列表项 2</li>
</ul>
有序列表(ol) 有序列表使用数字或字母编号。使用
- 和
<ol>
<li>列表项 1</li>
<li>列表项 2</li>
</ol>
嵌套列表 列表可以嵌套,创建分层结构。使用
- 或
- circle:圆点
- square:方块
- disc:空心圆点
- none:无项目符号
- 保持列表简短(不超过 10 个项目)。
- 使用一致的项目符号或编号类型。
- 在有必要的情况下嵌套列表。
- 为无序列表或有序列表添加适当的 type 或 start 属性。
- 使用 CSS 谨慎地修改列表的外观。
- 考虑列表的语义含义。
- 在现有列表项中创建一个新列表:
<ul>
<li>父项
<ul>
<li>子项 1</li>
<li>子项 2</li>
</ul>
</li>
<li>父项 2</li>
</ul>
高级
类型属性 type 属性可用于指定无序列表的项目符号类型。可用值包括:
<ul type="square">...</ul>
start 属性 start 属性可用于指定有序列表的起始编号。默认为 1:
<ol start="5">...</ol>
reversed 属性 reversed 属性可用于反转有序列表的编号顺序:
<ol reversed>...</ol>
CSS 样式 CSS 可以用来自定义列表的外观,例如更改项目符号、编号或缩进:
ul {
list-style-type: none;
padding: 0;
}
li {
margin: 0 0 1em;
}
语义化列表 使用
- 和
- 标记时,考虑它们的语义意义很重要。无序列表应用于不按特定顺序展示项目,而有序列表应用于按特定顺序展示项目。
最佳实践
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341