试一试
<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 的过渡版本中定义的取值有:
circle
disc
square
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 |
浏览器兼容性
加载中…