<ul>~<li>

■ 定义

<ul>标签用于定义HTML页面中项目的无序列表

■ 使用说明

列表项使用<li>标签定义,一般会以项目符号呈现列表

无序列表的各个列表项之间没有顺序级别之分,是并列的

<ul>标签中只能嵌套<li>标签,不能有其他标签或纯文本

<li>标签相当于一个容器,可以容纳所有元素

无序列表会带有自己的样式属性(如每个选项前会有一个实心圆圈),但在实际使用时,会使用CSS设置

■ 示例

<h4>无序列表</h4>
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

效果:

### HTML 中 `ul` 和 `li` 标签的用法 #### 基本定义 `ul` 表示无序列表(Unordered List),而 `li` 表示列表项(List Item)。它们通常成对使用来展示一组条目。当单独作为项目列表时,`ul` 提供一种自然的分组方式[^2]。 #### 结合 CSS 的样式控制 通过结合 CSS,可以实现更复杂的布局效果。例如,可以通过设置 `display: flex;` 或者 `display: inline;` 来改变默认垂直排列的行为。下面是一个简单的例子: ```css ul { height: 100px; width: 600px; background-color: aqua; list-style: none; /* 移除默认的圆点 */ padding: 0; /* 清除默认内边距 */ display: flex; /* 使用弹性盒子模型 */ justify-content: center; /* 居中子元素 */ } li { display: inline; /* 让列表项水平排列 */ } ``` 上述代码片段展示了如何利用 CSS 将 `ul` 设置为固定尺寸并移除其默认样式,同时让内部的 `li` 元素水平分布[^1]。 #### 替代表格布局的功能 除了基本的数据罗列功能外,在现代 Web 开发中,`ul` 和 `li` 经常被用来替代传统的表格布局方法。比如构建导航栏或者侧边菜单等场景下非常常见[^3]。以下是一段创建简单横向导航栏的例子: ```html <ul> <li><a href="#">HomePage</a></li> <li><a href="#">Div+CSS教程</a></li> <li><a href="#">CSS布局实例</a></li> <li><a href="#">CSS2.0教程</a></li> <li><a href="#">CSS在线手册</a></li> </ul> ``` 此案例中的每一个链接都被包裹在一个独立的 `<li>` 当中,并且整个集合由外部的一个 `<ul>` 所包围。 #### 关于嵌套的可能性 值得注意的是,`<li>` 不仅能够包含纯文本或者其他行级元素,还可以进一步嵌入另一个完整的 `<ul>` 或 `<ol>` 列表结构。这种特性使得复杂层次化的信息展现成为可能[^4]。 ```html <ul> <li>水果 <ul> <li>苹果</li> <li>香蕉</li> </ul> </li> <li>蔬菜 <ul> <li>胡萝卜</li> <li>土豆</li> </ul> </li> </ul> ``` 这段代码演示了一个两层深的分类体系——顶层分为“水果”和“蔬菜”,每类之下又细分具体品种。 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值