zoukankan      html  css  js  c++  java
  • 1:新增 H5 常用属性

     

      

     一  语义化标签

    1)常用标签

    <header></header> //1 头部标签
    <nav></nav> //2 导航标签
    <asite></asite> //3 侧边栏标签
    <article></article> //4 内容标签
    <section></section> //5 块级标签
    <footer></footer> //6 底部标签

     2)使用要点

    1 语义化标签主要针对搜索引擎的

    2 这些标签在页面中可以多次使用

    3 在IE9中 这些语义标签需要转换为块级元素

    4 语义标签更多使用在移动端 PC端使用很少

    二   新增的多媒体标签

    1) 音频

    各浏览器支持的音频格式

    默认的控件样式

    基本语法

    <audio src="video/xue.mp3" controls="controls" autoplay="autoplay"></audio>

    常用属性

    autoplay: autoplay; //1 自动播放
    
    controls: controls;  //2 显示控件
    
    loop:loop //3 循环播放
    
    src  //4 音频文件路径

    兼容性写法

    准备多种后缀的音频格式文件,扩展兼容性
    
    <audio controls="controls">
      <source src="media/snow.mp3" type="audio/mpeg" />
      <source src="media/snow.ogg" type="audio/ogg" />
      您的浏览器不支持播放声音
    </audio>
    
    //1 多个文件的路径写在source里面
    //2 Chrome浏览器禁用了autoplay属性
    //3 音频格装换工具:推荐格式工厂

    2)视频

    各浏览器支持的格式

    基本语法

    <video width="600px" src="video/mi.mp4" controls="controls" loop="loop" autoplay="autoplay"></video>

    常用属性

    autoplay  //1 自动播放 [Chrome浏览器需要添加 muted 属性解决自动播放]
    controls  //2 显示控件
    width  //3 宽度
    height //4 高度
    loop //5 循环播放
    proload //6 是否等加载完成再播放
    poster="图片的路径"  //7 加载等待的画面图片
    muted   //8 静音播放

     兼容写法

    <video controls muted poster="video/ym.jpg">//属性可以简写
        <source src="video/mi.mp4" type="video/mp4">
        <source src="video/mi.ogg" type="video/ogg">
        浏览器不支持播放此视频
    </video>

    三 表单相关

    1)新增 input 表单

    email   邮箱类型
    url url类型
    date 日期类型
    time 时间类型
    month 月类型
    week 周类型
    number 数字类型 e是可以输入的 其他不行
    tel 手机号
    search 搜索框
    color 颜色表单

    2)新增input 属性

    required = "required";  //1 必填
    
    placeholder = "提示内容"; //2 提示文本 占位符
    
    autofocus="autofocus"; //3 自动获取焦点
    
    autocomplete="off|on" //4 默认是on开启的
    使用要求:表单必须有name属性 并且成功提交
    
    <input type="file" multiple="multiple"> //5 多选文件上传 [ 文件域有关 ]

      

  • 相关阅读:
    zabbix中文配置指南(转)-服务器监控
    Native Fullscreen JavaScript API (plus jQuery plugin)
    浅谈 HTML5 的 DOM Storage 机制 (转)
    How to Customize Server Header using NginX headers-more module
    编译安装nginx并修改版本头信息—参考实例
    nginx 去掉服务器版本和名称和nginx_status 状态说明
    修改NGINX版本名称为任意WEB SERVER
    php加速缓存Xcache的安装与配置
    nginx-rrd监控nginx访问数
    Egret3D初步笔记二 (Unity导出场景使用)
  • 原文地址:https://www.cnblogs.com/fuyunlin/p/14350858.html
Copyright © 2011-2022 走看看