您的位置：首页 > Web前端 > HTML5

HTML5的学习

2016-11-08 02:26 169 查看

新技术框架，主体还是HTML5，虽然之前看过一些html4，但现在还是没有一个比较清晰的概念，这部分，我的深看！

HTML5简介

HTML5的设计目的是为了在移动设备上支持多媒体

html5新特性

- 用于绘画的canvas（画布）元素

- 用于媒介回放的video和audio元素

- 对本地离线存储的更好支持

- 新的特殊内容元素 article、footer、header、nav、section

- 新的表单控件 calendar、date、time、email、url、search

- 完全支持css3

- 2D、3D制图

- 本地sql数据

- web应用

文档类型声明，说明这是html5

<!DOCTYPE html>

HTML5浏览器支持

针对IE浏览器html5shiv 是比较好的解决方案。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。

<head>
<!--[if lt IE 9]>
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>

html5shiv.js 引用代码必须放在

<head>

元素中，因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。

HTML5新元素

<canvas>

标签只是图形容器，您必须使用脚本来绘制图形。

注释：

<canvas>

元素中的任何文本将会被显示在不支持

<canvas>

的浏览器中。

canvas可以进行一些2d3d绘图一个入口，javascript的绘图API。

音频控件

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

controls是显示音频播放控件

视频控件

<video width="320" height="240" controls>
<source src="movie.mp4"  type="video/mp4">
<source src="movie.ogg"  type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>

source 数据源标签

嵌入标签

<embed src="helloworld.swf" tppabs="http://w3schools.com/tags/helloworld.swf">

字幕标签

<track src="subtitles_en.vtt" kind="subtitles" srclang="en"
label="English">
<track src="subtitles_no.vtt" kind="subtitles" srclang="no"
label="Norwegian">

video、audio标签内部使用

新表单元素

datalist提供input下拉输入提示，可见input用list属性，输入datalist ID

<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>

kegen标签

用于对所输入项进行加密

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

output标签

oninput监听事件，html5中input标签根据type属性的不同，使界面表现更丰富。output的for属性表示参与运算的元素有谁，用空格隔开。

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

页面结构相关新元素

article标签

感觉就是div，字体整体要小一些，里面还是h1、p。

在h5中，设计相关话题，选用相关新标签。

aside标签

没看出有什么用

bdi标签

在文本内部设置自己在左边还是在右边，配合dir看属性使用。好像span的升级版

发现一个事，就目前菜鸟教程而言，一些标签还不适用于所有浏览器。

command标签

倒像是一个js入口，在menu标签里使用。

details标签

下拉抽屉备注效果，初始只显示summary标签内容。open属性初始显示详情内容。

<details open>
<summary>Copyright 1999-2011.</summary>
<p>文本</p>
<p>文本</p>
</details>

Tip：b标签，加粗。

dialog标签

没看出有什么用处，示例中在表格th中使用

figure标签

规定独立的流内容，照片、图片什么的

像是h5为各种内容定义了专门的外套，还不知道这么做的好处。 figcaption定义底部标题。

<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>

footer页脚标签

一般写文档的作者姓名，版权信息，等等。

header页眉标签

定义了文档的头部区域

<header>

元素应该作为介绍内容或者导航链接栏的容器。

注释：

<header>

标签不能被放在

<footer>、<address>

或者另一个

<header>

元素内部。

**插播：**ReactJS，ReactNative，什么关系？这么说吧，ReactJS是一套Web前端框架，就像AngularJS，而ReactNative我认为是移动端App-UI框架，基于ReactJS，将WebDom组件变成原生组件，如iOS的UIView。就好比AngularJS之于Ionic。

mark标签

标记文本，like span，示例中mark内的文本被黄色标记。

meter度量衡标签

仅用于已知最大和最小值的度量

<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter>

不太清楚，示例显示了进度条，但却说不能当进度条用。

progress进度条标签

定义任何类型的任务的进度。

<progress value="80" max="100">
</progress>

注释：

<progress>

标签不适合用来表示度量衡（例如，磁盘空间使用情况或相关的查询结果）。表示度量衡，请使用

<meter>

标签代替。

nav导航标签

定义导航链接。并不是所有的 HTML 文档都要使用到

<nav>

元素。

<nav>

元素只是作为标注一个导航链接的区域。

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

ruby标签

定义 ruby 注释（中文注音或字符）。

在东亚使用，显示的是东亚字符的发音。

将

<ruby>

标签与

<rt>

和

<rp>

标签一起使用：

<ruby>
元素由一个或多个需要解释/发音的字符和一个提供该信息的
<rt>
元素组成，还包括可选的

<rp>

元素，定义当浏览器不支持 “ruby” 元素时显示的内容。

<ruby>
漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>

rp标签用于当浏览器不支持ruby标签时现实的内容

rt标签的作用，就是让后面的内容放到前面头上，拼音标注方法。

rt标签

定义字符（中文注音或字符）的解释或发音。

rp标签

在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。

section标签

定义文档中的节（section、区段）。

定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。

<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is ...</p>
</section>

html5的套套

time标签

定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。

该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。

<p>我们在每天早上 <time>9:00</time> 开始营业。</p>
<p>我在 <time datetime="2016-02-14">情人节</time> 有个约会。</p>

可以写外面，也可以写里面datetime属性，方便程序识别时间字段。

wbr标签

(Word Break Opportunity) 标签规定在文本中的何处适合添加换行符。

提示：如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用元素来添加 Word Break Opportunity（单词换行时机）。

<p>学习 AJAX ,您必须熟悉 <wbr>Http<wbr>Request 对象。</p>

HTML5弃用的元素

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>

HTML5 Canvas 画布

用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

<canvas>

标签只是图形容器，您必须使用脚本来绘制图形。

你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
如果浏览器不支持 HTML5 canvas 标签，显示此行。
</canvas>

<script>
var c=document.getElementById("myCanvas");
// 上下文
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
// 填充（起点坐标x，起点坐标y，宽，高）
ctx.fillRect(0,0,200,100);
</script>

Canvas路径（划线）

在Canvas上画线，我们将使用以下两种方法：

moveTo(x,y) 定义线条开始坐标

lineTo(x,y) 定义线条结束坐标

var c=document.getElementById("myCanvas");
// 获取上下文 好比抓起画笔
var ctx=c.getContext("2d");
// 移动画笔到起点
ctx.moveTo(0,0);
// 移动画笔到终点
ctx.lineTo(200,100);
// 画
ctx.stroke();

// 画圆
<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95圆心坐标x,50圆心坐标y,40半径,0start？,2*Math.PI画多少);
ctx.stroke();

</script>

// 绘制文本
<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 绘制文本
ctx.font="30px Arial";
// 填充文本  内容 起始坐标xy
ctx.fillText("Hello World",10,100);
// 画空心文本
ctx.strokeText("Hello World",10,50);
</script>

Canvas渐变

以下有两种不同的方式来设置Canvas渐变：

createLinearGradient(x,y,x1,y1) - 创建线条渐变

createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

当我们使用渐变对象，必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.

使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。

使用 createLinearGradient():

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// 创建渐变
var grd=ctx.createLinearGradient(0,0,200宽？,0高？);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

创建一个径向/圆渐变

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// 创建渐变
// createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)
// createRadialGradient前三个参数是起始圆（cycle1）的x、y、半径，后三个是终点圆（cycle2）的x、y、半径。
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

Canvas图像

把一幅图像放置到画布上, 使用以下方法:

drawImage(image,x,y)

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
// 当img加载完毕执行的脚本语句
img.onload = function() {
// 画现成图像
ctx.drawImage(img,10,10);
}
</script>

HTML5 内联 SVG

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

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

SVG优势

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

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

- SVG 图像可被搜索、索引、脚本化或压缩

- SVG 是可伸缩的

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

// 外面是库，里面是具体的矢量图案
<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>

SVG 与 Canvas两者间的区别

SVG 是一种使用 XML 描述 2D 图形的语言。

Canvas 通过 JavaScript 来绘制 2D 图形。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

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

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

SVG再单花时间看

HTML MathML

HTML5 可以在文档中使用 MathML 元素，对应的标签是

<math>...</math>

。

MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。

// 书写a²+b²=c²
<math xmlns="http://www.w3.org/1998/Math/MathML">

<mrow行>
<msup次方><mi项目>a</mi><mn幂>2</mn></msup>
<mo运算符>+</mo>

<msup><mi>b</mi><mn>2</mn></msup>
<mo>=</mo>

<msup><mi>c</mi><mn>2</mn></msup>
</mrow>

</math>

HTML5 拖放（Drag 和 Drop）

先Drag，后Drop。

<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<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>

<p>拖动 W3CSchool.cc 图片到矩形框中:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>

HTML5 地理定位

不知为什么，同意浏览器访问位置后，就没反应了。

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

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

视频格式

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

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

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

音频格式的MIME类型

MP3 audio/mpeg

Ogg audio/ogg

Wav audio/wav

HTML5 新的 Input 类型

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
// 注意:并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。

1.颜色
<form action="demo-form.php">
选择你喜欢的颜色: <input type="color" name="favcolor"><br>
<input type="submit">
</form>
2.日期 没有报错
<form action="demo-form.php">
生日: <input type="date" name="bday">
<input type="submit">
</form>

3.日期时间，并没有看到2.3的图形选择界面，没有报错。
<form action="demo-form.php">

生日 (日期和时间): <input type="datetime" name="bdaytime">

<input type="submit">

</form>

4.当地的时日时间，still no effect，没有报错。
<form action="demo-form.php">
生日 (日期和时间): <input type="datetime-local" name="bdaytime">
<input type="submit">
</form>

5.email 效果就是，自带报错信息。
<form action="demo-form.php">
E-mail: <input type="email" name="usremail">
<input type="submit">
</form>

6.月份， 没有报错。
<form action="demo-form.php">
生日 ( 月和年 ): <input type="month" name="bdaymonth">
<input type="submit">
</form>

7.数字，有报错信息。
<form action="demo-form.php">
数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5">
<input type="submit">
</form>

Input 类型: range

既有样式的滚动条

<form action="demo-form.php" method="get">
Points: <input type="range" name="points" min="1" max="10">
<input type="submit">
</form>

搜索类型输入

没看出于普通文本输入有什么关系？

<form action="demo-form.php">
Search Google: <input type="search" name="googlesearch"><br>
<input type="submit">
</form>

电话输入

没看出有什么区别，没有报错信息。

<form action="demo-form.php">
电话号码: <input type="tel" name="usrtel"><br>
<input type="submit">
</form>

突然想到一点：为什么有的没反应，是因为现在当前我用的火狐浏览器还不支持该控件。

time输入

没什么区别，没有报错信息。

<form action="demo-form.php">
选择时间: <input type="time" name="usr_time">
<input type="submit">
</form>

Input 类型: url

<form action="demo-form.php">
添加你的主页: <input type="url" name="homepage"><br>
<input type="submit">
</form>

Input 类型: week

输出值样式： 2017-W05

<form action="demo-form.php">
选择周: <input type="week" name="year_week">
<input type="submit">
</form>

input有很多属性

input的种类如下：

button
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week

HTML5新表单元素

// 使用 <input> 元素的列表属性与 <datalist> 元素绑定.
<datalist>
// 表单字段密钥对生成器 当提交表单时，会生成两个键，一个是私钥，一个是公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
// 尚不知秘钥和前面input如何实现绑定？
<keygen>

// 输出控件
<output>

HTML5表单属性

<form> / <input>
autocomplete 属性

就是输入记忆功能，对输过的字段又提示，点击自动完成。我觉得这与浏览器缓存有关。

<form action="demo-form.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>

<form>
novalidate 属性

关闭表单校验

<form action="demo-form.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>

<input>
autofocus 属性

让谁默认获得焦点

First name: <input type="text" name="fname" autofocus>

<input>
form 属性

在form外的input，声明自己是那个表单的。

Last name: <input type="text" name="lname" form="form1">

<input>
formaction 属性

定义表单提交的URL地址，提交到哪个子页面。

该属性只用于 type=”submit” 和 type=”image”时，且该属性会覆盖

<form>

元素中的action属性。

<form action="demo-form.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交"><br>
<input type="submit" formaction="demo-admin.php"
value="提交">
</form>

<input>
formenctype 属性

定义表单提交到服务器的编码类型，只当form是post的时候，且仅当input类型为submit或image时才使用。

<form action="demo-post_enctype.php" method="post">
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
<input type="submit" formenctype="multipart/form-data"
value="以 Multipart/form-data 提交">
</form>

<input>
formmethod属性

定义表单提交方式，当submit、image情形同上。

<input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交">

<input>
formnovalidate 属性

不验证提交，submit时使用。

<form action="demo-form.php">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="提交"><br>
<input type="submit" formnovalidate="formnovalidate" value="不验证提交">
</form>

<input>
formtarget 属性

规定在何处打开action的URL

_blank  在新窗口中打开。
_self   默认。在相同的框架中打开。
_parent     在父框架集中打开。
_top    在整个窗口中打开。
framename   在指定的框架中打开。

...
<input type="submit" formtarget="_blank" value="提交到一个新的页面上">
</form>

<input>
height 和 width 属性

只适用于image类型的input，好比图标按钮。就是说按钮还有一种input形式。

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

<input>
list 属性

绑定哪个datalist id，输入备选项。

<input>
min 和 max 属性

min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。

注意: min、max 和 step 属性适用于以下类型的

<input>

标签：date pickers、number 以及 range。

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

<input>
multiple 属性

multiple 属性是一个 boolean 属性.

multiple 属性规定

<input>

元素可选择多个值。

注意: multiple 属性适用于以下类型的

<input>

标签：email 和 file:

选择图片: <input type="file" name="img" multiple>

<input>
pattern 属性

输入的正则校验，自定义校验规则，title属性为自定义错误信息。注意:pattern 属性适用于以下类型的

<input>

标签: text, search, url, tel, email, 和 password.

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

<input>
placeholder 属性

注意: placeholder 属性适用于以下类型的

<input>

标签：text, search, url, telephone, email 以及 password。

<input>
required 属性

哪个input是必填的

required 属性适用于以下类型的

<input>

标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

Username: <input type="text" name="usrname" required>

<input>
step 属性

就是步长

step 属性与以下type类型的input一起使用: number, range, date, datetime, datetime-local, month, time 和 week.

<input type="number" name="points" step="3">

HTML5语义元素

引入一个概念，语义元素，就是带有特殊意味的元素。

无语义元素：如div，span等，无需考虑包含内容。

语义元素：如form，table，img，清楚地定义了包含的内容。

HTML5中新的语义元素

<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>

HTML5
<section>
元素

就是区段，任何内容你都可以套一个section。

HTML5
<article>
元素

定义独立的内容，使用场景：论坛帖子forum post，博客帖子，新闻故事，评论等。

HTML5
<nav>
元素

定义导航链接，但是不是所有的链接都需要包含在nav里。

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

HTML5
<aside>
元素

定义页面主区域内容之外的内容（比如侧边栏）。

aside的内容应与主区域的相关。

HTML5
<header>
元素

描述文档的头部区域

HTML5
<footer>
元素

文档的底部区域，作者、著作权什么的。

HTML5
<figure>
和
<figcaption>
元素

规定独立的流内容，图像，照片，图标之类。figcaption为流标题，放在下面就是底部标题。

<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>

刚说的这些都是块元素，除了figcaption，为了解决个别浏览器不认以上块元素，你可以在，像是表里写下：

means display them as block.

header, section, footer, aside, nav, article, figure
{
display: block;
}

Internet Explorer 8 及更早IE版本不认怎么办？

IE8 及更早IE版本无法在这些元素中渲染CSS效果，以至于你不能使用

<header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>,

或者其他的HTML5 elements.

解决办法: 你可以使用HTML5 Shiv Javascript脚本来解决IE的兼容问题。HTML5 Shiv下载地址：http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js

下载后，将以下代码放入的网页中：

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

以上代码在浏览器小于IE9版本时会加载html5shiv.js文件. 你必须将其放置于

<head>

元素中，因为 IE浏览器需要在头部加载后渲染这些HTML5的新元素。

HTML5 Web存储

一个比cookie更好的本地存储方式

什么是HTML5 web存储？

使用HTML5可以在本地存储用户的浏览数据，早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能。

数据以 键/值对存在, web网页的数据只允许该网页访问使用。

localStorage和sessionStorage

这是客户端存储数据的两个对象。

- localStorage：没有时间限制的数据存储

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

浏览器支持校验：

if(typeof(Storage)!=="undefined")
{
// 是的! 支持 localStorage  sessionStorage 对象!
// 一些代码.....
} else {
// 抱歉! 不支持 web 存储。
}

localStorage对象

localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

<div id="result"></div>
<script>
if(typeof(Storage)!=="undefined")
{
localStorage.sitename="菜鸟教程";
document.getElementById("result").innerHTML="网站名：" + localStorage.sitename;
}
else
{
document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。";
}
</script>

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

保存数据：localStorage.setItem(key,value);

读取数据：localStorage.getItem(key);

删除单个数据：localStorage.removeItem(key);

删除所有数据：localStorage.clear();

得到某个索引的key： localStorage.key(index);

键值对通常以字符串存入，涉及数字，还需先转格式在字符化。否则如下例子点击计数就会出现111111，而不是2,3,4…

localStorage.clickcount=Number(localStorage.clickcount)+1;

sessionStorage对象

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

JSON.stringify

JSON obj to str:

var site = new Object;
...
var str = JSON.stringify(site); // 将对象转换为字符串

str to JSON obj:

var site = JSON.parse(str);

你需要确保 localStorage 存储的数据都为 JSON 格式，否则 JSON.parse(str) 将会报错。确保str都为JSON格式吧？

HTML5 Web SQL 数据库

Q：示例都没效果，怎么在本地使用数据库？

在Chrome里有效果，在浏览器里有个Web SQL 里面是建立的数据库mydb。就好比iOS 有sqlite 或 coredata一样。

所以叫 HTML5 Web SQL。

核心方法

openDatabase：使用现有或新建一个数据库

transaction：控制一个事务，执行提交或回滚

executeSql: 用于sql语句查询

打开数据库

var db = openDatabase('mydb数据库名','1.0版本号','Test DB描述',2*1024*1024数据库大小); 还有创建回调

查询

ts.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)

// 抓取数据库
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
// 在数据库mydb中创建一个LOGS表，有两个字段id和log。
db.transaction(function(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
});

插入数据

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
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 (?, ?'), [e_id, e_log];
});

读取数据

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);
});

删除记录

db.transaction(function (tx) {
tx.executeSql('DELETE FROM LOGS  WHERE id=1');
});
// 动态删除
tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]);

更新记录

db.transaction(function (tx) {
tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2');
});
// 动态更新
db.transaction(function(tx) {
tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=?', [id]);
});

HTML5 应用程序缓存

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

什么是应用程序缓存（Application Cache）？

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

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

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

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

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

就是：变的再去访问服务器，不变的直接读本地缓存。

完成的Manifest文件

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.php

FALLBACK:
/html/ /offline.html

需要在html标签中包含manifest属性

<!DOCTYPE HTML>
<html manifest="demo.appcache">
<head>
...
</html>

manifest 文件的建议的文件扩展名是：”.appcache”。

请注意，manifest 文件需要配置正确的 MIME-type，即 “text/cache-manifest”。必须在 web 服务器上进行配置。

HTML5 Web Workers

web worker 是运行在后台的 JavaScript，不会影响页面的性能。

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。

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 = "抱歉，你的浏览器不支持 Web Workers...";
}
}

function stopWorker()
{
w.terminate();
// 将指针回收
w = undefined;
}

// demo_workers.js代码
var i=0;

function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}

timedCount();

Web Workers 和 DOM

由于 web worker 位于外部文件中，它们无法访问下例 JavaScript 对象：

window 对象

document 对象

parent 对象

HTML5 服务器发送事件（Server-Sent Events）

Server-Sent 事件指的是网页自动获取来自服务器的更新。

EventSource 对象用于接收服务器发送事件通知

if(typeof(EventSource)!=="undefined")
{
var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "<br>";
};
}

onopen事件：当通往服务器的连接被打开

onerror事件：当发生错误

HTML5 WebSocket

function WebSocketTest()
{
if ("WebSocket" in window)
{
alert("您的浏览器支持 WebSocket!");

// 打开一个 web socket
var ws = new WebSocket("ws://localhost:9998/echo");

ws.onopen = function()
{
// Web Socket 已连接上，使用 send() 方法发送数据
ws.send("发送数据");
alert("数据发送中...");
};

ws.onmessage = function (evt)
{
var received_msg = evt.data;
alert("数据已接收...");
};

ws.onclose = function()
{
// 关闭 websocket
alert("连接已关闭...");
};
}

else
{
// 浏览器不支持 WebSocket
alert("您的浏览器不支持 WebSocket!");
}
}

安装 pywebsocket

同时需要创建一个服务

$ python setup.py build
$ sudo python setup.py install
$ sudo python standalone.py -p 9998 -w ../example/

HTML5测验

2. HTML5 的正确 doctype 是？

你的回答: <!DOCTYPE HTML5>

回答错误!

正确答案：<!DOCTYPE html>

3. 在 HTML5 中，哪个元素用于组合标题元素？

你的回答: <header>

回答错误!

正确答案：<hgroup>

4. HTML5 中不再支持下面哪个元素？

你的回答: <ins>

回答错误!

13. 在 HTML5 中，您能够直接将 SVG 元素嵌入 HTML 页面中。

你的回答: 错误

回答错误!

正确答案：正确
正确答案：<font>

19. 哪种输入类型用于定义周和年控件（无时区）？

你的回答: date

回答错误!

正确答案：week

20. 哪个 HTML5 元素用于显示已知范围内的标量测量？

你的回答: <measure>

回答错误!

正确答案：<meter>

HTML5代码规范

定义好图片的尺寸，在加载时可以预留指定空间，减少闪烁。

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

等号前后可以使用空格。但我们推荐少用空格:

<link rel="stylesheet" href="styles.css">

每行代码尽量少于 80 个字符。

HTML5 中

<title>

元素是必须的，标题名描述了页面的主题:

<head>
<meta charset="UTF-8">
<title>菜鸟教程</title>
</head>

CSS样式规范

将左花括号与选择器放在同一行。

左花括号与选择器间添加一个空格。

使用两个空格来缩进。

冒号与属性值之间添加一空格。

逗号和符号之后使用一个空格。

每个属性与值结尾都要使用分号。

只有属性值包含空格时才使用引号。

右花括号放在新的一行。

每行最多 80 个字符。

HTML5的规范和XHTML的规范大同小异，都是让代码看上去更规整。

HTML及参考手册，需要的时候再查阅，毕竟现在说的是HTML5.

至此，HTML5的学习完结。Now，我可以说我会HTML5了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航