Web前端学习—基础篇(7)_列表标签的划分、语法、特性

前端学习——基础篇

三、HTML学习

10、列表——块级标签

10.1、无序列表

语法

    <ul><!-- 列表容器 -->
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ul>

​ 各列表项 li 之间没有次序、级别之分，相互之间并列关系，在每个列表项中默认使用实心圆点。

特性

• 宽度默认撑满整个父元素
• 高度默认由内容撑开
• 独立成行
• 自带内填充
• 自带外间距
• 自带列表符 li

列表常用css属性

• list-style-type属性 设置列表符样式
  属性值：

  ​ none 没有列表符
  ​ disc 默认值，实心圆
  ​ circle 空心圆
  ​ square 实心方块
  ...

• list-style-position属性 设置列表符的放置位置

  属性值：

  ​ inside 列表符放在文本以内

  ​ outside 默认值，列表符放在文本的外侧

• list-style属性 以上两种属性的合并方式

  ​ list-style: list-style-type(第一个值) list-style-position(第二个值);
  ​ list-style: none; 去掉列表符

10.2、有序列表

​ 各列表项之间有次序之分

语法：

    <ol>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ol>
    <ol start="6" type="1" reversed>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ol>
	<!-- 
		start属性  	开始值（也就是有序列表的排序起始序号，默认从1开始）
        type属性  	列表符类型,如A、i、I、1
        reversed属性  倒序（如果start="0",reversed;那么有序列表的排序即为0、-1、-2）
	-->
       

特性：

• 宽度默认撑满整个父元素
• 高度默认由内容撑开
• 独立成行
• 自带内填充
• 自带外间距
• 自带列表符 li

10.3、自定义列表

语法

    <dl><!-- 列表容器 -->
        <dt>列表标题</dt>
        <dd>列表项</dd>
        <dd>列表项</dd>
        <dt>专业术语</dt>
        <dd>对专业术语的描述</dd>
    </dl>

特性

• 宽度默认撑满父元素
• 高度由内容撑开
• 独立成行
• 自带外间距