1 html5概述
1.1 Html5的概念
HTML5 是定义 HTML 标准的最新的版本。 该术语表示两个不同的概念：
- 它是一个新版本的HTML语言，具有新的元素，属性和行为，
- 它有更大的技术集，允许更多样化和强大的网站和应用程序。这个集合有时称为HTML5和朋友，通常缩写为HTML5。
HTML5 约等于 HTML + CSS + JS。
1.2 Html5优势
- 跨平台:唯一一个通吃PC MAC Iphone Android等主流平台的跨平台语言
- 快速迭代
- 降低成本
- 导流入口多
- 分发效率高
2 DOCTYPE和浏览器渲染模式
DOCTYPE，或者称为 Document Type Declaration（文档类型声明，缩写 DTD）。通常情况下，DOCTYPE 位于一个 HTML 文档的最前面的位置，位于根元素 HTML 的起始标签之前。
因为浏览器必须在解析HTML文档正文之前就确定当前文档的类型，以决定其需要采用的渲染模式，不同的渲染模式会影响到浏览器对于CSS 代码甚至 JavaScript脚本的解析。
到目前为止，各浏览器主要包含了三种模式。在 HTML5 草案中，更加明确的规定了模式的定义：
| 传统名称 | HTML5 草案名称 | document.compatMode 返回值 |
|---|---|---|
| standards mode(strict mode) | no-quirks mode | CSS1Compat |
| almost standards mode | limited-quirks mode | CSS1Compat |
| quirks mode | quirks mode | BackCompat |
2.1 document.compatMode
document.compatMode 属性最初由微软在 IE 中创造出来，这是一个只读的属性，返回一个字符串，只可能存在两种返回值：
- BackCompat：标准兼容模式未开启（怪异模式）
- CSS1Compat：标准兼容模式已开启（标准模式）
在现代主流浏览器中，其实怪异模式的渲染和标准与几乎标准间没有太大的差别（ie9+ 谷歌 火狐 …）。 ie5.5之前都是ie自己的渲染模式，怪异模式， ie6才开始慢慢支持标准，标准模式，在ie6 中怪异和标准模式的区别最大， ie7 8 9都是基于标准模式升级的，他们理论上存在怪异模式。
HTML5提供的<DOCTYPE html>是标准模式，向后兼容的,等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的 标准解析渲染页面，一个不含任何 DOCTYPE 的网页将会以 怪异(quirks) 模式渲染。
2.1 DTD
<!DOCTYPE html>
当 doctype 信息如上时，表明该页面是遵守了 HTML5 规范的，浏览器会选择 Standards Mode，这种 doctype 是最推荐的一种，我们平时设计页面都应该加上这一个 doctype。HTML5 不基于 SGML,所以不需要引用 DTD,浏览器内部本身有对标签进行解析渲染验证的模块。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
当 doctype 如上时，浏览器同样会选择 Standards Mode，虽然和第一种 doctype 有一些区别，但是几乎可以认为是一样的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
当 doctype 如上时，浏览器会选择 Almost Standards Mode，渲染时和标准会有一些区别。
当 doctype 缺失的时候，浏览器会选择 Quirks Mode，这是非常不推荐的方式。
当 doctype上面有注释，标签或者空行时，某些浏览器都会认为该页面不具有doctype。
【注意】：我们应该尽量避免 Quirks Mode，这对一个 web 应用是非常不利的地方。
每种doctype在浏览器中对应的渲染模式，具体可以参见：https://en.wikipedia.org/wiki/Quirks_mode。
3 根元素
3.1 H4中的根元素:
<html xmlns="http://www.w3.org/1999/xhtml">
首先这个标记没有任何问题，你喜欢的话,那就背下来继续用。它是有效的。但这个标记中的很多字节在Html5中我们都可以省略了。xmlns:这是XHTML1.0的东西，它的意思是在这个页面上的元素都位于http://www.w3.org/1999/xhtml这个命名空间内，但是HTML5中的每个元素都具有这个命名空间，不需要在页面上再显示指出。
3.2 H5中的根元素
<html></html>
4 head元素
MIME类型:
每当浏览器请求一个页面时，web服务器会在发送实际页面内容之前，先发送一些头信息。浏览器需要这些信息来决定如何解析随后的页面内容。最重要的是Content-Type。比如: Content-Type:text/html。
text/html:即这个页面的"内容类型",或者称为MIME类型。这个头信息将唯一确定某个资源的本质是什么，也决定了它应该如何被呈现。
图片也有自己的MIME类型：
- jpg:image/jpeg
- png:image/png
js也有自己的MIME类型，css也有自己的MIME类型，任何资源都有自己的MIME类型，整个web都依靠MIME类型来运作
<meta charset="UTF-8">：告诉浏览器你应该使用哪种编码来解析网页。
5 语义化标签
在HTML 5出来之前，我们用div来表示页面头部，章节，页脚等。但是这些div都没有实际意义。
各大浏览器厂商分析了上百万的页面，从中发现了DIV名称的通用id名称大量重复。例如，很多开发人员喜欢使用div id="footer"来标记页脚内容，所以Html5元素引入了语义化标签（一组新的片段类元素）。
https://dev.opera.com/blog/presentation-html5-and-accessibility-sitting-in-a-tree-4/idlist-url.htm
https://dev.opera.com/blog/presentation-html5-and-accessibility-sitting-in-a-tree-4/classlist-url.htm
<hgroup></hgroup>
<header></header>
<nav></nav>
<section></section>
<footer></footer>
<article></article>
<aside></aside>
5.1 语义化的好处
HTML5可以让很多更语义化结构化的代码标签代替大量的无意义的div标签；这种语义化的特性提升了网页的质量和语义；对搜索引擎更加的友好；他们这些标签功能就是代替<div>功能中的一部分，他们没有任何的默认样式，除了会让文本另起一行外；
https://gsnedders.html5.org/outliner/
5.2 hgroup元素
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标签
5.3 header 元素
header 元素代表 网页 或 section 的页眉。通常包含h1-h6元素或hgroup。
<header>
<hgroup>
<h1>网站标题</h1>
<h2>网站副标题</h2>
</hgroup>
</header>
header使用注意：
- 可以是“网页”或任意“section”的头部部分
- 没有个数限制。
- 如果hgroup或h1-h6自己就能工作的很好，那就不要用header。
5.4 nav元素
nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。
<nav>
<ul>
<li>HTML 5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
</nav>
nav使用注意：用在整个页面主要导航部分上，不合适就不要用nav元素；
5.5 section元素
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
5.6 article元素
article元素最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容
<article>
<h1>一篇文章</h1>
<p>文章内容..</p>
<footer>
<p><small>版权：html5jscss网所属，作者：damu</small></p>
</footer>
</article>
article使用注意：
- 独立文章：用article
- 单独的模块：用section
- 没有语义的：用div
5.7 aside元素
aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以是日志串连，其他组的导航，甚至广告，这些内容相关的页面。
<article>
<p>内容</p>
<aside>
<h1>作者简介</h1>
<p>小北，前端一枚</p>
</aside>
</article>
aside使用总结：
- aside在article内表示主要内容的附属信息，
- 在article之外则可做侧边栏
- 如果是广告，其他日志链接或者其他分类导航也可以用
5.8 footer元素
footer元素代表 网页 或 section 的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。
<footer>
COPYRIGHT@damu
</footer>
footer使用注意：
- 可以是 网页 或任意 section 的底部部分；
- 没有个数限制，除了包裹的内容不一样，其他跟header类似。
256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
