HTML5入门之有序列表

HTML5入门之有序列表

  • 有序列表
    • 说明
    • 语法
    • 演示
      • ------代码
      • ------效果
      • 属性
        • reversed属性
          • 代码
          • 效果
        • type属性
          • 代码
          • 效果
        • start属性
          • 代码
          • 效果
      • 默认样式
      • 清除默认样式
        • 清除完效果

有序列表

说明

Ol标签——代表HTML有序列表,是ordered lists的缩写
Ol标签是成对出现的,以

    开始,
结束,每一列使用
  • 标签定义内容。

    语法

    <ol>
    	<li>li>
    ol>
    

    演示

    ------代码

    
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>有序列表title>
    head>
    <body>
          <ol>
              <li>有序列表li>
              <li>有序列表li>
              <li>有序列表li>
              <li>有序列表li>
              <li>有序列表li>
          ol>
    body>
    html>
    

    ------效果

    HTML5入门之有序列表_第1张图片

    属性

    属性 描述
    compact compact HTML5 中不支持。HTML 4.01 中不赞成使用。
    reversed reversed 规定列表顺序为降序。(9,8,7…)。
    start number 规定有序列表的起始值。
    type 1 A a I i 规定在列表中使用的标记类型。

    reversed属性

    代码
    
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>有序列表title>
    head>
    <body>
          <ol reversed="reversed">
              <li>有序列表li>
              <li>有序列表li>
              <li>有序列表li>
              <li>有序列表li>
              <li>有序列表li>
          ol>
    body>
    html>
    
    效果

    HTML5入门之有序列表_第2张图片

    type属性

    代码
    
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>有序列表title>
    head>
    <body>
          <ol type="A">
              <li>有序列表li>
              <li>有序列表li>
              <li>有序列表li>
              <li>有序列表li>
              <li>有序列表li>
          ol>
    body>
    html>
    
    效果

    HTML5入门之有序列表_第3张图片

    start属性

    代码
    
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>有序列表title>
    head>
    <body>
          <ol start="3">
              <li>有序列表li>
              <li>有序列表li>
              <li>有序列表li>
              <li>有序列表li>
              <li>有序列表li>
          ol>
    body>
    html>
    
    效果

    HTML5入门之有序列表_第4张图片

    默认样式

      ol {
          display: block;
          list-style-type: decimal;
          margin-block-start: 1em;
          margin-block-end: 1em;
          margin-inline-start: 0px;
          margin-inline-end: 0px;
          padding-inline-start: 40px;
      }
      

    1. li {
          display: list-item;
          text-align: -webkit-match-parent;
      }
      

      清除默认样式

      ol,li {
                  list-style: none;
                  padding: 0px;
                  margin: 0px;
                  margin-block-start: 0px;
                  margin-block-end: 0px;
                  padding-inline-start: 0px;
              }
      

      清除完效果

      清除完效果

      你可能感兴趣的:(HTML,HTML5,前端)