9、html三种列表无序列表、有序列表、自定义列表

列表——块级元素

1、无序列表

无次序、无级别，列表项之间是并列关系

• 语法

<ul>
	<li>列表项</li>
	<li>列表项</li
	<li>列表项</li
</ul>

• 特性
  • 宽度默认撑满整个父元素
  • 高度默认由内容撑开
  • 独立成行——垂直布局
  • 自带间距
  • 自带填充
  • 自带列表符
• css属性
  • list-style-type属性 列表符类型
    • none 无列表符号
    • disc 实心圆，默认
    • circle 空心圆
    • square 实心方块
  • list-style-position属性
    • inside 列表符放在文本内
    • outside默认值，列表符放在文本的外侧
  • list-style属性
    • list-style: list-style-tpye list-style-position;
    • list-style: none;去掉列表符
      例：

<ul><!-- 列表容器 -->
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ul>
    <!-- 列表符 -->
    <ul>
        <li style="list-style-type:none;">列表项1</li>
        <li style="list-style-type:disc;">列表项2</li>
        <li style="list-style-type: circle;">列表项3</li>
        <li style="list-style-type: square;">列表项4</li>
        <li style="list-style-position: inside;">列表项5</li>
        <li style="list-style-position: outside;">列表项6</li>
        <li style="list-style-type:circle;list-style-position: inside;">列表项7</li>
        <li style="list-style: circle inside;">列表项7</li>
    </ul>

    <!-- 无序列表   第一个列表项没有列表符，第二个列表项默认列表符，第三个列表项实心方块，在文本内显示 -->
    <ul>
        <li style="list-style:none;">1</li>
        <li>2</li>
        <li style="list-style: square inside;">3</li>
    </ul>

2、有序列表

有排列次序，各个列表项之间是并列关系

• 语法

<ol>
	<li>列表项</li>
	<li>列表项</li>
	<li>列表项</li>
</ol>
<ol start="5" type="a" reversed>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
</ol>

• start属性： 开始值
• type属性：列表符类型
• reversed属性：倒序
• 特性
  • 与无序列表基本一致
    例：

 <ol><!-- 列表容器 -->
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ol>
    <hr>
    <ol start="6">
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ol>
    <ol start="1" type="i">
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ol>
    <ol start="5" type="a" reversed>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ol>

3、自定义列表

• 语法

<dl>
	<dt>列表标题  或专业术语</dt>
	<dd>列表项或对专业术语的解释1</dd>
	<dd>列表项或对专业术语的解释2</dd>
	<dd>列表项或对专业术语的解释3</dd>
</dl>

浏览器显示，dd标签中的内容锁紧显示

• 特性
  • 宽度默认撑满整个父元素
  • 高度默认由内容撑开
  • 独立成行——垂直布局
  • 自带间距
    例：

<dl>
        <dt>列表标题</dt>
        <dd>列表项1</dd>
        <dd>列表项2</dd>
        <dd>列表项3</dd>
    </dl>
    <dl>
        <dt>html</dt>
        <dd>超文本标记语言</dd>
        <dd>使用标记来描述网页</dd>
        <dt>css</dt>
        <dd>层叠样式表</dd>
    </dl>

ul、ol、dl分别使用在哪

使用：ul使用的地方，顶部导航

ol一般使用在热点排行榜

使用：dl使用的地方，底部指南