zoukankan      html  css  js  c++  java
  • HTML5知识点小结

    HTML5知识点

    一. HTML5标记方式

    html5文档类型声明

    <! DOCTYPE html>

    html5文档编码格式的指定

    <meta charset="utf–8">

    二. HTML5文档结构

     

    html5新增的内容性标签

    <header>标签:用于定义页眉信息。

    2. <nav>标签:定义导航栏。

    3. <article>标签:用于页面中可以独自被外部引用的内容,可以是一篇文章、一个评论等。

    4. <aside>标签:专门用于定义当前页面或文章的附属信息,包括相关引用、侧边栏、广告、导航等。

    5. <footer>标签:用于定义脚注部分,比如版权。

    6. ......

    三. Canvas绘图

    基本步骤:

    1. canvas标签的定义:

    <canvas id="myCanvas" width="200" height="200" style="border:1px solid #000">
    </canvas>

    2. 使用JS获取该canvas对象:

    var canvas = document.getElementById("myCanvas");
    

    3. 获取2D图形上下文对象:

    var context = canvas.getContext("2d");
    

    4. 使用context对象的属性方法进行绘制:

    context.fillStyle="#FF0000";
    context.fillRect(30,30,100,100);
    

    四. video/audio标签

    基本使用方法:

    <video src="video.mp4" width="100%" height="100%" autoplay controls></video>
    <audio src="我只在乎你.mp3" autoplay controls></audio>

    五. 拖放API

    通过拖放API可以使页面中任意元素变成可拖动的,这样有利于设计出更友好的交互界面。

    要使一个元素能够被拖动,需要为这个元素设置属性draggable="true",但这样仅仅是表示该元素允许被拖放,但在拖放时并不携带数据,用户看不到拖放的效果。这时还需要为该元素绑定事件监听器ondragstart="drag(event)",并在事件处理函数中设置所需携带的数据

    ps : <img>标签和带有 href 属性的<a>标签默认是可以拖动的

    基本语法:

    html:

    <div id="mydiv" draggable="true" ondragstart="drag(event)"
      style="100px;height:50px;background-color:#eee;">测试</div>

    js:

    var mydiv = document.getElementById("mydiv");
    function drag(e){
       //text为IE兼容写法;dataTransfer对象提供属性和方法
       e.dataTransfer.setData("text","要携带的数据");
    }
    

    六. Web存储

    HTML4中存储数据使用Cookie来实现,但是Cookie的大小被限制在4KB以下,并且Cookie会随着HTTP请求一起向服务器发送,可能会造成带宽的浪费。

    所以HTML5提供了Web Storage

    Web Storage有两种存储形式:Session Storage 和 Local Storage

    Session Storage用于保存用户浏览网站这段时间内所需要保存的数据,当网站被关闭时,保存的数据也随之丢失。即临时的存储,网站关闭,数据丢失
    Local Storage:将数据保存在客户端的硬件设备中,当浏览器关闭后,数据任然存在。(永久存储,不删除,数据不丢失

    特性总结:

    localStorage 的优势

    • 1、localStorage 拓展了 cookie 的 4K 限制。
    • 2、localStorage 会可以将第一次请求的数据直接存储到本地,这个相当于一个 5M 大小的针对于前端页面的数据库,相比于 cookie 可以节约带宽,但是这个却是只有在高版本的浏览器中才支持的。

    localStorage 的局限

    • 1、浏览器的大小不统一,并且在 IE8 以上的 IE 版本才支持 localStorage 这个属性。
    • 2、目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换。
    • 3、localStorage在浏览器的隐私模式下面是不可读取的。
    • 4、localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡。
    • 5、localStorage不能被爬虫抓取到。

    localStorage 与 sessionStorage 的唯一一点区别就是 localStorage 属于永久性存储,而 sessionStorage 属于当会话结束的时候,sessionStorage 中的键值对会被清空。

    首先在使用 localStorage 的时候,我们需要判断浏览器是否支持 localStorage 这个属性:

    if(! window.localStorage){ alert("浏览器不支持localstorage"); return false; }else{ //主逻辑业务 }localStorage 的写入有三种方法:

    if(!window.localStorage){
        alert("浏览器不支持localstorage");
        return false;
    }else{
        var storage=window.localStorage;
        //写入a字段
        storage["a"]=1;
        //写入b字段
        storage.b=1;
        //写入c字段
        storage.setItem("c",3);
        console.log(typeof storage["a"]);
        console.log(typeof storage["b"]);
        console.log(typeof storage["c"]);
    }

    重点介绍Local Storage(可以用来实现记住密码功能):

    存数据:

    localStorage.setItem(键 , 值);
    localStorage.setItem(key,value)
    

    取数据:

    var data = localStorage.getItem(键);
    

    其他属性和方法:

    localStorage.length;//返回键值对的数量
    localStorage.key(index);//返回第index个数据的key(键)
    localStorage.removeItem(key);//删除对应的数据
    localStorage.clear();//清空所有
    

    七. 本地数据库

    HTML4中数据库存放在服务器端,只能通过服务器来访问数据库,而在HTML5中内置了两种本地数据库:SQLite 和 IndexedDB(轻量级NOSQL数据库)。

    现在W3C已暂停对SQLite规范进行更新,继而把重点放在Web Storage 和 IndexedDB。

    八. Web Worker

    创建Worker对象(后台进程)多用于这些场合:抓取数据缓存本地、后台I/O处理、大数据分析或计算处理、Canvas绘图中的图形数据运算及生成处理、本地数据库中的数据存取及计算处理、计算量非常大(例如循环求1~100亿的和等等)。

  • 相关阅读:
    关于 java jdk 环境变量的配置
    Jquery ajax 参数 详解
    关于百度world 编辑器改变上传图片的保存路径图片不显示的问题
    asp.net 中日期的格式化显示的方法
    sql server数据库中 smallint, int ,bigint ,tinyint的区别与长度
    create sequence
    INSERT高级应用
    TRUNCATE TABLE
    CREATE DATABASE LINK
    bulk
  • 原文地址:https://www.cnblogs.com/meijifu/p/12679051.html
Copyright © 2011-2022 走看看