HTML列表

Posted 2020-07-27 逝意遨游

HTML列表

常用的列表分为3种,无序列表(使用<ul>标签),有序列表(使用<ol>标签),自定义列表(使用<dl>标签).

html列表可以逐行显示信息,是HTML非常重要的组成部分.

ul 标签 -- 代表HTML无序列表

• ul标签是成对出现的,以<ul>开始,</ul>结束
• 每一列使用<li>标签定义,每一列使用一个点作为开头
• 引用网址:http://www.dreamdu.com/xhtml/tag_ul/
• 属性:
  • Common -- 一般属性
• ul，是unordered lists的缩写，中文"无序列表"的意思

<ul>
    <li>www</li>
    <li>dreamdu</li>
    <li>com</li>
</ul>
li 标签 -- 代表HTML列表项目

• li标签是成对出现的,以<li>开始,</li>结束
• 引用网址:http://www.dreamdu.com/xhtml/tag_li/
• 属性:
  • Common -- 一般属性
• li，是list item的缩写，中文"列表项"的意思

ol 标签 -- 代表HTML有序列表

• ol标签是成对出现的,以<ol>开始,</ol>结束
• 每一列使用<li>标签(与无序列表相同)定义,每列使用数字或字母开头.
• 引用网址:http://www.dreamdu.com/xhtml/tag_ol/
• 属性:
  • Common -- 一般属性
• ol，是ordered lists的缩写，中文"有序列表"的意思

<ol>
    <li>www</li>
    <li>dreamdu</li>
    <li>com</li>
</ol>

dl 标签 -- 代表HTML自定义列表

• dl标签是成对出现的,以<dl>开始,</dl>结束
• 自定义列表的开始使用<dl>标签,列表中每个元素的标题使用<dt>(definition term)定义,后面跟随<dd>(definition description)用于描述列表中元素的内容.
• 引用网址:http://www.dreamdu.com/xhtml/tag_dl/
• 属性:
  • Common -- 一般属性
• dl，是definition lists的英文缩写，中文"定义列表"的意思

示例

<dl>
    <dt>www</dt>
        <dd>World Wide Web的缩写.</dd>
    <dt>dreamdu</dt>
        <dd>梦之都.</dd>
        <dd>www的:).</dd>
    <dt>com</dt>
    <dt>com.cn</dt>
    <dt>cn</dt>
        <dd>这都是域名的后缀.</dd>
</dl>
dt 标签 -- 代表HTML自定义列表项目

• dt标签是成对出现的,以<dt>开始,</dt>结束
• 引用网址:http://www.dreamdu.com/xhtml/tag_dt/
• 属性:
  • Common -- 一般属性
• dt，是definition term的缩写.term，中文"项目"的意思

dd 标签 -- 代表HTML自定义列表描述

• dd标签是成对出现的,以<dd>开始,</dd>结束
• 引用网址:http://www.dreamdu.com/xhtml/tag_dd/
• 属性:
  • Common -- 一般属性
• dd，是definition description的缩写.description，中文"描述"的意思

nl 标签 -- 代表HTML导航列表

• nl标签是成对出现的,以<nl>开始,</nl>结束
• 引用网址:http://www.dreamdu.com/xhtml/tag_nl/
• 属性:
  • Common -- 一般属性
• nl，是navigation lists的英文缩写，中文"导航列表"的意思

示例

<nl>
     <label>梦之都</label>
     <li href="#introduction">介绍</li>
     <li>
     <nl>
         <label>网址(http://www.dreamdu.com/)</label>
         <li href="#http">http://</li>
         <li href="#www">www</li>
         <li href="#dreamdu">dreamdu</li>
         <li href="#com">com</li>
     </nl>
     </li>
     <li href="#html">html教程</li>
     <li href="#css">css教程</li>
</nl>

HTML嵌套列表 -- 各种列表之间的嵌套组合

• 引用网址:http://www.dreamdu.com/xhtml/all_list/
• 各种列表之间的嵌套组合

示例

<ul>
    <li>www.</li>
    <li>dreamdu
        <dl>
            <dt>dream</dt>
            <dd>梦</dd>
            <dt>du</dt>
            <dd>实现你的梦想</dd>
        </dl>
    </li>
    <li>.com</li>
</ul>