HTML笔记

最新推荐文章于 2024-10-03 22:12:17 发布

weixin_45687657

最新推荐文章于 2024-10-03 22:12:17 发布

阅读量67

点赞数

文章标签： html 笔记 firefox

本文链接：https://blog.csdn.net/weixin_45687657/article/details/130478233

版权

文章介绍了常见的浏览器类型及其内核，如IE的Trident内核，火狐的Gecko内核，以及Chrome的Blink内核。接着详细阐述了浏览器的渲染原理，包括从HTML转换为DOM树，CSS转换为CSSOM树，再到生成渲染树的整个过程。此外，还提到了HTML的超文本特性和文档结构。

摘要由CSDN通过智能技术生成

1.关于浏览器：
浏览器是网页运行的平台，常见的浏览器有IE、火狐（fireFox），谷歌（chrome），safari，Opera（欧朋），第六类浏览器是Edge浏览器（是微软改进IE提供的内置浏览器）

1、IE浏览器：
Trident内核。
前缀：-ms-
国内很多双核浏览器其中之一基本都是Trident内核，经常被称作为“安全模式或者兼容模式”

2、FireFox（火狐）
Gecko内核
前缀：-moz-
Gecko内核代码完全公开，代码的开发程度非常高，全世界的程序都可以给火狐编写代码。
但是火狐最近没落了，比如打开速度慢，升级太频繁，猪一样的队友（flash），神一样的对手（chrome）
3、safari
前缀：-webkit-
webkit内核
现在很多人错误的一位 webkit就是chrome（谷歌最早采用webkit内核，现在已经改为Blink）

4、chrome（谷歌）
Blink内核
前缀：-webkit-
Blink内核其实还是webkit内核的一个分支而已，大部分国产浏览器用的都是Blink内核

5、Opera(欧朋)
Presto内核（已经废弃）
前缀：-webkit-
早两年的时候，Opera抛弃Presto内核转向谷歌爸爸的怀抱（使用的Blink内核）

6、移动端
安卓手机用的大多是Webkit内核
Ios用的是safari的内核（webkit）
WP系统使用的是 Trident内核

2.浏览器渲染原理
   1)浏览器接收到 HTML 文件并转换为 DOM 树
       字节数据--》字符串--》标记Token--》Node--》Dom
       1.当我们打开一个网页时，浏览器都会去请求对应的 HTML 文件。虽然平时我们写代码时都会分为 JS、CSS、HTML 文件，也就是字符串，但是计算机硬件是不理解这些字符串的，
           所以在网络中传输的内容其实都是 0 和 1 这些字节数据。当浏览器接收到这些字节数据以后，它会将这些字节数据转换为字符串，也就是我们写的代码。
2.当数据转换为字符串以后，浏览器会先将这些字符串通过词法分析转换为标记（token），这一过程在词法分析中叫做标记化.
           那么什么是标记呢？这其实属于编译原理这一块的内容了。简单来说，标记还是字符串，是构成代码的最小单位。这一过程会将代码分拆成一块块，
           并给这些内容打上标记，便于理解这些最小单位的代码是什么意思。
           //a标签文本
           //>结束一个标签
           <a></a>
       3.当结束标记化后，这些标记会紧接着转换为 Node，最后这些 Node 会根据不同 Node 之前的联系构建为一颗 DOM 树。
   2)将 CSS 文件转换为 CSSOM 树
       字节数据--》字符串--》标记Token--》Node--》cssom
       其实转换 CSS 到 CSSOM 树的过程和上一小节的过程是极其类似的,在这一过程中，浏览器会确定下每一个节点的样式到底是什么，并且这一过程其实是很消耗资源的。
       因为样式你可以自行设置给某个节点，也可以通过继承获得。在这一过程中，浏览器得递归 CSSOM 树，然后确定具体的元素到底是什么样式。
       如果你有点不理解为什么会消耗资源的话，我这里举个例子
       <div>
       <a> <span></span> </a>
       </div>
       <style>
       span {
           color: red;
       }
       div > a > span {
           color: red;
       }
       </style>
       对于第一种设置样式的方式来说，浏览器只需要找到页面中所有的 span 标签然后设置颜色，但是对于第二种设置样式的方式来说，浏览器首先需要找到所有的 span 标签，然后找到 span 标签上的 a 标签，
       最后再去找到 div 标签，然后给符合这种条件的 span 标签设置颜色，这样的递归过程就很复杂。所以我们应该尽可能的避免写过于具体的 CSS 选择器，然后对于 HTML 来说也尽量少的添加无意义标签，保证层级扁平。
   3)生成渲染树
       1.当我们生成 DOM 树和 CSSOM 树以后，就需要将这两棵树组合为渲染树。
       2.在这一过程中，不是简单的将两者合并就行了。渲染树只会包括需要显示的节点和这些节点的样式信息，如果某个节点是 display: none 的，那么就不会在渲染树中显示。
       3.当浏览器生成渲染树以后，就会根据渲染树来进行布局（也可以叫做回流），然后调用 GPU 绘制，合成图层，显示在屏幕上。
2.HTML是超文本标记语言
超文本的解释：
1、用超链接的方法将各种不同空间的文字信息进行组合起来
2、超出文本的范畴，文本中包含图片、链接、视频、程序、音乐等等非文本信息

标记语言：将文本和文本相关的信息集合起来，展示出文档的结构和数据的电脑编码语言

3.HTML文档结构
   <!DOCTYPE html>
       告诉浏览器应该按照html5的规范来解析当前的页面
   <html lang="en">
   html标签告诉浏览器这个是HTML文档的开始，最后一个标签是</html>