一、HTML列表基础排版规则
在HTML排版中，目录内容需用
标签，这是最基础的排版规范，能让页面结构更清晰，层级更分明。而列表作为页面中常用的内容排版形式，主要分为无序列表和有序列表，二者标签使用各有讲究。
无序列表
无序列表是页面中最常用的列表类型，可直接使用
- 标签内。需要注意的是，每个
- 都是块状元素，自带换行效果，独占一行，无需额外添加换行标签
- 基础写法：直接使用
- 标签，单独定义列表
- 嵌套写法：将多个
- 放在
- 内部，结构更规整
- 标签内的内容不需要手动添加序号或项目符号，默认样式会自动生成，手动添加会造成样式重复，影响页面美观。
有序列表
这里要避免一个常见错误，有序列表主要用于有先后顺序、逻辑递进的内容，需将
- 标签内的内容不需要手动添加序号或项目符号，默认样式会自动生成，手动添加会造成样式重复，影响页面美观。
- 嵌套在
- 标签中，页面会自动生成1、2、3的数字序号，同样无需在
- 内手动写序号，这也是和无序列表一致的<ol
有序列表依赖- 标签实现自动编号
- 添加计数器内容，适合特殊格式的列表需求，虽然不是必学内容，但了解后能应对更多定制化场景。
三、常见图片格式与插入方法
学习完列表，紧接着梳理了HTML中图片格式的选择和插入技巧，不同格式的图片适用场景不同，选对格式能让页面加载更快、展示效果更好。
常用图片
不同图片格式各有优劣，实际开发中要根据需求
GIF格式：支持动画显示，适合动图、表情包等动态内容展示
PNG格式：支持透明背景，画质清晰，是图标、logo的首选
JPEG/JPG格式：颜色丰富，压缩率高，适合风景、人物等色彩饱满的
WebP格式：画质高且体积小，兼容性较好，但不支持iOS系统，使用时
SVG格式：矢量图，体积小，放大不会失真，适合图标、简单图形使用
图片插入标签与属性插入图片使用
单标签，核心属性要掌握，既能保证图片正常显示，也能提升页面
src属性：必填项，填写图片的存储路径，是图片显示的基础；
alt属性：替代文本，当图片加载失败时显示，同时方便爬虫捕获页面信息，提升SEO效果；
title属性：鼠标悬停在图片上时显示的文字，可补充图片说明，提升用户体验。简单的代码示例就能实现图片插入，实操时注意路径书写正确，避免因路径错误导致图片无法显示。
四、实操小技巧
最后总结一个实用的代码整理技巧，编写完列表和图片相关代码后，按下ctrl+shift+f快捷键，可一键整理代码格式，让代码缩进更规范、排版更整洁，后续修改和维护也更方便。
这次学习把列表和图片的基础知识点梳理得很透彻，从标签规范到样式修饰，再到实操技巧，每一步都贴合实际开发场景，后续还要多动手编写代码，把这些知识点熟练运用到页面制作中，才能真正掌握扎实。
注：本篇内容部分使用ai润色，主体为课堂笔记
列表项内容直接书写，无需额外添加序号
层级清晰，适合步骤、排名等有序
二、无序列表的样式自定义技巧默认的无序列表项目符号比较单一，通过CSS类选择器可以轻松修改样式，让列表更贴合页面设计风格，这也是实际开发中很实用的技巧。
基础样式修改
通过list-style-type属性，能快速更改项目符号形状，给
- 设置不同类名，即可实现差异化样式。
.two{
list-style-type: circle;
}
.three{
list-style-type: square</style
默认实心圆点样式
无需添加类名，直接使用- 即可</ul<ul class="two
空心圆点样式，通过circle属性值
适合简约风格的内容排版
自定义图片项目符号如果想让列表样式更独特，还可以用图片替代默认项目符号，操作起来也很简单：
第一步：准备素材，从阿里图库下载合适的icon图标，选择16px大小、PNG格式，保存到项目的img文件夹，并重命名为英文名称，方便路径调用
第二步：编写CSS样式，通过list-style-image属性引入图片路径，即可
对应的代码也很简洁，能快速实现个性化效果，让列表不再单调。
进阶计数器样式还有一种进阶的自定义方法，通过CSS计数器实现带括号的编号样式，先移除默认列表样式，初始化计数器，再为每个
- 添加计数器内容，适合特殊格式的列表需求，虽然不是必学内容，但了解后能应对更多定制化场景。
- 内手动写序号，这也是和无序列表一致的<ol