一、HTML5介绍
html5不仅仅只是作为标记语言的一个最新版本，更最要的是它制定了Web应用开发的一系列标准，成为第一个将Web作为应用开发平台的html语言。
html5定义了一系列新元素，如新语义标、只能表单、多媒体标签等，可以帮助开发者创建互联网应用，还提供了一系列JavaScript api，如地理定位、重力感应、硬件访问等，可以在浏览器内实现原生应用，甚至结合Canvas我们可以开发网页版游戏，同事结合css3的过度、转换、动画等特性，可以极大的增强用户体验，提升开发功能的可应用性。
我们日常谈论的H5其实是一个泛称，它指的是由html5+css3+javascript等技术组合而成的一个应用开发平台
二、语法规范(版本申明，严格版和宽松版比较大的区别在于标签名的大小写和单标签最后的封闭反斜线)
代码检查网:http://validator.w3.org/
html:xs(严格版):<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Document</title>
</head>
<body>
</body>
</html>
html:4s(严格版):<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Document</title>
</head>
<body>
</body>
</html>
html:4t(宽松版):<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Document</title>
</head>
<body>
</body>
</html>
html:5(更简洁、更宽松):<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
</body>
</html>
三、语义化标签
除了传统的h1-h6、p、ul等语义化标签，html5增加了大量的语义化标签，更有利于搜索引擎或辅助设备（盲人）来理解html页面内容，比如header、nav、section、article、aside、footer等，但主要不要全局到处使用这样的语义标签。
传统做法： <body>
<div class="header">头部</div>
<div class="nav">导航栏</div>
<div class="container">
<div class="article">主要内容</div>
<div class="aside">侧边栏</div>
</div>
<div class="footer">底部</div>
</body>
html5做法： <body>
<header>头部</header>
<nav>导航栏</nav>
<section class="container">
<article>主要内容</article>
<aside>侧边栏</aside>
</section>
<footer>底部</footer>
</body>
四、html5兼容处理(这里针对IE9以下)
在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素（inline）对待，所以我们只需要将其转换成块元素（block）即可使用。但是在IE9版本一下，并不能正常解析这些新标签，但是却可以识别通过document.createElement("tagName")创建的自定义标签，于是我们的解决方案就是讲HTML5的新标签全部通过document.createElement("tagName")来创建一遍，这里的创建只是需要让IE浏览器有解析这样的标签的能力，而不需要把创建的标签放进页面，等浏览器遇到这样的标签的时候能解析就可以了，所以IE低版本也能正常解析HTML5新标签了，但在实际开发中我们更多采用的是通过检测IE浏览器版本来加载第三方的一个JS库来解决兼容问题，这个库文件会自动通过document.createElement("tagName")创建所有HTML5的新标签。
<script src="自动创建HTML5新标签.js"></script>
但此时已经支持HTML5新标签的浏览器也会解析上面的js代码，和其他浏览器(比如谷歌浏览器)本身就支持HTML5新标签的浏览器重复了(所有这里就没必要了)，这个时候可以引入一串其他浏览器识别为注释(但IE不会识别为注释)的代码就可以解决这个问题，从而做到完美的兼容。
< → less than → 小于等于
> → great than → 大于等于
e → epual → 等于
<!--[if lte IE 8]>
<script src="自动创建HTML5新标签.js"></script>
<![endif]-->
上面三行代码在非IE浏览器中解析为注释代码，但在IE浏览器中解析为：如果小于等于IE8，执行里面的script标签里的命令。它的快捷键是(cc:ie6+TAB)，然后把6改为8就可以了。
五、微数据
微数据是在像span、div这样的标签内添加属性，让机器（比如搜索引擎）识别其含义，某些特定类型的信息。例如评论、任务信息或事件有相应的属性，用来描述其含义，可以理解成新语义标签的一种补充。
传统做法： <div>
<span>小明</span>
<span>2020年7月12日 16:38</span>
<span>评论内容</span>
</div>
微数据做法：<div itemscope itemtype="http//www.*****.com.org/review">
<span itemprop="reviewer">小明</span>
<span itemprop="dtreviewed" datatime="2020-07-12T16:38:30.50+08:00">2020年7月12日 16:38</span>
<span itemprop="description">评论内容</span>
</div>
六、keygen标签
公钥和私钥(公钥和私钥是两个配对的，就像钥匙和锁，只有配对的钥匙才能打开对应的锁)
公钥：用户（不同用户拥有的公钥和私钥都不一样）在发送信息给服务器之前存在服务器的一把钥匙
私钥：把将要发送的信息+私钥发送给服务器，就好比用锁把信息锁住，从而达到加密作用，服务器拿到后需要用钥匙解密后才能得到用户发送的真正信息。
七、表单的form属性(我们填写的某个表单并不是一定放在form标签里面，可能由于网页布局的需求要将某一项表单放在form标签外面，此时可以通过form标签的id属性和放在form标签外面的某个表单的form属性进行连接，从而达到自由布局的效果)
<body>
<form action="" id="myForm">
<label for="name_label">姓名:<input type="text" name="name" id="name_label" /></label><br><br><br>
<label for="age_label">年龄:<input type="number" name="age" id="age_label" /></label><br><br><br>
<label><input type="submit" value="提交"></label>
</form>
<p>内容1</p>
<p>内容2</p>
<p>内容3</p>
<p>内容4</p>
<p>内容5</p>
<label for="hobby_label">住址:<input type="text" name="hobby" form="myForm" id="hobby_label" /></label>
</body>
八、DOM(获取元素)
document.getElementByClassName('class'):通过类名获取元素,以伪数组形式存在
document.querySelector('select'):通过CSS选这器获取元素，符合匹配的第一个元素
document.querySelectorAll('select'):通过CSS选这器获取元素，以伪数组形式存在
九、类名操作
Node.classList.add('class'):添加class；
Node.classList.remove('class'):移除class；
Node.classList.toggle('class'):切换class，有则移除，无则添加；
Node.classList.contains('class'):检测是否存在class，Node指一个有效的DOM节点，是一个通称
十、自定义属性
自定义属性全部必须以data-开头，只要符合这种格式就称为自定义属性
通过Node.dataset.属性='属性值'设置自定义属性，Node指一个有效的DOM节点，是一个通称
<body>
<nav>
<a href="www.baidu.com" data-name="local" data-id="1">百度网</a>
</nav>
</body>
<script>
var nav = document.querySelector('nav a');
//传统做法：
nav.getAttribute('data-name'); //读取
nav.setAttribute('data-demo','test'); //设置
//优化做法:
var customData = nav.dataset; //将获取的DOM节点对象话
//读取、更改和设置就直接读取、更改和设置对象属性
customData.demo = 123; //更改
customData.testDome = 'test-demo'; //添加，这里的testDemo是属性名，在网页里面浏览器会将大写字母转换为短横线+小写字母（data-test-demo="test-demo"）
</script>
十一、匿名自执行函数(自己调用自己，切没有函数名，在开发中可以避免多人协作而产生重复命名而被覆盖)
<script>
(function (key) {
alert(key)
})(3);
</script>
255
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
