HTML 提供了多种方式来组织和展示内容，其中包括无序列表、有序列表、分区元素
一、HTML 列表1. 无序列表 (
- )无序列表用于展示没有特定顺序的项目。每个列表项由
- 标签表示。无序列表的标记是
- ，通常用于列出一系列相关项目。
- 苹果
- 香蕉
- 橙子
- 葡萄
- 标签表示。有序列表的标记是
- 。
- 早上起床
- 吃早餐
- 去上班
- 完成工作
- 水果
- 苹果
- 香蕉
- 蔬菜
- 西红柿
- 黄瓜
- 谷物
- 米饭
- 面包
代码示例：
代码语言：javascript复制
有序列表示例 我的日常活动
在这个示例中，我们创建了一个有序列表，列出了日常活动的步骤。由于它们是有顺序的，因此使用
- 更为合适。
3. 列表的嵌套无论是有序列表还是无序列表，都可以进行嵌套，以创建更复杂的结构。
代码示例：
代码语言：javascript复制
嵌套列表示例 购物清单
在这个示例中，我们有一个购物清单，里面包含了水果、蔬菜和谷物，且这些类别下又有相应的列表，充分展示了列表嵌套的能力。
二、HTML 区块与内联元素1. 块级元素 (
) 元素是一个块级元素，主要用于作为其他 HTML 元素容器进行组合。 元素本身并没有特定的语义。由于它属于块级元素，浏览器会在其前后自动换行。当与 CSS 结合使用时， 元素可以用来为大块内容设置样式属性。另一个常见用途是文档布局，它取代了以往使用表格来定义布局的方式。使用 元素来布局文档并不是其正确的用途，
元素应当用于展示结构化的数据。
代码示例：
代码语言：javascript复制
块级元素示例 我的信息
个人资料
姓名：咸鱼
年龄：23岁
联系信息
邮箱：wamtar@.com
电话：123-456-7890
在这个示例中，我们使用多个
元素来组织个人信息和联系信息。每个 包含了相应的标题和内容，形成一个块状的视觉效果。2. 内联元素 () 元素是一种内联元素，可以作为文本的容器。 元素本身并没有特定的语义。结合 CSS 使用时， 元素可以用于为特定文本应用样式属性。
代码示例：
代码语言：javascript复制
内联元素示例 欢迎来到我的博客
这是一段 突出显示 的文本。
使用 内联元素 可以方便地为文本添加样式。
在这个示例中，我们使用 元素为文本添加了背景色，突出显示了某些部分。
三、HTML 布局1. 使用
布局使用多个 标签可以创建复杂的布局并使用 CSS 控制其样式。代码示例：
代码语言：javascript复制
Div 布局示例 一条晒干的咸鱼的博客
文章标题
这里是文章内容...
在这个示例中，我们使用
元素创建了一个简单的博客布局，包括头部、侧边栏、主内容区域和底部。我们利用 CSS Flexbox 属性来确保布局的响应性。2. 使用表格布局 (
)虽然现代网页通常不推荐使用表格布局，但了解如何使用
标签在某些情况下仍然非常重要。表格用于组织和展示数据。
代码示例：
代码语言：javascript复制
表格布局示例 学生成绩表
姓名 科目 成绩 张三 数学 95 李四 英语 85 王五 科学 90 在这个示例中，我们使用多个
, , 及 元素创建了一个学生成绩表，清晰地展示了每个学生的名字、科目和成绩。表格的样式也通过 CSS 进行了一定的优化，使其看起来更整洁。 说明：
当涉及到
和 的差异时，以下几点需要明确：块级元素 vs. 行内元素：
是一种块级元素，它会独占一整行，同时可以设置宽度、高度和边距等样式属性。它非常适合用于构建页面的大型结构，比如主体区域、容器和布局等。 是一种行内元素，它不会独占一行，其宽度由内容决定。它适合用于对文本或其他行内元素进行样式化、标记或包裹。默认样式和布局：
元素的默认样式是块级显示，会以块的形式占用可用的空间。 元素的默认样式是行内显示，它不会独占整行，仅占据其内容的宽度。嵌套关系：
可以包含其他的块级元素和行内元素，包括其他的 和 元素。 通常用于包裹文本或其他行内元素，例如设置特定文本的样式。总之， 用于构建页面的结构和布局，而 则用于为文本或行内元素进行样式化或包裹。它们在页面设计和样式设置中各自有着不同的用途和功能。如有表述错误及欠缺之处敬请批评指正。
相关文章
友情链接
代码示例：
代码语言：javascript复制
无序列表示例 我喜欢的水果
在这个示例中，我们创建了一个无序列表，列出了几种水果。list-style-type 属性控制项目的样式，这里使用默认的圆点样式。
2. 有序列表 (
- )有序列表用于展示有明确顺序的项目，比如步骤或排名。同样，每个列表项由