HTML5学习笔记

一、HTML5

HTML5 新特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
语义元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search
使用 CSS3

DOCTYPE

HTML5 的<!DOCTYPE html>声明必须位于文档中的第一行,是document type (文档类型) 的缩写，主要作用是告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面。

浏览器支持

最新版本的 Safari、Chrome、Firefox、Opera以及Internet Explorer 9支持某些 HTML5 特性。

二、HTML5新元素

标签	描述
`<canvas>`	基于 JavaScript 的绘图 API，可绘图表和图像
`<audio>`	音频
`<video>`	视频
`<source>`	多媒体资源 `<video>` 和 `<audio>`

语义元素：能够清楚的描述其意义给浏览器和开发者

标签	描述
`<article>`	页面独立的内容区域
`<aside>`	页面的侧边栏内容
`<header>`	文档的头部区域
`<footer>`	`section` 或 `document` 的页脚
`<nav>`	导航链接的部分
`<section>`	文档中的节（section、区段）

`1、<canvas>`

<canvas>元素用于图形的绘制，标签只是图形容器，必须使用脚本（JavaScript）来绘制图形。

<canvas id="myCanvas" width="200" height="100"></canvas>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");// 创建 context 对象,getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

// 绘制矩形
ctx.fillStyle="#FF0000"; // CSS颜色，渐变，或图案
ctx.fillRect(0,0,150,75);// 定义了矩形当前的填充方式

// 绘制路径
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

canvas更多方法

2、内联 SVG

SVG 指可伸缩矢量图形，使用 XML 格式，图像在放大或改变尺寸的情况下其图形质量不会有损失，是可伸缩的。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>

SVG 与 Canvas两者间的区别

Canvas	SVG
通过 JavaScript 来绘制 2D 图形，不支持事件处理器	使用 XML 描述 2D 图形，SVG DOM 中的每个元素都是可用的，可以为某个元素附加 JavaScript 事件处理器
依赖分辨率	不依赖分辨率

3、拖放（Drag 和 Drop）

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">

function allowDrop(ev)
{
    ev.preventDefault();// 默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式
}

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
    ev.preventDefault();// 避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

4、地理定位

Geolocation API 用于获得用户的地理位置，需用户允许才可定位。navigator.geolocation.getCurrentPosition（）

<!--引入百度 API，"ak="添加自己申请的秘钥-->
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=7a6QKaIilZftIMmKGAFLG7QT1GLfIncg"></script>

function getLocation() {
    var geolocation = new BMap.Geolocation();// 创建百度地理位置实例，代替 navigator.geolocation
    geolocation.getCurrentPosition(function(e) {
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            x.innerHTML = '纬度：' + e.point.lat + '<br/>经度：' + e.point.lng;
        } else {
            x.innerHTML = 'failed' + this.getStatus();
        }
    });
}

`5、<video>和<audio>`

<video> 提供了播放、暂停和音量控件来控制视频，也提供了 width 和 height 控制视频的尺寸。如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，页面就会根据原始视频的大小而改变。

元素支持多个 <source> 元素，<source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 HTML5 video 标签。
</video>

使用 DOM 进行控制：

<video> 和 <audio>元素的方法、属性和事件可以使用JavaScript进行控制，其中的方法用于播放、暂停以及加载等，其中的属性（比如时长、音量等）可以被读取或设置。

  <button onclick="playPause()">播放/暂停</button> 
  <button onclick="makeBig()">放大</button>
  <video id="video1" width="420">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    您的浏览器不支持 HTML5 video 标签。
  </video>
  
  var myVideo = document.getElementById("video1");
  function playPause() {
    if (myVideo.paused)
        myVideo.play();
    else
        myVideo.pause();
   }
   function makeBig() {
    myVideo.width = 560;
   }

`6、<form>和<input>`

HTML5 拥有多个新的表单输入类型,提供了更好的输入控制和验证。type包括：color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week。 <form>添加了新属性autocomplete和novalidate；<input>添加了新属性如autocomplete 、autofocus、min 与 max、height 与 width、multiple、pattern (regexp)、placeholder和required。

三、HTML5新功能

1、Web 存储（localStorage 和 sessionStorage ）

Web 存储使本地存储用户数据更加的安全与快速，数据不会被保存在服务器上，可以存储大量的数据，而不影响网站的性能。数据以键/值对存在,只允许该网页访问使用。

localStorage：用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage ：用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据

常用的API：

保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);

当存储的数据格式比较复杂时（如对象），可使用序列化JSON.stringify 将对象转换为字符串存储，获取后再通过 JSON.parse()将字符串反序列化。

2、Web SQL 数据库

Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。

核心方法：

openDatabase：使用现有的数据库或者新建的数据库创建一个数据库对象。

// 五个参数说明：数据库名称，版本号，描述文本，数据库大小，创建回调
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

transaction：让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
executeSql：用于执行实际的 SQL 查询。

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

db.transaction(function (tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');
    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
});

db.transaction(function (tx) {
    tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
        var len = results.rows.length,msg=''
        for (let i = 0; i < len; i++) {
            msg += results.rows.item(i).log 
        }
    }, null);
});

HTML5学习笔记

一、HTML5

HTML5 新特性：

DOCTYPE

浏览器支持

二、HTML5新元素

1、<canvas>

2、内联 SVG

3、拖放（Drag 和 Drop）

4、地理定位

5、<video>和<audio>

6、<form>和<input>

三、HTML5新功能

1、Web 存储（localStorage 和 sessionStorage ）

2、Web SQL 数据库

3、应用程序缓存

4、Web Workers

5、服务器发送事件(Server-Sent Events)

6、WebSocket

`1、<canvas>`

`5、<video>和<audio>`

`6、<form>和<input>`