HTML学习笔记（4）
一、HTML5
1.HTML5简介
- HTML5 是最新的 HTML 标准。
- 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。
- 拥有新的语义、图形以及多媒体元素。
- HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。
- HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。
- 声明方法：
HTML5 中默认的字符编码是 UTF-8。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
......
</body>
</html>
（1）HTML5 - 新特性
HTML5 的一些最有趣的新特性：
- 新的语义元素，比如
<header>,<footer>,<article>, and<section>。 - 新的表单控件，比如数字、日期、时间、日历和滑块。
- 强大的图像支持（借由
<canvas>和<svg>） - 强大的多媒体支持（借由
<video>和<audio>） - 强大的新 API，比如用本地存储取代 cookie。
（2） HTML5 - 被删元素
以下 HTML 4.01 元素已从 HTML5 中删除：
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>
（3）HTML5-支持
-
所有现代浏览器都支持 HTML5。
-
此外，所有浏览器，不论新旧，都会自动把未识别元素当做行内元素来处理。
-
HTML5 定义了八个新的语义 HTML 元素。所有都是块级元素。
您可以把 CSS display 属性设置为 block，以确保老式浏览器中正确的行为：
header, section, footer, aside, nav, main, article, figure {
display: block;
}
2.HTML5 新元素
（1）新的语义/结构元素
- HTML5 提供了定义页面不同部分的新语义元素.
- 许多网站包含了指示导航、页眉以及页脚的 HTML 代码，例如这些：
<div id="nav"><div class="header"><div id="footer">。
什么是语义元素？
- 语义元素清楚地向浏览器和开发者描述其意义。
- 非语义元素的例子：
<div>和<span>无法提供关于其内容的信息。 - 语义元素的例子：
<form>、<table>以及<img>清晰地定义其内容。
HTML5 提供了定义页面不同部分的新语义元素：
| 标签 | 描述 |
|---|---|
<article> | 定义文档内的文章。 |
<aside> | 定义页面内容之外的内容。 |
<bdi> | 定义与其他文本不同的文本方向。 |
<details> | 定义用户可查看或隐藏的额外细节。 |
<dialog> | 定义对话框或窗口。 |
<figcaption> | 定义 <figure> 元素的标题。 |
<figure> | 定义自包含内容，比如图示、图表、照片、代码清单等等。 |
<footer> | 定义文档或节的页脚。 |
<header> | 定义文档或节的页眉。 |
<main> | 定义文档的主内容。 |
<mark> | 定义重要或强调的内容。 |
<menuitem> | 定义用户能够从弹出菜单调用的命令/菜单项目。 |
<meter> | 定义已知范围（尺度）内的标量测量。 |
<nav> | 定义文档内的导航链接。 |
<progress> | 定义任务进度。 |
<rp> | 定义在不支持 ruby 注释的浏览器中显示什么。 |
<rt> | 定义关于字符的解释/发音（用于东亚字体）。 |
<ruby> | 定义 ruby 注释（用于东亚字体）。 |
<section> | 定义文档中的节。 |
<summary> | 定义 <details> 元素的可见标题。 |
<time> | 定义日期/时间。 |
<wbr> | 定义可能的折行（line-break）。 |
代码：
<!DOCTYPE html>
<html>
<body>
<section>
<h1>1.section</h1>
<p>section元素定义文档中的节。</p>
<p>节（section）是有主题的内容组，通常具有标题。</p>
<p>可以将网站首页划分为简介、内容、联系信息等节。</p>
</section>
<br>
<section>
<h1>第二节</h1>
<header>
<h1>header页眉</h1>
</header>
<p>balabala</p>
</section>
<hr/>
<article>
<header>
<h1>2.header</h1>
<p>我是页眉：header元素为文档或节规定页眉。</p>
<p>被用作介绍性内容的容器。</p>
<p>一个文档中可以有多个。</p>
</header>
<h1>3.article元素</h1>
<p>article元素规定独立的自包含内容。文档有其自身的意义，并且可以独立于网站其他内容进
行阅读。</p>
<p>应用场景：论坛、博客、新闻。</p>
</article>
<hr/>
<h1>4.footer</h1>
<footer>
<p>footer元素为文档或节规定页脚。</p>
<p>应该提供有关其包含元素的信息。页脚通常包含文档的作者、版权信息、使用条款链接、联系信
息等等。
<p>可以在一个文档中使用多个。</p>
<p>Contact information: <a href="mailto:someone@example.com">
someone@example.com</a>.</p>
</footer>
<hr/>
<h1>5.nav</h1>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
<p>nav元素定义导航链接集合。旨在定义大型的导航链接块。</p>
<p>并非文档中所有链接都应该位于 nav元素中！</p>
<hr>
<h1>6.aside</h1>
<aside>
<h4>aside</h4>
<p>定义页面主内容之外的某些内容（比如侧栏）。
aside 内容应该与周围内容相关。</p>
</aside>
<hr>
<h1>7.figure和figcaption元素</h1>
<p>在书籍和报纸中，标题与图片搭配的标题很常见。</p>
<p>标题（caption）的作用是为图片添加可见的解释。</p>
<p>通过 HTML5，图片和标题能够被组合在 figure 元素中：<img> 元素定义图像，<figcaption>
元素定义标题。</p>
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig.1 - 这里用figcaption.</figcaption>
</figure>
</body>
</html>
<article> <section> 与 <div> 之间的差异：
- 在 HTML5 标准中，
<section>元素被定位为相关元素的块。 <article>元素被定义为相关元素的完整的自包含块。<div>元素被定义为子元素的块。- 举例：
<article>中的<article>、<article>中的<div>、<article>中的<section>中的<div>。
如需完整的HTML5 语义参考，请访问HTML 语义参考手册 。
（2）新的表单元素
| 标签 | 描述 |
|---|---|
<datalist> | 定义输入控件的预定义选项。 |
<keygen> | 定义键对生成器字段（用于表单）。 |
<output> | 定义计算结果。 |
（3）新的输入类型
（4）新的属性语法
HTML5 允许四种不同的属性语法。
该例演示 <input> 标签中使用的不同语法：
（5）HTML5 图像
| 标签 | 描述 |
|---|---|
<canvas> | 定义使用 JavaScript 的图像绘制。 |
<svg> | 定义使用 SVG 的图像绘制。 |
（6）新的媒介元素
| 标签 | 描述 |
|---|---|
<audio> | 定义声音或音乐内容。 |
<embed> | 定义外部应用程序的容器（比如插件）。 |
<source> | 定义 <video> 和 <audio> 的来源。 |
<track> | 定义 <video> 和 <audio> 的轨道。 |
<video> | 定义视频或影片内容。 |
3.HTML5 样式指南和代码约定
- 属性值加引号
- 请始终对图像使用 alt 属性。当图像无法显示时该属性很重要。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
- 请始终定义图像尺寸。这样做会减少闪烁，因为浏览器会在图像加载之前为图像预留空间。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
-
请尽量避免代码行超过 80 个字符。
-
请勿毫无理由地增加空行。
为了提高可读性，请增加空行来分隔大型或逻辑代码块。
为了提高可读性，请增加两个空格的缩进。请勿使用 TAB。
请勿使用没有必要的空行和缩进。没有必要在短的和相关项目之间使用空行，也没有必要缩进每个元素。 -
元数据
<title>元素在 HTML5 中是必需的。请尽可能制作有意义的标题。 -
短注释应该在单行中书写，并在 <!-- 之后增加一个空格，在 <!-- 之前增加一个空格：
<!-- This is a comment -->
长注释，跨越多行，应该通过 <!-- 和 --> 在独立的行中书写：
<!--
This is a long comment example. This is a long comment example. This is a long comment example.
This is a long comment example. This is a long comment example. This is a long comment example.
-->
长注释更易观察，如果它们被缩进两个空格的话。
- 样式表
请使用简单的语法来链接样式表（type 属性不是必需的）：
<link rel="stylesheet" href="styles.css">
短规则可以压缩为一行，就像这样：
p.into {font-family:"Verdana"; font-size:16em;}
长规则应该分为多行：
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}
开括号与选择器位于同一行
在开括号之前用一个空格
使用两个字符的缩进
在每个属性与其值之间使用冒号加一个空格
在每个逗号或分号之后使用空格
在每个属性值对（包括最后一个）之后使用分号
只在值包含空格时使用引号来包围值
把闭括号放在新的一行，之前不用空格
避免每行超过 80 个字符
注释：在逗号或分号之后添加空格，是所有书写类型的通用规则。
- 在 HTML 中加载 JavaScript
请使用简单的语法来加载外部脚本（type 属性不是必需的）：
<script src="myscript.js">
4.画布Canvas
canvas 元素用于在网页上绘制图形。
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。
画布是一个矩形区域，可以控制其每一像素。拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
（1）创建画布：
规定元素的 id、宽度和高度：
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
<!-- solid边框颜色 -->
</canvas>
通过 JavaScript 来绘制：
<script type="text/javascript">
var c=document.getElementById("myCanvas");<!-- JavaScript 使用 id 来寻找 canvas 元素 -->
var cxt=c.getContext("2d");//创建 context 对象
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
//在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。
// fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。
</script>
（2）Canvas - 路径
在Canvas上画线，我们将使用以下两种方法：
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
绘制线条我们必须使用到 “ink” 的方法，就像stroke()或者 fill()…
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
在canvas中绘制圆形, 我们将使用以下方法:
arc(x,y,r,start,stop)
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
（3）Canvas - 文本
使用 canvas 绘制文本，重要的属性和方法如下：
font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本
使用 fillText():
使用 “Arial” 字体在画布上绘制一个高 30px 的文字（实心和空心）：
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
ctx.strokeText("Hello World",10,150);
</script>
（4）Canvas - 渐变
以下有两种不同的方式来设置Canvas渐变：
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
当我们使用渐变对象，必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。
使用 createLinearGradient():
1.创建一个线性渐变。使用渐变填充矩形:
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);//被填充的矩形
</script>
2.创建一个径向/圆渐变。使用渐变填充矩形：
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
（5）Canvas - 图像
把一幅图像放置到画布上, 使用以下方法:
drawImage(image,x,y)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>正常显示图像:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277"><p>Canvas中显示:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid red;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
img.onload = function() {
ctx.drawImage(img,10,10);
}
</script>
</body>
</html>
更多属性参考，请访问HTML5 参考手册 。
（6）.HTML5 内联 SVG
HTML5 支持内联 SVG。
什么是SVG？
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用于定义用于网络的基于矢量的图形
- SVG 使用XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
- SVG 是万维网联盟的标准
SVG优势
与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
- SVG 图像可通过文本编辑器来创建和修改
- SVG 图像可被搜索、索引、脚本化或压缩
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
浏览器支持
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持内联SVG。
在 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:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" />
</svg>
</body>
</html>
SVG 与 Canvas两者间的区别
SVG 是一种使用 XML 描述 2D 图形的语言。
Canvas 通过 JavaScript 来绘制 2D 图形。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
5.API
（1）拖放
图片可以在两个方框内来回拖动
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#div1, #div2
{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)//当元素被拖动时，会发生什么
{
ev.dataTransfer.setData("Text",ev.target.id);
//dataTransfer.setData() 方法设置被拖数据的数据类型和值
}
function drop(ev)//当放置被拖数据时，会发生 drop 事件。
{
ev.preventDefault();
/*默认无法将数据/元素放置到其他元素中。需要设置允许放置，我们必须阻止对元素的
默认处理方式。
调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链
接形式打开）*/
var data=ev.dataTransfer.getData("Text");
//获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
ev.target.appendChild(document.getElementById(data));
//被拖数据是被拖元素的 id ("drag1").把被拖元素追加到放置元素（目标元素）中
}
</script>
</head>
<body>
<p>拖动 RUNOOB.COM 图片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<!-- 当放置被拖数据时，会发生 drop 事件。ondrop 属性调用了函数drop(event).
ondragover 事件规定在何处放置被拖动的数据,调用 ondragover 事件的
event.preventDefault() 方法阻止对元素的默认处理方式。
-->
<br>
<img id="drag1" src="C:/Users/Administrator/Desktop/学习study/前端学习/html/workspace/pictures/1.png"
draggable="true" ondragstart="drag(event)"
width="88" height="31"></div>
<!-- draggable设置元素为可拖放.
ondragstart 属性调用了函数drag(event)，它规定了被拖动的数据。
-->
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<hr>
</body>
</html>
（2）.HTML5 Geolocation（地理定位）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else
{
x.innerHTML="该浏览器不支持获取地理位置。";
}
}
function showPosition(position)
{
x.innerHTML="纬度: " + position.coords.latitude +
"<br>经度: " + position.coords.longitude;
}
/*检测是否支持地理定位
如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。
如果 getCurrentPosition() 运行成功，则向参数showPosition中规定的函数返回 coordinates 对象
showPosition() 函数获得并显示经度,纬度,error
*/
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="用户拒绝对获取地理位置的请求。"
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="位置信息不可用/无法获取位置信息。"
break;
case error.TIMEOUT:
x.innerHTML="请求用户地理位置超时。"
break;
case error.UNKNOWN_ERROR:
x.innerHTML="未知错误。"
break;
}
}
</script>
</body>
</html>
（3）本地储存（Web 存储）
什么是 HTML5 Web 存储?
使用HTML5可以在本地存储用户的浏览数据。
早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.
数据以 键/值 对存在, web网页的数据只允许该网页访问使用。
浏览器支持
Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存储。
注意: Internet Explorer 7 及更早IE版本不支持web 存储.
localStorage 和 sessionStorage
客户端存储数据的两个对象为：
localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
在使用 web 存储前,应检查浏览器是否支持localStorage 和sessionStorage:
if(typeof(Storage)!=="undefined")
{
// 是的! 支持 localStorage sessionStorage 对象!
// 一些代码.....
} else {
// 抱歉! 不支持 web 存储。
}
localStorage和 sessionStorage，可使用的API相同，常用的有如下几个（以localStorage为例）：
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
提示: 键/值对通常以字符串存储，你可以按自己的需要转换该格式。
记录用户点击按钮的次数：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function clickCounter1()
{
if(typeof(Storage)!=="undefined")
{
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result1").innerHTML=" 你已经点击了按钮 " + localStorage.clickcount + " 次 ";
}
else
{
document.getElementById("result1").innerHTML="对不起，您的浏览器不支持 web 存储。";
}
}
function clickCounter2()
{
if(typeof(Storage)!=="undefined")
{
if (sessionStorage.clickcount)
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
sessionStorage.clickcount=1;
}
document.getElementById("result2").innerHTML=" 你已经点击了按钮 " + sessionStorage.clickcount + " 次 ";
}
else
{
document.getElementById("result2").innerHTML="对不起，您的浏览器不支持 web 存储。";
}
}
</script>
</head>
<body>
<h4>1.创建和移除Storage值</h4>
<div id="result"></div>
<script>
if(typeof(Storage)!=="undefined")
{
localStorage.sitename="巴拉巴拉";//使用 key="sitename" 和 value="菜鸟教程" 创建一个 localStorage 键/值对。
document.getElementById("result").innerHTML="网站名：" + localStorage.sitename;
//检索键值为"sitename" 的值然后将数据插入 id="result"的元素中。
}
else
{
document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。";
}
localStorage.removeItem("sitename");//移除 localStorage 中的 "sitename"
</script>
<h4>2.用户点击按钮的次数-localStorage</h4>
<p><button onclick="clickCounter1()" type="button">点我！</button></p>
<div id="result1"></div>
<!-- -->
<p>点击该按钮查看计数器的增加。</p>
<p>关闭浏览器选项卡(或窗口),重新打开此页面,计数器将继续计数(不是重置)。</p>
<hr>
<h4>3.用户点击按钮的次数-sessionStorage</h4>
<p><button onclick="clickCounter2()" type="button">再点我！</button></p>
<div id="result2"></div>
<!-- -->
<p>点击该按钮查看计数器的增加。</p>
<p>关闭浏览器选项卡(或窗口),重新打开此页面,计数器将重置。</p>
</body>
</html>
网站记录：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5本地存储之Web Storage篇</title>
</head>
<body>
<div style="border: 2px dashed #ccc;width:320px;text-align:center;">
<label for="sitename">网站名(key)：</label>
<input type="text" id="sitename" name="sitename" class="text"/>
<br/>
<label for="siteurl">网 址(value)：</label>
<input type="text" id="siteurl" name="siteurl"/>
<br/>
<input type="button" onclick="save()" value="新增记录"/>
<hr/>
<label for="search_phone">输入网站名：</label>
<input type="text" id="search_site" name="search_site"/>
<input type="button" onclick="find()" value="查找网站"/>
<input type="button" onclick="dele()" value="删除网站"/>
<p id="find_result"><br/></p>
</div>
<br/>
<div id="list">
</div>
<script>
// 载入所有存储在localStorage的数据
loadAll();
//保存数据
function save(){
var siteurl = document.getElementById("siteurl").value;
var sitename = document.getElementById("sitename").value;
localStorage.setItem(sitename, siteurl);
alert("添加成功");
}
//查找数据
function find(){
var search_site = document.getElementById("search_site").value;
var siteurl = localStorage.getItem(search_site);
var find_result = document.getElementById("find_result");
find_result.innerHTML = search_site + "的网址是：" + siteurl;
}
//删除数据
function dele(){
var search_site = document.getElementById("search_site").value;
var siteurl = localStorage.getItem(search_site);
localStorage.removeItem(search_site, siteurl);
alert("删除成功");
}
//将所有存储在localStorage中的对象提取出来，并展现到界面上
function loadAll(){
var list = document.getElementById("list");
if(localStorage.length>0){
var result = "<table border='1'>";
result += "<tr><td>key</td><td>value</td></tr>";
for(var i=0;i<localStorage.length;i++){
var sitename = localStorage.key(i);
var siteurl = localStorage.getItem(sitename);
result += "<tr><td>"+sitename+"</td><td>"+siteurl+"</td></tr>";
}
result += "</table>";
list.innerHTML = result;
}else{
list.innerHTML = "数据为空……";
}
}
</script>
</body>
</html>
（4）web SQL
Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。
Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。
核心方法
核心方法：
openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
executeSql：这个方法用于执行实际的 SQL 查询。
打开数据库
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
openDatabase() 方法对应的五个参数说明：
openDatabase（数据库名称，版本号，描述文本，数据库大小，创建回调）
第五个参数，创建回调会在创建数据库后被调用。
执行查询操作
执行操作使用 database.transaction() 函数：
var db = openDatabase('mydb', '1.0', 'Test DB', 5 * 1024 * 1024);
db.transaction(function (tx) {
//创建名为LOGS的表
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
//插入数据
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "第一条数据")');
//插入数据
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "第二条数据")');
//动态值插入数据
tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?)', [e_id, e_log]);
/*实例中的 e_id 和 e_log 是外部变量，executeSql 会映射数组参数中的每个条目给 "?"。 */
//删除数据
tx.executeSql('DELETE FROM LOGS WHERE id=1');
//动态值删除数据
tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]);
//更新数据
tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2');
//动态更新数据
tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=?', [id]);
});
读取数据
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>查询记录条数: " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++){
alert(results.rows.item(i).log );
}
}, null);
});
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>菜鸟教程(runoob.com)</title>
<script type="text/javascript">
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
msg = '<p>数据表已创建，且插入了两条数据。</p>';
document.querySelector('#status').innerHTML = msg;
});
db.transaction(function (tx) {
tx.executeSql('DELETE FROM LOGS WHERE id=1');
msg = '<p>删除 id 为 1 的记录。</p>';
document.querySelector('#status').innerHTML = msg;
});
db.transaction(function (tx) {
tx.executeSql('UPDATE LOGS SET log=\'runoob.com\' WHERE id=2');
msg = '<p>更新 id 为 2 的记录。</p>';
document.querySelector('#status').innerHTML = msg;
});
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>查询记录条数: " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++){
msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
document.querySelector('#status').innerHTML += msg;
}
}, null);
});
</script>
</head>
<body>
<div id="status" name="status">状态信息</div>
</body>
</html>
（5）HTML5 应用程序缓存
Cache Manifest
（供离线浏览）
<!DOCTYPE html>
<html manifest="demo_html.appcache">
<head>
<meta charset="UTF-8">
</head>
<body>
<script src="demo_time.js">
</script>
<p id="timePara"><button onclick="getDateTime()">获取日期和时间</button></p>
<p><img src="logo.png" width="336" height="69"></p>
<p>尝试打开 <a href="tryhtml5_html_manifest.htm" target="_blank">这个页面</a>, 在离线的状态下重新载入这个页面，页面也可以访问。</p>
</body>
</html>
如需启用应用程序缓存，请在文档的<html> 标签中包含 manifest 属性：
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。
manifest 文件的建议的文件扩展名是：".appcache"。
Remark 请注意，manifest 文件需要配置正确的 MIME-type，即 “text/cache-manifest”。必须在 web 服务器上进行配置。
Manifest 文件
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest 文件可分为三个部分：
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
CACHE MANIFEST
第一行，CACHE MANIFEST，是必需的：
CACHE MANIFEST
/theme.css
/logo.gif
/main.js
上面的 manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的。
NETWORK
下面的 NETWORK 小节规定文件 “login.php” 永远不会被缓存，且离线时是不可用的：
NETWORK:
login.php
可以使用星号来指示所有其他资源/文件都需要因特网连接：
NETWORK:
*
FALLBACK
下面的 FALLBACK 小节规定如果无法建立因特网连接，则用 “offline.html” 替代 /html5/ 目录中的所有文件：
FALLBACK:
/html/ /offline.html
注意: 第一个 URI 是资源，第二个是替补。
更新缓存
一旦应用被缓存，它就会保持缓存直到发生下列情况：
用户清空浏览器缓存
manifest 文件被修改（参阅下面的提示）
由程序来更新应用缓存
完整的 Manifest 文件
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.php
FALLBACK:
/html/ /offline.html
Remark提示:以 “#” 开头的是注释行，但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。
关于应用程序缓存的说明
请留心缓存的内容。
一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。为了确保浏览器更新缓存，您需要更新 manifest 文件。
注意: 浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。
（6）HTML5 Web Workers
web worker 是运行在后台的 JavaScript，不会影响页面的性能。
什么是 Web Worker？
- 当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
- web worker 是运行在后台的JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker在后台运行。
浏览器支持
Internet Explorer 10, Firefox, Chrome, Safari 和 Opera 都支持Web workers.
Web Workers 和 DOM
由于 web worker 位于外部文件中，它们无法访问下列 JavaScript 对象：
window 对象
document 对象
parent 对象
（7）HTML5Server-Sent 事件
HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。
Server-Sent 事件 - 单向消息传递
Server-Sent 事件指的是网页自动获取来自服务器的更新。
以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。
例子：Facebook/Twitter 更新、股价更新、新的博文、赛事结果等。
浏览器支持
所有主流浏览器均支持服务器发送事件，除了 Internet Explorer。
接收 Server-Sent 事件通知
EventSource 对象用于接收服务器发送事件通知：
<!DOCTYPE html>
<html>
<body>
<h1>获得服务器更新</h1>
<div id="result"></div>
<script>
if(typeof(EventSource)!=="undefined")
{
var source=new EventSource("/example/html5/demo_sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "<br />";
};
}
else
{
document.getElementById("result").innerHTML="抱歉，您的浏览器不支持 server-sent 事件 ...";
}
</script>
</body>
</html>
（8）插件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h4>1.object 元素</h4>
<p>所有主流浏览器都支持 < object > 标签。ta定义了在 HTML 文档中嵌入的对象。</p>
<p>该标签用于插入对象 (例如在网页中嵌入 Java 小程序, PDF 阅读器, Flash 播放器) </p>
<object width="400" height="50" data="bookmark.swf"></object>
<hr>
<object width="100%" height="500px" data="C:\Users\Administrator\Desktop\学习study\前端学习\html\workspace\7.1.布局 .html"></object>
<hr>
<object data="C:/Users/Administrator/Desktop/学习study/前端学习/html/workspace/pictures/1.png"></object>
<hr>
<object height="50" width="100" data="horse.mp3"></object>
<h4>2.embed 元素</h4>
<p>所有主流浏览器都支持 < embed > 标签。表示一个 HTML Embed 对象 。</p>
<p>该元素在 HTML 5 页面上会被验证，在 HTML 4 上不会。</p>
<p>没有关闭标签。 不能使用替代文本。</p>
<embed width="400" height="50" src="bookmark.swf">
<hr>
<embed width="100%" height="500px" src="C:\Users\Administrator\Desktop\学习study\前端学习\html\workspace\7.1.布局 .html">
<hr>
<embed src="C:/Users/Administrator/Desktop/学习study/前端学习/html/workspace/pictures/1.png">
<hr>
<embed height="50" width="100" src="horse.mp3">
</body>
</html>
（9）音视频
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>1.音频</h1>
<h4>（1） HTML5 audio 元素</h4>
<audio controls>
<source src="C:/Users/Administrator/Desktop/学习study/前端学习/html/workspace/yinshipin/song.mp3" type="audio/mpeg">
<source src="C:/Users/Administrator/Desktop/学习study/前端学习/html/workspace/yinshipin/song.ogg" type="audio/ogg">
您的浏览器不支持该音频格式。
</audio>
<hr>
<h4>（2）embed</h4>
<audio controls>
<source src="C:/Users/Administrator/Desktop/学习study/前端学习/html/workspace/yinshipin/song.mp3" type="audio/mpeg">
<source src="C:/Users/Administrator/Desktop/学习study/前端学习/html/workspace/yinshipin/song.ogg" type="audio/ogg">
<embed height="50" width="100" src="horse.mp3">
</audio>
<hr>
<h4>（3）</h4>
<p><a href="C:/Users/Administrator/Desktop/学习study/前端学习/html/workspace/yinshipin/song.mp3">点击此处播放</a></p>
<hr>
<h4>（4）雅虎</h4>
<p><a href="C:/Users/Administrator/Desktop/学习study/前端学习/html/workspace/yinshipin/song.mp3">播放 mp3</a></p>
<p><a href="C:/Users/Administrator/Desktop/学习study/前端学习/html/workspace/yinshipin/song.wav">播放 wav</a></p>
<p>使用时需要在底部添加一段script代码：</p>
<p>script type="text/javascript" src="http://mediaplayer.yahoo.com/js"</p>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
<hr>
<h1>2.视频</h1>
<h4>（1） HTML5 video元素</h4>
<video width="320" height="240" controls autoplay>
<source src="C:/Users/Administrator/Desktop/学习study/前端学习/html/workspace/yinshipin/movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed width="320" height="240" src="movie.swf">
</object>
</video>
<hr>
<h4>（2）插件</h4>
<p>< embed >显示 Flash 视频</p>
<embed src="intro.swf" width="200" height="200"><p>如果你无法看到该视频,那么可能你的电脑不支持该文件格式。</p>
<p>< object >显示 Flash 视频</p>
<object height="200" width="200" data="intro.swf"></object>
<hr>
<h4>（3）HTML 5 + object + embed</h4>
<video width="320" height="240" controls autoplay>
<source src="C:/Users/Administrator/Desktop/学习study/前端学习/html/workspace/yinshipin/movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed width="320" height="240" src="movie.swf">
</object>
</video>
<hr>
<h4>（4）超链接herf</h4>
<a href="C:/Users/Administrator/Desktop/学习study/前端学习/html/workspace/yinshipin/movie.ogg">播放视频文件</a>
<hr>
<h4>（5）雅虎</h4>
<p><a href="C:/Users/Administrator/Desktop/学习study/前端学习/html/workspace/yinshipin/movie.mp4">播放 mp4</a></p>
<p><a href="C:/Users/Administrator/Desktop/学习study/前端学习/html/workspace/yinshipin/movie.ogg">播放 ogg</a></p>
<p>使用时需要在底部添加一段script代码：</p>
<p>script type="text/javascript" src="http://mediaplayer.yahoo.com/js"</p>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
</body>
</html>
扫一扫
110
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
