今天我们主要来看两个过程：如何解析请求回来的 HTML 代码，DOM 树又是如何构建的。 解析代码我们在前面讲到了 HTTP 的构成，但是我们有一部分没有详细讲解，那就是 Response 的 body 部分，这正是因为 HTTP 的 Response 的 body，就要交给我们今天学习的内容去处理了。 HTML 的结构不算太复杂，我们日常开发需要的 90...

实际上，对浏览器的实现者来说，他们做的事情，就是把一个 URL 变成一个屏幕上显示的网页。 这个过程是这样的： 浏览器首先使用 HTTP 协议或者 HTTPS 协议，向服务端请求页面； 把请求回来的 HTML 代码经过解析，构建成 DOM 树； 计算 DOM 树上的 CSS 属性； 最后根据 CSS 属性对元素逐个进行渲染，得到内存中的位图； 一个可选的...

我们都知道，HTML 已经是一个完整的语义系统。在前面的课程中，我们围绕着 HTML 本身做了讲解，但是在实际应用中，我们还会用到一些它的扩展。今天我们要讲的 ARIA 就是其中重要的一部分。 ARIA 全称为 Accessible Rich Internet Applications，它表现为一组属性，是用于可访问性的一份标准。关于可访问性，它被提到最...

浏览器中已经实现的属性首先我们来看看浏览器中实现了哪些属性。我们用一段代码来看一下。 1Object.keys(document.body.style).filter(e => !e.match(/^webkit/)) 这段代码思路非常简单，就是枚举 document.body.style 上的所有属性，并且去掉 webkit 前缀的私有属性。 在我的...

颜色的原理首先我们来讲讲颜色，最常见的颜色相关的属性就是 color 和 background-color。 这两个属性没什么好讲的，它们分别表示文字颜色和背景颜色，我们这里重点讲讲颜色值。 RGB 颜色我们在计算机中，最常见的颜色表示法是 RGB 颜色，它符合光谱三原色理论：红、绿、蓝三种颜色的光可以构成所有的颜色。 为什么是这三种颜色呢？这跟人类的视神...

在上世纪 80 年代，“富文本”的概念在计算机领域的热门，犹如如今的“AI”和“区块链”，而 Tim Berners-Lee 当时去设计 HTML，也并非是凭空造出来，他使用了当时已有的一种语言：SGML。 SGML 是一种古老的标记语言，可以追溯到 1969 年 IBM 公司所使用的技术，SGML 十分复杂，严格来说，HTML 是 SGML 中规定的一种...

在 CSS 属性中，有这么一类属性，它负责的不是静态的展现，而是根据用户行为产生交互。这就是今天我们要讲的属性。 首先我们先从属性来讲起。CSS 中跟动画相关的属性有两个：animation 和 transition。 animation 属性和 transition 属性我们先来看下 animation 的示例，通过示例来了解一下 animation ...

在早年的 CSS 中，“使盒按照外部尺寸变化”的能力非常弱。在我入行前端的时间（大约 2006 年），CSS 三大经典问题：垂直居中问题，两列等高问题，自适应宽问题。这是在其它 UI 系统中最为基本的问题，而到了 CSS 中，却变成了困扰工程师的三座大山。 机智的前端开发者们，曾经创造了各种黑科技来解决问题，包括著名的 table 布局、负 margin、...

script我们之所以选择先讲解 script 标签，是因为 script 标签是为数不多的既可以作为替换型标签，又可以不作为替换型标签的元素。 我们先来看看 script 标签的两种用法： 123456<script type="text/javascript">console.log("Hello world!&...

链接这种元素可以说是占据了整个互联网。也正是因为无处不在的超链接，才让我们的万维网如此繁荣。没有了超链接的 HTML，最多可以称为富文本，没法称作超文本（hyper text）。 链接是 HTML 中的一种机制，它是 HTML 文档和其它文档或者资源的连接关系，在 HTML 中，链接有两种类型。一种是超链接型标签，一种是外部资源链接。 link 标签我...