aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/html/element/ul/index.html
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
commit33058f2b292b3a581333bdfb21b8f671898c5060 (patch)
tree51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/html/element/ul/index.html
parent8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff)
downloadtranslated-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.html214
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>&lt;ul&gt;</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>&lt;ul&gt;</code> 包含至少一个 <code>&lt;li&gt;</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>&lt;ul&gt;</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">&lt;ul&gt;
+ &lt;li&gt;first item&lt;/li&gt;
+ &lt;li&gt;second item&lt;/li&gt;
+ &lt;li&gt;third item&lt;/li&gt;
+&lt;/ul&gt;
+</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">&lt;ul&gt;
+  &lt;li&gt;first item&lt;/li&gt;
+  &lt;li&gt;second item      &lt;!-- Look, the closing &lt;/li&gt; tag is not placed here! --&gt;
+   &lt;ul&gt;
+     &lt;li&gt;second item first subitem&lt;/li&gt;
+     &lt;li&gt;second item second subitem &lt;!-- Same for the second nested unordered list! --&gt;
+     &lt;ul&gt;
+    &lt;li&gt;second item second subitem first sub-subitem&lt;/li&gt;
+    &lt;li&gt;second item second subitem second sub-subitem&lt;/li&gt;
+    &lt;li&gt;second item second subitem third sub-subitem&lt;/li&gt;
+     &lt;/ul&gt;
+     &lt;/li&gt;           &lt;!-- Closing &lt;/li&gt; tag for the li that contains the third unordered list --&gt;
+     &lt;li&gt;second item third subitem&lt;/li&gt;
+   &lt;/ul&gt;
+  &lt;/li&gt;               &lt;!-- Here is the closing &lt;/li&gt; tag --&gt;
+  &lt;li&gt;third item&lt;/li&gt;
+&lt;/ul&gt;</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="嵌套_&lt;ul>_和_&lt;ol>">嵌套 &lt;ul&gt; 和 &lt;ol&gt;</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+ &lt;li&gt;first item&lt;/li&gt;
+ &lt;li&gt;second item &lt;!-- Look, the closing &lt;/li&gt; tag is not placed here! --&gt;
+ &lt;ol&gt;
+ &lt;li&gt;second item first subitem&lt;/li&gt;
+ &lt;li&gt;second item second subitem&lt;/li&gt;
+ &lt;li&gt;second item third subitem&lt;/li&gt;
+ &lt;/ol&gt;
+ &lt;/li&gt; &lt;!-- Here is the closing &lt;/li&gt; tag --&gt;
+ &lt;li&gt;third item&lt;/li&gt;
+&lt;/ul&gt;
+</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', '&lt;ul&gt;')}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-ul-element', '&lt;ul&gt;')}}</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;">&lt;ul&gt;</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>