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)