HTML5-基础学习
# HTML5 基础学习
# 概述
HTML5 是定义 HTML 标准的最新的版本，该术语表示两个不同的概念：
- 它是一个新版本的 HTML 语言，具有新的元素，属性和行为，
- 它有更大的技术集，允许更多样化和强大的网站和应用程序。
HTML5 的 canvas 元素可以实现画布功能，该元素通过自带的 API 结合使用 JavaScript 脚本语言在网页上绘制图形和处理，拥有实现绘制线条、弧线以及矩形，用样式和颜色填充区域，书写样式化文本，以及添加图像的方法，且使用 JavaScript 可以控制其每一个像素。HTML5 的 canvas 元素使得浏览器无需 Flash 或 Silverlight 等插件就能直接显示图形或动画图像。
HTML5 最大特色之一就是支持音频视频，在通过增加了<audio>、<video>两个标签来实现对多媒体中的音频、视频使用的支持，只要在 Web 网页中嵌入这两个标签，而无需第三方插件（如 Flash）就可以实现音视频的播放功能。HTML5 对音频、视频文件的支持使得浏览器摆脱了对插件的依赖，加快了页面的加载速度，扩展了互联网多媒体技术的发展空间。
HTML5 利用 Web Worker 将 Web 应用程序从原来的单线程业界中解放出来，通过创建一个 Web Worker 对象就可以实现多线程操作。
# H5 优势
- 跨平台:唯一一个通吃 PC MAC iPhone Android 等主流平台的跨平台语言
- 快速迭代
- 降低成本
- 导流入口多
- 分发效率高
# 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
3
4
5
document.compatMode
document.compatMode 属性最初由微软在 IE 中创造出来，这是一个只读的属性，返回一个字符串，
只可能存在两种返回值：
BackCompat：标准兼容模式未开启（怪异模式）
CSS1Compat：标准兼容模式已开启（标准模式）
在现代主流浏览器中，其实怪异模式的渲染和标准与几乎标准间没有太大的差别（ie9+ 谷歌 火狐 ...）
HTML5提供的<DOCTYPE html>是标准模式，向后兼容的,等同于开启了标准模式，
那么浏览器就得老老实实的按照W3C的 标准解析渲染页面
一个不含任何 DOCTYPE 的网页将会以 怪异(quirks) 模式渲染。
2
3
4
5
6
7
8
9
10
# 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类型来运作
2
3
4
5
6
7
8
9
10
11
12
<meta charset="UTF-8">:
告诉浏览器你应该使用哪种编码来解析网页
2
# 语义化标签
在 HTML 5 出来之前，我们用 div 来表示页面头部，章节，页脚等。但是这些 div 都没有实际意义。
各大浏览器厂商分析了上百万的页面，从中发现了 DIV 名称的通用 id 名称大量重复。
例如，很多开发人员喜欢使用(div id="footer")来标记页脚内容，所以 Html5 元素引入了语义化标签（一组新的片段类元素）
常用的语义化标签：
<hgroup></hgroup>
<header></header>
<nav></nav>
<section></section>
<footer></footer>
<article></article>
<aside></aside>
2
3
4
5
6
7
# 语义化的好处
- HTML5 可以让很多更语义化结构化的代码标签代替大量的无意义的 div 标签。
- 这种语义化的特性提升了网页的质量和语义。
- 对搜索引擎更加的友好。
他们这些标签功能就是代替< div>功能中的一部分，他们没有任何的默认样式，除了会让文本另起一行外；
# 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标签
2
3
4
5
6
7
8
9
# head 元素
header 元素代表 网页 或 section 的页眉。通常包含 h1-h6 元素或 hgroup
<header>
<hgroup>
<h1>网站标题</h1>
<h2>网站副标题</h2>
</hgroup>
</header>
header使用注意：
可以是“网页”或任意“section”的头部部分
没有个数限制。
如果hgroup或h1-h6自己就能工作的很好，那就不要用header。
2
3
4
5
6
7
8
9
10
11
# nav 元素
nav 元素代表页面的导航链接区域。用于定义页面的主要导航部分。
<nav>
<ul>
<li>HTML 5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
</nav>
nav使用注意：
用在整个页面主要导航部分上，不合适就不要用nav元素
2
3
4
5
6
7
8
9
10
# 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# article 元素
article 元素最容易跟 section 和 div 容易混淆，其实 article 代表一个在文档，页面或者网站中自成一体的内容
<article>
<h1>一篇文章</h1>
<p>文章内容..</p>
<footer>
<p><small>版权：html5jscss网所属，作者：damu</small></p>
</footer>
</article>
article使用注意：
独立文章：用article
单独的模块：用section
没有语义的：用div
2
3
4
5
6
7
8
9
10
11
12
# aside 元素
aside 元素被包含在 article 元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等
在 article 元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以是日志串连，其他组的导航，甚至广告，这些内容相关的页面。
<article>
<p>内容</p>
<aside>
<h1>作者简介</h1>
<p>小北，前端一枚</p>
</aside>
</article>
aside使用总结：
aside在article内表示主要内容的附属信息，
在article之外则可做侧边栏
如果是广告，其他日志链接或者其他分类导航也可以用
2
3
4
5
6
7
8
9
10
11
12
# footer 元素
footer 元素代表 网页 或 section 的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。
<footer>
COPYRIGHT@sweetheart
</footer>
footer使用注意：
可以是 网页 或任意 section 的底部部分；
没有个数限制，除了包裹的内容不一样，其他跟header类似。
2
3
4
5
6
7
提示
HTML5 学习的具体代码见 github ：https://github.com/gujunling/H5-study/tree/main/H5/%E5%9F%BA%E7%A1%80 (opens new window)