HTML5记录

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新特性支持检测方法

1. 检测全局对象，如window和navigator
2. 创建元素，检测对象时候拥有属性
3. 创建元素，检测是否拥有特定方法
   如

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;
}

4. 使用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中的主要标签

HTML5新增语义元素

    段落，节
        导航栏
    由页面中自成一体的内容组成
      通常为侧边栏
     段落或节的标题
     导航辅助，可包含各节标题
     一般包括页脚内容
       时间或日期，或附带时间以及时区偏移量
       高亮参考

通过hgroup包装标题

  
    
  
  
    

      

        
hello world
        
this is a testing page
      
      

        
this is a level 2 head
      
      

        
this is anothor level 2 head
      
    
  

通过article形成子页面大纲

  
    
  
  
    
this is a title
    

      

        
this is a title in an article tag
      
      
contents
    
  

日期和时间

//格式可选内容
//其中pubdate参数为可选，如果在article中表示文章发表日期，在其它地方表示文档发布日期

//在上文
中加入时间标签


  
    
  
  
    
this is a title
    

      

        option content
        
this is a title in an article tag
      
      
contents
    
  

导航栏（nav）

    

        
home

        
blog

        
about

    

绘图canvas

var cvs = canvas.getContext('2d')
cvs.fillStyle()
cvs.fillRect()
cvs.strokeStyle()
cvs.strokeRect()