zoukankan      html  css  js  c++  java
  • h5有哪些新特性?

    html5新增标签

    mark 标记

    meter 表示度量

    progress 进度条

    ruby 注释

    rt 对ruby元素内容的解释

    rp 当浏览器不支持ruby元素的时候显示的内容

    time 表示一个时间点

    datalist:配合input使用,并且通过input的list属性和datalist的id属性进行绑定

    datalist相对于select多了一个自动查询的功能

    h5新增的表单元素

    新增的类型

      email:可以自动验证输入的字符串是否是一个合法的邮箱地址

      url:自动验证文本框内容是否是一个合法的URL地址

      number:可以指定最大最小值以及数字改变的幅度,并且可以校验输入的数字是否在指定范围内,文本框只能输入数字

      range:表示一个范围

      Date Picker:

        date:选取日、月、年

        month:选取月、年

        week:选取周和年

        time:选取时间(小时和分钟)

        datetime:选取时间、日、月、年(本地时间)

      search:搜索

      在移动端可以调取键盘的搜索按钮

    output用法

    <form oninput="x.value = parseInt(a.value) + parseInt(b.value)">
        0 <input type="range" id="a" value="50"> 100
        + <input type="number" id="b" value="50">
        = <output name="x" for="a b"></output>
    </form>

    <canvas></canvas>标签

    canvas的详细用法还需配合JavaScript使用

    audio:音频

      src:音频的资源位置

      controls:控制条

      autoplay:自动播放

      loop:循环播放

      preload:预加载

    video:视频

    视频和音频支持的格式

    用于视频:

      video / ogg

      video / mp4

      video / webm

    用于音频:

      audio / ogg

      audio / mpeg

    source:导入视频或者音频资源

    h5新增的语义标签

    header 定义section或page的页眉

    footer 定义section或page的页脚

    section 定义section

    article 定义文章

    aside 定义页面内容之外的内容  侧边栏

    都跟div的用法一模一样

    唯一的区别就是这些标签具备语义

    summary 为details元素定义可见的标题

    details 定义元素的细节

    示例:

    <details>
        <summary>点击展开</summary>
        文本详细内容···
    </details>
  • 相关阅读:
    从yum源下载软件包
    本地yum源建立
    Redis慢查询,redis-cli,redis-benchmark,info
    Centos6.6安装mysql记录
    Nginx常用命令(加入系统服务)
    Nginx+keepalived双机热备(主从模式)
    Nginx反向代理+负载均衡简单实现
    Centos7安装Python3.5
    CentOS 6.4下OpenSSH升级到6.7操作
    Redis详解
  • 原文地址:https://www.cnblogs.com/crazier/p/12470315.html
Copyright © 2011-2022 走看看