HTML 列表标签原始样式演示
以下展示 <ol>、<ul> 和 <menu> 三个标签在没有任何 CSS 修饰下的浏览器默认外观。不同浏览器可能有细微差异,但均为原生渲染。
一、有序列表 <ol> (Ordered List)
特点:项目自动编号,默认为十进制数字 (1, 2, 3...),带有左侧内边距/外边距。
- 第一项:默认有序列表项
- 第二项:显示为数字 "2."
- 第三项:可以包含多行文字,展示默认行高和字体
- 第四项:嵌套示例(内层有序列表会改变编号样式,如字母或罗马数字)
- 嵌套有序列表第一项(通常显示为 a. 或 i.,取决于浏览器,常见为小写字母)
- 嵌套有序列表第二项
- 更深层级测试
- 第三层有序列表(通常为小写罗马数字 i, ii, iii 或其它,各浏览器默认样式可能略有区别,但符合规范)
- 第三层第二项
- 第五项:普通列表项
二、无序列表 <ul> (Unordered List)
特点:项目符号默认为实心圆点 (disc),带有左侧缩进。
- 苹果
- 香蕉
- 橙子
- 嵌套无序列表第一层子项(浏览器通常显示为空心圆圈 circle)
- 另一子项
- 第二层嵌套无序列表(通常显示为实心方块 square)
- 第二层嵌套另一项
- 直接子项
- 葡萄
- 西瓜
三、菜单列表 <menu> (Menu List)
注意:在传统浏览器中 <menu> 标签默认样式与 <ul> 基本相同,显示为实心圆点列表,无特殊菜单工具栏样式(除非使用CSS)。这里是原始HTML渲染,无CSS,所以它看起来和无序列表几乎一样。根据HTML标准,<menu> 通常用于交互式菜单,但默认样式为列表样式,与 <ul> 一致。
说明:<menu> 在没有任何样式的情况下,与 <ul> 表现完全一致,嵌套时同样改变项目符号样式。这是浏览器默认的呈现方式。
四、原始样式细节对比(无样式)
左侧为有序列表简单示例,右侧为无序列表简单示例(由于布局无CSS,均为块级元素上下排列,这里只做顺序展示):
- 有序第一
- 有序第二
五、嵌套混合列表 (ol 内包含 ul, ul 内包含 ol) — 展示浏览器默认嵌套符号变化
这种混合嵌套可以更好地观察原始浏览器对不同列表类型的默认渲染风格:
- 有序列表顶层项目 1
- 有序列表顶层项目 2
- 无序子项 A (通常为空心圆圈)
- 无序子项 B
- 有序深层项 (数字编号重新开始或继续? 浏览器默认通常重新从1开始编号,且样式变为小写字母或数字,取决于嵌套深度,这里展示原生行为)
- 另一个有序深层项
- 有序列表顶层项目 3
- 无序顶层项目 X
- 无序顶层项目 Y
- 有序嵌套项目 (数字)
- 有序嵌套项目 2
- 无序顶层项目 Z
六、单独展示不带任何子列表的简单menu,确保原始样式
简单菜单命令1
简单菜单命令2
简单菜单命令3
本页面所有列表均未使用任何CSS规则,完全展示浏览器内置样式。不同浏览器可能边距、字号、符号形状稍有不同,但均为原始外观。