@codady/normalize
Version:
@codady/normalize, A modern alternative to normalize.css, focused on typography, form usability, and cross-browser consistency.
136 lines (118 loc) • 5.95 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML列表标签原始样式演示：ol, ul, menu</title>
<link id="normalize-css" rel="stylesheet" href="../src/normalize.css">
</head>
<body>
<h1>HTML 列表标签原始样式演示</h1>
<p>以下展示 <ol>、<ul> 和 <menu> 三个标签在没有任何 CSS 修饰下的浏览器默认外观。不同浏览器可能有细微差异，但均为原生渲染。</p>
<!-- 第一部分：有序列表 <ol> -->
<h2>一、有序列表 <ol> (Ordered List)</h2>
<p>特点：项目自动编号，默认为十进制数字 (1, 2, 3...)，带有左侧内边距/外边距。</p>
<ol>
<li>第一项：默认有序列表项</li>
<li>第二项：显示为数字 "2."</li>
<li>第三项：可以包含多行文字，展示默认行高和字体</li>
<li>第四项：嵌套示例（内层有序列表会改变编号样式，如字母或罗马数字）
<ol>
<li>嵌套有序列表第一项（通常显示为 a. 或 i.，取决于浏览器，常见为小写字母）</li>
<li>嵌套有序列表第二项</li>
<li>更深层级测试
<ol>
<li>第三层有序列表（通常为小写罗马数字 i, ii, iii 或其它，各浏览器默认样式可能略有区别，但符合规范）</li>
<li>第三层第二项</li>
</ol>
</li>
</ol>
</li>
<li>第五项：普通列表项</li>
</ol>
<!-- 额外展示一个具有 type 属性的有序列表（但为了原始样子，不使用CSS，但允许HTML属性，但浏览器默认属性影响属于原始行为，不过这里主要展示无额外样式，但为了完整性不加type，仅默认）
但为了展示不同样式可能性但非CSS，保留标准默认，实际上 ol 默认没有任何 type 设置时就是数字。所以不额外加属性，保持原生最普通状态 -->
<hr> <!-- 分割线，无样式仅作内容分隔 -->
<!-- 第二部分：无序列表 <ul> -->
<h2>二、无序列表 <ul> (Unordered List)</h2>
<p>特点：项目符号默认为实心圆点 (disc)，带有左侧缩进。</p>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子
<ul>
<li>嵌套无序列表第一层子项（浏览器通常显示为空心圆圈 circle）</li>
<li>另一子项
<ul>
<li>第二层嵌套无序列表（通常显示为实心方块 square）</li>
<li>第二层嵌套另一项</li>
</ul>
</li>
<li>直接子项</li>
</ul>
</li>
<li>葡萄</li>
<li>西瓜</li>
</ul>
<hr>
<h2>三、菜单列表 <menu> (Menu List)</h2>
<p>注意：在传统浏览器中 <menu> 标签默认样式与 <ul> 基本相同，显示为实心圆点列表，无特殊菜单工具栏样式（除非使用CSS）。这里是原始HTML渲染，无CSS，所以它看起来和无序列表几乎一样。根据HTML标准，<menu> 通常用于交互式菜单，但默认样式为列表样式，与 <ul> 一致。</p>
<menu>
<li>菜单项一：新建文件</li>
<li>菜单项二：打开项目</li>
<li>菜单项三：保存
<menu>
<li>子菜单：另存为</li>
<li>子菜单：自动保存设置</li>
</menu>
</li>
<li>菜单项四：退出</li>
</menu>
<p>说明：<menu> 在没有任何样式的情况下，与 <ul> 表现完全一致，嵌套时同样改变项目符号样式。这是浏览器默认的呈现方式。</p>
<hr>
<h2>四、原始样式细节对比（无样式）</h2>
<p>左侧为有序列表简单示例，右侧为无序列表简单示例（由于布局无CSS，均为块级元素上下排列，这里只做顺序展示）：</p>
<ol>
<li>有序第一</li>
<li>有序第二</li>
</ol>
<ul>
<li>无序第一</li>
<li>无序第二</li>
</ul>
<h2>五、嵌套混合列表 (ol 内包含 ul, ul 内包含 ol) — 展示浏览器默认嵌套符号变化</h2>
<p>这种混合嵌套可以更好地观察原始浏览器对不同列表类型的默认渲染风格：</p>
<ol>
<li>有序列表顶层项目 1</li>
<li>有序列表顶层项目 2
<ul>
<li>无序子项 A (通常为空心圆圈)</li>
<li>无序子项 B
<ol>
<li>有序深层项 (数字编号重新开始或继续? 浏览器默认通常重新从1开始编号，且样式变为小写字母或数字，取决于嵌套深度，这里展示原生行为)</li>
<li>另一个有序深层项</li>
</ol>
</li>
</ul>
</li>
<li>有序列表顶层项目 3</li>
</ol>
<ul>
<li>无序顶层项目 X</li>
<li>无序顶层项目 Y
<ol>
<li>有序嵌套项目 (数字)</li>
<li>有序嵌套项目 2</li>
</ol>
</li>
<li>无序顶层项目 Z</li>
</ul>
<h2>六、单独展示不带任何子列表的简单menu，确保原始样式</h2>
<menu>
<li>简单菜单命令1</li>
<li>简单菜单命令2</li>
<li>简单菜单命令3</li>
</menu>
<p>本页面所有列表均未使用任何CSS规则，完全展示浏览器内置样式。不同浏览器可能边距、字号、符号形状稍有不同，但均为原始外观。</p>
<script src="./toggle-css.js"></script>
</body>
</html>