Html5

最新推荐文章于 2024-08-12 22:44:37 发布

MichstaBe-IMUT

最新推荐文章于 2024-08-12 22:44:37 发布

阅读量770

点赞数 1

分类专栏： # Html 文章标签： html5

本文链接：https://blog.csdn.net/Ulrica_Amaris/article/details/107838945

版权

Html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

什么是Html5

1.HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。
2.HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
3.HTML5 是 W3C 与 WHATWG 合作的结果：
（1）W3C 指 World Wide Web Consortium，万维网联盟。
（2）WHATWG 指 Web Hypertext Application Technology Working Group。
（3）WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。

新特性

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

Html视频

1.HTML5 规定了一种通过 video 元素来包含视频的标准方法。
在这里插入图片描述
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

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

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件。
2.如何工作：

<video src="movie.ogg" controls="controls">
</video>

3.controls 属性供添加播放、暂停和音量控件。
4. 标签的属性：
在这里插入图片描述
4.HTML5 元素同样拥有方法、属性和事件。

HTML 5 音频

1.支持音频格式：
在这里插入图片描述
2.如何工作：

<audio src="song.ogg" controls="controls">
</audio>

实例：

<!DOCTYPE HTML>
<html>
<body>

<audio src="/i/song.ogg" controls="controls">
Your browser does not support the audio element.
</audio>

</body>
</html>

在这里插入图片描述
3. 标签的属性：

HTML 5 拖放

1.拖放（Drag 和 drop）是 HTML5 标准的组成部分。任何元素都能够拖放。
2.方法：
（1）设置元素为可拖放：<img draggable="true" />
（2）拖动什么 - ondragstart
（3）置被拖数据的数据类型和值：setData()
（4）放到何处 - ondragover，默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
实例：

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:198px; height:66px;padding:10px;border:1px solid #aaaaaa;}
</style>
<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>

<p>请把 W3School 的图片拖放到矩形中：</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="drag1" src="/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" />

</body>
</html>

拖动前
拖动后
代码解释：
调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）

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

被拖数据是被拖元素的 id ("drag1")

把被拖元素追加到放置元素（目标元素）中。

HTML 5 Canvas

1.HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
2.创建 Canvas 元素：<canvas id="myCanvas" width="200" height="100"></canvas>
3.通过 JavaScript 来绘制：canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

（1）JavaScript 使用 id 来寻找 canvas 元素：

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

（2）创建 context 对象：

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

（3）getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

HTML5 内联 SVG

1.SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
2.在 HTML5 中，能够将 SVG 元素直接嵌入 HTML 页面中：
实例：

<!DOCTYPE html>
<html>
<body>

<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>

</body>
</html>

HTML5 地理定位

1.HTML5 Geolocation API 用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
2.getCurrentPosition() 方法来获得用户的位置。
在这里插入图片描述

HTML 5 Web 存储

1.HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储

sessionStorage - 针对一个 session 的数据存储。

HTML 5 应用程序缓存

1.使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

HTML5 新的 Input 类型

1.color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
2.color 类型用在input字段主要用于选取颜色
3.date 类型允许你从一个日期选择器选择一个日期
4.datetime 类型允许你选择一个日期
5.atetime-local 类型允许你选择一个日期和时间
6.email 类型用于应该包含 e-mail 地址的输入域
7.month 类型允许你选择一个月份
8.number 类型用于应该包含数值的输入域,还能够设定对所接受的数字的限定：
在这里插入图片描述
9.range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。
10.search 类型用于搜索域，比如站点搜索或 Google 搜索
11.tel定义输入电话号码字
12.time 类型允许你选择一个时间
13.url 类型用于应该包含 URL 地址的输入域
14.week 类型允许你选择周和年.

HTML5 表单元素

元素: 元素规定输入域的选项列表。属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：使用元素的列表属性与元素绑定:

<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

在这里插入图片描述
2. 元素: 元素的作用是提供一种验证用户的可靠方法。标签规定用于表单的密钥对生成器字段。当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

<form action="demo_keygen.asp" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>

在这里插入图片描述
3. 元素:用于不同类型的输出，比如计算或脚本输出：

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>