Article
Topic
Learning
Download
Q&A
Programming Dictionary
Game
PHP
Large Front-end
LOGIN
简体中文(ZH-CN)
English(EN)
繁体中文(ZH-TW)
日本語(JA)
한국어(KO)
Melayu(MS)
Français(FR)
Deutsch(DE)
HTML development manual
Collection(325)
share
directory
search
bookmark
HTML Tutorial - (HTML5 Standard)
HTML tutorial
Introduction to HTML
HTML editor
HTML Basics - 4 Examples
HTML elements
HTML attributes
HTML title
HTML paragraph
HTML text formatting
HTML link
HTML header
HTML CSS
HTML image
HTML table
HTML list
HTML block
HTML layout
HTML form
HTML frame
HTML color
HTML color name
HTML color values
HTML script
HTML character entity
HTML URL
HTML cheat list
HTML summary
HTML - XHTML
HTML media
HTML multimedia
HTML plugin
HTML audio
HTML videos (Videos)
HTML tag
-
</a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-img.html"><img></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-input.html"><input></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-ins.html"><ins></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-kbd.html"><kbd></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-keygen.html"><keygen></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-label.html"><label></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-legend.html"><legend></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-li.html"><li></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-link.html"><link></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-map.html"><map></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-mark.html"><mark></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-menu.html"><menu></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-meta.html"><meta></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-meter.html"><meter></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-nav.html"><nav></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-noframes.html"><noframes></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-noscript.html"><noscript></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-object.html"><object></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-ol.html"><ol></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-optgroup.html"><optgroup></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-option.html"><option></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-output.html"><output></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-p.html"><p></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-param.html"><param></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-pre.html"><pre></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-html.html"><html></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-progress.html"><progress></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-q.html"><q></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-rp.html"><rp></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-rt.html"><rt></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-ruby.html"><ruby></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-s.html"><s></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-samp.html"><samp></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-script.html"><script></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-section.html"><section></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-select.html"><select></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-small.html"><small></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-source.html"><source></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-span.html"><span></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-strike.html"><strike></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-strong.html"><strong></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-style.html"><style></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-sub.html"><sub></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-summary.html"><summary></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-sup.html"><sup></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-table.html"><table></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-tbody.html"><tbody></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-td.html"><td></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-textarea.html"><textarea></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-tfoot.html"><tfoot></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-th.html"><th></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-thead.html"><thead></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-time.html"><time></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-title.html"><title></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-tr.html"><tr></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-track.html"><track></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-tt.html"><tt></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-u.html"><u></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-ul.html"><ul></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-var.html"><var></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-video.html"><video></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-wbr.html"><wbr></a> </dd> </dl></li> </ul> </div> </div> </div> <div class="content"> <article class="phpcn-col-md9"> <div class="c-site"> <div class="c-site-a"> <a href="//m.sbmmt.com/course/27.html">HTML development manual</a> <span>/</span>HTML 列表 </div> </div> <div class="article-intro"> <h1 class="manual_con_title">HTML 列表</h1> <p class="intro">HTML 列表 HTML 支持有序、无序和定义列表: HTML 列表 有序列表 第一个列表项 第二个列表项 第三个列表项 无序列表 列表项 列表项 列表项 在线实例 无序列表 本例演示无序列表。 有序列表 本例演示有序列表。 （可以在本页底端找到更多实例。） HTML无序列表 无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。</p> <hr> <div class="article-intro"> <p class="intro">HTML 支持有序、无序和定义列表:</p> <div class="example"> <h2 class="example">HTML 列表</h2> <div class="example_result notranslate"> <table width="100%" border="0"> <tbody> <tr class="firstRow"> <td width="50%"><h3>有序列表</h3> <ol class=" list-paddingleft-2"> <li><p>第一个列表项</p></li> <li><p>第二个列表项</p></li> <li><p>第三个列表项</p></li> </ol></td> <td width="50%"><h3>无序列表</h3> <ul class=" list-paddingleft-2"> <li><p>列表项</p></li> <li><p>列表项</p></li> <li><p>列表项</p></li> </ul></td> </tr> </tbody> </table> </div> </div> <hr> <table width="100%" border="0"> <tbody> <tr class="firstRow"> <td width="48px" align="left"><img src="https://img.php.cn/upload/image/911/512/528/1550478981234360.gif" title="1550478981234360.gif" alt="tryitimg.gif"></td> <td align="left"><h2>在线实例</h2></td> </tr> </tbody> </table> <p>1.无序列表<br>本例演示无序列表。</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <h4>无序列表:</h4> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html></pre> </div> <br> <a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a> <p>点击 "运行实例" 按钮查看在线实例</p> </div> <p>2.有序列表<br>本例演示有序列表。</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ol start="50"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html></pre> </div> <br> <a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a> <p>点击 "运行实例" 按钮查看在线实例</p> </div> <p>（可以在本页底端找到更多实例。）</p> <hr> <h2>HTML无序列表</h2> <p>无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。</p> <p>无序列表使用 <ul> 标签</p> <div class="code notranslate"> <div> <ul> <br><li>Coffee</li> <br><li>Milk</li> <br></ul> </div> </div> <p>浏览器显示如下：</p> <ul class=" list-paddingleft-2"> <li><p>Coffee</p></li> <li><p>Milk</p></li> </ul> <hr> <h2>HTML 有序列表</h2> <p>同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。</p> <p>列表项项使用数字来标记。</p> <div class="code notranslate"> <div> <ol> <br><li>Coffee</li> <br><li>Milk</li> <br></ol> </div> </div> <p>浏览器中显示如下：</p> <ol class=" list-paddingleft-2"> <li><p>Coffee</p></li> <li><p>Milk</p></li> </ol> <hr> <h2>HTML 自定义列表</h2> <p>自定义列表不仅仅是一列项目，而是项目及其注释的组合。</p> <p>自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。</p> <div class="code notranslate"> <div> <pre class="brush:html;toolbar:false"><dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl></pre> </div> </div> <p>浏览器显示如下：</p> <ul class=" list-paddingleft-2"> <li><p>Coffee</p></li> <li><p>- black hot drink</p></li> <li><p>Milk</p></li> <li><p>- white cold drink</p></li> </ul> <hr> <h2>注意事项 - 有用提示</h2> <p><strong>提示:</strong>列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。</p> <div class="tryit_ex"> <h2>更多实例</h2> </div> <p>1.不同类型的有序列表<br>本例演示不同类型的有序列表。</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <h4>编号列表：</h4> <ol> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>大写字母列表：</h4> <ol type="A"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>小写字母列表：</h4> <ol type="a"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>罗马数字列表：</h4> <ol type="I"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>小写罗马数字列表：</h4> <ol type="i"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> </body> </html></pre> </div> <br> <a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a> <p>点击 "运行实例" 按钮查看在线实例</p> </div> <p>2.不同类型的无序列表<br>本例演示不同类型的无序列表。</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <p><b>注意：</b> 在 HTML 4中 ul 属性已废弃，HTML5 已不支持该属性，因此我们使用 CSS 代替来定义不同类型的无序列表如下：</p> <h4>圆点列表：</h4> <ul style="list-style-type:disc"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <h4>圆圈列表：</h4> <ul style="list-style-type:circle"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <h4>正方形列表：</h4> <ul style="list-style-type:square"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> </body> </html></pre> </div> <br> <a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a> <p>点击 "运行实例" 按钮查看在线实例</p> </div> <p>3.嵌套列表<br>本例演示如何嵌套列表。</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <h4>嵌套列表：</h4> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul> </body> </html></pre> </div> <br> <a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a> <p>点击 "运行实例" 按钮查看在线实例</p> </div> <p>4.嵌套列表 2<br>本例演示更复杂的嵌套列表。</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <h4>嵌套列表：</h4> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea <ul> <li>China</li> <li>Africa</li> </ul> </li> </ul> </li> <li>Milk</li> </ul> </body> </html></pre> </div> <br> <a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a> <p>点击 "运行实例" 按钮查看在线实例</p> </div> <p>5.自定义列表<br>本例演示一个定义列表。</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <h4>一个自定义列表：</h4> <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> </body> </html></pre> </div> <br> <a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a> <p>点击 "运行实例" 按钮查看在线实例</p> </div> <hr> <h2>HTML 列表标签</h2> <table class="reference notranslate"> <tbody> <tr class="firstRow"> <th align="left">标签</th> <th align="left">描述</th> </tr> <tr> <td style="word-break: break-all;"><a href="//m.sbmmt.com/dic/html/ol.html" target="_blank"><ol></a></td> <td>定义有序列表</td> </tr> <tr> <td style="word-break: break-all;"><a href="//m.sbmmt.com/dic/html/ul.html" target="_blank"><ul></a></td> <td>定义无序列表</td> </tr> <tr> <td style="word-break: break-all;"><a href="//m.sbmmt.com/dic/html/li.html" target="_blank"><li></a></td> <td>定义列表项</td> </tr> <tr> <td style="word-break: break-all;"><a href="//m.sbmmt.com/dic/html/dl.html" target="_blank"><dl></a></td> <td>定义定义列表</td> </tr> <tr> <td style="word-break: break-all;"><a href="//m.sbmmt.com/dic/html/dt.html" target="_blank"><dt></a></td> <td>自定义列表项目</td> </tr> <tr> <td style="word-break: break-all;"><a href="//m.sbmmt.com/dic/html/dd.html" target="_blank"><dd></a></td> <td>定义自定列表项的描述</td> </tr> </tbody> </table> </div> </div> <div class="previous-next-links"> <div class="previous-design-link"> ← <a href="//m.sbmmt.com/html/html-tables.html" rel="prev">HTML 表格</a> </div> <div class="next-design-link"> <a href="//m.sbmmt.com/html/html-blocks.html" rel="next">HTML 区块</a>→ </div> </div> </article> <div class="right-item phpcn-col-md2"> <ul> <li><h3>Tutorial Navigation</h3> <dl class="navigation"> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/1/type/3.html" target="_blank" title="Big front end">Big front end</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="HTML">HTML</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="CSS">CSS</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="HTML5">HTML5</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="CSS3">CSS3</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="JavaScript">JavaScript</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="jQuery">jQuery</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="Vue.js">Vue.js</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="React">React</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="AngularJS">AngularJS</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="Node.js">Node.js</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="AJAX">AJAX</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="Bootstrap">Bootstrap</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="Foundation">Foundation</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/2/type/3.html" target="_blank" title="JavaScript">JavaScript</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/2/type/3.html" title="Highcharts">Highcharts</a> <a href="//m.sbmmt.com/course/list/2/type/3.html" title="Maps API">Maps API</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/3/type/3.html" target="_blank" title="Backend Development">Backend Development</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="PHP">PHP</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="ThinkPHP">ThinkPHP</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Laravel">Laravel</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Python">Python</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Go">Go</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Java">Java</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="C">C</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="C++">C++</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="C#">C#</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="JSP">JSP</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Django">Django</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="ASP.NET">ASP.NET</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="ASP">ASP</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="XML">XML</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Ruby">Ruby</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Python3">Python3</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Perl">Perl</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Servlet">Servlet</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Lua">Lua</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Scala">Scala</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="AppML">AppML</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="VBScript">VBScript</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/4/type/3.html" target="_blank" title="database">database</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/4/type/3.html" title="MySQL">MySQL</a> <a href="//m.sbmmt.com/course/list/4/type/3.html" title="Redis">Redis</a> <a href="//m.sbmmt.com/course/list/4/type/3.html" title="Oracle">Oracle</a> <a href="//m.sbmmt.com/course/list/4/type/3.html" title="MongoDB">MongoDB</a> <a href="//m.sbmmt.com/course/list/4/type/3.html" title="Memcached">Memcached</a> <a href="//m.sbmmt.com/course/list/4/type/3.html" title="SQL Server">SQL Server</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/5/type/3.html" target="_blank" title="Mobile terminal">Mobile terminal</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/5/type/3.html" title="Applets">Applets</a> <a href="//m.sbmmt.com/course/list/5/type/3.html" title="uni-app">uni-app</a> <a href="//m.sbmmt.com/course/list/5/type/3.html" title="Flutter">Flutter</a> <a href="//m.sbmmt.com/course/list/5/type/3.html" title="Android">Android</a> <a href="//m.sbmmt.com/course/list/5/type/3.html" title="iOS">iOS</a> <a href="//m.sbmmt.com/course/list/5/type/3.html" title="Swift">Swift</a> <a href="//m.sbmmt.com/course/list/5/type/3.html" title="other">other</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/9/type/3.html" target="_blank" title="Operation and maintenance development">Operation and maintenance development</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/9/type/3.html" title="Linux">Linux</a> <a href="//m.sbmmt.com/course/list/9/type/3.html" title="Docker">Docker</a> <a href="//m.sbmmt.com/course/list/9/type/3.html" title="PhpStudy">PhpStudy</a> <a href="//m.sbmmt.com/course/list/9/type/3.html" title="Git">Git</a> <a href="//m.sbmmt.com/course/list/9/type/3.html" title="Other tools">Other tools</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/7/type/3.html" target="_blank" title="UI design">UI design</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/7/type/3.html" title="Axure">Axure</a> <a href="//m.sbmmt.com/course/list/7/type/3.html" title="MVC">MVC</a> <a href="//m.sbmmt.com/course/list/7/type/3.html" title="Web Forms">Web Forms</a> <a href="//m.sbmmt.com/course/list/7/type/3.html" title="PS">PS</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/10/type/3.html" target="_blank" title="Computer Basics">Computer Basics</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/10/type/3.html" title="Design Patterns">Design Patterns</a> <a href="//m.sbmmt.com/course/list/10/type/3.html" title="regular expression">regular expression</a> <a href="//m.sbmmt.com/course/list/10/type/3.html" title="HTTP">HTTP</a> <a href="//m.sbmmt.com/course/list/10/type/3.html" title="Website Building Guide">Website Building Guide</a> <a href="//m.sbmmt.com/course/list/10/type/3.html" title="Browser information">Browser information</a> <a href="//m.sbmmt.com/course/list/10/type/3.html" title="website host">website host</a> <a href="//m.sbmmt.com/course/list/10/type/3.html" title="TCP/IP">TCP/IP</a> <a href="//m.sbmmt.com/course/list/10/type/3.html" title="W3C">W3C</a> <a href="//m.sbmmt.com/course/list/10/type/3.html" title="CodeBasic">CodeBasic</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/6/type/3.html" target="_blank" title="XML">XML</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="DTD">DTD</a> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="XML DOM">XML DOM</a> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="XSLT">XSLT</a> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="XPath">XPath</a> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="XQuery">XQuery</a> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="XLink">XLink</a> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="XPointer">XPointer</a> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="XML Schema">XML Schema</a> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="XSL-FO">XSL-FO</a> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="SVG">SVG</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/8/type/3.html" target="_blank" title="Web Services">Web Services</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/8/type/3.html" title="Web Services">Web Services</a> <a href="//m.sbmmt.com/course/list/8/type/3.html" title="WSDL">WSDL</a> <a href="//m.sbmmt.com/course/list/8/type/3.html" title="SOAP">SOAP</a> <a href="//m.sbmmt.com/course/list/8/type/3.html" title="RSS">RSS</a> <a href="//m.sbmmt.com/course/list/8/type/3.html" title="RDF">RDF</a> </div> </dd> </dl></li> </ul> </div> </div> <div id="codeMark"></div> <div id="codeMain"> <div class="left"> <div id="codeEditor"></div> <div class="editor-btn"> <div class="editor-btn-inner"> <a href="javascript:;" class="code-btn-submit r" id="J_Commit" title="submit">submit</a> </div> </div> </div> <div class="right"> <div id="codeResult"></div> </div> <div id="close"></div> </div> </body> </html>
