diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/html/element/ul/index.html | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/zh-cn/web/html/element/ul/index.html')
| -rw-r--r-- | files/zh-cn/web/html/element/ul/index.html | 214 |
1 files changed, 214 insertions, 0 deletions
diff --git a/files/zh-cn/web/html/element/ul/index.html b/files/zh-cn/web/html/element/ul/index.html new file mode 100644 index 0000000000..935ea5e566 --- /dev/null +++ b/files/zh-cn/web/html/element/ul/index.html @@ -0,0 +1,214 @@ +--- +title: <ul> +slug: Web/HTML/Element/ul +tags: + - HTML + - 元素 + - 列表 +translation_of: Web/HTML/Element/ul +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><ul></code> 元素</strong>(或称 HTML 无序列表元素)表示一个内可含多个元素的无序列表或项目符号列表。</p> + +<table class="properties"> + <tbody> + <tr> + <td><a href="/en/HTML/Content_categories" title="en/HTML/Content categories">内容</a>分类</td> + <td><a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#Flow content">流式内容</a>,如果 <code><ul></code> 包含至少一个 <code><li></code> 元素,那么它就是显性内容 <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Palpable_content">Palpable content</a>。</td> + </tr> + <tr> + <td>允许的内容</td> + <td>零个或更多个 {{HTMLElement("li")}} 元素,可以混合使用 {{HTMLElement("ol")}} 与{{HTMLElement("ul")}} 元素。</td> + </tr> + <tr> + <td>标签省略</td> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <td>允许的父元素</td> + <td> + <p>接受流文本的任何内容</p> + </td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>{{ARIARole("directory")}}, {{ARIARole("group")}}, {{ARIARole("listbox")}}, {{ARIARole("menu")}}, {{ARIARole("menubar")}}, {{ARIARole("radiogroup")}}, {{ARIARole("tablist")}}, {{ARIARole("toolbar")}}, {{ARIARole("tree")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <td>DOM 接口</td> + <td>{{domxref("HTMLUListElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<dl> +</dl> + +<p>此元素仅含有<a href="/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a>。</p> + +<dl> + <dt>{{ htmlattrdef("compact") }}{{ Deprecated_inline() }}</dt> + <dd>此布尔属性提示列表是否需要被渲染为更紧凑的样式。用户代理决定如何解释这个属性,且并非所有浏览器都支持它。 + <div class="note"><strong>使用说明:</strong>不要使用这个属性,因为它已经被废弃了:{{ HTMLElement("ul") }} 元素应当使用 <a href="/zh-CN/docs/CSS">CSS</a> 来更改样式。(CSS)可以提供与<code> compact</code> 属性相同的效果,将 <a href="/zh-CN/docs/CSS">CSS</a> 属性 <a href="/zh-CN/docs/CSS/line-height">line-height</a> 的值设为 <code>80%</code> 即可。</div> + </dd> +</dl> + +<dl> + <dt>{{ htmlattrdef("type") }}{{ Deprecated_inline() }}</dt> + <dd>用于设置列表的着重号样式 ,被定义在 <a href="/en/HTML3.2" title="en/HTML3.2">HTML3.2</a> 和过渡版本 <a href="/en/HTML4.01" title="en/HTML4.01">HTML 4.0/4.01</a> 中的可用值有<span style="font-family: monospace;">:</span> + <ul> + <li><code>circle</code></li> + <li><code>disc</code></li> + <li><code>square</code></li> + </ul> + + <p>第四种着重号样式被定义在 WebTV 接口中,但并不是所有浏览器都支持: <code>triangle</code></p> + + <p>如果未设置此 HTML 属性且没有 <a href="/en/CSS" title="en/CSS">CSS</a> {{ cssxref("list-style-type") }} 属性作用于这个元素,用户代理会决定使用哪种着重号样式,一般来说这也和嵌套的层级数有关。</p> + + <div class="note"><strong>使用说明:</strong> 不要使用这个属性,它已经被废弃了:使用 <a href="/en/CSS" title="en/CSS">CSS</a> {{ cssxref("list-style-type") }} 属性作为代替。</div> + </dd> +</dl> + +<h2 id="使用说明">使用说明</h2> + +<ul> + <li><code><ul></code> 元素用来将没有数字顺序的一组数据进行分组,并且它们的数字顺序是没有意义的。举个例子,无序列表的列表项通常通过一个字符进行装饰,这些字符的形式可以是点,圆乃至方形.虽然这个字符没有直接在页面上定义,但是可以用与之相关的 CSS 对其进行操作,例如使用 {{cssxref("list-style-type")}} 属性。</li> + <li>在 {{ HTMLElement("ol") }} 和 {{ HTMLElement("ul") }} 元素中,嵌套列表没有深度和嵌套顺序的限制。</li> + <li>{{ HTMLElement("ol") }} 和 {{ HTMLElement("ul") }} 元素二者都代表一组数据,不过它们彼此是有区别的,ol元素中的顺序是有意义的。如果想确定你到底需要使用哪一个列表元素,你可以试着去改变数据的顺序。如果想表达的语义改变了,你就需要使用ol元素,否则你该使用ul元素。</li> +</ul> + +<h2 id="实例">实例</h2> + +<h3 id="简单的例子">简单的例子</h3> + +<pre class="brush: html"><ul> + <li>first item</li> + <li>second item</li> + <li>third item</li> +</ul> +</pre> + +<p>以上HTML输出:</p> + +<ul> + <li>first item</li> + <li>second item</li> + <li>third item</li> +</ul> + +<h3 id="嵌套列表">嵌套列表</h3> + +<pre class="brush: 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> + </li> <!-- Here is the closing </li> tag --> + <li>third item</li> +</ul></pre> + +<p>以上HTML输出:</p> + +<ul> + <li>first item</li> + <li>second item + <ul> + <li>second item first subitem</li> + <li>second item second subitem + <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> + <li>second item third subitem</li> + </ul> + </li> + <li>third item</li> +</ul> + +<h3 id="嵌套_<ul>_和_<ol>">嵌套 <ul> 和 <ol></h3> + +<pre class="brush: 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> + </li> <!-- Here is the closing </li> tag --> + <li>third item</li> +</ul> +</pre> + +<p>以上HTML输出:</p> + +<ul> + <li>first item</li> + <li>second item + <ol> + <li>second item first subitem</li> + <li>second item second subitem</li> + <li>second item third subitem</li> + </ol> + </li> + <li>third item</li> +</ul> + +<h2 id="规范">规范</h2> + +<table> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">评论</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-ul-element', '<ul>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-ul-element', '<ul>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("html.elements.ul")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>其他列表相关的HTML元素: {{ HTMLElement("ol") }}, {{ HTMLElement("li") }}, {{ HTMLElement("menu") }} 和绝对元素 {{ HTMLElement("dir") }};</li> + <li>特别作用于 <span style="font-family: courier new;"><ul></span>元素的CSS属性: + <ul> + <li> <a href="/en/CSS/list-style" title="en/CSS/list-style">list-style</a> 属性, 作用于选择哪种序数的样式来显示,</li> + <li><a href="/en/CSS_Counters" title="en/CSS_Counters">CSS counters</a>, 作用于操作复杂的嵌套列表,</li> + <li> <a href="/en/CSS/line-height" title="en/CSS/line-height">line-height</a> 属性, 作用于模拟过时的 {{ htmlattrxref("compact", "ul") }} 属性,</li> + <li> <a href="/en/CSS/margin" title="en/CSS/margin">margin</a> 属性, 作用于控制列表的缩进.</li> + </ul> + </li> +</ul> + +<p>{{ languages({ "en":"en/HTML/Element/ul", "de":"de/HTML/Element/ul", "ja":"ja/HTML/Element/ul", "pl":"pl/HTML/Element/ul"}) }}</p> |
