HTML常用标签之列表
-
标签
-
标签用于定义无序列表,其中每个列表项使用
- 标签来定义。例如:
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
这个例子中,使用
-
标签定义了一个无序列表,其中包含三个列表项。
-
标签
-
标签用于定义有序列表,其中每个列表项使用
- 标签来定义。例如:
<ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>
这个例子中,使用
-
标签定义了一个有序列表,其中包含三个列表项。
-
或
-
标签内部。例如:
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
这个例子中,使用
-
、
- 标签的属性
-
和
这些标签除了具有默认样式外,还可以使用如下属性来修改其样式和行为:
id
:表示标识符,可用于JavaScript操作和CSS样式设置等。class
:表示类名,可用于CSS样式设置和JavaScript操作等。style
:表示内联样式,可用于指定元素的CSS样式。start
:表示有序列表的起始编号。
-
、
- 标签的语义化
-
和
这些标签在语义化方面也非常重要,它们可以为搜索引擎提供有用的信息,并且可以使得代码更加易于理解和维护。例如:
<body> <header> <h1>My Website</h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <main> <article> <header> <h2>Article Title</h2> <p>By John Doe</p> </header> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <footer> <small>Published on January 1, 2022</small> </footer> </article> </main> <footer> <p>© 2022 My Website. All rights reserved.</p> </footer> </body>
在这个例子中,两个
-
标签分别表示站点内的导航菜单和文章中的列表。使用这些标签可以使得代码更加具有层次性和可读性。