H5梳理之核心概念-编程知识

H5梳理之核心概念

news/2025/3/20 8:58:54/文章来源:https://www.cnblogs.com/zzholiday/p/18782287

H5这一块内容比较杂，这边针对一些需要掌握的核心概念进行一个梳理。

HTML超文本标记语言（HyperText Markup Language）
1.1 <!DOCTYPE> 声明文档类型

// 声明这是一个html5文档浏览器需要按照html解析（新版比较简单）// 旧版本的HTML（如HTML4.01），声明会更复杂

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 进行引用，才能告知浏览器文档所使用的文档类型。

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（流内容）是文档的主要组成部分，包含几乎所有的元素，包括文本、图像、表格等。