陶吉诃德

这是最好的时代,这是最坏的时代;这是智慧的年代,这是愚蠢的年代;这是信仰的时期,这是怀疑的时期;这是光明的季节,这是黑暗的季节;这是希望之春,这是绝望之冬;

Tao-Quixote's Blog

HTML5揭秘(一)

1、Modernizr

检测浏览器对特定html元素的支持,具体可以查看Modernizr官网

2、原生js检测canvas支持

!!document.createElement('canvas').getContext.
// 上面的代码会在内存中创建一个canvas元素,并试图获取getContext,这个方法只有浏览器支持canvas API时才会存在
// 最后通过!!强制返回一个布尔值

2、原生js检测video支持

!!document.createElement('video').canPlayType.  // 原理同上。

3、本地存储--localStorage

  • 与cookie类似,但容量更大
  • 同源限制:不同站点的数据不能相互访问
  • 检测('localStorage' in window) && (window.localStorage !== null),注意大小写。

4、一个很难捕捉到的错误❌

doctype必须在文件的第一行,前面不允许有任何的空行,如果在doctype前有空行,有些浏览器则会认为该文件没有doctype,会用quirks模式渲染页面,这是一个很难捕捉到到错误。

在windows中容易出现该问题的一个情况是用text方式打开html文件,因为windows会在文本文件的开头加上BOM头,并且BOM头是不可见的,BOM头会污染整个HTML文件,导致浏览器以quirks模式渲染页面,最常见的表现就是在渲染完的页面中,head标签被包裹在body标签中。

5、元素

  • 根元素:html
  • 子元素、父元素
  • 叶元素:没有子节点到元素称为叶元素
<html xmlns="http://www.w3c.org/1999/xhtml"
	   lang="en"
	   xml:lang="en">
  • xmlns="http://www.w3c.org/1999/xhtml"这句的意思是:这个页面的元素都位于xhtml命名空间http://www.w3c.org/1999/xhtml之中,html5中所有的元素都具有这个命名空间里,所以可以不用显示声明。
  • langxml:lang都用于定义该页面所用的语种,后者可以省略不写。

6、编码方式

设置web页面的编码方法:

方法一:<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
方法二:http头:content-type: text/html
方法三:<meta charset="utf-8">

以上三种方式都可以。

http头中信息是首选,它会覆盖meta标签中的信息。