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

列表——块级元素

1、无序列表

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

• 语法

<ul>
	<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;">列表项1li>
        <li style="list-style-type:disc;">列表项2li>
        <li style="list-style-type: circle;">列表项3li>
        <li style="list-style-type: square;">列表项4li>
        <li style="list-style-position: inside;">列表项5li>
        <li style="list-style-position: outside;">列表项6li>
        <li style="list-style-type:circle;list-style-position: inside;">列表项7li>
        <li style="list-style: circle inside;">列表项7li>
    ul>

    
    <ul>
        <li style="list-style:none;">1li>
        <li>2li>
        <li style="list-style: square inside;">3li>
    ul>

2、有序列表

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

• 语法

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

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

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

3、自定义列表

• 语法

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

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

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

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

ul、ol、dl分别使用在哪

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

ol一般使用在热点排行榜

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