HTML网页制作怎么插入列表？有序无序列表写法-html教程-PHP中文网

必须用显式包裹每项内容，和不可直接包含文本；语义上按顺序关系选标签，CSS控制样式优于HTML的type属性，嵌套需注意padding重置问题。

html网页制作怎么插入列表？有序无序列表写法

直接用

或就能插入列表，但选错标签、漏写

、或依赖过时的 type 属性，后续会卡在样式、JS 获取节点、屏幕阅读器播报上。

必须用
包每一条内容，不能直接往里塞文本

常见错误是这样写：

苹果香蕉橙子

这是无效 HTML —— 浏览器可能容错渲染，但 DOM 中不会生成

节点，document.querySelectorAll('li') 拿不到任何结果。正确写法必须显式包裹：

苹果
香蕉
橙子

是唯一合法的直接子元素，其他标签（如、）虽可嵌套在
内，但不能替代它
HTML5 不允许省略

 闭合标签，即使解析器不报错，Vue/React 模板或 SSR 渲染时大概率出错
漏闭合 
 容易导致嵌套错乱，比如子  被当成上一条的文本内容

 不是“要编号才用”，而是“内容有内在顺序才用”
很多人只看视觉效果：想显示数字就用 
，想显示圆点就用 。这会导致语义污染 —— 屏幕阅读器会把“热门城市：北京、上海、广州”读成“第1项、第2项、第3项”，而它们之间根本没先后关系。

											
												
												
													HTML Text Extract
													从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。
												
												下载
												
											
										

该用  的场景：步骤说明、法律条款、搜索结果排名、安装流程

该用  的场景：导航菜单、产品特性并列项、标签云、友情链接


start 和 reversed 属性可用，但别依赖 type="A" 控制字母序号 —— 它不支持 CSS 伪元素扩展，且部分旧浏览器兼容性差

CSS 控制样式比 HTML 的 type 属性靠谱得多
type 属性（如 
）是 HTML4 遗留方案，现代项目应统一走 CSS：
ol {
  list-style-type: lower-alpha;
}
ul {
  list-style-type: square;
}


list-style-type 支持更多值：disc、circle、square、decimal、lower-roman 等，且可分别控制 ul 和 ol

要彻底自定义（比如用箭头、emoji 或 SVG 图标），先设 list-style: none，再用 li::before { content: "→ "; }

慎用 list-style-position: inside —— 换行后第二行文字容易和前缀不对齐，尤其在响应式布局中

嵌套列表时，缩进失效通常不是 list-style 的问题
写完嵌套后发现子列表没缩进？大概率是全局 CSS 重置了 padding-left，比如：
ul, ol {
  padding-left: 0;
}
浏览器默认给 
 和  设了 padding-left: 40px，一旦被清掉，嵌套就塌了。

优先检查父级列表的 padding 是否被覆盖，而不是反复调 list-style-type

三层以上嵌套会显著降低可维护性和可访问性，屏幕阅读器对深度嵌套支持不稳定
如果子项是解释性内容（如“支付方式 → 支付宝：支持花呗”），更适合改用 ，而非强行嵌套