标签：html5
打开sublime text3，新建文件，保存为html文件，然后输入”html：5”,再次按下”Tab”键(首先需要为sublime安装emmet插件)，就会生成html5的文件结构，如下：
<!DOCTYPE html>可以看到在html5中将doctype简化了很多。
<html lang="en"> <!--指定该文档的语言-->
<meta charset="UTF-8"> <!--该文档使用的字符集-->对于文档的语言和指定字符集简化了很多。
在html5当中不区分大小写。
<input type="checkbox" checked> <!--html5的写法-->
<input type="checkbox" checked="checked"> <!--html4的写法-->可以看到在html5当中，如果我需要让某一个boolean类型的标签默认值为true的话，只需要加上该属性，默认就是true，而在html4当中，必须显示的指定该boolean值。
<section> 定义文档中的节（section、区段）。
<article> 定义页面独立的内容区域
<aside> 定义页面的侧边栏内容。
<header> 定义了文档的头部区域
<footer> 定义 section 或 document 的页脚。
<nav> 表示页面导航链接部分<audio> 定义音频内容
<video> 定义视频（video 或者 movie）
<source> 定义多媒体资源 <video> 和 <audio>
<embed> 定义嵌入的内容，比如插件。
<track> 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。这里我写了一个简单的案例，来展示这些新增标签的效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<progress value="59" max="100"></progress>
<p>Do not forget to buy <mark>milk</mark> today.</p>
<p>
To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request Object.
</p>
<canvas id="myCanvas"></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>
<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>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</body>
</html>
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt><html manifest="demo.appcache">
<!--manifest属性表示定义离线应用的文件-->
<meta charset="UTF-8">
<!--charset规定了当前页面的字符集-->
<link rel="stylesheet" type="text/css" href="" size="16*16">
<!--对于现实网站小图标的link元素，新增了size属性，用来表示该图标的大小-->
<base href="http://localhost:8080/test" target="_blank"></base>
<!--当打开当前页面的链接的时候，会以"http://localhost:8080/test作为基本地址，后面会在加上被点击链接的相对地址，target的值表示在新窗口打开"-->
<script defer type="text/javascript" src="" onload=""></script>
<script async type="text/javascript" src="" onload=""></script>
<!--defer属性表示当浏览器加载完成src中的js资源以后，并不执行onload中的方法，而是等到浏览器加载完成当前页面以后才执行-->
<!--async属性表示当浏览器加载完成src中的js资源以后，立即onload中的方法，同时也继续接下剩下的页面-->
<a media="handheld" href="#">手持</a>
<a media="tv" href="#">电视</a>
<!--html5中超链接增加了media属性，用来表示手持设备和电视设备的识别-->
<ol start="40" reversed>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>cddd</li>
</ol>
<!--start属性表示该列表的起始值，reversed属性表示该列表倒序排列-->
<div>
<style type="text/css" scoped>
h1{color: red;}
p{color: green;}
</style>
<h1>this is h1</h1>
<p>this is p</p>
</div>
<!--style中的scoped属性，表示当前的css属性只是对当前标签内部的元素有效果-->
<iframe seamless srcdoc="<h1>hello</h1>" src="http://www.baidu.com"></iframe>
<!--seamless属性表示当前iframe内嵌的页面没有边框，看起来就像当前页面一样，当有了srcdoc属性以后，该iframe将会加载srcdoc中的内容，否则才会加载src中的内容-->首先在官网下载ffmpeg，这里我下载的是windows下的http://ffmpeg.zeranoe.com/builds/
然后打开cmd命令行，进入到bin目录下，可以看到有如下命令：
此时运行如下命令，就可以将指定格式转换成ogg格式的文件了：
ffmpeg.exe -i e:/are_you_kidding.mp4 -acodec libvorbis areyou.ogg
这里我将e盘下的”are_you_kidding.mp4”格式的视频文件，转换成了”areyou.ogg”格式的文件，由于这里没有指定生成文件的路径，所以会在当前目录下生成。可以看到此时bin目录已经生成了ogg格式的文件。
此时将该文件使用谷歌浏览器打开，就可以正常播放了。
html5中新增了一个audio标签用来播放音频文件：
<audio src="All About That Bass.mp3" controls="controls">您的浏览器不支持audio标签</audio>controls属性用来表示是否显示控制的元素，比如暂停，调节声音，快进快退等。此时运行效果如下：
当然我们也可以去掉controls标签，自己使用JavaScript来控制：
<button onclick="controlAudio()">暂停/播放</button>
<audio src="All About That Bass.mp3" id="audio_id">您的浏览器不支持audio标签</audio>
<script type="text/javascript">
var audio = document.getElementById("audio_id");
function controlAudio() {
if (audio.paused) {
audio.play();
} else {
audio.pause();
}
}
</script>此时就可以使用button按钮来控制音频文件的播放了。
<video controls="controls">
<source src="are_you_kidding.mp4">
<source src="are_you.ogg">
</video>PS:这里使用了两个source文件，这是因为部分浏览器是不支持mp4格式的文件，对于浏览器而言也是从上到下加载的。
拖放（drag和drop）是html5中新增的特性拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放
拖放分为以下几步：
下面看个栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
var div,img;
window.onload = function() {
div = document.getElementById("box1");
img = document.getElementById("img1");
div.ondragover = function(e) {
e.preventDefault();//阻止浏览器默认的行为
}
img.ondragstart = function(e) {
//设置被拖动元素的id
e.dataTransfer.setData("imageId","img1");
}
//放置被拖动的数据时
div.ondrop = function(e) {
e.preventDefault();//阻止浏览器默认的行为
//根据设置的被拖动元素的id获取被拖动的元素
var img = document.getElementById(e.dataTransfer.getData("imageId"));
//将被拖动的元素添加到div中
div.appendChild(img);
}
}
</script>
</head>
<body>
<div id="box1"></div>
<img src="small.jpg" id="img1">
</body>
</html>此时运行效果如下：
我们还可以新增一个div，放置拖动的图片，并且此时可以将处理放置图片的ondrop方法复写：
function dropOverHandler(e) {
e.preventDefault();
var img = document.getElementById(e.dataTransfer.getData("imageId"));
e.target.appendChild(img);
}此时运行效果如下：
在html5页面中可以直接使用svg文件，svg是一个使用xml文件描述的矢量图，可以无限放大而不失真，可以给用户带来更好的体验。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
</svg>
</body>
</html>这里引入了一个简单的svg图片，效果如下：
另外也可以引入一些动画svg资源：
可以在https://developer.mozilla.org/zh-CN/docs/Web/SVG这个网站上查找一些svg资源来看小效果，这里我引入这样一个svg资源：
<svg width="120" height="120" viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" >
<!-- Draw the outline of the motion path in grey, along
with 2 small circles at key points -->
<path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110"
stroke="lightgrey" stroke-width="2"
fill="none" id="theMotionPath"/>
<circle cx="10" cy="110" r="3" fill="lightgrey" />
<circle cx="110" cy="10" r="3" fill="lightgrey" />
<!-- Here is a red circle which will be moved along the motion path. -->
<circle cx="" cy="" r="5" fill="red">
<!-- Define the motion path animation -->
<animateMotion dur="6s" repeatCount="indefinite">
<mpath xlink:href="#theMotionPath"/>
</animateMotion>
</circle>
</svg>此时，运行效果如下：
我们可以将指定的svg内容存储为一个外部文件，然后在html中引用即可。PS:由于svg是一个xml文件，所以需要添加xml文件的头部：
<?xml version=‘1.0‘?>通过iframe来引入svg资源：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<iframe src="svg.svg" height="500" width="500" frameborder="no"></iframe>
</body>
</html>此时运行效果如下：
在html5当中，新增了客户端储存数据的新方法：
在使用localStorage之前，我们可以使用下面的代码首先判断当前浏览器是否支持localStorage：
if (window.localStorage) {
//当前浏览器不支持localStorage
alert("当前浏览器支持localStorage")；
} else {
alert("当前浏览器不支持localStorage")；
}这里我写了一个简单的测试localStorage的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var text,btn;
window.onload = function() {
text = document.getElementById("textId");
//如果获取的localStorage中的text是true，则显示到text元素上
if (localStorage.text) {
text.value = localStorage.text;
};
}
function saveOrShow() {
//alert(text.value);
//点击button时候，将当前的text元素的值存储到locaStorage中
localStorage.text = text.value;
}
</script>
</head>
<body>
<input type="text" id="textId">
<button onclick="saveOrShow()">测试localStorage</button>
</body>
</html>效果如下：
localStorage是基于域的，任何在该域内的所有页面，都可以访问localStorage的数据，但是由于各个浏览器厂商之间的数据是相互独立的，所以是不能相互访问的。
//存储一个键为name的值为hello的数据
localStorage.setItem("name","hello");
//获取键为name的数据
localStorage.getItem("name");
//通过存储的索引来获取数据,例如：获取索引为1的数据
localStorage.key(1);
//删除指定key的数据
localStorage.removeItem("name");
//删除所有数据
localStorage.clear();这里我写了一个方法，用来存储指定的json格式的数据：
function writejson() {
var student = new Object();
student.name = "Lanny";
student.age = "25";
student.location = "China";
var json = JSON.stringify(student);
//alert(json);
localStorage.setItem("studentData",json);
}运行后会在浏览器开发者模式中的localStorage中找到对应的存储：
这里使用了一个JSON对象，该对象是是一种数据交换格式，JSON.stringify方法原型如下：
JSON.stringify(value [, replacer] [, space]) function testStringifyMethod() {
var student = new Object();
student.name = "Lanny";
student.age = "25";
student.location = "China";
var json = JSON.stringify(student);
alert(json);
}此时打印结果如下：
var students = new Array() ;
students[0] = "zhangsan";
students[1] = "test";
students[2] = "平凡之路";
var json = JSON.stringify(students,switchUpper);
function switchUpper(key, value) {
return value.toString().toUpperCase();
}
alert(json); 在switchUpper方法中，将所有的内容都换为大写了，效果如下：
var students = new Array() ;
students[0] = "李四";
students[1] = "test";
students[2] = "平凡之路";
var second = new Array();
second[0] = "111";
second[1] = "222";
var json = JSON.stringify(students,second);
alert(json);此时第二个参数将被忽略：
var student = new Object();
student.name = "Lanny";
student.age = "25";
student.location = "China";
var second = new Array();
second[0] = "name";
second[1] = "location";
second[2] = "qq";
var json = JSON.stringify(student,second);
alert(json);此时，如果第二个的value在第一个存在，那么的话就以第二个的值做key，第一个值为value进行表示，效果如下：
这里第三个参数表示格式化json字符串的值，最大为10。
var students = new Array() ;
students[0] = "李四";
students[1] = "test";
students[2] = "平凡之路";
var second = new Array();
second[0] = "111";
second[1] = "222";
var json = JSON.stringify(students,second,10);
alert(json);此时输出格式为：
sessionStorage针对一个session进行数据存储，当用户关闭浏览器后，数据将被删除。
sessionStorage的使用和localStorage相同，这里不再多说。
sessionStorage.setItem("name","张三");
sessionStorage.getItem("name");这里我新建一个web工程，创建两个文件一个用来更改storage，一个用来监听storage的变化。
storagechange.html：更改storage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>storage变化</title>
<script type="text/javascript">
window.onload = function() {
localStorage.clear();
localStorage.setItem("username","张三");
localStorage.setItem("username","李四");
}
</script>
</head>
<body>
</body>
</html>这里连续三次更改了storage。
storagechangelistener.html： 用来监听storage的变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>storage 改变监听</title>
<script type="text/javascript">
window.onload = function() {
window.addEventListener("storage",function(e) {
console.log(e);
},true);
};
</script>
</head>
<body>
</body>
</html>首先我们打开storagechangelistener.html，此时会注册一个监听storage变化的事件，然后打开storagechange.html来更改storage，此时浏览器的控制台就会输出如下事件：
localStorage.clear()
localStorage.setItem(“username”,”张三”);
ok,今天关于html5的学习就到这里了。
版权声明：本文为博主原创文章，未经博主允许不得转载。
标签：html5
原文地址：http://blog.csdn.net/mockingbirds/article/details/48103361
