html ul li
时间: 2025-01-18 16:49:23 浏览: 42
### HTML中`ul`和`li`标签的用法
在HTML文档结构化表示数据时,`<ul>` 和 `<li>` 标签用于构建无序列表。`<ul>` 表示无序列表,而 `<li>` 定义列表中的项目[^1]。
#### 创建基本无序列表
为了创建一个简单的无序列表,需遵循如下语法:
```html
<ul>
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>
```
此代码片段展示了三个并列关系的条目组成的无序列表。值得注意的是,在 `<ul>` 标签内部仅能放置 `<li>` 标签;直接向其中添加除 `<li>` 外的其他标签或纯文本是不符合标准的做法。
#### 嵌套更多内容于列表项内
尽管规定了 `<ul>` 下只能有 `<li>` 子元素,但每一个 `<li>` 实际上是一个容器,能够包容几乎所有的HTML元素,比如段落、链接甚至是另一个新的无序列表,从而形成多级嵌套效果[^2]。
下面的例子说明了一个更复杂的场景——带有多层子项目的菜单式导航栏:
```html
<ul>
<li><a href="#">首页</a></li>
<li>产品展示
<ul>
<li><a href="#">电子产品</a></li>
<li><a href="#">家居用品</a></li>
</ul>
</li>
<li><a href="#">关于我们</a></li>
</ul>
```
这里不仅实现了超链接的功能,还通过再次引入一对 `<ul>` 和多个 `<li>` 来实现次级分类的效果[^3]。
#### 使用CSS自定义外观
默认情况下,浏览器会给无序列表自动添加样式(如小圆点),不过通常建议开发者借助外部 CSS 文件来自由调整这些视觉特性[^4]。
阅读全文
相关推荐













