likes
comments
collection
share

HTML的一些基础知识

作者站长头像
站长
· 阅读数 34

概论：

几种标记语言：

  • 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> 标签之前。
  • 声明不是 HTML 标签
  • 所有浏览器都支持 <!DOCTYPE> 声明。
  • 声明对大小写不敏感
  • 声明没有结束标签。

常用的DOCTYPE声明：

HTML版本声明备注
HTML5<!DOCTYPE html>-
HTML 4.01 Strict<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
HTML 4.01 Transitional<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">包括展示性的和弃用的元素。不允许框架集。
HTML 4.01 Frameset<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">允许框架集
XHTML 1.0 Strict/xhtml1/DTD/xhtml1-strict.dtd同html4.01 Strict
XHTML 1.0 Transitional/xhtml1/DTD/xhtml1-transitional.dtd同html4.01 transitional
XHTML 1.0 Frameset/xhtml1/DTD/xhtml1-frameset.dtd同html4.01 Frameset
XHTML 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种模式：

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

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

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

HTML显示：

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

<meta charset="UTF-8">

字符集相关知识

HTML5 默认使用UTF-8编码（UTF-8 几乎涵盖世界上所有字符和符号）

表情符号：

表情符号（Emoji）是来自 UTF-8 字符集的字符：😄 😍 💗

什么是 Emoji？

表情符号（Emoji）类似图像或图标，但它们并不是。

它们是来自 UTF-8 (Unicode) 字符集的字母（字符）。

由于表情符号是字符，因此可以像 HTML 中的其他任何字符一样复制、显示和调整它们的大小。

预留字符：

在 HTML 中，某些字符是预留的。

  1. "
  2. '
  3. <
  4. >
  5. &

字符实体：

问题：在HTML中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

解决方案：如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。

表示字符实体的2种方式：

字符实体可以用【实体编号】【实体名称】来表示：

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

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

常用的字符实体：

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

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

注意事项：

  • 实体名称对大小写敏感！
  • 键盘上不存在的字符也可以由实体代替。
  • 使用实体名而不是数字的的优缺点：
    • 好处：名称易于记忆。
    • 坏处：浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。

HTML5 新增：

新增的语义/ 结构 元素

语义学：对语言的意义的研究

语义元素：拥有语义的元素， 如div 是非语义元素，无法提供关于其内容的信息，但是img form table 可以清晰定义其内容

语义化的优点：

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

新增的语义元素：

HTML的一些基础知识

新增的表单元素

  • datalist
  • keygen
  • output

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

新增表单类型共13个：

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

HTML的一些基础知识

新增表单输入属性 16 个

HTML的一些基础知识

新增的【属性语法】

  • 单引号：disabled= 'true'
  • 双引号 ：disabled="true"
  • 没有引号 ： disabled= true
  • 空：disabled
<input type="text" disable>

新增的图像

  • canvas
  • svg

新增的媒介元素

  1. audio
  2. video
  3. embed: 外部（非 HTML）内容的容器
  4. source
  5. track

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

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

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

问题：在HTML中播放视频的方法有很多种，但是比如<video>，<embed> HTML4 并不能识别。

解决方案： 所以为了保证您的视频可以在所有浏览器和所有硬件上都能够播放，最好的HTML的解决方案是 HTML5 + <object> + <embed>。

下面代码中，会首先使用<video>尝试播放不同格式的视频，如果均失败，就使用<embed>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

2. 如果网页包含【指向媒体文件的超链接】，大多数浏览器会使用【辅助应用程序】来播放文件

<a href="movie.swf">Play a video file</a>

3. 在HTML中显示视频的最简单的方法

可以将视频上传到优酷，然后将链接引入到代码中

4.内联视频

在网页中包含的视频叫内联视频， 但是从用户体验上来说， 可能并不友好， 而且有可能用户配置了关闭内联视频的设置，所以最好打开新的页面播放。

<audio> 音频(老式浏览器中不起作用)：

  • 不同的浏览器对音频格式的支持也不同
  • 如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。
  • 如果用户的计算机未安装插件，无法播放音频。
  • 如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。

1. 播放音频的完整方案

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>

2.如果网页包含【指向媒体文件的超链接】，大多数浏览器会使用【辅助应用程序】来播放文件

同video

3. 在HTML中显示音频的最简单的方法

使用雅虎播放器（免费）

<!DOCTYPE HTML>
<html>
<body>

<a href="/i/song.mp3">Play Song 1</a>

</body>
</html>
// 插入网页底部
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

HTML的一些基础知识

4. 内联声音

同video

提问：

看完了， 来看下你能否回答以下问题吧：

  1. HTML5 的默认字符集是什么？
  2. 字符集都有哪些？
  3. 什么是语义化？
  4. DOCTYPE 的意义是什么？
  5. HTML5 和HTML4.01的区别是什么？
  6. HTML5 新增的内容有哪些？
  7. 一个<a 在浏览器中显示的是什么？如何正确的显示？
  8. 浏览器对于10个空格的显示结果是什么？如何正确的显示？
  9. 浏览器有几种模式？分别是什么？
  10. HTML XML 和XHTML 和SGML 的关系是什么？

答案

  1. HTML5 的默认字符集是什么？
  • utf-8
  1. 字符集都有哪些？
  • ASCII 、windows-1252 、iso-8859-1、 GB2312、GBK、 GB18030 、BIG5、unicode
  1. 什么是语义化？
  • 能够更好的理解一个标签的含义，比如img代表渲染的是一张图片，header表示头部，而不像div，无法知道他具体代表的是什么
  1. DOCTYPE 的意义是什么？
  • 声明文档的解析类型，避免浏览器的怪异模式，正确的解析渲染页面
  1. HTML5 和HTML4.01的区别是什么？
版本HTML4.01HTML5
DOCTYPE 声明种类三种1种
是否基于SGML是否
声明是否需要引入DTD是否
默认字符集iso-8859-1utf-8
标签移除了一些标签如font新增了很多语义化标签
浏览器的支持老式浏览器主流都支持
video，audio标签不支持支持（新增）
  1. HTML5 新增的内容有哪些？
  • 新增语义化标签:header、footer、nav、section、article等
  • 新增表单元素：output、datalist等
  • 新增表单属性：autofocus、placeHolder、max、min等
  • 新增表单类型：date、email、number、color、tel、range等
  • 新增属性语法：单引、双引、没有引号、空
  • 新增图像：canvas、svg
  • 新增媒介元素：audio、video等
  1. 一个<a 在浏览器中显示的是什么？如何正确的显示？
  • 使用字符实体名称 &lt;a
  1. 浏览器对于10个空格的显示结果是什么？如何正确的显示？
  • 只显示一个，使用&nbsp;
  1. 浏览器有几种模式？分别是什么？怎么检测？
  • 怪异模式（backCompat）：声明不对会触发
  • 标准模式（css1Compat）

document.compatMode 可以检测 当前浏览器是哪种模式

  1. HTML XML 和XHTML 和SGML 的关系是什么？
  • HTML、XML 都属于标准通用标记语言SGML的子集，XHTML 是更严格的HTML
转载自:https://juejin.cn/post/7208476031136137271
评论
请登录