HTML列表

HTML列表

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

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

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

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

<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>桃子</li>
</ul>


li标签 -- 代表HTML列表项目

• li标签是成对出现的,以<li>开始,</li>结束
• 属性:
  • Common -- 一般属性
• li，是list item的缩写，中文"列表项"的意思

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

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

<ol>
    <li>苹果</li>
    <li>香蕉</li>
    <li>桃子</li>
</ol>

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

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

示例

<dl>
    <dt>水果</dt>
        <dd>苹果</dd>
    <dt>蔬菜</dt>
        <dd>白菜</dd>
        <dd>芹菜</dd>
    <dt>饮料</dt>
    <dt>肉食</dt>
        <dd>猪肉</dd>
</dl>


dt标签 -- 代表HTML自定义列表项目

• dt标签是成对出现的,以<dt>开始,</dt>结束
• 属性:
  • Common -- 一般属性
• dt，是definition term的缩写.term，中文"项目"的意思

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

• dd标签是成对出现的,以<dd>开始,</dd>结束
• 属性:
  • Common -- 一般属性
• dd，是definition description的缩写.description，中文"描述"的意思

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

• nl标签是成对出现的,以<nl>开始,</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嵌套列表 -- 各种列表之间的嵌套组合

• 各种列表之间的嵌套组合

示例

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