HTML5

最新推荐文章于 2024-09-11 17:25:08 发布

MC米糕陈

最新推荐文章于 2024-09-11 17:25:08 发布

阅读量205

点赞数

分类专栏： html web 文章标签： html5 html

本文链接：https://blog.csdn.net/m0_38016385/article/details/78187399

版权

web 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

html

0 篇文章 0 订阅

订阅专栏

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!"
    }
}