HTML5学习笔记(一)_html5所有笔记-CSDN博客

本文链接：https://blog.csdn.net/heavenbuy/article/details/12905127

1.什么是HTML5？

HTML5将成为HTML、XHTML以及HTML DOM的新标准。

2.HTML5视频

视频格式

当前HTML5支持三种视频格式：

格式	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

control属性供添加播放、暂停和音量控制。

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

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

<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not supprote the video tag.
</video>

<video> 标签的属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

3.HTML5 video+dom

HTML5<vidoe> ——使用DOM进行控制

HTML5<video>元素同样拥有办法、属性和事件。

其中的方法用于播放、暂停以及加载等。其中的属性(比如时长、音量等)可以被读取或设置。其中的DOM事件能够通知。

下面列出了大多数浏览器支持的视频方法、属性和事件：

方法	属性	事件
play()	currentSrc	play
pause()	currentTime	pause
load()	videoWidth	progress
canPlayType	videoHeight	error
	duration	timeupdate
	ended	ended
	error	abort
	paused	empty
	muted	emptied
	seeking	waiting
	volume	loadedmetadata
	height
	width

4. HTML5 拖放

拖放(Drag和Drop)是HTML5标准的组成部分

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。

在HTML5中，托放是标准的一部分，任何元素都能够拖放。

拖放的例子：

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
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));
}
</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>

为了使元素可以拖动，把draggable属性设置为true:

拖动对象——ondragstart()和setData()

规定当元素被拖动时，会发生什么？

在上面的例子中，ondragstart属性调用一个函数，drag(event),它规定了被拖动的数据。

dataTransfer.setData()方法设置被拖数据的数据类型和值：

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

放在何处——ondragover

ondragover事件规定在何处放置被拖动的数据。

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

这要通过调用ondragover事件的event.preventDefault()方法：

event.preventDefault()

进行放置——ondrop

当放置被拖数据时，会发生drop事件。

在上面的例子中，ondrop属性调用了一个函数，drop(event):

function drop(ev)
{
    ev.preventDefault();  /*调用此函数来避免浏览器对数据的默认处理(drop事件的默认新闻是以链接形式打开)
    var  data=ev.dataTransfer.getData("Text");  /*调用此函数获得被拖的数据。
    ev.target.appendChild(document.getElementById(data));
}

5.HTML画布

canvas元素用于在网页上绘制图形。

什么是canvas?

HTML5的canvas元素使用Javascript在网页上绘制图像。

画布是一个矩形区域，可以控制其每一像素。

canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建Canvas元素

向HTML5页面添加canvas元素。

规定元素的id、宽度和高度：

6.HTML5 内联SVG

什么是SVG？

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

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

SVG使用XML格式定义图形；

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

SVG是万维网联盟的标注；

SVG的优势：

与其他图像格式相比，使用SVG的优势在于：

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

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

SVG是可伸缩的；

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

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

7.HTML5 Canvas VS. SVG

Canvas和SVG都允许在浏览器中创建图形，但是它们在根本上是不同的。

SVG是一种使用XML描述2D图形的语言，这意味着SVG DOM中的每个元素都是可用的。可以为某个元素附加JavaScript事件处理器。

在SVG中，每个被绘制的图形均被视为对象。如果SVG对象的属性发生变化，那么浏览器能够自动重现图形。

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

依赖分辨率；不支持事件处理器；弱的文本渲染能力；能够以.png或.jpg格式保存结果图形；

SVG 不依赖分辨率；支持事件处理器；最适合带有大型渲染区域的应用程序；复杂度高慧减慢渲染速度；不适合游戏应用；

8.HTML5 Web存储

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

localStorage——没有事件限制的数据存储；

sessionStorage——针对一个session的数据存储；

之前，这些都是由cookie完成的，但是cookie不适合大量数据的存储，因为他们由每个服务器的请求来传递，这使得cookie速度很慢而且效率不高。

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

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

localStorage方法：存储的数据没有时间限制；

<script type="text/javascript">
localStorage.lastname="Smith"；
document.write(localStorage.lastname);
</script>

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

<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>

9.HTML5应用程序缓存

使用HTML5，通过创建cache manifest文件，可以轻松地创建web应用的离线版本。

什么是应用程序缓存(Application Cache)?

HTML5引入了应用程序缓存，这意味着web应用可进行缓存，并在没有网络连接时进行访问；

应用程序缓存为应用带来三个优势：

离线浏览——用户可在应用离线时使用它们；

速度——已缓存资源加载得更快；

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