试一试
<ul>
<li>Milk</li>
<li>
Cheese
<ul>
<li>Blue cheese</li>
<li>Feta</li>
</ul>
</li>
</ul>
li {
list-style-type: circle;
}
li li {
list-style-type: square;
}
属性
此元素包含全局属性。
compact已弃用-
这个布尔属性暗示列表应以紧凑的样式呈现。对此属性的解释取决于浏览器。请改用 CSS:要实现与
compact属性类似的效果,可以使用 CSS 属性line-height并将其值设置为80%。 type已弃用-
此属性设置列表的项目符号样式。HTML3.2 和 HTML 4.0/4.01 的过渡版本中定义的取值有:
circlediscsquare
WebTV 界面中定义了第四种项目符号类型,但并非所有浏览器都支持:
triangle。如果未 present 且没有 CSS
list-style-type属性应用于该元素,则用户代理将根据列表的嵌套级别选择项目符号类型。警告:请勿使用此属性,因为它已被弃用;请改用 CSS
list-style-type属性。
用法说明
<ul>元素用于对一组没有数字顺序且列表中顺序无意义的项目进行分组。通常,无序列表项显示为项目符号,可以是几种形式,例如点、圆圈或方块。项目符号样式不在页面的 HTML 描述中定义,而是在其关联的 CSS 中使用list-style-type属性定义。<ul>和<ol>元素可以任意深度嵌套。此外,嵌套列表可以在<ol>和<ul>之间无限制地交替。<ol>和<ul>元素都表示一个列表项。它们的区别在于,对于<ol>元素,顺序是有意义的。要确定使用哪一个,请尝试更改列表项的顺序;如果含义发生变化,则应使用<ol>元素,否则可以使用<ul>。
示例
基本示例
html
<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
结果
嵌套列表
html
<ul>
<li>first item</li>
<li>
second item
<!-- Look, the closing </li> tag is not placed here! -->
<ul>
<li>second item first subitem</li>
<li>
second item second subitem
<!-- Same for the second nested unordered list! -->
<ul>
<li>second item second subitem first sub-subitem</li>
<li>second item second subitem second sub-subitem</li>
<li>second item second subitem third sub-subitem</li>
</ul>
</li>
<!-- Closing </li> tag for the li that
contains the third unordered list -->
<li>second item third subitem</li>
</ul>
<!-- Here is the closing </li> tag -->
</li>
<li>third item</li>
</ul>
结果
有序列表嵌套在无序列表中
html
<ul>
<li>first item</li>
<li>
second item
<!-- Look, the closing </li> tag is not placed here! -->
<ol>
<li>second item first subitem</li>
<li>second item second subitem</li>
<li>second item third subitem</li>
</ol>
<!-- Here is the closing </li> tag -->
</li>
<li>third item</li>
</ul>
结果
技术摘要
规范
| 规范 |
|---|
| HTML # the-ul-element |
浏览器兼容性
加载中…