Erlo

html5学习第一天

时间:2019-03-15 16:02   阅读:16次   来源:博客园页面报错

点赞 打赏

×打赏

支付宝

微信

1.语义标签解决方案

 

<video></video>

属性:

  controls 显示控制栏

  autoplay 自动播放

  loop  设置循环播放

多媒体标签在网页中的兼容效果方式

<video>

  <source src="1.mp4"></source>

  <source src="1.ogg"></source>

  <source src="1.webm"></source>

</video>

视频的格式有3种,这样写,如果当前的浏览器支持第一种,那么她就不会加载其他2种,如果不支持第1种,支持第2种也是这样,不加载第一种和最后一种。

 

2.新表单元素及属性

  a.智能表单控件    

    <input type="email">

    email:输入合法的邮箱地址

    url:输入合法的网址

    number:只能输入数字

    range:滑块

    color:拾色器

    date:显示日期

    month:显示月份

    week:显示第几周

    time:显示时间

 

  b.表单属性 

 

    form属性

    <form action="" autocomplete="off" novalidate = true></form>

    autocomplete    onoff          自动完成

    novalidate        true|false       是否关闭校验

  

    input属性


    autofocus 自动获取焦点

    form 如果有个input在form表单单外面,但是要用from表单里面的input【submit】来提交

    <form id="test">

      <input type="text" >

      <input type="submit">

    </form>

    <input type="text" form="test">

 

    list 

    <input type="text" list="abc">

    <datalist id="abc">

      <option value="123">123</option>

      <option value="124">124</option>

      <option value="125">125</option>

    </datalist>

 

    multiple 实现多选效果

    placeholder 占位符(提示信息)

    required 必填项

 

3.html5的API

  获取页面元素及类名操作和自定义属性

   js方式

    document.querySelector("选择器")

    备注

      选择器:可以是css中任意一种选择器

      通过该选择器只能选中第一个元素

    

    document.querySelectorAll("选择器");
    备注
      与document.querySelector区别: querySelectorAll 可以选中所有符合选择器规则的元素,返回的是一个列表。

        querySelector返回的只是单独的一个元素

  

  Dom.classList.add("类名"): 给当前dom元素添加类样式

    Dom.classList.remove("类名"); 给当前dom元素移除类样式

  classList.contains("类名"); 检测是否包含类样式

  classList.toggle("active"); 切换类样式(有就删除,没有就添加)

例子:

  

效果:

 自定义属性 

  data-自定义属性名
  备注:
    在标签中,以data-自定义名称

    1. 获取自定义属性 Dom.dataset 返回的是一个对象

     Dom.dataset.属性名 或者 Dom.dataset[属性名]

    注意:
      属性名是不包含data-

 

    2. 设置自定义属性
    Dom.dataset.自定义属性名=值 或者 Dom.dataset[自定义属性名]=值;

 

  文件读取

  FileReader
  FileReader 接口有3个用来读取文件方法返回结果在result中
  readAsBinaryString ---将文件读取为二进制编码
  readAsText ---将文件读取为文本
  readAsDataURL ---将文件读取为DataURL  

  ☞ FileReader 提供的事件模型
    onabort 中断时触发
    onerror 出错时触发
    onload 文件读取成功完成时触发
    onloadend 读取完成触发,无论成功或失败
    onloadstart 读取开始时触发
    onprogress 读取中

  获取网络状态

    ☞ 获取当前网络状态
      window.navigator.onLine 返回一个布尔值

    ☞ 网络状态事件
      1. window.ononline
      2. window.onoffline
      

    获取地理定位

    ☞ 获取一次当前位置
      window.navigator.geolocation.getCurrentPosition(success,error);

      1. coords.latitude 维度
      2. coords.longitude 经度

    ☞ 实时获取当前位置
      window.navigator.geolocation.watchPosition(success,error);

 

    本地存储

      ☞发展:
   随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,传统方式我们以document.coo进行存储的,但是由于其存储大小只有4k左右,并且解析也相当的复杂,给开发带来诸多不便,HTML5规范则提出解决方案,使用sessionStorage和localStorage存储数据。

      

      ☞ localStorage:
        1. 永久生效
        2. 多窗口共享
        3. 容量大约为20M

      ◆window.localStorage.setItem(key,value) 设置存储内容
      ◆window.localStorage.getItem(key) 获取内容
      ◆window.localStorage.removeItem(key) 删除内容
      ◆window.localStorage.clear() 清空内容

      ☞ sessionStorage:
        1. 生命周期为关闭当前浏览器窗口
        2. 可以在同一个窗口下访问
        3. 数据大小为5M左右

        ◆window.sessionStorage.setItem(key,value)
        ◆window.sessionStorage.getItem(key)
        ◆window.sessionStorage.removeItem(key)
        ◆window.sessionStorage.clear()

    操作多媒体

    http://www.w3school.com.cn/html5/html5_ref_audio_video_dom.asp

下一篇:css公共库——清除浮动

评论留言

还没有评论留言,赶紧来抢楼吧~~

Erlo大厅()

* 这里是“吐槽厅”,所有人可看,只保留当天信息。

  • Erlo.vip2019-03-19 12:39:01Hello、欢迎使用吐槽厅,这里是个吐槽的地方。
  • 首页 笔记分享 案例展示 ERLO 搜索
    鼠标试试
    返回顶部