前端 HTML列表

a标签 利用锚点来跳转指定锚点处

      定义锚点
      <div id='锚点名称'></div>
      引用锚点
      <a href="#锚点名称">内容</a>

1、HTML列表

1、无序列表

各列表项之间没有次序，各项之间为并列关系

• 语法

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

• 特性

  • ul 和 li 标签都是块级标签

  • 宽度默认撑满整个父元素

  • 高度默认由内容撑开

  • 独立成行

  • 自带外间距

  • 自带内填充

  • 自带列表符，去掉自带列表符 li{ list-style: none; }

• css属性

  • list-style-type属性：列表符类型

    • circle空心圆|disc实心圆，默认值|square实心正方形|none去掉列表符

• 应用场景 : 新闻列表 、导航 、商品列表

• 注意：ul的直接子元素只能是li

2、有序列表

有排列次序，各项之间为并列关系

• 语法

    <ol><!-- 列表容器 -->
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ol>
    <ol start="6" reversed type="I">
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ol>
     strat属性:开始值 写在 <ol start="6"></ol>开始标签中
     reversed属性：倒叙  写在 <ol reversed></ol>开始标签中
​
type属性（了解）
​
- `a`: 小写字母
​
- `A`: 大写字母
​
- `i`: 小写罗马数字
​
- `I`: 大写罗马数字
​
- `1`: 数字 默认值
​
​
  <!-- 倒序和开始值 -->
  <!-- 从10开始进行倒序  10  9 ... -->
  <ol start="10" reversed>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
  </ol>
​

• 特性 与无序列表基