HTML5

来源：互联网发布：windows清理助手在哪儿编辑：程序博客网时间：2024/06/16 08:18

HTML5总结

新特性

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

声明

<!DOCTYPE html>

这个要永远放在html文件的第一行，用来声明html的版本。

新标签

article
专门用于文章的标签。

<article>    <h3>胜利的歌声</h3>    <p>昨日，在梁漱溟广场前，人民欢歌载舞。</p></article>

header和footer
用于页面的页眉和页脚。

<header>    <h2>欢迎来到王者荣耀！</h2></header><footer>    <p>2017 Copyrights by Michael Chan. All Rights Reserved.</p></footer>

hgroup
用于定义标题组。

<hgroup>    <h1>Welcome to my WWF</h1>    <h2>For a living planet</h2></hgroup>

datalist
和传统的input标签结合可以有下拉框的效果。不过个人认为交互效果并不是很好，因为选择了以后要先手动删除文字才能选择另外的选项。

<input list="cars"><datalist id="cars">    <option value="宝马">    <option value="奔驰">    <option value="特斯拉"></datalist>

aside和nav
分别对应边栏以及导航条。

<nav>    <a href="">2017年1月</a>    <a href="">2017年2月</a>    <a href="">2017年3月</a>    <a href="">2017年4月</a>    <a href="">2017年5月</a></nav><aside>    <h2>猪猪的生活</h2>    <a href="">2017年1月</a><br>    <a href="">2017年2月</a><br>    <a href="">2017年3月</a><br>    <a href="">2017年4月</a><br>    <a href="">2017年5月</a><br></aside>

视频和音频

从通用型来讲，MPEG4（带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件）是最安全的。

这里写图片描述

视频的属性还是毕竟容易理解的。

为了兼容多个浏览器，可以在video标签中间写入多个视频的地址。

<video width="320" height="240" controls="controls">    <source src="movie.ogg" type="video/ogg">    <source src="movie.mp4" type="video/mp4"></video>

音频的使用和视频差不多，最安全的是MP3格式。

拖拽

任何元素标签中加入draggable=true就可以被拖拽了。

然后和他相关有三个时间，一个是ondragstart，另外一个是ondragover，以及ondrop。

function allowDrop(ev){ev.preventDefault();}function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}function drop(ev){ev.preventDefault();var data=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));}

canvas

画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

定义一个canvas很简单。

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

但他本身并没有任何的绘图能力，只能通过js来绘制。getContext(“2d”) 返回的对象（CanvasRenderingContext2D）是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

关于CanvasRenderingContext2D的所有方法见此网站。

感觉这个canvas和ios中的自定义view非常像。

运行报错TypeError: Cannot read property ‘getContext’ of null 。错误
原因是在html加载之前就运行了js，所以我们使用：

$(document).ready(function(){//drawing function});

就可以解决问题了。

画线

crc.moveTo(0,0);crc.lineTo(90,10);crc.lineTo(20,80);crc.stroke();})

矩形

crc.fillStyle="#FF0000";crc.fillRect(0,0,150,75);

圆

crc.beginPath();crc.arc(100,100,30,0,2*Math.PI,true)crc.closePath();crc.stroke(); //边线crc.fill(); //填充

图像

var img=new Image();  img.src="your picture src";crc.drawImage(img,0,0,300,200);

SVG

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)。HMTL5提供支持SVG的方法。

Web存储

HTML5提供两种储存方式：
* localStorage - 没有时间限制的数据存储
* sessionStorage - 针对一个 session 的数据存储

以往完成web的储存需要使用cookie，但是现在通过js就能完成本地的大容量数据储存。

对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

localStorage

$(document).ready(function(){    if (typeof(Storage) != "undefined") {        localStorage.setItem("michael", "mchanc5");        document.getElementById("display").innerHTML = localStorage.getItem("michael");    }else {        document.getElementById("display").innerHTML = "good!";    }});

sessionStorage
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

$(document).ready(function(){    if (typeof(Storage) != "undefined") {        if(sessionStorage.pageNumber) {            sessionStorage.pageNumber = Number(sessionStorage.pageNumber) + 1;         } else {            sessionStorage.pageNumber = 1;        }        document.getElementById("display").innerHTML = sessionStorage.pageNumber;    }else {        document.getElementById("display").innerHTML = "good!";    }});

Web Worker

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行（一般是耗费CPU资源的进程）。

首先我们来编写一个额外的js文件，用于执行计时的功能。

var i = 1000;function countdown() {    i = i - 1;    postMessage(i);    setTimeout("countdown()", 1000);}countdown();

注意到postMessage()这个函数，它用于向 HTML 页面传回一段消息。

function start() {    if (typeof(Worker != "undefined")) {        if (typeof(w) == "undefined") {            w = new Worker("countdown.js");        }        w.onmessage = function(ev) {            document.getElementById('display').innerHtml = ev.data;        }    } else {        document.getElementById('display').innerHtml = "Your Broswer does not support this brand-new tech XD!"    }}function stop() {    if (typeof(Worker != "undefined")) {        if (typeof(w) != "undefined") {            w.terminate();        } else {            alert("点击“开始worker”开始体验");        }    } else {        document.getElementById('display').innerHtml = "Your Broswer does not support this brand-new tech XD!"    }}

不过在chrome里面直接运行会报错，只有部署到web服务器上才能正常运行。

阅读全文

0 0