文章
专题
学习
下载
问答
编程词典
手游
PHP
大前端
登录
简体中文(ZH-CN)
English(EN)
繁体中文(ZH-TW)
日本語(JA)
한국어(KO)
Melayu(MS)
Français(FR)
Deutsch(DE)
HTML 开发手册
收藏(325)
分享
目录
搜索
书签
HTML 教程- (HTML5 标准)
HTML 教程
HTML 简介
HTML 编辑器
HTML 基础- 4个实例
HTML 元素
HTML 属性
HTML 标题
HTML 段落
HTML 文本格式化
HTML 链接
HTML 头部
HTMLCSS
HTML 图像
HTML 表格
HTML 列表
HTML 区块
HTML 布局
HTML 表单
HTML 框架
HTML 颜色
HTML 颜色名
HTML 颜色值
HTML脚本
HTML 字符实体
HTML 网址
HTML 速查列表
HTML 总结
HTML-XHTML
HTML 媒体
HTML 多媒体
HTML 插件
HTML 音频(Audio)
HTML 视频（Videos）
HTML 标签
<一>
<缩写>
<缩写词>
<地址>
<小程序>
<区域>
<文章>
<旁白>
<音频>
<基地>
<基本字体>
<大>
<块引用>
<正文>
<按钮>
<画布>
<标题>
<中心>
<引用>
<代码>
<栏>
<命令>
<数据列表>
<删除>
<详情>
<对话框>
<目录>
<嵌入>
<字段集>
<图标题>
<图>
<字体>
<页脚>
<表格>
<框架>
<框架集>
<头>
<标题>
-
<小时>
<我>
</a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-img.html"><图片></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-input.html"><输入></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-ins.html"><ins></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-kbd.html"><KBD></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-keygen.html"><注册机></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-label.html"><标签></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-legend.html"><图例></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-li.html"><li></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-link.html"><链接></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-map.html"><地图></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-mark.html"><标记></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-menu.html"><菜单></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-meta.html"><元></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-meter.html"><米></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-nav.html"><导航></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-noframes.html"><无帧></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-noscript.html"><无脚本></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-object.html"><对象></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-ol.html"><ol></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-optgroup.html"><选择组></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-option.html"><选项></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-output.html"><输出></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-p.html"><p></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-param.html"><参数></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-pre.html"><前></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-html.html"><html></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-progress.html"><进度></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-q.html"><q></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-rp.html"><rp></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-rt.html"><rt></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-ruby.html"><红宝石></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-s.html"><s></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-samp.html"><样本></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-script.html"><脚本></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-section.html"><部分></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-select.html"><选择></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-small.html"><小></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-source.html"><来源></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-span.html"><跨度></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-strike.html"><罢工></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-strong.html"><强></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-style.html"><风格></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-sub.html"><子></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-summary.html"><摘要></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-sup.html"><sup></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-table.html"><表></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-tbody.html"><正文></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-td.html"><td></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-textarea.html"><文本区域></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-tfoot.html"><t脚></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-th.html"><第></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-thead.html"><标题></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-time.html"><时间></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-title.html"><标题></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-tr.html"><tr></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-track.html"><曲目></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-tt.html"><TT></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-u.html"><u></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-ul.html"><ul></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-var.html"><曾经></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-video.html"><视频></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-wbr.html"><br></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/zh/course/27.html">HTML 开发手册</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/zh/html/html-tables.html" rel="prev">HTML 表格</a> </div> <div class="next-design-link"> <a href="//m.sbmmt.com/zh/html/html-blocks.html" rel="next">HTML 区块</a>→ </div> </div> </article> <div class="right-item phpcn-col-md2"> <ul> <li><h3>教程导航</h3> <dl class="navigation"> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh/course/list/1/type/3.html" target="_blank" title="大前端">大前端</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh/course/list/1/type/3.html" title="超文本标记语言">超文本标记语言</a> <a href="//m.sbmmt.com/zh/course/list/1/type/3.html" title="CSS">CSS</a> <a href="//m.sbmmt.com/zh/course/list/1/type/3.html" title="HTML5">HTML5</a> <a href="//m.sbmmt.com/zh/course/list/1/type/3.html" title="CSS3">CSS3</a> <a href="//m.sbmmt.com/zh/course/list/1/type/3.html" title="JavaScript">JavaScript</a> <a href="//m.sbmmt.com/zh/course/list/1/type/3.html" title="jQuery">jQuery</a> <a href="//m.sbmmt.com/zh/course/list/1/type/3.html" title="Vue.js">Vue.js</a> <a href="//m.sbmmt.com/zh/course/list/1/type/3.html" title="反应">反应</a> <a href="//m.sbmmt.com/zh/course/list/1/type/3.html" title="AngularJS">AngularJS</a> <a href="//m.sbmmt.com/zh/course/list/1/type/3.html" title="Node.js">Node.js</a> <a href="//m.sbmmt.com/zh/course/list/1/type/3.html" title="阿贾克斯">阿贾克斯</a> <a href="//m.sbmmt.com/zh/course/list/1/type/3.html" title="引导程序">引导程序</a> <a href="//m.sbmmt.com/zh/course/list/1/type/3.html" title="基础">基础</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh/course/list/2/type/3.html" target="_blank" title="JavaScript">JavaScript</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh/course/list/2/type/3.html" title="高图表">高图表</a> <a href="//m.sbmmt.com/zh/course/list/2/type/3.html" title="地图应用程序接口">地图应用程序接口</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" target="_blank" title="后端开发">后端开发</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="PHP">PHP</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="ThinkPHP">ThinkPHP</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="拉维尔">拉维尔</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="Python">Python</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="去">去</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="爪哇">爪哇</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="C">C</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="C++">C++</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="C＃">C＃</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="联合应用程序">联合应用程序</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="姜戈">姜戈</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="网络平台">网络平台</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="ASP">ASP</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="XML">XML</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="红宝石">红宝石</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="Python3">Python3</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="珀尔">珀尔</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="服务程序">服务程序</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="卢阿">卢阿</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="斯卡拉">斯卡拉</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="应用机器学习">应用机器学习</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="VB脚本">VB脚本</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh/course/list/4/type/3.html" target="_blank" title="数据库">数据库</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh/course/list/4/type/3.html" title="MySQL">MySQL</a> <a href="//m.sbmmt.com/zh/course/list/4/type/3.html" title="雷迪斯">雷迪斯</a> <a href="//m.sbmmt.com/zh/course/list/4/type/3.html" title="甲骨文">甲骨文</a> <a href="//m.sbmmt.com/zh/course/list/4/type/3.html" title="MongoDB">MongoDB</a> <a href="//m.sbmmt.com/zh/course/list/4/type/3.html" title="内存缓存">内存缓存</a> <a href="//m.sbmmt.com/zh/course/list/4/type/3.html" title="SQL服务器">SQL服务器</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh/course/list/5/type/3.html" target="_blank" title="移动端">移动端</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh/course/list/5/type/3.html" title="小程序">小程序</a> <a href="//m.sbmmt.com/zh/course/list/5/type/3.html" title="统一应用程序">统一应用程序</a> <a href="//m.sbmmt.com/zh/course/list/5/type/3.html" title="扑">扑</a> <a href="//m.sbmmt.com/zh/course/list/5/type/3.html" title="安卓">安卓</a> <a href="//m.sbmmt.com/zh/course/list/5/type/3.html" title="iOS系统">iOS系统</a> <a href="//m.sbmmt.com/zh/course/list/5/type/3.html" title="迅速">迅速</a> <a href="//m.sbmmt.com/zh/course/list/5/type/3.html" title="其它">其它</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh/course/list/9/type/3.html" target="_blank" title="运维开发">运维开发</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh/course/list/9/type/3.html" title="Linux">Linux</a> <a href="//m.sbmmt.com/zh/course/list/9/type/3.html" title="码头工人">码头工人</a> <a href="//m.sbmmt.com/zh/course/list/9/type/3.html" title="Php学习">Php学习</a> <a href="//m.sbmmt.com/zh/course/list/9/type/3.html" title="git">git</a> <a href="//m.sbmmt.com/zh/course/list/9/type/3.html" title="其它工具">其它工具</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh/course/list/7/type/3.html" target="_blank" title="UI设计">UI设计</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh/course/list/7/type/3.html" title="阿胡尔">阿胡尔</a> <a href="//m.sbmmt.com/zh/course/list/7/type/3.html" title="多维控制">多维控制</a> <a href="//m.sbmmt.com/zh/course/list/7/type/3.html" title="网页表格">网页表格</a> <a href="//m.sbmmt.com/zh/course/list/7/type/3.html" title="聚苯乙烯">聚苯乙烯</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh/course/list/10/type/3.html" target="_blank" title="计算机基础">计算机基础</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh/course/list/10/type/3.html" title="设计模式">设计模式</a> <a href="//m.sbmmt.com/zh/course/list/10/type/3.html" title="正则表达式">正则表达式</a> <a href="//m.sbmmt.com/zh/course/list/10/type/3.html" title="HTTP协议">HTTP协议</a> <a href="//m.sbmmt.com/zh/course/list/10/type/3.html" title="网站建设指南">网站建设指南</a> <a href="//m.sbmmt.com/zh/course/list/10/type/3.html" title="浏览器信息">浏览器信息</a> <a href="//m.sbmmt.com/zh/course/list/10/type/3.html" title="网站主机">网站主机</a> <a href="//m.sbmmt.com/zh/course/list/10/type/3.html" title="TCP/IP">TCP/IP</a> <a href="//m.sbmmt.com/zh/course/list/10/type/3.html" title="万维网联盟">万维网联盟</a> <a href="//m.sbmmt.com/zh/course/list/10/type/3.html" title="基本代码">基本代码</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh/course/list/6/type/3.html" target="_blank" title="XML">XML</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh/course/list/6/type/3.html" title="DTD">DTD</a> <a href="//m.sbmmt.com/zh/course/list/6/type/3.html" title="XML文档对象模型">XML文档对象模型</a> <a href="//m.sbmmt.com/zh/course/list/6/type/3.html" title="XSLT">XSLT</a> <a href="//m.sbmmt.com/zh/course/list/6/type/3.html" title="X路径">X路径</a> <a href="//m.sbmmt.com/zh/course/list/6/type/3.html" title="X查询">X查询</a> <a href="//m.sbmmt.com/zh/course/list/6/type/3.html" title="星联">星联</a> <a href="//m.sbmmt.com/zh/course/list/6/type/3.html" title="X指针">X指针</a> <a href="//m.sbmmt.com/zh/course/list/6/type/3.html" title="XML模式">XML模式</a> <a href="//m.sbmmt.com/zh/course/list/6/type/3.html" title="XSL-FO">XSL-FO</a> <a href="//m.sbmmt.com/zh/course/list/6/type/3.html" title="静止无功发生器">静止无功发生器</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh/course/list/8/type/3.html" target="_blank" title="网页服务">网页服务</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh/course/list/8/type/3.html" title="网页服务">网页服务</a> <a href="//m.sbmmt.com/zh/course/list/8/type/3.html" title="WSDL">WSDL</a> <a href="//m.sbmmt.com/zh/course/list/8/type/3.html" title="肥皂">肥皂</a> <a href="//m.sbmmt.com/zh/course/list/8/type/3.html" title="RSS">RSS</a> <a href="//m.sbmmt.com/zh/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="提交">提交</a> </div> </div> </div> <div class="right"> <div id="codeResult"></div> </div> <div id="close"></div> </div> </body> </html>
