HTML5 是最新的 HTML 标准。
HTML5 是专门为承载丰富的 web 内容而设计的,并且无需额外插件。
HTML5 拥有新的语义、图形以及多媒体元素。
HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。
HTML5 是跨平台的,被设计为在不同类型的硬件(PC、平板、手机、电视机等等)之上运行。
**注释:**在下面的章节中,您将学到如何“帮助”老版本的浏览器处理 HTML5。
HTML5 的新的文档类型(DOCTYPE)声明非常简单:
DOCTYPE html>
The new character encoding (charset) declaration is also very simple:
<meta charset="UTF-8">
实例:
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the documenttitle>
head>
<body>
Content of the document......
body>
html>
**注释:**HTML5 中默认的字符编码是 UTF-8。
HTML5 标准允许 4 中不同的属性语法。
本例演示在 标签中使用的不同语法:
类型 | 示例 |
---|---|
Empty | |
Unquoted | |
Double-quoted | |
Single-quoted |
在 HTML5 标准中,根据对属性的需求,可能会用到所有 4 种语法。
HTML5 的一些最有趣的新特性:
- 新的语义元素,比如
, - 新的表单控件,比如数字、日期、时间、日历和滑块。
- 强大的图像支持(借由
- 强大的多媒体支持(借由
- 强大的新 API,比如用本地存储取代 cookie。
以下 HTML 4.01 元素已从 HTML5 中删除:
所有现代浏览器都支持 HTML5。
此外,所有浏览器,不论新旧,都会自动把未识别元素当做行内元素来处理。
正因如此,您可以帮助老式浏览器处理”未知的“ HTML 元素。
**注释:**您甚至可以教授石器时代的 IE6 如何处理未知的 HTML 元素。
HTML5 定义了八个新的语义 HTML 元素。所有都是块级元素。
您可以把 CSS display 属性设置为 block,以确保老式浏览器中正确的行为:
实例:
header, section, footer, aside, nav, main, article, figure {
display: block;
}
您可以通过浏览器 trick 向 HTML 添加任何新元素:
本例向 HTML 添加了一个名为 的新元素,并为其定义 display 样式:
实例:
DOCTYPE html>
<html>
<head>
<title>Creating an HTML Elementtitle>
<script>document.createElement("myHero")script>
<style>
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
style>
head>
<body>
<h1>My First Headingh1>
<p>My first paragraph.p>
<myHero>My First HeromyHero>
body>
html>
已添加的 JavaScript 语句 document.createElement(“myHero”),仅适用于 IE。
上述方案可用于所有新的 HTML5 元素,但是:
**注意:**Internet Explorer 8 以及更早的版本,不允许对未知元素添加样式。
幸运的是,Sjoerd Visscher 创造了 “HTML5 Enabling JavaScript”, “the shiv”:
以上代码是一段注释,但是 IE9 的早期版本会读取它(并理解它)。
实例:
DOCTYPE html>
<html>
<head>
<title>Styling HTML5title>
head>
<body>
<h1>My First Articleh1>
<article>
London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
article>
body>
html>
引用 shiv 代码的链接必须位于
元素中,因为 Internet Explorer 需要在读取之前认识所有新元素。
实例:
DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Skeletontitle>
<meta charset="utf-8">
<style>
body {font-family: Verdana, sans-serif; font-size:0.8em;}
header,nav, section,article,footer
{border:1px solid grey; margin:5px; padding:8px;}
nav ul {margin:0; padding:0;}
nav ul li {display:inline; margin:5px;}
style>
head>
<body>
<header>
<h1>HTML5 SKeletonh1>
header>
<nav>
<ul>
<li><a href="html5_semantic_elements.asp">HTML5 Semantica>li>
<li><a href="html5_geolocation.asp">HTML5 Geolocationa>li>
<li><a href="html5_canvas.asp">HTML5 Graphicsa>li>
ul>
nav>
<section>
<h1>Famous Citiesh1>
<article>
<h2>Londonh2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.p>
article>
<article>
<h2>Parish2>
<p>Paris is the capital and most populous city of France.p>
article>
<article>
<h2>Tokyoh2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.p>
article>
section>
<footer>
<p>© 2014 W3Schools. All rights reserved.p>
footer>
body>
html>
HTML5 提供的新元素可以构建更好的文档结构:
标签 | 描述 |
---|---|
定义文档内的文章。 | |
定义页面内容之外的内容。 | |
定义与其他文本不同的文本方向。 | |
定义用户可查看或隐藏的额外细节。 | |
定义对话框或窗口。 | |
定义 | |
定义自包含内容,比如图示、图表、照片、代码清单等等。 | |
定义文档或节的页脚。 | |
定义文档或节的页眉。 | |
定义文档的主内容。 | |
定义重要或强调的内容。 | |
定义用户能够从弹出菜单调用的命令/菜单项目。 | |
定义已知范围(尺度)内的标量测量。 | |
定义文档内的导航链接。 | |
定义任务进度。 | |
定义在不支持 ruby 注释的浏览器中显示什么。 | |
定义关于字符的解释/发音(用于东亚字体)。 | |
定义 ruby 注释(用于东亚字体)。 | |
定义文档中的节。 | |
定义 元素的可见标题。 |
|
定义日期/时间。 | |
定义可能的折行(line-break)。 |
元素定义文档中的节。 根据 W3C 的 HTML 文献:“节(section)是有主题的内容组,通常具有标题”。
可以将网站首页划分为简介、内容、联系信息等节。
实例:
<section>
<h1>WWFh1>
<p>The World Wide Fund for Nature (WWF) is....p>
section>
元素规定独立的自包含内容。 文档有其自身的意义,并且可以独立于网站其他内容进行阅读。
元素的应用场景:
- 论坛
- 博客
- 新闻
实例:
<article>
<h1>What Does WWF Do?h1>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.p>
article>
在 HTML5 标准中,
元素定义完整的相关元素自包含块。
元素被定义为相关元素块。 我们能够使用该定义来决定如何嵌套元素吗?不,我们不能!
在因特网上,您会发现
元素包含 元素的 HTML 页面,还有 元素包含 元素的页面。 您还会发现
元素包含 元素,同时 元素包含 元素。
元素为文档或节规定页眉 一个文档中可以有多个
元素。 下例为一篇文章定义了页眉:
实例:
<article>
<header>
<h1>What Does WWF Do?h1>
<p>WWF's mission:p>
header>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.p>
article>
页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。
您可以在一个文档中使用多个
实例:
<footer>
<p>Posted by: Hege Refsnesp>
<p>Contact information: <a href="mailto:someone@example.com">
someone@example.coma>.p>
footer>
实例:
<nav>
<a href="/html/">HTMLa> |
<a href="/css/">CSSa> |
<a href="/js/">JavaScripta> |
<a href="/jquery/">jQuerya>
nav>
aside 内容应该与周围内容相关。
实例:
<p>My family and I visited The Epcot center this summer.p>
<aside>
<h4>Epcot Centerh4>
<p>The Epcot Center is a theme park in Disney World, Florida.p>
aside>
在书籍和报纸中,与图片搭配的标题很常见。
标题(caption)的作用是为图片添加可见的解释。
通过 HTML5,图片和标题能够被组合在
实例:
<figure>
<img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - The Pulpit Pock, Norway.figcaption>
figure>
元素定义图像,
元素定义标题。
标签 | 描述 |
---|---|
定义输入控件的预定义选项。 | |
定义键对生成器字段(用于表单)。 | |
定义计算结果。 |
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZreG9oQg-1653830778572)(/image-20211122231239407.png)]
HTML5 允许四种不同的属性语法。
该例演示 标签中使用的不同语法:
标签 | 描述 |
---|---|
Empty | |
Unquoted | |
Double-quoted | |
Single-quoted |
在 HTML5 中,根据属性所需,可能会使用所有这四种语法。
标签 | 描述 |
---|---|
定义使用 JavaScript 的图像绘制。 | |
定义使用 SVG 的图像绘制。 |
canvas 元素:
<canvas id="myCanvas" width="244" height="182" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
canvas>
在 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>
标签 | 描述 |
---|---|
定义声音或音乐内容。 | |
定义外部应用程序的容器(比如插件)。 | |
定义 | |
定义 | |
定义视频或影片内容。 |
注释:您可以使用相同的技巧从 HTML4 以及 XHTML 迁移至 HTML5。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vrmCPcXr-1653830778573)(/image-20211122232653410.png)]
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>HTML4title>
<style>
body {font-family:Verdana,sans-serif;font-size:0.8em;}
div#header,div#footer,div#content,div#post
{border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;}
div#header,div#footer {color:white;background-color:#444;margin-bottom:5px;}
div#content {background-color:#ddd;}
div#menu ul {margin:0;padding:0;}
div#menu ul li {display:inline; margin:5px;}
style>
head>
<body>
<div id="header">
<h1>Monday Timesh1>
div>
<div id="menu">
<ul>
<li>Newsli>
<li>Sportsli>
<li>Weatherli>
ul>
div>
<div id="content">
<h2>News Sectionh2>
<div id="post">
<h2>News Articleh2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.p>
div>
<div id="post">
<h2>News Articleh2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.p>
div>
div>
<div id="footer">
<p>© 2014 Monday Times. All rights reserved.p>
div>
body>
html>
DOCTYPE html>
<html lang="en">
<title>HTML5title>
<meta charset="utf-8">
<style>
body {
font-family:Verdana,sans-serif;font-size:0.8em;
}
header,footer,section,article {
border:1px solid grey;
margin:5px;margin-bottom:15px;padding:8px;
background-color:white;
}
header,footer {
color:white;background-color:#444;margin-bottom:5px;
}
section {
background-color:#ddd;
}
nav ul {
margin:0;padding:0;
}
nav ul li {
display:inline; margin:5px;
}
style>
<body>
<header>
<h1>Monday Timesh1>
header>
<nav>
<ul>
<li>Newsli>
<li>Sportsli>
<li>Weatherli>
ul>
nav>
<section>
<h2>News Sectionh2>
<div id="post">
<h2>News Articleh2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.p>
div>
<div id="post">
<h2>News Articleh2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.p>
div>
section>
<footer>
<p>© 2014 Monday Times. All rights reserved.p>
footer>
body>
html>
修改文档类型,从 HTML4 doctype:
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
修改为 HTML5 doctype:
DOCTYPE html>
修改编码信息,从 HTML4:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
改为 HTML5:
<meta charset="utf-8">
所有现代浏览器都支持 HTML5 语义元素。
此外,您可以“教授”老式浏览器如何处理“未知元素”。
为 Internet Explorer 支持而添加的 shiv:
请看已有的 CSS 样式:
div#header,div#footer,div#content,div#post {
border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
color:white;background-color:#444;margin-bottom:5px;
}
div#content {
background-color:#ddd;
}
div#menu ul {
margin:0;padding:0;
}
div#menu ul li {
display:inline; margin:5px;
}
Duplicate with equal CSS styles for HTML5 semantic elements:
header,footer,section,article {
border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
header,footer {
color:white;background-color:#444;margin-bottom:5px;
}
section {
background-color:#ddd;
}
nav ul {
margin:0;padding:0;
}
nav ul li {
display:inline; margin:5px;
}
把 id=“header” 和 id=“footer” 的 <div> 元素:
<div id="header">
<h1>Monday Timesh1>
div>
.
.
.
<div id="footer">
<p>© 2014 W3Schools. All rights reserved.p>
div>
修改为 HTML5 语义元素 <header> 和 <footer>:
<header>
<h1>Monday Timesh1>
header>
.
.
.
<footer>
<p>© 2014 W3Schools. All rights reserved.p>
footer>
把 id=“menu” 的 <div> 元素:
<div id="menu">
<ul>
<li>Newsli>
<li>Sportsa>li>
<li>Weatherli>
ul>
div>
修改为 HTML5 语义元素 <nav>:
<nav>
<ul>
<li>Newsli>
<li>Sportsa>li>
<li>Weatherli>
ul>
nav>
把 id=“content” 的 the <div> 元素:
<div id="content">
.
.
.
div>
修改为 HTML5 语义元素 <section>:
<section>
.
.
.
section>
把 class=“post” 的所有 <div> 元素:
<div class="post">
<h2>News Articleh2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.p>
div>
修改为 HTML5 语义元素 <article>:
News Article
Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.
在 HTML5 标准中,<article> <section> 与 <div> 之间的差异很小,令人困惑。
在 HTML5 标准中,<section> 元素被定位为相关元素的块。
<article> 元素被定义为相关元素的完整的自包含块。
元素被定义为子元素的块。如何理解呢?
在上面的例子中,我们曾使用 <section> 作为相关 <articles> 的容器。
但是,我们也能够把 <article> 用作文章的容器。
下面是一些不同的例子:
<article> 中的 <article>:
<article>
<h2>Famous Citiesh2>
<article>
<h2>Londonh2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.p>
article>
<article>
<h2>Parish2>
<p>Paris is the capital and most populous city of France.p>
article>
<article>
<h2>Tokyoh2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.p>
article>
article>
中的 :
Famous Cities
London
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
Paris
Paris is the capital and most populous city of France.
Tokyo
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
<article> 中的 <section> 中的 <div>:
<article>
<section>
<h2>Famous Citiesh2>
<div class="city">
<h2>Londonh2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.p>
div>
<div class="city">
<h2>Parish2>
<p>Paris is the capital and most populous city of France.p>
div>
<div class="city">
<h2>Tokyoh2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.p>
div>
section>
<section>
<h2>Famous Countriesh2>
<div class="country">
<h2>Englandh2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.p>
div>
<div class="country">
<h2>Franceh2>
<p>Paris is the capital and most populous city of France.p>
div>
<div class="country">
<h2>Japanh2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.p>
div>
section>
article>
HTML5 API
一、地理定位
HTML5 Geolocation(地理定位)用于定位用户的位置。
实例:
DOCTYPE html>
<html>
<body>
<p id="demo">点击这个按钮,获得您的位置:p>
<button onclick="getLocation()">试一下button>
<div id="mapholder">div>
<script src="http://maps.google.com/maps/api/js?sensor=false">script>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
lat=position.coords.latitude;
lon=position.coords.longitude;
latlon=new google.maps.LatLng(lat, lon)
mapholder=document.getElementById('mapholder')
mapholder.style.height='250px';
mapholder.style.width='500px';
var myOptions={
center:latlon,zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
};
var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
}
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}
}
script>
body>
html>
1、定位用户的位置
HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。
2、浏览器支持
Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。
**注释:**对于拥有 GPS 的设备,比如 iPhone,地理定位更加精确。
3、HTML5 - 使用地理定位
请使用 getCurrentPosition() 方法来获得用户的位置。
下例是一个简单的地理定位实例,可返回用户位置的经度和纬度。
实例:
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"
Longitude: " + position.coords.longitude;
}
script>
例子解释:
- 检测是否支持地理定位
- 如果支持,则运行 getCurrentPosition() 方法。如果不支持,则向用户显示一段消息。
- 如果getCurrentPosition()运行成功,则向参数showPosition中规定的函数返回一个coordinates对象
- showPosition() 函数获得并显示经度和纬度
上面的例子是一个非常基础的地理定位脚本,不含错误处理。
4、处理错误和拒绝
getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数:
实例:
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}
}
错误代码:
- Permission denied - 用户不允许地理定位
- Position unavailable - 无法获取当前位置
- Timeout - 操作超时
5、在地图中显示结果
如需在地图中显示结果,您需要访问可使用经纬度的地图服务,比如谷歌地图或百度地图:
实例:
function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
}
在上例中,我们使用返回的经纬度数据在谷歌地图中显示位置(使用静态图像)。
6、给定位置的信息
本页演示的是如何在地图上显示用户的位置。不过,地理定位对于给定位置的信息同样很有用处。
案例:
- 更新本地信息
- 显示用户周围的兴趣点
- 交互式车载导航系统 (GPS)
7、getCurrentPosition() 方法 - 返回数据
若成功,则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用,则会返回其他下面的属性。
属性
描述
coords.latitude
十进制数的纬度
coords.longitude
十进制数的经度
coords.accuracy
位置精度
coords.altitude
海拔,海平面以上以米计
coords.altitudeAccuracy
位置的海拔精度
coords.heading
方向,从正北开始以度计
coords.speed
速度,以米/每秒计
timestamp
响应的日期/时间
8、Geolocation 对象 - 其他有趣的方法
watchPosition() - 返回用户的当前位置,并继续返回用户移动时的更新位置(就像汽车上的 GPS)。
clearWatch() - 停止 watchPosition() 方法
下面的例子展示 watchPosition() 方法。您需要一台精确的 GPS 设备来测试该例(比如 iPhone):
实例:
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"
Longitude: " + position.coords.longitude;
}
script>
二、拖放
1、拖放
拖放(Drag 和 Drop)是很常见的特性。它指的是您抓取某物并拖入不同的位置。
拖放是 HTML5 标准的组成部分:任何元素都是可拖放的。
2、浏览器支持
表格中的数字指示了完全支持拖放的首个浏览器版本。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KVG2YrGH-1653830778574)(/image-20211123000055964.png)]
3、HTML 拖放实例
DOCTYPE HTML>
<html>
<head>
<script>
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" ondrop="drop(event)" ondragover="allowDrop(event)">div>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
body>
html>
它也许看上去有点复杂,不过让我们研究一下拖放事件的所有不同部分。
4、把元素设置为可拖放
首先:为了把一个元素设置为可拖放,请把 draggable 属性设置为 true:
<img draggable="true">
5、拖放的内容 - ondragstart 和 setData()
然后,规定当元素被拖动时发生的事情。
在上面的例子中,ondragstart 属性调用了一个 drag(event) 函数,规定拖动什么数据。
dataTransfer.setData() 方法设置被拖动数据的数据类型和值:
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
在本例中,数据类型是 “text”,而值是这个可拖动元素的 id (“drag1”)。
6、拖到何处 - ondragover
ondragover 事件规定被拖动的数据能够被放置到何处。
默认地,数据/元素无法被放置到其他元素中。为了实现拖放,我们必须阻止元素的这种默认的处理方式。
这个任务由 ondragover 事件的 event.preventDefault() 方法完成:
event.preventDefault()
7、进行放置 - ondrop
当放开被拖数据时,会发生 drop 事件。
在上面的例子中,ondrop 属性调用了一个函数,drop(event):
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
代码解释:
- 调用 preventDefault() 来阻止数据的浏览器默认处理方式(drop 事件的默认行为是以链接形式打开)
- 通过 dataTransfer.getData() 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据
- 被拖数据是被拖元素的 id (“drag1”)
- 把被拖元素追加到放置元素中
8、更多实例
来回拖放图片
如何在两个
元素之间来回拖放图像:
DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1, #div2
{float:left; width:198px; height:66px; margin:10px;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>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" id="drag1" />
div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">div>
body>
html>
三、Web存储
1、什么是 HTML 本地存储?
通过本地存储(Local Storage),web 应用程序能够在用户浏览器中对数据进行本地的存储。
在 HTML5 之前,应用程序数据只能存储在 cookie 中,包括每个服务器请求。本地存储则更安全,并且可在不影响网站性能的前提下将大量数据存储于本地。
与 cookie 不同,存储限制要大得多(至少5MB),并且信息不会被传输到服务器。
本地存储经由起源地(origin)(经由域和协议)。所有页面,从起源地,能够存储和访问相同的数据。
2、浏览器支持
表格中的数组指示了完全支持本地存储的首个浏览器版本。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7DlX9ktn-1653830778575)(/1637661110(1)].jpg)
3、HTML 本地存储对象
HTML 本地存储提供了两个在客户端存储数据的对象:
- window.localStorage - 存储没有截止日期的数据
- window.sessionStorage - 针对一个 session 来存储数据(当关闭浏览器标签页时数据会丢失)
在使用本地存储时,请检测 localStorage 和 sessionStorage 的浏览器支持:
if (typeof(Storage) !== "undefined") {
// 针对 localStorage/sessionStorage 的代码
} else {
// 抱歉!不支持 Web Storage ..
}
4、localStorage 对象
localStorage 对象存储的是没有截止日期的数据。当浏览器被关闭时数据不会被删除,在下一天、周或年中,都是可用的。
实例:
// 存储
localStorage.setItem("lastname", "Gates");
// 取回
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
实例解释:
- 创建 localStorage 名称/值对,其中:name=“lastname”,value=“Gates”
- 取回 “lastname” 的值,并把它插到 id=“result” 的元素中
上例也可这样写:
// 存储
localStorage.lastname = "Gates";
// 取回
document.getElementById("result").innerHTML = localStorage.lastname;
删除 “lastname” localStorage 项目的语法如下:
localStorage.removeItem("lastname");
**注释:**名称/值对始终存储为字符串。如果需要请记得把它们转换为其他格式!
下面的例子对用户点击按钮的次数进行计数。在代码中,值字符串被转换为数值,依次对计数进行递增:
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "您已经点击这个按钮 " +
localStorage.clickcount + " 次。";
5、sessionStorage 对象
sessionStorage 对象等同 localStorage 对象,不同之处在于只对一个 session 存储数据。如果用户关闭具体的浏览器标签页,数据也会被删除。
下例在当前 session 中对用户点击按钮进行计数:
实例:
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "在本 session 中,您已经点击这个按钮 " +
sessionStorage.clickcount + " 次。";
四、应用缓存
1、什么是应用程序缓存?
HTML5 引入了应用程序缓存(Application Cache),这意味着可对 web 应用进行缓存,并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势:
- 离线浏览 - 用户可在应用离线时使用它们
- 速度 - 已缓存资源加载得更快
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源
2、浏览器支持
表格中的数字指示完全支持应用程序缓存的首个浏览器版本。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m3bGStfR-1653830778576)(/image-20211123000055964.png)]
3、HTML Cache Manifest 实例
下例展示了带有 cache manifest 的 HTML 文档(供离线浏览):
DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
文档内容 ......
body>
html>
4、Cache Manifest 基础
如需启用应用程序缓存,请在文档的 标签中包含 manifest 属性:
DOCTYPE HTML>
<html manifest="demo.appcache">
...
html>
每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性,则页面不会被缓存(除非在 manifest 文件中直接指定了该页面)。
manifest 文件的建议文件扩展名是:“.appcache”。
**注意:**manifest 文件需要设置正确的 MIME-type,即 “text/cache-manifest”。必须在 web 服务器上进行配置。
5、Manifest 文件
manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。
manifest 文件有三个部分:
- CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
- NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
- FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)
6、CACHE MANIFEST
第一行,CACHE MANIFEST,是必需的:
CACHE MANIFEST
/theme.css
/logo.gif
/main.js
上面的 manifest 文件列出了三个资源:一个 CSS 文件,一个 GIF 图像,以及一个 JavaScript 文件。当 manifest 文件被加载后,浏览器会从网站的根目录下载这三个文件。然后,无论用户何时与因特网断开连接,这些资源依然可用。
7、NETWORK
下面的 NETWORK 部分规定文件 “login.php” 永远不会被缓存,且离线时是不可用的:
NETWORK:
login.asp
可以使用星号来指示所有其他其他资源/文件都需要因特网连接:
NETWORK:
*
FALLBACK
下面的 FALLBACK 部分规定如果无法建立因特网连接,则用 “offline.html” 替代 /html/ 目录中的所有文件:
FALLBACK:
/html/ /offline.html
**注释:**第一个 URI 是资源,第二个是替补。
8、更新缓存
一旦应用被缓存,它就会保持缓存直到发生下列情况:
- 用户清空浏览器缓存
- manifest 文件被修改(参阅下面的提示)
- 由程序来更新应用缓存
9、实例 - 完整的 Cache Manifest 文件
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html
**提示:**以 “#” 开头的是注释行,但也可满足其他用途。应用的缓存只会在其 manifest 文件改变时被更新。如果您编辑了一幅图像,或者修改了一个 JavaScript 函数,这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。
10、关于应用程序缓存的注意事项
请留心缓存的内容。
一旦文件被缓存,则浏览器会继续展示已缓存的版本,即使您修改了服务器上的文件。为了确保浏览器更新缓存,您需要更新 manifest 文件。
**注释:**浏览器对缓存数据的容量限制可能不太一样(某些浏览器的限制是每个站点 5MB)。
五、Web Workers
1、什么是 Web Worker?
当在 HTML 页面中执行脚本时,页面是不可响应的,直到脚本已完成。
Web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 运行在后台。
2、浏览器支持
表格中的数字指示完全支持 Web Worker 的首个浏览器版本。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pwfDPbpc-1653830778577)(/image-20211123001928765.png)]
3、HTML Web Workers 实例
下面的例子创建了一个简单的 web worker,在后台计数:
计数:
启动 Worker | 停止 Worker
DOCTYPE html>
<html>
<body>
<p>计数: <output id="result">output>p>
<button onclick="startWorker()">开始 Workerbutton>
<button onclick="stopWorker()">停止 Workerbutton>
<br /><br />
<script>
var w;
function startWorker()
{
if(typeof(Worker)!=="undefined")
{
if(typeof(w)=="undefined")
{
w=new Worker("/example/html5/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();
}
script>
body>
html>
4、检测 Web Worker 支持
在创建 web worker 之前,请检测用户浏览器是否支持它:
if (typeof(Worker) !== "undefined") {
// 是的!支持 Web worker!
// 一些代码.....
} else {
// 抱歉!不支持 Web Worker!
}
5、创建 Web Worker 文件
现在,让我们在一个外部 JavaScript 文件中创建我们的 web worker。
在此处,我们创建了计数脚本。该脚本存储于 “demo_workers.js” 文件中:
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
以上代码中重要的部分是 postMessage() 方法 - 它用于向 HTML 页面传回一段消息。
注释: web worker 通常不用于如此简单的脚本,而是用于更耗费 CPU 资源的任务。
6、创建 Web Worker 对象
现在我们已经有了 web worker 文件,我们需要从 HTML 页面调用它。
下面的代码行检测是否存在 worker,如果不存在,- 它会创建一个新的 web worker 对象,然后运行 “demo_workers.js” 中的代码:
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
然后我们就可以从 web worker 发生和接收消息了。
向 web worker 添加一个 “onmessage” 事件监听器:
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
当 web worker 传送消息时,会执行事件监听器中的代码。来自 web worker 的数据会存储于 event.data 中。
7、终止 Web Worker
当创建 web worker 后,它会继续监听消息(即使在外部脚本完成后)直到其被终止为止。
如需终止 web worker,并释放浏览器/计算机资源,请使用 terminate() 方法:
w.terminate();
8、复用 Web Worker
如果您把 worker 变量设置为 undefined,在其被终止后,可以重复使用该代码:
w = undefined;
9、完整的 Web Worker 实例代码
我们已经看到了 .js 文件中的 Worker 代码。下面是 HTML 页面的代码:
实例:
DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result">output>p>
<button onclick="startWorker()">Start Workerbutton>
<button onclick="stopWorker()">Stop Workerbutton>
<br><br>
<script>
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! No Web Worker support.";
}
}
function stopWorker() {
w.terminate();
w = undefined;
}
script>
body>
html>
10、Web Worker 和 DOM
由于 web worker 位于外部文件中,它们无法访问下例 JavaScript 对象:
- window 对象
- document 对象
- parent 对象
六、SSE
1、Server-Sent 事件 - One Way Messaging
Server-Sent 事件指的是网页自动从服务器获得更新。
以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过 Server-Sent 事件,更新能够自动到达。
例如:Facebook/Twitter 更新、股价更新、新的博文、赛事结果,等等。
2、浏览器支持
表格中的数字指示完全支持 server-sent 事件的首个浏览器。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZjmoEPfd-1653830778577)(/image-20211123002615316.png)]
3、接收 Server-Sent 事件通知
EventSource 对象用于接收服务器发送事件通知:
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
例子解释:
- 创建一个新的 EventSource 对象,然后规定发送更新的页面的 URL(本例中是 “demo_sse.php”)
- 每当接收到一次更新,就会发生 onmessage 事件
- 当 onmessage 事件发生时,把已接收的数据推入 id 为 “result” 的元素中
4、检测 Server-Sent 事件支持
在 TIY 实例中,我们编写了一段额外的代码来检测服务器发送事件的浏览器支持:
if(typeof(EventSource) !== "undefined") {
// 是的!支持服务器发送事件!
// 一些代码.....
} else {
// 抱歉!不支持服务器发送事件!
}
5、服务器端代码实例
为了使上例运行,您需要能够发送数据更新的服务器(比如 PHP 或 ASP)。
服务器端事件流的语法非常简单。请把 “Content-Type” 报头设置为 “text/event-stream”。现在,您可以开始发送事件流了。
PHP 中的代码 (demo_sse.php):
ASP 中的代码 (VB) (demo_sse.asp):
<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>
代码解释:
- 把报头 “Content-Type” 设置为 “text/event-stream”
- 规定不对页面进行缓存
- 输出要发送的日期(始终以 "data: " 开头)
- 向网页刷新输出数据
6、EventSource 对象
在上例中,我们使用 onmessage 事件来获取消息。不过还可以使用其他事件:
事件
描述
onopen
当通往服务器的连接被打开
onmessage
当接收到消息
onerror
当发生错误
- parent 对象
六、SSE
1、Server-Sent 事件 - One Way Messaging
Server-Sent 事件指的是网页自动从服务器获得更新。
以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过 Server-Sent 事件,更新能够自动到达。
例如:Facebook/Twitter 更新、股价更新、新的博文、赛事结果,等等。
2、浏览器支持
表格中的数字指示完全支持 server-sent 事件的首个浏览器。
[外链图片转存中…(img-ZjmoEPfd-1653830778577)]
3、接收 Server-Sent 事件通知
EventSource 对象用于接收服务器发送事件通知:
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
例子解释:
- 创建一个新的 EventSource 对象,然后规定发送更新的页面的 URL(本例中是 “demo_sse.php”)
- 每当接收到一次更新,就会发生 onmessage 事件
- 当 onmessage 事件发生时,把已接收的数据推入 id 为 “result” 的元素中
4、检测 Server-Sent 事件支持
在 TIY 实例中,我们编写了一段额外的代码来检测服务器发送事件的浏览器支持:
if(typeof(EventSource) !== "undefined") {
// 是的!支持服务器发送事件!
// 一些代码.....
} else {
// 抱歉!不支持服务器发送事件!
}
5、服务器端代码实例
为了使上例运行,您需要能够发送数据更新的服务器(比如 PHP 或 ASP)。
服务器端事件流的语法非常简单。请把 “Content-Type” 报头设置为 “text/event-stream”。现在,您可以开始发送事件流了。
PHP 中的代码 (demo_sse.php):
ASP 中的代码 (VB) (demo_sse.asp):
<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>
代码解释:
- 把报头 “Content-Type” 设置为 “text/event-stream”
- 规定不对页面进行缓存
- 输出要发送的日期(始终以 "data: " 开头)
- 向网页刷新输出数据
6、EventSource 对象
在上例中,我们使用 onmessage 事件来获取消息。不过还可以使用其他事件:
事件
描述
onopen
当通往服务器的连接被打开
onmessage
当接收到消息
onerror
当发生错误