定义
Html5
HTML5 是定义 HTML 标准的最新的版本。 该术语表示两个不同的概念：
它是一个新版本的HTML语言，具有新的元素，属性和行为，
它有更大的技术集，允许更多样化和强大的网站和应用程序。
这个集合有时称为HTML5和朋友，通常缩写为HTML5。
HTML5 约等于 HTML + CSS + JS
Html5优势
跨平台:唯一一个通吃PC MAC Iphone Android等主流平台的跨平台语言
快速迭代
降低成本
导流入口多
分发效率高
基础知识
-
html5文件前面的是告诉浏览器以标准模式进行页面渲染，没有则浏览器以怪异模式进行页面渲染，document.compatMode可以查看浏览器渲染页面的模式：BackCompat：标准兼容模式未开启（怪异模式）；CSS1Compat：标准兼容模式已开启（标准模式）
-
语义化标签：
<hgroup></hgroup>
<header></header>
<nav></nav>
<section></section>
<footer></footer>
<article></article>
<aside></aside>
-
语义化的好处
HTML5可以让很多更语义化结构化的代码标签代替大量的无意义的div标签
这种语义化的特性提升了网页的质量和语义
对搜索引擎更加的友好
他们这些标签功能就是代替功能中的一部分，他们没有任何的默认样式，除了会让文本另起一行外； https://gsnedders.html5.org/outliner/ -
hgroup元素代表 网页 或 section 的标题，当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合
<hgroup> <h1>HTML 5</h1> <h2>这是一篇介绍HTML 5语义化标签和更简洁的结构</h2> </hgroup>hgroup使用注意：
如果只需要一个h1-h6标签就不用hgroup
如果有连续多个h1-h6标签就用hgroup
如果有连续多个标题和其他文章数据，h1-h6标签就用hgroup包住，和其他文章元数据一起放入header标签 -
header 元素代表 网页 或 section 的页眉。
通常包含h1-h6元素或hgroup<header> <hgroup> <h1>网站标题</h1> <h2>网站副标题</h2> </hgroup> </header>header使用注意：
可以是“网页”或任意“section”的头部部分
没有个数限制。
如果hgroup或h1-h6自己就能工作的很好，那就不要用header。 -
nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。
<nav> <ul> <li>HTML 5</li> <li>CSS3</li> <li>JavaScript</li> </ul> </nav>nav使用注意：
用在整个页面主要导航部分上，不合适就不要用nav元素； -
section元素代表文档中的 节 或 段，段可以是指一篇文章里按照主题的分段；节可以是指一个页面里的分组。
<section> <h1>section是啥？</h1> <article> <h2>关于section</h1> <p>section的介绍</p> <section> <h3>关于其他</h3> <p>关于其他section的介绍</p> </section> </article> </section>section使用注意：
section不是一般意义上的容器元素，如果想作为样式展示和脚本的便利，可以用div。
article、nav、aside可以理解为特殊的section，
所以如果可以用article、nav、aside就不要用section，没实际意义的就用div -
article元素最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容
<article> <h1>一篇文章</h1> <p>文章内容..</p> <footer> <p><small>版权：html5jscss网所属，作者：damu</small></p> </footer> </article>article使用注意：
独立文章：用article
单独的模块：用section
没有语义的：用div -
aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等
在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以是日志串连，其他组的导航，甚至广告，这些内容相关的页面。
<article> <p>内容</p> <aside> <h1>作者简介</h1> <p>小北，前端一枚</p> </aside> </article>aside使用总结：
aside在article内表示主要内容的附属信息，
在article之外则可做侧边栏
如果是广告，其他日志链接或者其他分类导航也可以用 -
footer元素代表 网页 或 section 的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。
<footer> COPYRIGHT@damu </footer>footer使用注意：
可以是 网页 或任意 section 的底部部分；
没有个数限制，除了包裹的内容不一样，其他跟header类似。
- html5标签属性：
classlist
dataset
contenteditable="true"
- classlist：相对于class的property(className)
add
remove
toggle
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="test" class="qhf qhf1 qhf2 qhf3">
</div>
</body>
<script type="text/javascript">
var testNode = document.querySelector("#test");
// console.log(testNode.className)
testNode.classList.add("qhf4");
testNode.classList.remove("qhf1");
testNode.classList.toggle("qhf2");//切换,如果存在则删除该class,如果不存在则添加该class
console.log(testNode.classList);
</script>
</html>
- dataset:自定义属性（限制 data-x-y）的property
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="test" data-atguigu-qhf="qhf">
</div>
</body>
<script type="text/javascript">
var testNode = document.querySelector("#test");
console.log(testNode.dataset.atguiguQhf);
testNode.dataset.atguiguQhf="111";
testNode.dataset.atguiguQhf.add("222");
</script>
</html>
- 可编辑：contenteditable=“true”，值只能为’true’，可让元素的文本节点可编辑
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #test{ width: 200px; height: 200px; background: pink; } </style> </head> <body> <div id="test" contenteditable="true"> nsjknfksnfjsnfksnfjsnfksnf </div> </body> </html>
1864
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
