HTML的一些基础知识

Admin lol
  2023-03-10 11:24:41 2023-03-10 11:24 Created   2023-03-10 11:39:02 2023-03-10 11:39 Updated  

几种标记语言：

GML：格式化文档语言
SGML: 标准通用标记语言（Standard Generalized Markup language）– 基础是GML
XML: 可扩展标记语言 (Extensible Markup Language) — SGML的子集
HTML：超文本标记语言(Hyper Text Markup Language)—基于[SGML的应用]
XHTML：可扩展超文本标记语言（Extensible HyperText Markup Language） — 基于XML

网页的本质就是【HTML】，【HTML】是web（万维网）编程的基础。

HTML是基于更古老的语言SGML(标准通用化标记语言)定义的，并简化了其中的语言元素。 这些元素可以告诉浏览器如何在屏幕上展示数据，所以很早就得到了各web浏览器厂商的支持。
XHTML 是一种过渡语言，基本语言还是沿用HTML标签，但是要比HTML更严谨，比如必须有结束标签，严格嵌套等

每一个HTML文档都是一种静态的网页文件， 文件内包含了HTML指令代码，这些指令代码并不是一种程序语言，只是一种显示位置的【标记结构语言】，易学易懂， 非常简单。
HTML历史上经过了很多版本， 目前公认使用的是HTML5.

网站：在逻辑上将【视为一个整体的一系列的页面的有机集合】称为网站

HTML版本：
html历史上有如下版本：
①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。
②HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。 
③HTML 3.2：1997年1月14日，W3C推荐标准。
④HTML 4.0：1997年12月18日，W3C推荐标准。
⑤HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。
⑥HTML 5：HTML5是公认的下一代Web语言，是html最新的标准。Internet Explorer 8及以前的版本不支持。
HTML 文档类型：
所有的HTML文档都必须以<!DOCTYPE> 声明开头，该声明不是一个标签， 而是一条消息，告知浏览器期望的文档类型。
DOCTYPE：

声明必须是 HTML 文档的第一行，位于 标签之前。
声明不是 HTML 标签
所有浏览器都支持 <!DOCTYPE> 声明。
声明对大小写不敏感
声明没有结束标签。

常用的DOCTYPE声明：

HTML版本声明备注HTML5-HTML 4.01 Strict不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。HTML 4.01 Transitional包括展示性的和弃用的元素。不允许框架集。HTML 4.01 Frameset允许框架集XHTML 1.0 Strict/xhtml1/DTD/xhtml1-strict.dtd同html4.01 StrictXHTML 1.0 Transitional/xhtml1/DTD/xhtml1-transitional.dtd同html4.01 transitionalXHTML 1.0 Frameset/xhtml1/DTD/xhtml1-frameset.dtd同html4.01 FramesetXHTML 1.1/xhtml11/DTD/xhtml11.dtd允许添加模型
DOCTYPE意义是什么？ 
声明文档的解析类型，避免浏览器的怪异模式解析渲染页面（根据需要正确的渲染页面）
DTD (Document Type Definition)：
是定义XML的合法构建模块，它使用一系列的合法元素来定义文档结构。

在 HTML 4.01 中， 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。

HTML5 不基于 SGML，所以不需要引用 DTD。

没有正确的声明会怎样？
有正确的完成的DOCTYPE 和DTD 就会按照标准模式，如果DOCTYPE和DTD 不正确不完整，就会触发怪异模式
浏览器的2种模式：

BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染

CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染

document.compatMode 可以检测出当前浏览器使用的是哪种模式解析渲染页面的

HTML显示：
为了正确的显示HTML页面， 浏览器必须知道使用的字符集。

复制代码 字符集相关知识 HTML5 默认使用UTF-8编码（UTF-8 几乎涵盖世界上所有字符和符号） 表情符号： 表情符号（Emoji）是来自 UTF-8 字符集的字符：😄 😍 💗 什么是 Emoji？ 表情符号（Emoji）类似图像或图标，但它们并不是。 它们是来自 UTF-8 (Unicode) 字符集的字母（字符）。 由于表情符号是字符，因此可以像 HTML 中的其他任何字符一样复制、显示和调整它们的大小。 预留字符： 在 HTML 中，某些字符是预留的。

“
‘
<

&

字符实体：
问题：在HTML中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
解决方案：如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
表示字符实体的2种方式：
字符实体可以用【实体编号】【实体名称】来表示：

字符描述实体名称实体编号”引号"&#34;∑N-ARY SUMMATION&sum;&#8721;😀–&#128512;

详解：普通键盘上不存在众多数学（如上表中的∑）、技术和货币符号。如需将此类符号添加到 HTML 页面，您可以使用 HTML 实体名称。如果不存在实体名称，则可使用实体编号，十进制或十六进制的引用。

常用的字符实体：

不间断空格(&nbsp;)：最常用

详解：浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用 &nbsp; 字符实体。

注意事项：

实体名称对大小写敏感！
键盘上不存在的字符也可以由实体代替。
使用实体名而不是数字的的优缺点：

好处：名称易于记忆。
坏处：浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。

HTML5 新增：
新增的语义/ 结构 元素
语义学：对语言的意义的研究
语义元素：拥有语义的元素， 如div 是非语义元素，无法提供关于其内容的信息，但是img form table 可以清晰定义其内容
语义化的优点：

提升可访问性
seo
结构清晰，利于维护

新增的语义元素：

新增的表单元素

datalist
keygen
output

新增的表单的【输入类型 （13）+ 输入属性（16）】
新增表单类型共13个：

时间（月、周、time、date、datetime、datetime-local6个）
颜色（1）
范围（1）
其他（search、email、tel、number、url 5个）

新增表单输入属性 16 个

新增的【属性语法】

单引号：disabled= ‘true’
双引号 ：disabled=”true”
没有引号 ： disabled= true
空：disabled

复制代码 新增的图像

canvas
svg

新增的媒介元素

audio
video
embed: 外部（非 HTML）内容的容器
source
track

video视频(在老式浏览器中无效)：

  1. 可以向 HTML 页面中嵌入多媒体元素的标签有：

video+ source： HTML4 并不能识别
embed： HTML4 并不能识别
object

问题：在HTML中播放视频的方法有很多种，但是比如