HTML5记录
2018-10-08 本文已影响0人
Tony__Hu
HTML5
MINE类型
多用途Internet邮件扩展（MIME）类型 是一种标准化的方式来表示文档的性质和格式。 它在IETF RFC 6838中进行了定义和标准化。互联网号码分配机构（IANA）是负责跟踪所有官方MIME类型的官方机构。
浏览器通常使用MIME类型（而不是文件扩展名）来确定如何处理文档；因此服务器设置正确以将正确的MIME类型附加到响应对象的头部是非常重要的。常用的MIME类型有
text/plain
text/html
image/jpeg
image/png
audio/mpeg
audio/ogg
audio/*
video/mp4
application/octet-stream
…
multipart/form-data
multipart/byteranges
在缺失 MIME 类型或客户端认为文件设置了错误的 MIME 类型时，浏览器可能会通过查看资源来进行MIME嗅探。每一个浏览器在不同的情况下会执行不同的操作。因为这个操作会有一些安全问题，有的 MIME 类型表示可执行内容而有些是不可执行内容。浏览器可以通过请求头 Content-Type 来设置 X-Content-Type-Options 以阻止MIME嗅探。
html5新特性支持检测方法
- 检测全局对象，如window和navigator
- 创建元素，检测对象时候拥有属性
- 创建元素，检测是否拥有特定方法
如
function support_canvas_text(){
if (document.createElement('canvas').getContext){
var _canvas = document.creaeElement('canvas');
var context = _canvas.getContext('2d')
return typeof context.fillText == 'function'
}
return false;
}
- 使用Modernizr库
只要导入就可以提供检测，如
Modernizr.canvas //返回true或者false
具体特性检测
video支持编码方式检测
//h264.
function support_h264_video (){
if (_video = document.createElement('video').canPlayType) {
return _video('video/mp4; codecs="avc1.42E01E, mp4a40.2"');
}
return '';
}
//或用Modernizr
if (Modernizr.video){
return Modernizr.video.h264;
}
本地存储
funtion support_localstorage(){
return ('localStrorage' in window) && window['localStorage'] !== null;
}
离线web应用
function support_offline(){
return !! window.applicationCache;
}
或用Modernizr
Modernizr.applicationCache
地理位置（非HTML5标准）
!!navigator.geolocation
html5 input类型
新的input Type
type='search'
type='number'
type='range'
type='color'
type='tel'
type='url'
type='email'
type='date'
type='month'
type='week'
type='time'
type='datetime'
time='datetime-local'
但浏览器不支持新类型时将type视为text
故判断可用：
return i.type !== "text"
或用Modernizr：
Modernizr.inputtypes.data
占位符（placeholder）
检测方法：
var i = createElement('input')
if (! ('placeholder' in i)){
//do something
}
或用Modernizr：
if(!Modernizr.input.placeholder){
//do somethng
}
自动聚焦（autofocus）
同上，将placeholder替换为autofocus
HTML5 head中的主要标签
<!DOCTYPE html>
<html lang='zh'>
<!-- lang可用的tags参见 http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry -->
<head>
<meta charset="utf-8" />
<!-- 或 charset="ISO8895-1"非中文 -->
<!-- 在HTML4中的声明方法
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-->
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico" />
</head>
<body>
</body>
</html>
HTML5新增语义元素
<section> 段落，节
<nav> 导航栏
<article> 由页面中自成一体的内容组成
<aside> 通常为侧边栏
<hgroup> 段落或节的标题
<header> 导航辅助，可包含各节标题
<footer> 一般包括页脚内容
<time> 时间或日期，或附带时间以及时区偏移量
<mark> 高亮参考
通过hgroup包装标题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<header>
<hgroup>
<h1>hello world</h1>
<h2>this is a testing page</h2>
</hgroup>
<div>
<h2>this is a level 2 head</h2>
</div>
<div>
<h2>this is anothor level 2 head</h2>
</div>
</header>
</body>
</html>
通过article形成子页面大纲
<!DOCTYPE html>
<html lang='zh'>
<head>
<meta charset='utf-8' />
</head>
<body>
<h1>this is a title</h1>
<article>
<header>
<h1>this is a title in an article tag</h1>
</header>
<p>contents</p>
</article>
</body>
</html>
日期和时间
//格式<time datetime='yyyy-mm-dd[Thh:mm:ss[+/-hh:mm]]' [pubdate]>可选内容</time>
//其中pubdate参数为可选，如果在article中表示文章发表日期，在其它地方表示文档发布日期
//在上文<article>中加入时间标签
<!DOCTYPE html>
<html lang='zh'>
<head>
<meta charset='utf-8' />
</head>
<body>
<h1>this is a title</h1>
<article>
<header>
<time datetime='2018-9-10T21:20:20+08:00' pubdate>option content</time>
<h1>this is a title in an article tag</h1>
</header>
<p>contents</p>
</article>
</body>
</html>
导航栏（nav）
<nav>
<ul>
<li><a href='#'>home</li>
<li><a href='#'>blog</li>
<li><a href='#'>about</li>
<ul>
<nav>
绘图canvas
var cvs = canvas.getContext('2d')
cvs.fillStyle()
cvs.fillRect()
cvs.strokeStyle()
cvs.strokeRect() <!-- 不填充只绘制边缘
cvs.clearRect()
//样例
<!DOCTYPE>
<html>
<head>
<meta charset='utf-8' />
</head>
<body>
<script>
var cvs = document.createElement('canvas');
var b = document.getElementsByTagName('body');
b[0].appendChild(cvs);
c = cvs.getContext('2d');
c.fillStyle='#123456';
c.fillRect(2,3,200,200);
</script>
</body>
</html>
画坐标轴
<!DOCTYPE>
<html>
<head>
<meta charset='utf-8' />
</head>
<body>
<canvas id='c' width:500 heigth:500></canvas>
<script>
var cvs = document.getElementById('c').getContext('2d');
cvs.beginPath();
for (var i=0; i<201; i+=5){
cvs.moveTo(i+0.5,0);
cvs.lineTo(i+0.5,100);
}
for (var i=0; i<101; i+=5){
cvs.moveTo(0,i+0.5);
cvs.lineTo(200,i+0.5);
}
cvs.strokeStyle="#dddddd";
cvs.stroke();
cvs.beginPath();
cvs.moveTo(0,10);
cvs.lineTo(200,10);
cvs.lineTo(195,5);
cvs.moveTo(200,10);
cvs.lineTo(195,15);
cvs.moveTo(10,0);
cvs.lineTo(10,100);
cvs.lineTo(5,95);
cvs.moveTo(10,100);
cvs.lineTo(15,95);
cvs.strokeStyle='#111111';
cvs.stroke();
cvs.font = 'normal 9px sans-serif';
cvs.fillText('y',2,65);
cvs.fillText('x',115,7);S
</script>
</body>
</html>
渐变
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
</head>
<body>
<canvas id='c' width='500' height='500' style='border:1px solid #d3d3d3;'></canvas>
<script>
var cvs = document.getElementById('c').getContext('2d');
var my_gradient = cvs.createLinearGradient(0,0,500,500);
my_gradient.addColorStop(0,'black');
my_gradient.addColorStop(1,'white');
cvs.fillStyle = my_gradient;
cvs.fillRect(0,0,500,500);
</script>
</body>
</html>
canvas插入图像
<script>
window.onload = function(){
var cvs = document.getElementById('c').getContext('2d');
var img = document.getElementById('commands');
cvs.drawImage(img,0,0,300,400);
}
</script>
video标签与常用视频容器及编码格式
视频：
视频容器格式：MPEG-4，Flash视频(FLV，F4V)，Ogg，WebM，AVI
视频编解码格式：H.264（MPEG-4 AVC），H.265，VP3/Theora，VP8，VP9
音频：
音频编解码格式：MP3（MPEG-1 Audio Layer 3），AAC，Vorbis（常嵌入Ogg容器中）
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
</head>
<body>
<video src='/video/ex_video.mp4' width='600' height='400' controls></video>
</body>
</html>
video标签允许同一个视频有多种格式
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
</head>
<body>
<video width='600' height='400' controls>
<source src='/video/ex_video.mp4' type='video/mp4' >
<source src='/video/ex_video.webm' type='video/webm' >
<source src='/video/ex_video.ogv' type='video/ogg' >
</video>
</body>
</html>
地理位置geolocation
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
</head>
<body>
<script>
navigator.geolocation.getCurrentPosition(
function show_location(position){
alert('lat:'+String(position.coords.latitude)+'\n'+'lon:'+String(position.coords.longitude));
},
function handle_err(err){
switch(err.code){
case 0:
alert("Unknown Error");
break;
case 1:
alert("Permission Denied");
break;
case 2:
alert("Location Unavailibal");
break;
case 3:
alert("Time Out");
break;
}
},
{
enableHighAccuracy:true,//开启高精度位置，可能失败
timeout:60000, //定位超时(ms)
maximunAge:60000 //再次获取新的位置的最短时间间隔
}
);
</script>
</body>
</html>
本地存储localStorage
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
</head>
<body>
<button type='button' onclick='clearItem()'>clear localStorage</button>
<script>
var foo = 12345;
if (a = localStorage['bar']){
alert('local storage exists, bar: ' + a);
}
else{
localStorage["bar"] = foo;
alert('add "bar" in local storage');
}
function clearItem(){
localStorage.clear();
alert('localStorage clear');
}
</script>
</body>
</html>
自动聚焦autofocus
\\HTML5为所有表单内元素提供了autofocus属性
<form>
<input name='q' autofocus>
<input type='submit' value='Search'>
</form>
HTML5 input标签
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
</head>
<body>
<form>
<input type='email' placeholder='email'>
<input type='url' placeholder='url'>
<input type='number' min='0' max='20' step='2' value='0'>
<input type='range' min='0' max='30' step='1' value='10'>
<input type='date'>
<input type='time'>
<input type='color'>
<input type='search' placeholder='Search' autofocus>
<input type='submit' value='OK'>
</form>
</body>
</html>
