【Web前端】HTML 列表和容器元素

一条晒干的咸魚

已于 2024-10-23 22:57:04 修改

阅读量1.6k

点赞数 17

分类专栏： Web前端文章标签：前端 javascript 开发语言 html web前端 css

于 2024-08-16 14:10:43 首次发布

本文链接：https://blog.youkuaiyun.com/LEECOO666/article/details/141258397

版权

HTML 提供了多种方式来组织和展示内容，其中包括无序列表、有序列表、分区元素 <div> 和内联元素 <span>、以及如何使用 <div> 进行布局和表格布局。

一、HTML 列表

1. 无序列表 (`<ul>`)

无序列表用于展示没有特定顺序的项目。每个列表项由 <li> 标签表示。无序列表的标记是 <ul>，通常用于列出一系列相关项目。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>无序列表示例</title>
<style>
ul {
list-style-type: disc; /* 项目符号样式 */
padding-left: 20px; /* 左侧填充 */
}
</style>
</head>
<body>
<h1>我喜欢的水果</h1>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
<li>葡萄</li>
</ul>
</body>
</html>

在这个示例中，我们创建了一个无序列表，列出了几种水果。list-style-type 属性控制项目的样式，这里使用默认的圆点样式。

2. 有序列表 (`<ol>`)

有序列表用于展示有明确顺序的项目，比如步骤或排名。同样，每个列表项由 <li> 标签表示。有序列表的标记是 <ol>。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>有序列表示例</title>
<style>
ol {
padding-left: 20px; /* 左侧填充 */
}
</style>
</head>
<body>
<h1>我的日常活动</h1>
<ol>
<li>早上起床</li>
<li>吃早餐</li>
<li>去上班</li>
<li>完成工作</li>
</ol>
<