HTML5学习-0-基础知识-CSDN博客

本文链接：https://blog.csdn.net/attack_breast/article/details/110002720

前言

自己基于HTML4 + JQery开发好几年了，然后HTML5一直没怎么认真看，因此，想趁着不忙的时候，把HTML5认真看一遍，看看与HTML4的区别在哪里，方便快速掌握HTML4与HTML5开发；

学习网站：W3school

个人学习看法

通过快速浏览HTML5，感觉H5相比H4变化很多，让H5越来越像后台语言，有一种想统一电脑浏览器、Android、IOS的趋势，因此，我也不可能看一遍就能全部学会，想要学会还必须多练习，我这里先了解知识点，用的时候再仔细看看，分成6个方向：

定义/案例/HTML4.01与HTML5之间的差异/属性/全局属性/事件属性/DOM对象

视频video

Your browser does not support the video tag.

</video>

①video 元素支持三种视频格式：Ogg、MPEG4、WebM

②<video>与</video> 之间插入的内容是供不支持video元素的浏览器显示内容；

③video元素允许多个source 元素。source元素可以链接不同的视频文件，但浏览器将使用第一个可识别的格式：

音频audio

Your browser does not support the audio tag.

</audio>

<audio>与</audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的：

拖放drag/drop

①设置被拖动元素的draggable属性为true；

②在被拖动元素的ondragstart事件，该事件中通过ev.dataTransfer.setData()方法设置被拖数据的数据类型和值、拖动时要发生的效果；

③在接受元素中，通过ondragover事件规定在何处放置被拖动的数据，默认情况下无法将数据/元素放置到其他元素中，因此，需要通过event.preventDefault()来阻止对元素的默认处理方式；

④在接受元素中，通过ondrop事件来进行放置，当放置被拖数据时，触发该事件；

<!DOCTYPE HTML>

<html>

<head>

function allowDrop(ev)

{

//调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）

ev.preventDefault();

}

function drag(ev)

{

ev.dataTransfer.setData("Text",ev.target.id);

}

function drop(ev)

{

ev.preventDefault();

//通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。

var data=ev.dataTransfer.getData("Text");

//被拖数据是被拖元素的 id ("drag1"),把被拖元素追加到放置元素（目标元素）中

ev.target.appendChild(document.getElementById(data));

}

</script>

</head>

<body>

<div id="div1" οndrοp="drop(event)"

οndragοver="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true"

οndragstart="drag(event)" width="336" height="69" />

</body>

</html>

画布canvas

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

var cxt=c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);

</script>

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

var cxt=c.getContext("2d");

cxt.moveTo(10,10);

cxt.lineTo(150,50);

cxt.lineTo(10,50);

cxt.stroke();

</script>

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

var cxt=c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.beginPath();

cxt.arc(70,18,15,0,Math.PI*2,true);

cxt.closePath();

cxt.fill();

</script>

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

var cxt=c.getContext("2d");

var img=new Image()

img.src="flower.png"

cxt.drawImage(img,0,0);

</script>

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法，canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

可以参考：

https://www.w3school.com.cn/tags/html_ref_canvas.asp

内联SVG

什么是SVG？

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

SVG 用于定义用于网络的基于矢量的图形

SVG 使用 XML 格式定义图形

SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失

SVG 是万维网联盟的标准

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

SVG 图像可通过文本编辑器来创建和修改

SVG 图像可被搜索、索引、脚本化或压缩

SVG 是可伸缩的

SVG 图像可在任何的分辨率下被高质量地打印

SVG 可在图像质量不下降的情况下被放大

这里是专门的SVN教程：

https://www.w3school.com.cn/svg/index.asp

SVG 是一种使用XML描述2D图形的语言。SVG基于XML，这意味着SVG DOM中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在SVG中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形；

Canvas通过JavaScript来绘制2D图形。Canvas是逐像素进行渲染的。在canvas中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

Canvas 与 SVG 的比较：

Canvas：

依赖分辨率

不支持事件处理器

弱的文本渲染能力

能够以 .png 或 .jpg 格式保存结果图像

最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG：

不依赖分辨率

支持事件处理器

最适合带有大型渲染区域的应用程序（比如谷歌地图）

复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）

不适合游戏应用

地理定位

Geolocation API用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

var x=document.getElementById("demo");

function getLocation()

{

if (navigator.geolocation)//检测是否支持地理定位

//如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息

{

navigator.geolocation.getCurrentPosition(showPosition);//如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象

}

else{x.innerHTML="Geolocation is not supported by this browser.";}

}

function showPosition(position)//showPosition() 函数获得并显示经度和纬度

{

x.innerHTML="Latitude: " + position.coords.latitude +

"<br />Longitude: " + position.coords.longitude;

}

</script>

Web存储

HTML5提供了两种在客户端存储数据的新方法：

①localStorage：没有时间限制的数据存储

②sessionStorage：针对一个session的数据存储

HTML4阶段都是由cookie完成的，但cookie不适合大量数据的存储，因为每个HTTP请求来携带cookie数据来与服务器交互，这使得cookie速度很慢而且效率也不高；

HTML5中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使得在不影响网站性能的情况下存储大量数据成为可能；

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

localStorage.lastname="Smith";

document.write(localStorage.lastname);

</script>

sessionStorage.lastname="Smith";

document.write(sessionStorage.lastname);

</script>

应用程序缓存

定义

HTML5引入了应用程序缓存，这意味着web应用可进行缓存，并可在没有因特网连接时进行访问。应用程序缓存为应用带来三个优势：

①离线浏览 - 用户可在应用离线时使用它们

②速度 - 已缓存资源加载得更快

③减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

使用方法

使用应用程序缓存，有2种方法：

①通过创建cache manifest文件创建web应用的离线版本；

②在<html>标签中包含manifest属性，每个指定了manifest属性的页面在用户对其访问时都会被缓存。如果未指定manifest属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。

<!DOCTYPE HTML>

<body>

The content of the document......

</body>

</html>

cache manifest文件说明

manifest文件建议的文件扩展名是：".appcache"。manifest文件需要配置正确的MIME-type即"text/cache-manifest"，必须在 web服务器上进行配置。manifest文件本质是简单的文本文件，它告知浏览器被缓存的内容、不缓存的内容。

Manifest文件

manifest 文件可分为三个部分：

①CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

CACHE MANIFEST

/theme.css

/logo.gif

/main.js

上面的manifest文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。当 manifest文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的。

②NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存

NETWORK:

规定文件 "login.asp" 永远不会被缓存，且离线时是不可用的

NETWORK:

使用星号来指示所有其他资源/文件都需要因特网连接

③FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面

FALLBACK:

/html5/ /404.html

规定如果无法建立因特网连接，则用 "404.html" 替代 /html5/ 目录中的所有文件

第一个 URI 是资源，第二个是替补。

更新缓存

一旦应用被缓存，它就会保持缓存直到发生下列情况：

①用户自己清空浏览器缓存；

②manifest文件被修改，应用的缓存会在其manifest文件更改时被重新更新；

③由程序来更新应用缓存；

Web Workers

web worker 是运行在后台的 JavaScript，不会影响页面的性能，当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

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

<!DOCTYPE html>

<html>

<body>

<p>Count numbers: <output id="result"></output></p>

<button οnclick="startWorker()">Start Worker</button>

<button οnclick="stopWorker()">Stop Worker</button>

var w;

function startWorker()

{

if(typeof(Worker)!=="undefined")

{

if(typeof(w)=="undefined")

{

w=new Worker("demo_workers.js");

}

w.onmessage = function (event) {

document.getElementById("result").innerHTML=event.data;

};

}

else

{

document.getElementById("result").innerHTML="Sorry, your browser

does not support Web Workers...";

}

function stopWorker()

{

w.terminate();//终止 Web Worker

}

</script>

</body>

</html>

可以通俗理解为：new Worker算是后台线程，独立运行一些代码，通过event.data来与HTML交互，也可以通过terminate来终止运行；

服务器发送事件

服务器发送事件（server-sent event）允许网页获得来自服务器的更新。Server-Sent事件指的是网页自动获取来自服务器的更新,以前也可能做到这一点，前提是网页主动发送一次请求，然后再接受服务器响应，而通过服务器发送事件，直接接受更新，不用再发送请求；

开发过程

①客户端通过定义EventSource对象来接受服务器端通知：

//创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL（本例中是 "demo_sse.php"）

var source=new EventSource("demo_sse.php");

//每接收到一次更新，就会发生 onmessage 事件

source.onmessage=function(event)

{

//当 onmessage 事件发生时，把已接收的数据推入 id 为 "result" 的元素中

document.getElementById("result").innerHTML+=event.data + "<br />";

};

②服务器端进行开发功能，把"Content-Type"报头设置为 "text/event-stream"即可；

EventSource对象事件属性

①onopen：当通往服务器的连接被打开

②onmessage：当接收到消息

③onerror：当错误发生