HTML5学习笔记
HTML5 <!DOCTYPE>
<!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简单:
<!DOCTYPE html>
最小的HTML5文档:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
文档内容......
</body>
</html>
注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。
查询： HTML5新特性的浏览器支持情况
语义化标签
常用新增标签：
<header>
描述了文档的头部区域。在页面中你可以使用多个<header>元素<nav>
定义导航链接的部分。<section>
定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。<article>
定义独立的内容。<aside>
定义页面主区域内容之外的内容（比如侧边栏）。<figure>
规定独立的流内容（图像、图表、照片、代码等等）。<figcaption>
定义<figure>元素的标题。
<figcaption>元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。<footer>
描述了文档的底部区域。文档中你可以使用多个<footer>元素
IE8及更早IE版本的兼容问题:
方法一：
可以使用HTML5 Shiv Javascript脚本来解决IE的兼容问题。
HTML5 Shiv下载地址
下载后，将以下代码放入的网页中：
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->
以上代码在浏览器小于IE9版本时会加载html5shiv.js文件. 你必须将其放置于<head> 元素中，因为 IE浏览器需要在头部加载后渲染这些HTML5的新元素。
html5shiv.js的工作原理。
方法二：
可以使用javascript来解决他们；
在页面的<head>加下：
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('footer');
</script>
方法一也是利用document.createElement()创建对象
的；
表单
略
新的选择器
querySelector()
只能选择到一组中的第一个元素querySelectorAll()
选择到一组中的所有元素getElementsByClassName()
选择器不用加.直接写类名即可
和JQ的选择器用法一样；
获取class列表属性
classList
- length : class的长度
- add() : 添加class方法
- remove() : 删除class方法
- toggle() : 切换class方法
var oDiv = document.getElementById('div1');
alert( oDiv.classList ); //类似与数组的对象
alert( oDiv.classList.length ); //3
oDiv.classList.add('box4');
oDiv.classList.remove('box2');
oDiv.classList.toggle('box2');
parse() 和 stringify()
parse()：可以把字符串转成JSON，且字符串中的属性要严格的加上引号 ：{key:’value’}
eval()可以解析任何形式的字符串，安全性相对不高；
stringify()：把json转化成字符串，且会自动的把双引号加上
IE8及更早IE版本的兼容问题:下载json2.js并加入到<script>中
data自定义数据
//行间定义属性值
<div id="div1" data-test-tes="TEST">div</div>
//js使用
var oDiv = document.getElementById('div1');
alert( oDiv.dataset.testTes );
