css和html5

html经过了第5次重大改版,增加了一些语义化的标签 高版本浏览器支持,ie9以下不支持, html5是向后兼容的,原来html4的 标签仍然可以用

1、新特性

  • 新增语义化元素

  • 新增表单相关新元素、新属性

  • 新增canvas元素

    • canvas 元素使用JavaScript 在网页上绘制图像

  • 新增了多媒体相关的video和audio元素

  • 地理信息

    • HTML5通过引入Geolocation的API可以通过GPS或网络信息实现用户的定位功能,定位更加准确、灵活

  • 对本地存储的更好支持

    • 本地存储:提供两种客户端存储数据的方法

      • localStorage存储

      • sessionStorage存储

说明:兼容性是指(时间维度)

向后兼容, 就是本设备(或者软件)跟更老的设备比较, 是否可以读取更老设备的数据

向前兼容,就是指本设备跟更新设备比较, 是否可以读取更新设备产生的数据

  • 语法

    <aside></aside>
  • 语义:定义当前页面或文章的附属信息部分

  • 典型应用:侧边栏、标注框、广告等

  • HTML5中视频标准方法

  • IE8及更早版本的浏览器中不支持video标签

  • HTML5支持的视频格式:

    • ogg 支持的浏览器chrome、Firefox、Opera

    • MPEG4--mp4 支持的浏览器chrome、Firefox、Safari、IE9+

    • WebM 支持的浏览器chrome、Firefox、Opera

  • 语法

加controls属性才可以播放
<video src="./file/movie.mp4" controls></video>
行内块标签
  • 常用属性

    • src属性:视频文件的路径

    • controls属性:视频播放控件

    • loop属性:循环播放

    • muted属性:静音

    • width属性、height属性:视频播放器的宽度和高度

    • poster属性:预览图片,视频正在下载时显示的图像

    • autoplay属性:自动播放,必须静音后在播放

 <video controls poster="./img/01.jpg" width="200" height="200">
        <source src="file/movie.mp4" type="video/mp4">
        <source src="file/movie.ogg" type="video/ogg">
        <source src="file/movie.webm" type="video/webm">
    </video>

3、source音频媒介标签

允许使用source标签 引入多个音频、视频资源,浏览器使用第一个可以被识别的格式

     <source src="" type="audio/ogg">
    <source src="" type="video/mp4">
​
 <!-- 音频 -->
    <audio controls>
        <source src="../file/movie.ogg" type="audio/ogg">
        <source src="../file/zhoujie.mp3" type="audio/mp3">
    </audio>
​
    <!-- 视频 -->
    <video controls>
        <source src="../file/guo.mp4" type="video/mp4">
        <source src="../file/movie.webm" type="video/webm">
        <source src="../file/movie.ogg" type="video/ogg">
    </video>
​

6、新增表单元素和表单属性

1、表单元素

  • 包含访问协议的完整路径的输入域,在提交表单时,自动验证url域的值

    <input type="url" placeholder="请输入地址" name="userURL">
  • 包含e-mail地址的输入域,在提交表单时,自动验证email域的值

    <input type="email" placeholder="请输入邮箱地址" name="usermail">
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值