HTML5新增标签
新增语义元素
HTML5定义了很多新的语义元素，分别有：<article>、<header>、<aside>、<footer>、<section>、<nav>、<figure>、<figcation>等元素，接下来分别介绍新增的语义元素。
<article>
<article>一般用于博客、论坛、新闻等。具体事例：
<article>
<h1>粉色天气</h1>
<p>
从粉色的茶水开始，粉红色的玫瑰，花瓣凋零过半，将一片片花瓣夹入淡绿色的笔记本中。
便是粉色的天气粉色的一天了。
</p>
</article>
<header>
<header>一般用于定义文档或section的页眉
代码实例：
<article>
<header>
<h1>金牛座季节</h1>
<p>4月末，金牛座的季节</p>
</header>
<p>周边的金牛座陆续的过了生日</p>
</article>
<footer>
<footer>一般用于定义文档或section的页脚
代码实例：
<article>
<header>
<h1>开心明天</h1>
<p>明天又是美好的一天</p>
</header>
<p>
最近情绪上天入地，时时安慰自己：
又是充满希望的一周，明天又是美好的一天，明天应该是美好的，因为还没开始，
还可以有激情有勇气去过好。
</p>
<footer>
<p>北京二吊子程序媛所码</p>
</footer>
</article>
<section>
<section>定义一个节
代码示例：
<section>
<p>章节一</p>
</section>
<section>
<p>章节二</p>
</section>
<nav>
<nav>定义导航链接集合
代码示例：
<nav>
<a href="http://baidu.com">百度一下 |</a>
<a href="http://byr.bbs.cn">北邮人论坛 |</a>
<a href="http://iqiyi.com">爱奇艺 |</a>
</nav>
HTML5图像
canvas
HTML5 的 canvas 元素是使用 JavaScript 在网页上绘制图像，canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
实现方法步骤
1.在页面中创建canvas元素，
<canvas id="myCanvas" width = "200" height = "150" ></canvas>
2.通过JavaScript来绘制：
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
3.通过javascript绘制图像
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-5;fill-rule:evenodd;"/>
</svg>
HTML5媒体
媒体元素主要为音频元素和视频元素，HTML5通过<object>来加载，进而播放音频或视频。
代码示意：直接在页面body部分通过<object>标签来添加音频或视频文件
<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="/i/bird.wav" />
<param name="controller" value="true" />
</object>
HTML5API
HTML5新增了诸多API 接口，包括地理定位、拖放、WEB存储、应用存储等接口。
HTML5 定位
HTML5 Geolocation API 可用于获得用户的地理位置，Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。
1： navigator.geolocation，可用于检测设备是否支持HTML5定位
2：getCurrentPosition() 方法可用户获取当前设备的经纬度位置
利用HTML5定位获取定位示例：HTML5获取定位
HTML5 拖放
HTML5增加了新的属性draggable,当某元素的draggable属性设置为true时，表示该属性可以被拖动。
HTML5同时还新增了鼠标事件ondrag、ondrop、ondragstart、ondragover等事件来运行和拖放有关的脚本；每个事件的具体意义可参考w3cHTML事件。
HTML5拖放代码示例
- 在页面中添加可拖放的元素
- 确定拖放元素与拖放目标元素的事件与对应的脚本
- 拖放元素与拖放目标元素的事件
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)"
width="336" height="69">
- 事件所触发的脚本
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));
}
- 在页面中进行拖放元素
WEB存储
web存储也称为本地存储，通过本地存储，web 应用程序能够在用户浏览器中对数据进行本地的存储。
与cookie相比，本地存储更安全，且不影响浏览器性能，并且信息不会被传到服务器
HTML本地存储提供了两个在客户端存储数据的对象
window.localStorage - 存储没有截止日期的数据
window.sessionStorage - 当关闭浏览器标签页时数据会丢失
使用本地缓存时，应先检测是否支持本地缓存
if (typeof(Storage) !== "undefined") {
// 针对 localStorage/sessionStorage 的代码
} else {
// 抱歉！不支持 Web Storage ..
}
代码示例
// 存储
localStorage.setItem("lastname", "Gates");
// 取回
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
应用程序缓存
应用程序缓存即可对web应用进行本地缓存，保证用户在离线时也可以使用应用，加载速度更快，且能够减少服务器负载，浏览器只从服务器下载更新或更改过的资源。
代码示例
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
文档内容 ......
</body>
</html>
作者：二吊子程序媛
链接：https://www.jianshu.com/p/7aa390f49eda
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。