html语言基础li,HTML: <li> 标签

HTML:

标签

HTML

标签在HTML文档的
  • 元素。

    在线示例

    HTML 两个列表示例: 一个有序列表 (

    1. ) 和 一个无序列表 (
    • ) :

    示例html>

    HTML5 li标签的使用(基础教程网 nhooo.com)
    1. First item
    2. Second item
    3. Third item
    4. Fourth item
    • First item
    • Second item
    • Third item
    • First item
      1. Nested item A
      2. Nested item B
      3. Nested item C
      4. Nested item D
    • Second item
    • Third item
    • Fourth item

    测试看看 ‹/›

    在此HTML5文档示例中,我们有一个带有四个

  • 列表项的有序列表
    1. 标记。然后,我们有一个带有三个
    2. 列表项的无序列表
      • 标记。最后,我们在无序列表
        • 标记中嵌套了有序列表
      1. 标记。

      浏览器兼容性

      IEFirefoxOperaChromeSafari

      目前多数主流浏览器支持

    3. 标签。

      标签定义及使用说明

    4. 标签定义列表项目。
    5. 标签可用在有序列表(
      1. )、无序列表(
      • )和菜单列表(

      您可以嵌套

      HTML 4.01 与 HTML5之间的差异

      "type" 属性 在 HTML 4.01 已被废弃。HTML5 不支持该属性。

      "value" 属性 在 HTML 4.01 已被废弃。HTML5 不支持该属性。

      提示和注意

      提示:请使用 CSS 来定义列表和列表项目的类型。

      属性属性值描述

      1

      A

      a

      I

      i

      disc

      square

      circleHTML5 不支持该属性。HTML 4.01 已废弃该属性。

      不赞成使用。请使用样式取代它。

      规定使用哪种项目符号。

      字符值,指示编号样式。它可以是以下任意值:

      a-表示小写

      A-表示大写

      i-表示小写罗马数字

      I-表示大写罗马数字

      1-表示数字

      number不赞成使用。请使用样式取代它。

      规定列表项目的数字。

      全局属性

    6. 标签支持全局属性,查看完整属性表 HTML 全局属性。

      事件属性

    7. 标签支持所有 HTML 事件属性。

      在线示例

      不同类型的有序列表

      本示例演示不同类型的有序列表。

      不同类型的无序列表

      本示例演示不同类型的无序列表。

      嵌套列表

      本示例演示如何嵌套列表。

      嵌套列表 2

      本示例演示更复杂的嵌套列表。

      自定义列表

      本示例演示一个定义列表。

      相关文章

      HTML 教程: HTML 列表

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
请帮助我把每一行代码写上注释:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- <link href="./1321.css" type="text/css"/> --> <title>导航栏</title> <style> *{ margin: 0; padding: 0; box-sizing:border-box; font-family:"Poppins",sans-serif; } .cantainer{ width:100%; height:100vh; background-color: #e092a1; background-size: 100% 100%; display:flex; align-items: center; justify-content: center; } nav{ background: #fff; border-radius: 50px; padding: 10px; box-shadow: 0 25px 20ox -20px rgba(0 , 0, 0, 0.4); } nav ul li{ list-style: none; display: inline-block; padding: 13px 35px; margin: 10px; font-size: 18px; font-weight: 500; color: #777; cursor: pointer; position: relative; z-index: 2; transform: color 0.5s; } nav ul li::after{ content:''; background:#f44566; width: 100%; height: 100%; border-radius: 30px; position: absolute; top: 100%; left: 50%; transform: translate(-50% ,-50%); z-index: -1; opacity: 0; transition:top 0.5s,opacity 0.5s; } nav ul li:hover{ color: #fff; } nav ul li:hover:after{ top:50%; opacity: 1; } a{ text-decoration: none; color: #706363; text-decoration: none; } .enen{ width: 10%; height: 10%; } </style> </head> <body> <div class="cantainer"> <nav> <ul> <li ><a href="">1</a></li> <li ><a href="">2</a></li> <li ><a href="">3</a></li> <li ><a href="">4</a></li> <li ><a href="">5</a></li> <li ><a href="" >6</a></li> </ul> </nav> </div> </body> </html>
05-30
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值