概述
HTML5的简述:
HTML5 是下一代 HTML 标准。
HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。
HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
HTML5有哪些改进呢?
新元素，新属性，完全支持 CSS3，Video 和 Audio，2D/3D 制图，本地存储，本地 SQL 数据，Web 应用
现在大多数的浏览器都支持HTML5, 而且HTML5相比XHTNL在书写上更加的简洁了~~话不多说, HTML5走起.
1.<!DOCTYPE html>
文档声明, 声明当前脚本遵循HTML5规范~~
2.<video>
这个标签是用来播放视频资源的, 使用的时候一定要注意文件的格式和浏览器是否支持的问题~~
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="movie.webm" type="video/webm">
</video>
</body>
</html>
3.向浏览器中加入新元素. 具体一点就是说:用JS脚本创造一个标签~~
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>为 HTML 添加新元素</title>
<script>document.createElement("myHero")</script>
<style>
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
<myHero>我的第一个新元素</myHero>
</body>
</html>
注意上面一个实例中,有这么一个JS脚本:<script>document.createElement("myHero")</script>,通过这段脚本创造一个新标签,标签名为myHero
4.<canvas>, 基于JS的绘图工具
实例:
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas">your browser does not support the canvas tag </canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
</body>
</html>
解析:
1)<canvas id="myCanvas">your browser does not support the canvas tag </canvas>, 这里可以理解成一个图形的容器
2)var canvas=document.getElementById('myCanvas'); 查找元素<canvas>, 我们把它理解成寻找图形的容器会更加直观.
3)var ctx=canvas.getContext('2d');这里可以理解成检测绘图环境
容器创建并指定成功了, 绘图环境也符合2d环境了. 接下来要做的就是绘图了~~
5.<audio>, 播放音频文件.
实例:
<!DOCTYPE HTML>
<html>
<body>
<audio src="C:UsersAdministratorDesktop2.mp3" controls="controls">
Your browser does not support the audio element.
</audio>
</body>
</html>
6.<embed>, 在网页中嵌入图片,包括动图.
<IDOCTYPE html>
<body><embed src="C:UsersAdministratorPictures1.jpg"></body>
</html>
7.<datalist>,实质上也是一个下拉列表.通常和<input>联合使用.
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<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>
<p><strong>注意:</strong> Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 标签。</p>
</body>
</html>
在上面这个实例中, <input>中有list="browsers", 呼应datalist列表.
8.<keygen>, 对表单数据进行加密处理(表单提交时). 具体实现:生成密钥对, 私钥在本地, 公钥发送到服务器端.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form action="demo_keygen.php" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>
<p><strong>注意:</strong> Internet Explorer 不支持 keygen 标签。</p>
</body>
</html>
9.<article>, 本质上也是一个布局标签. 和<div>一样.
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<article>
<h1>Internet Explorer 9</h1>
<p> Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。</p>
</article>
</body>
</html>
10.<aside>, 也是一个布局标签.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
</body>
</html>
11.<command>, 设置理论意义上的按钮.
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function save()
{
alert("Some javaScript....");
}
</script>
</head>
<body>
<menu>
<command type="command" label="Save" οnclick="save()">Save</command>
</menu>
<p><b>注意：</b>只有 IE 9 支持 command 标签。</p>
</body>
</html>
上面实例中有这么一个元素:<command type="command" label="Save" οnclick="save()">Save</command>.
这里相当于创建 了一个按钮, 点击"Save"字样, 触发事件.
12.<details><summary>, 一般这两个标签在一起使用, 阐述一个细节. <summary>是<details>的标题.
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<details>
<summary>Copyright 1999-2011.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>
<p><b>注意：</b>目前，只有 Chrome 和 Safari 6 支持 details 标签。</p>
</body>
</html>
13.<dialog>
这个标签很有意思. 相信大家在生活中都见过盖过章的文档吧. <dialog>就相当于在文档上盖的章.
<dialog>有两个属性, open/close. 这两个属性的意思是:显示/不显示<dialog>标签包含的内容
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p><b>注意：</b>目前只有 Chrome 和 Safari 6 支持 dialog 标签。</p>
<table border="1">
<tr>
<th>January <dialog open>This is an open dialog window</dialog></th>
<th>February</th>
<th>March</th>
</tr>
<tr>
<td>31</td>
<td>28</td>
<td>31</td>
</tr>
</table>
</body>
</html>
14.<figure><figcaption>, 两者也是经常一起使用.
<figure>, 其实也是一块独立单元. 该元素包含的内容可以是图像,文字等. <figcaption>是<figure>的标题,对<figure>所包含的流进行概括.
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.</p>
<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>
</body>
</html>
在上面的实例中,我们可以看到:<figure>标签包含了一张图像,<figcaption>是图像的标题.
15.<header><footer><bdi>比较简单. 这里只提<bdi>. <bdi>可以理解成一个独立的单元, 不收父元素的影响.
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>在下面的示例中,显示着每个用户比赛的分数。将用户名从周围的文本方向设置中隔离出来。</p>
<ul>
<li>用户 <bdi>hrefs</bdi>: 60 分</li>
<li>用户 <bdi>jdoe</bdi>: 80 分</li>
<li>用户 <bdi>إيان</bdi>: 90 分</li>
</ul>
<p><b>注意：</b> 目前只有 Firefox 和 Chrome 浏览器支持 bdi 标签。</p>
</body>
</html>
16.<mark>, 标记文本
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>Do not forget to buy <mark>milk</mark> today.</p>
</body>
</html>
17.<meter>, 展示进度条. 常用的属性有:value,min,max
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>展示给定的数据范围：</p>
<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter>
<p><strong>注意：</strong> IE 浏览器不支持 meter 标签。</p>
</body>
</html>
18.<progress>, 显示进度条. 同样,有value,nax这两个属性
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
下载进度：
<progress value="22" max="100">
</progress>
<p><strong>注意：</strong> IE 9 或者更早版本的 IE 浏览器不支持 progress 标签。</p>
</body>
</html>
19.<ruby><rp><rt>, 三个标签一般同时使用. 起到注释作用.
想必大家都知道小时候学汉字的时候,拼音都注释在汉字上方. 现在我们就用上面三个标签在网页上实现相同的效果.
其中, <ruby>标签包含的是汉字,<rp><rt>, 而<rt>包含的是汉字注释
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<ruby>
漢 <rp><rt>Kan</rt><rp>
字 <rp><rt>ji</rt></rp>
</ruby>
</body>
</html>
在上面的实例中,我们可以看到<ruby><rp><rt>是怎么使用的. 其实,<rp>没什么卵用~~
20.<canvas>
1).这个标签是干什么的??
该标签是用来绘制图形/图像的. 这里需要注意:<canvas>只是图形容器, 图形的绘制是基于JS完成的~~
<canvas>标签可以绘制路径, 圆, 盒, 字符,图像
首先来一个简单的实例, 看一下<canvas>是怎么用的~
如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
</body>
</html>
从上面的实例我们可以看到: <canvas>, 图形容器. 在浏览器上就是开辟的一块画布. 这里稍微提一下: id标识<canvas>这个元素~
接下来再看另一个实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,200,100);
</script>
</body>
</html>
我们来解析一下上面的实例:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> 浏览器上创建一个画布, 宽:200px, 高:100px, 实线边框
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,200,100);
</script>
容器有了之后, 现在就是用JS脚本在容器中绘制图形了~~
var c=document.getElementById("myCanvas"); 通过<canvas>中的id属性找到事先在网页上上开辟的画布
var ctx=c.getContext("2d"); 创建画布 的2d绘图环境对象
2d绘图环境对象有了之后, 接下来我们就可以通过该对象中方法绘制路径,盒,圆,字符,添加图像了~~
ctx.fillRect(0,0,150,75); 在画布中绘制矩形, 该方法参数分别是起始位置, 矩形的宽, 矩形的高
ctx.fillStyle="#FF0000"; 该属性可以指明矩形的css颜色, 渐变效果, 图案. 默认情况下, 该属性指明矩形是黑色的.
上面的实例搞懂之后,我们来看一下下面这个实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>
接下来,我们解析一下上面这个例子:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">...</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
...
</script> 这几句大会意思就是:准备一个容器,找到这个容器, 然后创建2d绘图环境对象. 上面的实例中有说到~
ctx.moveTo(0,0); 这句话的意思:指明路径的起始位置
ctx.lineTo(200,100); 这句话的意思是:制定路径的结束位置.
ctx.stroke(); 这句话才是真正的绘制路径.
接下来,我们看另外一个实例(绘制圆):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.strokeStyle="red";
ctx.arc(95,40,40,0,2*Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle="blue";
ctx.arc(95,60,40,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>
上面这个实例中有几个点需要我们注意:
1)ctx.beginPath(); 如果我们想在画布中画出两个不同的圆, 这个时候就要用到ctx.beginPath()
2)ctx.strokeStyle="red"; 指明所画圆的颜色是红色
3)ctx.arc(95,40,40,0,2*Mah.PI); 指明所画圆的位置. 其中参数分别表示: 圆心, 半径, 起始弧度, 终止弧度~
画布中绘制文字, 我们来看一下下面这个实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
</script>
</body>
</html>
上面这个实例有几个需要注意的地方:
ctx.font="30px Arial"; 指明字体大小为30px, 字体类型是Arial
ctx.fillText("Hello World",10,50); 在画布的(10,50)位置上填充"Hello World"字样, (10,50)是一个坐标~
这里我们需要注意:还可以用ctx.srokeText("Hello World",10,50);填充文字. 而用这个函数填充的文字是空心的~
图形渐变, 我们来看下面一个实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<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(0.5,"black");
grd.addColorStop(0.75,"blue");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
</script>
</body>
</html>
var grd=ctx.createLinearGradient(0,0,200,0); 借助2d绘图环境对象创建线性渐变对象(左-->右)
grd.addColorStop(0,"red");
grd.addColorStop(0.5,"black");
grd.addColorStop(0.75,"blue");
grd.addColorStop(1,"white");
这几个语句指明:0px~100px 颜色由红到黑渐变, 100px~150px 颜色由黑到蓝渐变 以此类推~
ctx.fillStyle="grd"; 按照上面的渐变规律开始填充颜色~
对于渐变我们再来看另外一个例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
</script>
</body>
</html>
现在我们来仔细分析一下上面的例子:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script> 网页上开辟一块画布(200px*100px)
var c=document.getElementById("myCanvas"); 找到这块画布~
var ctx=c.getContext("2d"); 创建2d绘图环境对象
// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100); 借助2d绘图环境对象创建渐变对象
grd.addColorStop(0,"red");
grd.addColorStop(1,"white"); 这两句意思是:由(75,50,5)所定的圆铺满红色, 外圆,内圆之间的部分颜色由红到白渐变~
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80); 这两句意思是:向所定的矩形内按上述渐变规律填充颜色
写入图像, 我们来看下面的实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>Image to use:</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 #d3d3d3;">
您的浏览器不支持 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>
我们来解析一下上面的例子:
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p> 这句话的执行实际上也就相当于给我们提供了一个图像
img.onload = function() {
ctx.drawImage(img,10,10);
} 找到指定图像之后, 自动执行JS函数,在画布中写入图像~
21.内联SVG
svg和上面所说的canvas一样, 可以在网页中绘制图形. 他的优点就是:绘制出来的图形不失真~ 平时使用的比较少,这里不多做介绍.
22.MathML
描述:
HTML5 可以在文档中使用 MathML 元素，对应的标签是 <math>...</math>
MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言
下面我们来看几个实例:
1)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<math xmlns="http://www.w3.org/1998/Math/MathML"> <!--xmlns="...", 命名空间. 该属性所在元素中的内容都在该空间-->
<mrow> <!--该标签中可以包含锁哥表达式-->
<msup><mi>a</mi><mn>2</mn></msup> <!--<mi>,包含字符. <mn>,包含数字. <mo>,包含操作符-->
<mo>+</mo>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>=</mo>
<msup><mi>c</mi><mn>2</mn></msup>
</mrow>
</math>
</body>
</html>
2)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>A</mi>
<mo>=</mo>
<mfenced open="[" close="]"> <!--定义矩阵公式外围的中括号-->
<mtable> <!--leixi-->
<mtr>
<mtd><mi>x</mi></mtd>
<mtd><mi>y</mi></mtd>
</mtr>
<mtr>
<mtd><mi>z</mi></mtd>
<mtd><mi>w</mi></mtd>
</mtr>
</mtable>
</mfenced>
</mrow>
</math>
</body>
</html>
对于上面的实例,我本意是要在网页输出一个矩阵公式, 但是效果没能实现出来. 对于上例哪里出错了, 细心的朋友请留言~
23.拖放
直接实例走起:
1)
<!DOCTYPE HTML>
<html>
<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>拖动 RUNOOB.COM 图片到矩形框中:</p>
<!--
οndragοver="allowDrop(event) 规定img元素可以拖动到div元素中, 同时靠ev.preventDefault()阻止事件的默认处理方式
οndrag="drop(event)" 把img元素放置到div容器中
-->
<div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>
<br>
<!--
draggable="true" 设置图像可拖动
οndragstart="drag(event)" 拖动时触发事件, 即将img元素的id属性记录在事件中, 数据类型:Text. ev.target相当于img元素
-->
<img id="drag1" src="/images/logo.png" draggable="true" οndragstart="drag(event)" width="336" height="69">
</body>
</html>
2)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<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);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)">
<img src="img_w3slogo.gif" draggable="true" οndragstart="drag(event)" id="drag1" width="88" height="31"></div>
<div id="div2" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>
</body>
</html>
24.地理定位
1)定位当前信息
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button οnclick="getLocation()">点我</button><!--点击普通按钮,触发事件-->
<script>
//找到p元素
var x=document.getElementById("demo");
function getLocation()
{
//通过navigator.geolocation判断浏览器是否支持地理定位
if (navigator.geolocation)
{
//如果支持.通过navigator.geolocation.getCurrentPosition()获取当前位置信息
//如果获取当前位置信息成功,执行showPosition(), 并将coordinates对象传给position
navigator.geolocation.getCurrentPosition(showPosition);
}
else
{
//如果浏览器不支持地理定位, 输出下面文本
x.innerHTML="该浏览器不支持获取地理位置。";
}
}
function showPosition(position)
{
x.innerHTML="纬度: " + position.coords.latitude +
"<br>经度: " + position.coords.longitude;
}
</script>
</body>
</html>
2)地理定位失败的原因:
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button οnclick="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;
}
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>
除此之外, 还能降地理定位信息放到谷歌/百度地图上, 这个我没搞懂~~ 有知道的请留言!!
25.<video>, 在网页中播放视频
请转:http://www.runoob.com/html/html5-video.html
26.<audio>, 和<video>用法相似
请转:http://www.runoob.com/html/html5-audio.html
27.html5新增的input元素中type属性的值
请转:http://www.runoob.com/html/html5-form-input-types.html
28.html5中新增的表单元素
1)<datelist>, 在输入框中添加一个预选列表
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<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>
<p><strong>注意:</strong> Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 标签。</p>
</body>
</html>
2)<keygen>, 表单提交时生成与表单数据相应的密钥对, 私钥在本地, 公钥在服务端
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form action="demo_keygen.php" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>
<p><strong>注意:</strong> Internet Explorer 不支持 keygen 标签。</p>
</body>
</html>
3)<output>, 用于计算
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form οninput="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>
<p><strong>注意:</strong> Internet Explorer 不支持 output 标签。</p>
</body>
</html>
解析:我们可以看到上面的例子中有两个不同类型的输入框, 而output元素负责将两个输入框中的内容相加求和~
29.html5新增的表单元素属性
1)autocomplete, 如果该属性的值是on,浏览器会记录输入, off-->不会记录
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<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>
<p>填写并提交表单，然后重新刷新页面查看如何自动填充内容。</p>
<p>注意 form 的 autocomplete 属性为 "on"（开），但是 e-mail 自动为“off”（关）。</p>
</body>
</html>
在上面的例子中我们可以看到form元素中autocomplete属性的值是on, 而input元素中autocomplete属性的值是off, 这种情况下浏览器不会保留email的输入记录的.
2)novalidate, form元素中一旦有了这个属性, 提交的表单数据不进行检测
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form action="demo-form.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>
<p><strong>注意：</strong>在 Safari 和 Internet Explorer 9 及之前的版本中不支持 novalidate 属性。</p>
</body>
</html>
3)autofocus, input元素属性, 页面加载完成时自动聚焦
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form action="demo-form.php">
First name: <input type="text" name="fname" autofocus><br>
Last name: <input type="text" name="lname"><br>
<input type="submit">
</form>
<p><strong>注意：</strong> Internet Explorer 9及更早 IE 版本不支持 input 标签的 autofocus 属性。</p>
</body>
</html>
这里提到的自动聚焦是什么意思呢? 自动聚焦-->默认从哪个input元素开始输入~
4)form, 指定表单元素隶属于哪个表单
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form action="demo-form.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
</form>
<p> "Last name" 字段没有在 form 表单之内，但它也是 form 表单的一部分。</p>
Last name: <input type="text" name="lname" form="form1">
<p><b>注意:</b> IE 不支持 form 属性</p>
</body>
</html>
我们观察一下上面的例子, 不难发现:一个input元素在表单外面. 但是由于input元素中form属性的存在,指明了该元素隶属于哪个表单.
5)formaction, 指明表单数据提交至哪个文件进行处理. 该属性会覆盖form元素中action属性
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<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>
<p><strong>注意：</strong> Internet Explorer 9及更早 IE 版本不支持 input 标签的 formaction 属性。</p>
</body>
</html>
6)formenctype, 表单数据以指定的编码格式输送到服务器
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<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>
<p><strong>注意：</strong> Internet Explorer 9及更早 IE 版本不支持 input 标签的 formenctype 属性。</p>
</body>
</html>
在上面的实例中, form元素有自己的默认编码格式(编码格式由enctype属性指定). 而input元素中fomenctype属性的存在覆盖了默认的编码
7)formmethod, 指定表单是数据的发送方式
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form action="demo-form.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
<input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交">
</form>
<p><strong>注意：</strong> Internet Explorer 9及更早 IE 版本不支持 input 标签的 formmethod 属性。</p>
</body>
</html>
在上面这个例子中,input元素中的formmethod属性覆盖了form元素中的method属性~
8)formnovalidate,表单数据提交时无需被验证. 该属性同样覆盖form元素中的novalidate属性
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<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>
<p><strong>注意：</strong> Internet Explorer 9及更早 IE 版本,或 Safari 不支持 input 标签的 formnovalidate 属性。</p>
</body>
</html>
9)formtarget, 指定提交后的数据是在父窗口处理, 还是新建窗口处理.
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<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="正常提交">
<input type="submit" formtarget="_blank" value="提交到一个新的页面上">
</form>
<p><strong>注意：</strong> Internet Explorer 9及更早 IE 版本不支持 input 标签的 formtarget 属性。</p>
</body>
</html>
10)width, height
描述: 我们的提交按钮可以是一张图片. 既然是图片,我们就可以设置它的宽和高
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form action="demo-form.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="image" src="img_submit.gif" alt="submit" width="80" height="48">
</form>
</body>
</html>
11)list, 在输入框中整一个下拉列表
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<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>
<p><strong>注意:</strong> Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 标签。</p>
</body>
</html>
12)min,max 指定最小/大值
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form action="demo-form.php">
输入 1980-01-01 之前的日期:
<input type="date" name="bday" max="1979-12-31"><br>
输入 2000-01-01 之后的日期:
<input type="date" name="bday" min="2000-01-02"><br>
数量 (在1和5之间):
<input type="number" name="quantity" min="1" max="5"><br>
<input type="submit">
</form>
<p><strong>注意:</strong> Internet Explorer 9及更早 IE 版本，Firefox 不支持 input 标签的 max 和 min 属性。</p>
<p><strong>注意:</strong>
在 Internet Explorer 10中 max 和 min 属性不支持输入日期和时间，IE 10 不支持这些输入类型。</p>
</body>
</html>
13.multiple, input元素有了multiple属性之后, 可以一次性选择多个文件.
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form action="demo-form.php">
选择图片: <input type="file" name="img" multiple>
<input type="submit">
</form>
<p>尝试选取一张或者多种图片。</p>
<p><strong>注意:</strong> Internet Explorer 9及更早 IE 版本不支持 input 标签的 multiple 属性。</p>
</body>
</html>
14.pattern, 属性值是一个正则表达式. 提交表单数据时,会验证其所属元素的内容是否符合指定的正则
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form action="demo-form.php">
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
<input type="submit">
</form>
<p><strong>注意:</strong> Internet Explorer 9及更早 IE 版本，或 Safari 不支持 input 标签的 pattern 属性。</p>
</body>
</html>
15)placeholder, 提示要输入什么内容~~ 该属性和value属性还是有很大差别的
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form action="demo-form.php">
First name：<input type="text" name="fname" value="112" placeholder="First name"><br>
Last name：<input type="text" name="lname" placeholder="Last name"><br>
<input type="submit" value="提交">
</form>
<p><strong>注意：</strong> Internet Explorer 9及更早 IE 版本不支持 input 标签的 placeholder 属性。</p>
</body>
</html>
16)required, 该属性所在元素对应的文本框必须有内容, 否则表单不会提交
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form action="demo-form.php">
Username: <input type="text" name="usrname" value="qwww" required>
<input type="submit">
</form>
<p><strong>注意：</strong> Internet Explorer 9及更早 IE 版本，或 Safari 不支持 input 标签的 required 属性。</p>
</body>
</html>
17)step, 设置数字间隔~~ 比如:我们设置文本框可输入数字的范围是1~5, 有了step="2"这个属性之后,我们只能在输入框中输入1,3,5
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form action="demo-form.php">
<input type="number" name="points" step="2" min="1" max="5">
<input type="submit">
</form>
<p><strong>注意：</strong> Internet Explorer 9及更早 IE 版本，或 Firefox 不支持 input 标签的 step 属性。</p>
</body>
</html>
30.html5 web存储
描述:web存储和cookie的作用一样, 都是用来存储用户的浏览信息. web存储主要依靠两个对象:localStorage, sessionStorage. localStorage, 用于不限时存储. sessionStorage, 基于会话存储.
1)localStorage对象的使用:
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<div id="result"></div>
<script>
//通过typeof(Storage)!=="undefined" 判断浏览器是否支持localStorage,sessionStorage对象
if(typeof(Storage)!=="undefined")
{
//向localStorage对象中放了一个键值对
localStorage.sitename="菜鸟教程";
//找到div元素
var x=document.getElementById("result");
//修改div元素中的内容
x.innerHTML="网站名：" + localStorage.sitename;
}
else
{
//反之,浏览器不支持localStorage,sessionStorage对象. 这里给出提示信息
document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。";
}
</script>
</body>
</html>
2)localStorage, sessionStorage 所用的API是相同的, 即有相同的方法~
localStorage.setItem(key,value) 保存数据(键值对)
localStorage.getItem(key) 读取数据(根据key获取value)
localStorage.removeItem(key) 删除单个键值对
localStorage.clear() 删除对象中的所有键值对(清空对象)
localStorage.key(index) 获得某个索引的key
3)记录用户的浏览次数. 这里用到了localStorage对象中的clickcount
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function clickCounter()
{
//通过typeof(Storage)!==undefined 判断浏览器是否支持localStorage,sessionStorage对象
if(typeof(Storage)!=="undefined")
{
//浏览器支持localStorage对象, 然后判断localStorage.clickcount是否不为空
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML=" 你已经点击了按钮 " + localStorage.clickcount + " 次 ";
}
else
{
document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。";
}
}
</script>
</head>
<body>
<p><button οnclick="clickCounter()" type="button">点我！</button></p>
<div id="result"></div>
<p>点击该按钮查看计数器的增加。</p>
<p>关闭浏览器选项卡(或窗口),重新打开此页面,计数器将继续计数(不是重置)。</p>
</body>
</html>
4)sessionStorage对象的使用
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function clickCounter()
{
//通过sypeof(Storage)!=="undefined"判断浏览器是否支持localStorage,sessionStorage对象
if(typeof(Storage)!=="undefined")
{
//浏览器支持sessionStorage对象的情况下, 判断sessionStorage.clickcount(计数器)是否不为空
if (sessionStorage.clickcount)
{
//如果sessionStorage.clickcount不为空, 在原来的基础上加1
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else//如果sessionStorage.clickcount(计数器)为空, 直接赋值为1
{
sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="在这个会话中你已经点击了该按钮 " + sessionStorage.clickcount + " 次 ";
}
else
{
document.getElementById("result").innerHTML="抱歉，您的浏览器不支持 web 存储";
}
}
</script>
</head>
<body>
<p><button οnclick="clickCounter()" type="button">点我！</button></p>
<div id="result"></div>
<p>点击该按钮查看计数器的增加。</p>
<p>关闭浏览器选项卡(或窗口),重新打开此页面,计数器将重置。</p>
</body>
</html>
这里注意:sessionStorage对象是基于会话的. 浏览器关闭,会话结束,sessionStorage对象中的数据也会被清空
5)localStorage对象综合使用
实例:
<!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" placeholder="sitename"/>
<br/>
<label for="siteurl">网 址(value)：</label>
<input type="text" id="siteurl" name="siteurl" placeholder="siteurl"/>
<br/>
<input type="button" οnclick="save()" value="新增记录"/>
<hr/>
<label for="search_phone">输入网站名：</label>
<input type="text" id="search_site" name="search_site" placeholder="search_site"/>
<input type="button" οnclick="find()" value="查找网站"/>
<p id="find_result"><br/></p>
</div>
<br/>
<div id="list"></div>
<script>
// 载入所有存储在localStorage的数据
loadAll();
//保存数据
function save(){
//我们要拿到网站名, 网址
//依靠id找到对应的元素, 获取元素所包含的内容.
var siteurl = document.getElementById("siteurl").value;
var sitename = document.getElementById("sitename").value;
//调用localStrage对象中的setItem()以键值对形式将获取到的数据保存在localStorage对象中.
localStorage.setItem(sitename, siteurl);
alert("添加成功");
}
//查找数据
function find(){
var search_site = document.getElementById("search_site").value;
var sitename = localStorage.getItem(search_site);
var find_result = document.getElementById("find_result");
find_result.innerHTML = search_site + "的网址是：" + sitename;
}
//将所有存储在localStorage中的键值对提取出来，并展现到界面上
//这里姑且先看成一个数组
function loadAll(){
var list = document.getElementById("list");
if(localStorage.length>0){//
var result = "<table border='1'>";
result += "<tr><td>网站名</td><td>网址</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>
上面这个实例比较抽象, 看的时候需要细心~~ 注释在程序中.
6.JSON.stringify() JSON.parse()应用
实例:
<!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="keyname">别名(key):</label>
<input type="text" id="keyname" name="keyname" class="text" placeholder="keyname"/>
<br/>
<label for="sitename">网站名：</label>
<input type="text" id="sitename" name="sitename" class="text" placeholder="sitename"/>
<br/>
<label for="siteurl">网 址：</label>
<input type="text" id="siteurl" name="siteurl" placeholder="siteurl"/>
<br/>
<input type="button" οnclick="save()" value="新增记录"/>
<hr/>
<label for="search_phone">输入别名(key)：</label>
<input type="text" id="search_site" name="search_site" placeholder="search_site"/>
<input type="button" οnclick="find()" value="查找网站"/>
<p id="find_result"><br/></p>
</div>
<br/>
<div id="list">
</div>
<script>
//保存数据
function save(){
var site = new Object;
site.keyname = document.getElementById("keyname").value;
site.sitename = document.getElementById("sitename").value;
site.siteurl = document.getElementById("siteurl").value;
var str = JSON.stringify(site); // 将对象转换为字符串
localStorage.setItem(site.keyname,str);
alert("保存成功");
}
//查找数据
function find(){
var search_site = document.getElementById("search_site").value;
var str = localStorage.getItem(search_site);
var find_result = document.getElementById("find_result");
var site = JSON.parse(str);
find_result.innerHTML = search_site + "的网站名是：" + site.sitename + "，网址是：" + site.siteurl;
}
//将所有存储在localStorage中的对象提取出来，并展现到界面上
// 确保存储的 keyname 对应的值为转换对象，否则JSON.parse会报错
function loadAll(){
var list = document.getElementById("list");
if(localStorage.length>0){
var result = "<table border='1'>";
result += "<tr><td>别名</td><td>网站名</td><td>网址</td></tr>";
for(var i=0;i<localStorage.length;i++){
var keyname = localStorage.key(i);
var str = localStorage.getItem(keyname);
var site = JSON.parse(str);
result += "<tr><td>"+site.keyname+"</td><td>"+site.sitename+"</td><td>"+site.siteurl+"</td></tr>";
}
result += "</table>";
list.innerHTML = result;
}else{
list.innerHTML = "数据为空...";
}
}
</script>
</body>
</html>
最后
以上就是壮观可乐为你收集整理的HTML5知识点整理的全部内容，希望文章能够帮你解决HTML5知识点整理所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复