• 三十八:HTML5之HTML5标签变化之新增的web应用标签和简单的使用示例


    一:状态标签

    1.meter:状态标签(实时状态显示:气压、气温)

      value:当前值
      min:最小值,当真实值小于此值时,用此值
      max:最大值,当真实值大于此值时,用此值
      low:最小安全值,小于此值时报警
      high:最大安全值,大于此值时报警
      optimum:最优值

    当不指定属性值,只有value值的时候,会默认为百分比的形式

    2.progress:状态标签(任务过程:安装、加载)

      value:当前值

      max:最大值

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>

    <!--电压:当前值220V,最小值20V,最大值380V,最小安全值200V,最大安全值240V,最优值220V-->
    <meter value="220" min="20" max="380" low="200" high="240" optimum="220"></meter>
    <br><br><br>

    <!--电压:当前值120V,最小值20V,最大值380V,最小安全值200V,最大安全值240V,最优值220V-->
    <meter value="120" min="20" max="380" low="200" high="240" optimum="220"></meter>
    <br><br><br>

    <!--默认为75%-->
    <meter value="0.75"></meter>
    <br><br><br>

    <!-- 30%进度 -->
    <progress value="30" max="100"></progress>
    <br><br><br>

    <!--没有当前值时,默认进度条一直滚动-->
    <progress max="100"></progress>
    <br><br><br>

    </body>
    </html>

    二:列表标签

    1.datalist:为input标记定义一个下拉列表,配合option标签使用,支持选择,支持搜索,支持新增输入

    2.datails:标记定义一个元素的详细内容,配合summary

      opne:opne 默认展开

    配合summary使用,替换标题

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>
    <input placeholder="请选择" list="data-list"/>
    <datalist id="data-list">
    <option value="选项1">选项1</option>
    <option value="选项2">选项2</option>
    <option value="选项3">选项3</option>
    <option value="选项4">选项4</option>
    </datalist>
    <br><br><br><br><br>

    <details>
    <p>这是文字内容</p>
    </details>
    <br><br><br><br><br>

    <details open="open">
    <summary>点击展开内容</summary>
    <p>这是文字内容</p>
    </details>
    <br><br><br><br><br>

    </body>
    </html>
    讨论群:249728408
  • 相关阅读:
    [LC] 347. Top K Frequent Elements
    [LC] 659. Split Array into Consecutive Subsequences
    [LC] 430. Flatten a Multilevel Doubly Linked List
    [LC] 271. Encode and Decode Strings
    [LC] 373. Find K Pairs with Smallest Sums
    [LC] 1048. Longest String Chain
    [LC] 297. Serialize and Deserialize Binary Tree
    ubuntu 创建 PyCharm 桌面快捷方式 (或者叫 启动器 )
    scala private 和 private[this] 的区别
    %s %r 区别 转
  • 原文地址:https://www.cnblogs.com/zhongyehai/p/14094237.html
Copyright © 2020-2023  润新知