H5-新增内容

h5:ie9以下需要适配
 1:什么是h5:对html的第五次修改;
 2:新增语义化标签:(主要是针对搜索引擎,没有顺序)
     header:头部标签
     nav:导航标签
     artical:内容标签
     section:块级标签
     aside:侧边栏标签
     footer:尾部标签
     3:注意:
         1:在ie9中需要将这些元素转换为块级元素;
         2;一般用于移动端开发时再用这些标签;
 3:新增多媒体标签:
     1:音频:autio:
         1:支持的格式有限;
             1:ogg(普遍)
             2:mp3(普遍)
             3:wav
         2:常见的属性:
             1:autoplay:资源就绪后直接播放(google浏览器把该属性禁用了)
             2:controls:向用户显示播放控件,比如播放按钮
             3:loop:循环模式
         3:不同浏览器支持不同的格式:我们准备多个格式
             <audio controls>
                <source src="xueluo.mp3" type="audio/mpeg">
                <source src="xueluo.mp3" type="audio/ogg">
            </audio>


     2:视频:video
         1:支持的格式:    
             1:ogg
             2:mpeg4
             3:webM
         2:常见的属性:
             1:autoplay(谷歌默认禁止掉了)
                 解决办法:
                     给视频添加静音属性muted
             2:muted(静音播放)
             3:controls(显示播放控件)
             4:loop:循环模式
             5:preload:预加载,如果有autoplay就忽略该属性
             6:paster:imgurl:加载等待画面的图片
         3:不同浏览器支持不同的格式
              <video controls>
                <source src="mi.mp4" type="video/ogg">
                <source src="mi.mp4" type="video/mp4">
                浏览器不支持video标签,播放视频
            </video>
    3:h5新增表单:
        重点:
            number:数字
            tel:手机号码
            search:可以清除文本框内容
        了解:
            email:输入类型必须为邮箱类型
            url:url类型
            date:日期
            time:时间
            month:月
            week:周
            color:颜色
    4:h5新增表单属性:
        1:requied,该表单拥有该属性为必填
            <input requied/>
        2:placeholder:提示文本(类似于hint)(重点)
            <input placeholder="请填写手机号码"/>
        3:autofocus:自动聚焦属性
            <input autofocus/>
        4:autocomplete:(on/off)
            <input autocomplete="on/off"/>
            浏览器基于之前输入的值进行提示
        5:multiple:可以多选文件提交(重点)
            <input multiple type="file"/>
            可以选择多个文件进行提交


 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值