Html5

什么是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 表单元素

  1. 元素: 元素规定输入域的选项列表。 属性规定 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>

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值