介绍
HTML 中的 ul
标签用于创建无序列表,其中的项目通常以项目符号的形式呈现。本实验将指导你如何使用 HTML 创建无序列表,并提供 ul
标签的语法和使用示例。
注意:你可以在
index.html
中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。
HTML 中的 ul
标签用于创建无序列表,其中的项目通常以项目符号的形式呈现。本实验将指导你如何使用 HTML 创建无序列表,并提供 ul
标签的语法和使用示例。
注意:你可以在
index.html
中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。
在一个新的项目文件夹中创建一个 index.html
文件,并在代码编辑器中打开该文件。
通过添加 html
、head
和 body
标签来创建 HTML 文档的基本结构。在 head
标签内,添加 title
标签并将文档标题设置为 "HTML Unordered List Lab"。
<!doctype html>
<html>
<head>
<title>HTML Unordered List Lab</title>
</head>
<body>
<!-- 在此处添加内容 -->
</body>
</html>
ul
标签创建无序列表在 body
标签内,使用 ul
标签创建一个无序列表。要添加列表项,请在 ul
标签内使用 li
标签。
<ul>
<li>This is the first item in the list</li>
<li>This is the second item in the list</li>
<li>This is the third item in the list</li>
</ul>
ul
标签添加属性ul
标签本身没有特定的属性,但它支持全局属性和事件属性。以下是为 ul
标签添加 class
属性的示例。
<ul class="my-list">
<li>This is the first item in the list</li>
<li>This is the second item in the list</li>
<li>This is the third item in the list</li>
</ul>
ul
标签应用 CSS 样式要为 ul
标签添加样式,可以使用 CSS。在以下示例中,我们将 list-style-type
设置为 square
,并添加了边距。
<style>
ul {
list-style-type: square;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 50px;
}
</style>
<ul class="my-list">
<li>This is the first item in the list</li>
<li>This is the second item in the list</li>
<li>This is the third item in the list</li>
</ul>
你可以通过在 <li>
标签内放置另一个 <ul>
标签来嵌套无序列表。以下是一个嵌套无序列表的示例。
<ul>
<li>This is the first item in the parent list</li>
<li>
This is the second item in the parent list
<ul>
<li>This is a nested item</li>
<li>This is another nested item</li>
</ul>
</li>
<li>This is the third item in the parent list</li>
</ul>
在本实验中,你学习了如何使用 HTML 中的 ul
标签创建无序列表。你还学习了如何为 ul
标签添加属性和 CSS 样式。请记住,ul
标签用于创建带项目符号的列表。ul
标签需要开始和结束标签,并且列表项应使用 ul
标签内的 li
标签添加。你可以通过在 li
标签内放置另一个 ul
标签来嵌套无序列表。