WEB开发-带你入门，走进HTML5的世界
HTML5 是最新的 HTML 标准，专门为承载丰富的 web 内容而设计的，并且无需额外插件。HTML5 拥有新的语义、图形以及多媒体元素，并提供新的 API 简化 web 应用程序的搭建。
文档类型声明
<!DOCTYPE html>新特性
1.特殊内容元素，比如：<header>、<footer>、<nav>、<section>、<article>、<aside>；
2.表单控件，比如：calendar（日历）、date（日期）、time（时间）、email（邮件）、url（链接）、search（搜索框），number（数字）；
3.绘画的 canvas 元素，支持图像的 svg 元素；
4.支持多媒体的 video 和 audio 元素；
5.强大的新的API，如：本地离线存储，本地SQL数据。
移除元素
<acronym>，<applet>，<basefont>，<big>，<center>，<dir>，<font>，<frame>，<frameset>，<noframes>，<strike>，<tt>
语义元素
能清楚地向浏览器和开发者描述其意义，网页包含了指示导航、页眉以及页脚的 HTML 代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>语义元素</title>
<style>
*{margin: 0;padding: 0;}
body,html{width:100%;height:100%;left:0;right:0;top:0;bottom:0;}
.head{width: 100%;height: 100px;border: 1px solid #000;}
.foot{float:left;width: 100%;height: 30px;border: 1px solid #000;bottom:0;}
.container{width:100%;height:100%;background:pink;overflow:hidden;}
.left-aside{width:20%;;height:100%;float:left;background:gray;}
.content{width:70%;height: 100%;float:left;background:blue;}
.right-aside{width:10%;height:100%;float:right;background:gray;}
.nav-menu{width: 100%;height: 30px;background:red;}
</style>
</head>
<body>
<header class="head">
<h1>This is header</h1>
</header>
<section class="container">
<aside class="left-aside">Left aside</aside>
<section class="content">
<nav class="nav-menu">This is nav</nav>
<article>Article</article>
</section>
<aside class="right-aside">Ritht aside</aside>
</section>
<footer class="foot"> This is footer</footer>
</body>
</html>表单属性
form 新属性：autocomplete，novalidate
input 新属性：autocomplete，autofocus，form，formaction，formenctype，formmethod，formnovalidate，formtarget，height 与 width，list，min 与 max，multiple，pattern (regexp)，placeholder，required，step
画布（Canvas）
Canvas 标签是图形容器，用于图形的绘制，可以绘制路径、矩形、圆形、字符以及添加图像等。
<canvas id="canvas" width="300" height="300">
<span>您的浏览器不支持 HTML5 canvas 标签。</span>
</canvas>
<script>
window.onload=function(){
var myCanvas = document.getElementById("canvas");
if(myCanvas.getContext){
var ctx=myCanvas.getContext("2d");
ctx.fillStyle="#FF0000"; //填充红色
ctx.fillRect(0,0,150,100); //绘制矩形
}
}
</script>矢量图形（SVG）
用于定义用于网络的基于矢量的图形，使用 XML 格式定义，图像在放大或改变尺寸的情况下其图形质量不会有损失。
<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>媒体（音频和视频）
音频使用 audio 在网页上播放音频，control 属性提供添加播放、暂停和音量控件。支持格式：MP3，Ogg，Wav。
<audio controls>
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>视频使用 video 在网页上播放视频，control 属性提供添加播放、暂停和音量控件。支持格式：MP4，WebM，Ogg。
<video width="400" height="300" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>拖放（Drag 和 Drop）
将某对象拖入不同的位置，H5中任何元素都是可拖放的。
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<label id="dragLab" draggable="true" ondragstart="drag(event)">Drag text</label>
<script type="text/javascript">
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>地理定位（Geolocation）
Geolocation API 用于获得用户的地理位置。
<script>
var x=document.getElementById("demo");
function getLocation()
{
// 检测是否支持地理定位
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else
{
x.innerHTML="该浏览器不支持获取地理位置。";
}
}
// 显示位置信息
function showPosition(position)
{
x.innerHTML="纬度: " + position.coords.latitude + " 经度: " + position.coords.longitude;
}
</script>存储（localStorage 和 sessionStorage）
localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
保存数据：localStorage.setItem(key,value)
获取数据：localStorage.getItem(key)
删除单个数据：localStorage.removeItem(key)
删除所有数据：localStorage.clear()
得到某个索引的key：localStorage.key(index)
sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除数据。
保存数据：sessionStorage.setItem(key,value)
获取数据：sessionStorage.getItem(key)
删除单个数据：sessionStorage.removeItem(key)
删除所有数据：sessionStorage.clear()
得到某个索引的key：sessionStorage.key(index)
- 点赞
- 收藏
- 关注作者
评论（0）