H5梳理之核心概念（1）
H5这一块内容比较杂，这边针对一些需要掌握的核心概念进行一个梳理。
1、HTML超文本标记语言（HyperText Markup Language）
1.1 <!DOCTYPE> 声明文档类型
1.2 相关术语
SGML 是标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言，是所有电子文档标记语言的起源。
HTML 是超文本标记语言，主要是用于规定怎么显示网页。
XML 是可扩展标记语言是未来网页语言的发展方向，XML 和 HTML 的最大区别就在于XML 的标签是可以自己创建的，数量无限多，而 HTML 的标签都是固定的而且数量有限。
XHTML 也是现在基本上所有网页都在用的标记语言，他其实和 HTML 没什么本质的区别，标签都一样，用法也都一样，就是比 HTML 更严格，比如标签必须都用小写，标签都必须有闭合标签等。
DTD（文档类型定义）
DTD是SGML中某一种规范的规则
DTD（ Document Type Definition 文档类型定义）是一组机器可读的规则
DTD 是对 HTML 文档的声明，还会影响浏览器的渲染模式
例如xml的DTD
<!DOCTYPE note [
<!ELEMENT note (to, from, heading, body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>
1.3 HTML5
HTML5 不基于 SGML，因此不需要对 DTD 进行引用。但是需要 DOCTYPE 来规范浏览器的行为
HTML4.01 基于 SGML，所以需要对DTD 进行引用，才能告知浏览器文档所使用的文档类型。
2、HTML元素
HTML4 中，元素被分成两大类：inline （内联元素）与 block （块级元素）。
（1） 格式上，默认情况下，行内元素不会以新行开始，而块级元素会新起一行。
（2） 内容上，默认情况下，行内元素只能包含文本和其他行内元素。而块级元素可以包含行内元素和其他块级元素。
（3） 行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置 width 无效，height 无效（可以设置 line-height），设置 margin 和 padding 的上下不会对其他元素产生影响。
H5中元素主要分为 7 类：Metadata（元数据）、Flow（流内容）、Sectioning（分区内容）、Heading（标题内容）、Phrasing（短语内容）、Embedded（嵌入内容）、Interactive（交互内容）
Metadata元素提供关于文档的元信息，通常位于文档的 部分。
<title>：定义文档的标题。
<meta>：提供关于文档的元信息（如字符集、描述、关键词等）。
<link>：用于链接外部资源，如样式表。
<style>：嵌入内部CSS样式。
Flow（流内容）是文档的主要组成部分，包含几乎所有的元素，包括文本、图像、表格等。
<div>：通用的容器元素，常用于布局。
<p>：段落元素。
<h1> 至 <h6>：标题元素。
Sectioning（分区内容）用于定义文档的结构和分区，有助于搜索引擎和屏幕阅读器理解内容的层次。
<section>：表示文档中的一个区域，通常包含标题和内容。
<article>：表示独立的内容块，如博客文章或新闻。
<nav>：定义导航链接的部分。
<aside>：表示与主内容相关的附加内容。
<header> 和 <footer>：定义文档或部分的头部和底部。
Heading（标题内容）用于定义文档的标题层级
<h1> 至 <h6>：六个级别的标题元素，<h1> 为最高级，<h6> 为最低级。
Phrasing（短语内容）是文档中嵌入在流内容中的元素，通常用于文本格式化和链接。
<span>：通用的行内元素，用于文本样式。
<strong>：表示重要的内容，通常加粗。
<em>：表示强调的内容，通常斜体。
<a>：定义链接。
Embedded（嵌入内容）用于嵌入其他资源（如图像、视频和音频）。
<img>：嵌入图像。
<audio>：嵌入音频内容。
<video>：嵌入视频内容。
<iframe>：嵌入另一个HTML文档。
Interactive（交互内容）用于创建用户交互的组件。
<a>：定义超链接。
<button>：定义可点击的按钮。
<details>：可展开和折叠的内容。
<dialog>：表示对话框或窗口。
此外还有空元素，即标签内没有内容的元素<xxx><xxx/>
常见的空元素
这是第一行<br>这是第二行
<hr>
<img src="image.jpg" alt="描述">
<input type="text" placeholder="请输入文本">
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
link 标签
link 标签定义文档与外部资源的关系。
link 标签是空元素，仅包含属性
link 标签仅存在于head部分，可出现多次
link 标签rel 属性定义了当前文档与被链接文档之间的关系
<link rel="stylesheet" href="styles.css">
页面导入样式时，使用 link 和 @import 有什么区别？
link 和 @import 都能加载样式
link更全面，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性、引入网站图标等，@import是css提供的语法规则
加载顺序，@import是加载页面时，link 标签引入的 CSS 被同时加载；@import 引入的 CSS 将在页面加载完毕后被加载。
兼容性，@import是css2.1之后的语法，IE5不支持。link标签是html元素，兼容性没有问题。
掌控力，你可以用JS操作dom，从而改变link,但是很显然 你无法改变源代码添加@import。（从这个角度而言，@import只是再CSS层面提供一个引入方式）
3、浏览器内核
浏览器主要功能是将用户选择的 web 资源呈现出来。
浏览器需要从服务器请求资源，并将其显示在浏览器窗口中。
HTML 和 CSS 规范中规定了浏览器解释 html 文档的方式，由 W3C 组织对这些规范进行维护，W3C 是负责制定 web 标准的组织。
简单来说浏览器可以分为两部分，shell 和 内核
shell 是指浏览器的外壳：例如菜单，工具栏等。主要是提供给用户界面操作，参数设置等等。它是调用内核来实现各种功能的
浏览器内核 参考（https://www.cnblogs.com/fullhouse/archive/2011/12/19/2293455.html）
Trident(IE内核，out了)、Gecko(Firebox 功能丰富内存消耗大)、Presto（Opera，特点是快，但是不兼容）、Webkit（苹果，用户体验好，毕竟是硬件大佬，但是不兼容）、Blink(谷歌，软件起家的大佬，偏稳定)
国内的都是基于IE，Chrome内核，即Trident、Blink。（毕竟开源免费）
现在除了苹果，火狐有自己的内核，其他的都是谷歌的内核。
浙公网安备 33010602011771号