前言

我們在之前的學習中，對于網(wǎng)絡有了一定的了解。現(xiàn)在我們來學習一些基礎的 HTML/ CSS 知識。希望閱讀完這篇文章能達到編寫簡單頁面的程度。

HTML/ CSS 的發(fā)明；
HTML 基礎；
CSS 基礎；
頁面是如何渲染的；

Part 1. HTML/ CSS 的發(fā)明

1989 年 3 月，互聯(lián)網(wǎng)還只屬于少數(shù)人。

同年，蒂姆·伯納斯·李（Tim Berners-Lee）提出了一種能讓遠隔兩地的研究者們共享知識的設想。

這一想法的實踐促使了萬維網(wǎng)的誕生。它基于現(xiàn)有的 TCP/IP 協(xié)議構建，包括 4 個部分：

一種表示超文本文檔的文本格式，即超文本標記語言（HTML）；
一種用于交換這些文檔的簡單協(xié)議，即 HyperText 傳輸協(xié)議（HTTP）；
一個客戶端可以顯示這些文檔，第一個 Web 瀏覽器稱為 WorldWideWeb。
一個可以訪問文檔的服務器；

這四部分在 1990 年底完成。雖然此時 Web 頁面只能顯示單純的文本內(nèi)容，瀏覽器也只能顯示呆板的文字信息，不過這已經(jīng)基本滿足了建立 Web 站點的初衷，實現(xiàn)了信息資源共享。

從 HTML 被發(fā)明開始，樣式就以各種形式存在。不同的瀏覽器結合它們各自的樣式語言為用戶提供頁面效果的控制。

隨著 HTML 的成長，為了滿足頁面設計者的要求，HTML 添加了很多顯示功能。但是隨著這些功能的增加，HTML 變的越來越雜亂，而且 HTML 頁面也越來越臃腫。于是 CSS 便誕生了。

1995 年 www 網(wǎng)絡會議上 CSS 被提出。同年，W3C 組織成立，層疊樣式表的開發(fā)就此走上正軌。

HTML 負責網(wǎng)頁內(nèi)容，CSS 負責內(nèi)容的基本樣式。

Part 2. HTML 基礎

什么是 HTML

HTML 是 Hper Text Markup Language 的簡稱，即超文本標記語言。它就像我們熟知的 Word 一樣，只不過它適用于 Web。

HTML 同 Word 一樣提供了標題、段落、列表、表格、圖像、粗體、斜體等文本來構建文檔。關鍵區(qū)別在于 Word 中的格式文本是可視的，而 HTML 代碼純粹是語義的。

HTML 基礎

像任何語言一樣，HTML 帶有一組規(guī)則。這些規(guī)則相對簡單，就是要界定界限——知道從哪里開始，從哪里結束。

例如，HTML 表示的段落將被寫為：

說明：

一對尖括號（</ >）中間的就是 HTML 標簽。
不同的標簽有不同的含義。這里的 p 代表了一個段落的意思；
HTML 標簽通常成對出現(xiàn)，開始標簽（opening tag）<p>定義了段落的開始，結束標簽（closing tag）</p>定義了結束；
開始和結束標簽之間唯一的區(qū)別就是標簽名稱前的斜杠 /；
當您把開始標簽和結束標簽以及兩者之間所有內(nèi)容組合在一起時，就獲得了一個 HTML 元素；
標簽（尖括號內(nèi)的內(nèi)容都）不會被顯示，僅僅用于區(qū)分內(nèi)容的語義并提供一些默認的樣式；

在哪里寫 HTML？

就像我們熟知的 .txt 文本文件一樣， HTML 文檔（后綴為 .html）也可以使用任意文本編輯器打開。

打開您的任一文本編輯器，然后復制并粘貼以下內(nèi)容：

<p>這是我的第一個網(wǎng)頁</p>

將文件另存為 my-first-webpage.html ，然后使用瀏覽器將其打開，您就會看到：

但實際上，我們一般會選擇更加專業(yè)的軟件：

屬性

屬性就像綁定到 HTML 元素的額外信息一樣。它們寫在 HTML 標簽內(nèi)，所以，瀏覽器也不會顯示它們。

例如，href 屬性就是用來定義 a 標簽跳轉目標鏈接的屬性：

<a href="https://www.wmyskxz.com/">點擊會跳轉到我的主頁</a>

有 16 個 HTML 屬性可用于任何 HTML 元素，所有這些都是可選的。

我們最常用的就是 class 屬性（用于 CSS）。

一些 HTML 元素具有強制屬性。例如，插入圖片時，必須使用 src （source）屬性來提供圖像的位置：

<img src="#" alt="Description of the image">

考慮到 <img> 標簽的意義，強制性的要求設置顯示圖像的路徑，是有意義的。

注釋

如果你有一些不想顯示但是又想提醒代碼閱讀者的一些事情，通常可以添加注釋。

HTML 注釋以  結束。如下所示：

<!-- This is an HTML comment -->
<!-- This is a multi-line HTML comment 
     that spans across more than one line -->
<p>This is a normal piece of text.</p>

您還可以注釋掉部分 HTML 代碼來進行調(diào)試，如下所示：

<!-- Hiding this image for testing
<img src="images/smiley.png" alt="Smiley">
-->

自封閉元素

一些 HTML 元素只有一個開始標簽：

<br> <!-- 換行標簽 -->
<img src="#" alt="Description"> <!-- 圖像標簽 -->
<input type="text"> <!-- 文字輸入標簽 -->

因為它們沒有結束標簽，因此內(nèi)部不能包含任何內(nèi)容。所以自封閉元素通常帶有一些屬性，以便為它們提供附加信息。

HTML 塊和內(nèi)聯(lián)

在 HTML 中，您主要會遇到兩種類型的 HTML 元素：

塊元素用于通過將內(nèi)容劃分為連貫的塊來構造頁面的主要部分。

<p>這是第一段內(nèi)容</p>
<p>這是第二段內(nèi)容</p>

內(nèi)聯(lián)元素旨在區(qū)分文本的一部分，以賦予其特定的功能或含義。內(nèi)聯(lián)元素通常包含一個或幾個單詞。

<p>如果感興趣，可以點擊<a href="https://www.wmyskxz.com">這里</a>來訪問我的主頁</p>

開始和結束標簽

所有塊級元素都有一個開始和結束標簽。

所以，自封閉元素都是內(nèi)聯(lián)元素，僅僅是因為它們的語法不允許它們包含任何其他 HTML 元素。

HTML 層次結構

HTML 文檔就像一棵大的家族樹，上面有父母、兄弟姐妹、孩子、祖先和后代等。

這源于 HTML 元素具有相互嵌套的功能。

嵌套

讓我們編寫一個簡單的段落，并通過插入兩個內(nèi)聯(lián)元素來區(qū)分文本各個部分來對其進行增強：

<p>
  <strong>培根</strong>曾經(jīng)說過：<q>合理安排時間，就等于節(jié)約時間</q>。
</p>

結果：

其中：

<strong> 對「培根」這一個詞語進行了強調(diào)；
<q> 對「合理安排時間，就等于節(jié)約時間」這句話加上了引號；

使用 <strong> 會加粗標簽內(nèi)的內(nèi)容，這只是瀏覽器的默認行為。請注意：您必須根據(jù) HTML 元素的含義而非其外觀來選擇 HTML 元素。

這種情況下：

<p> 是 <strong> 和 <q> 標簽的父元素；
<strong> 和 <q> 同為 <p> 元素的子元素；
<strong> 和 <q> 是同級元素；

順序

如何嵌套 HTML 文檔取決于打開和關閉標簽的位置。

由于 HTML 元素包含打開和關閉標簽，以及介于兩個標簽之間的內(nèi)容，一個子元素的關閉必須結束于父元素之前。

<!-- This is INVALID code! :-( -->
<p>
  This HTML code won't work because I the "strong" tag is opened here <strong>but is only closed after the paragraph.
</p></strong>

上述代碼是不合法的，因為 <strong> 標簽打開在 <p> 標簽之后（因此 <strong> 被認為是 <p> 的子元素），所以 <strong> 必須在 <p> 元素關閉之前關閉。

<!-- This is valid code. :-) -->
<p>
  This HTML code will work because I the "strong" tag is opened <strong>and closed</strong> properly.
</p>

深度

由于子元素本身可以包含其他子元素，所以可以在 HTML 文檔中編寫更深的層次結構。

例如，我們可以編寫一段：

<article>
  <h1>題圖故事：光努力是沒有用的</h1>
  <p>
    漫畫家蔡志忠有一個演講，題目叫做<a href="https://www.yuque.com/book-academy/share/shp7tu">《努力是沒有用的》</a>。讀完這份演講稿，我覺得他說的有道理。
  </p>
  <p>
    有些人非常勤奮，別人休息和娛樂的時候，都在工作學習。但是努力了一輩子，人生也沒有顯著的提升，就像報道里經(jīng)常說的：<q>某某在平凡的崗位上，勤勤懇懇工作了一輩子</q>。
  </p>
  <p>
    另一方面，很多成功者似乎也沒有特別努力，就取得了許多成就，過上了好日子。蔡志忠以自己為例，他從小就喜歡畫畫，然后一直畫，不知不覺就成了大漫畫家，名利雙收，從沒有覺得過得很辛苦。
  </p>
</article>

結果：

在這種情況下，該 HTML 文檔的家族樹看起來會是這樣：

<h1> 和三個 <p> 是兄弟姐妹；每個 <p> 的父親都是 <article>；每個元素（除開 <article>）都是 <article> 的后代；

塊元素和內(nèi)聯(lián)元素嵌套

塊元素可以包含塊元素或內(nèi)聯(lián)元素。

但是，內(nèi)聯(lián)元素只能包含其他內(nèi)聯(lián)元素。（<a> 標簽除外）

<!-- This is INVALID code! :-( -->
<strong>
  <p>You can't put a paragraph inside a "strong" tag.
</strong>

但是要記住元素的家族樹。這種層次結構在 CSS 中很有用。

HTML 是語義的

HTML 標記的目的是向文檔傳遞含義。所以不必擔心網(wǎng)頁的外觀，應該關心每個標簽的含義。

選擇合適匹配的元素

根據(jù)要編寫的內(nèi)容，可以選擇與文本含義相匹配的適當元素。

不要過分考慮語義

大約有 100 個語義 HTML 元素可供選擇。遍歷該列表并為您的內(nèi)容選擇適當?shù)?/strong>元素可能會讓人不知所措。

但是不要花太多時間擔心這一點。基本上能用好上面的標簽就足夠好了。

一個有效的 HTML 文檔

HTML 文檔需要特定的結構才能生效。

文檔類型

提供的第一個信息就是我們正在編寫的 HTML 文檔的類型：Doctype。

曾經(jīng)有很多 HTML 版本共存。如今，HTML 5 已經(jīng)成為規(guī)范。

所以，我們要告訴瀏覽器這個 HTML 文檔是 HTML 5 的版本，只需要在最開始寫上：

<!DOCTYPE html>

注意：HTML 是大小寫不敏感的。這意味著你只需要單詞拼寫對就可以了——但仍需要保持規(guī)范。

“
HTML 5 文檔類型沒有提到數(shù)字 “5” 的原因是：W3C 認為以前的文檔類型定義太混亂了，借機吧任何 HTML 版本的信息都給簡化掉了。

`<html>` 元素

除了 doctype 外，所有 HTML 文檔都必須包裝在一個 <html> 元素內(nèi)：

<!DOCTYPE html>
<html>
  <!-- The rest of your HTML code is here -->
</html>

`<head>`

<head> 標簽相當于整個頁面（<html> 包裹的內(nèi)容）的屬性。為整個頁面提供了附加的額外信息，并且不會顯示。

例如，文檔的標題就包含在 <head> 標簽內(nèi)：

<!DOCTYPE html>
<html>
  <head>
    <title>網(wǎng)頁標題</title>
  </head>
</html>

`<body>`

<body> 使我們編寫所有網(wǎng)頁內(nèi)容的地方。里面的所有內(nèi)容都會顯示在瀏覽器窗口中。

完整的有效 HTML 文檔

綜合所有這些要求，我們可以編寫一個簡單有效的 HTML 文檔：

<!DOCTYPE html>
<html>
  <head>
    <title>我沒有三顆心臟</title>
  </head>
  <body>
    <p>歡迎關注公眾號：wmyskxz</p>
  </body>
</html>

瀏覽器視角：

Part 3. CSS 基礎

為什么存在 CSS？

隨著 90 年代網(wǎng)絡的普及，將特定設計應用于網(wǎng)站的意圖也隨之增強。Web 開發(fā)人員依靠特定的 HTML 標簽來增強網(wǎng)頁顯示：

<basefont> 為整個 HTML 文檔定義了一種字體
<font> 為它包含的文本定義字體，顏色和大小
<center> 將所有內(nèi)容水平居中
<big> 增加文字大小
<strike> 帶有刪除線的渲染文本

也可以使用幾個 HTML 屬性：

bgcolor 在元素上定義背景色
text 定義文字顏色
幾個margin屬性可用于在元素的任何一側添加間隔的空間

但最重要的是，為了創(chuàng)建視覺上對齊（通常是彼此定位）的元素，Web 開發(fā)人員通常會使用 <table> 來設計網(wǎng)頁，因為它自然地提供了視覺網(wǎng)格：

但這種方法很麻煩，原因如下：

HTML <table> 定義是冗長的：它們需要很多樣板代碼
標簽在語義上是錯誤的：<table> 應該用于多維數(shù)據(jù)
更改布局需要更改標簽：如果我們想將左列移動到右側，則必須修改 HTML 結構
容易出現(xiàn)語法錯誤：行和單元格需要按特定順序進行排序和嵌套才能有效
標簽不可讀：表格之間相互嵌套

這就是為什么逐漸放棄使用表進行布局的原因，而改用 CSS 的原因。

什么是 CSS?

CSS 是 Cascading Style Sheets 的縮寫，即層疊樣式表。其目的是為標記語言（如 HTML 或 XML）設置樣式。因此，CSS 本身一文不值，除非與 HTML 文檔相關聯(lián)。

CSS 通過設置字體、顏色，定義邊距、定位元素、動畫交互等等，使 HTML 文檔栩栩如生。

CSS 是如何工作的?

CSS 的工作方式是選擇一個 HTML 元素（如一個段落），選擇一個要更改的屬性（如顏色），并應用一個特定的值（如紅色）：

p {color: red;}

“
"樣式" 一詞可能具有欺騙性。CSS 不僅僅可以用于修改文本的顏色、大小、字體等，還可以用來定義高度、寬度、內(nèi)部和外部的邊距、位置等。

我在哪里寫 CSS？

CSS 作為標簽屬性

您可以使用 style 屬性直接在 HTML 元素上編寫 CSS：

<p style="color: red;">This paragraph will be red.</p>

結果：

`<head>` 中的 CSS

您也可以在 <head> 中使用 <style> 標簽來使用 CSS：

<html>
  <head>
    <title>Hello World</title>
    <style type="text/css">
      p{ color: red;}
    </style>
  </head>
  <body>
    <p>This paragraph will be red.</p>
  </body>
</html>

結果：

CSS 在單獨的文件中

您也可以把 CSS 編寫為帶有 .css 擴展名的單獨文件，然后使用 <link> 標簽來將其鏈接到 HTML 中：

p{ color: red;}

<html>
  <head>
    <title>Hello World</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <p>This paragraph will be red.</p>
  </body>
</html>

目錄結構：
Desktop
	├── style.css
	├── my-first-webpage.html

結果：

這種單獨使用一個 CSS 文件的方法是優(yōu)選的。

為什么不直接在 HTML 中設置樣式？

因為我們要把內(nèi)容和其表示形式分開。這樣做的好處顯而易見。

首先是可閱讀性變高了，有哪些元素，以及元素哪些屬性一目了然，也利于分別維護和修改。（類似于書的目錄和對應內(nèi)容一樣）

另外是你可以提煉一些通用的屬性來減少描述：

簡而言之：更易維護、更靈活。不過應該怎么描述是相當看經(jīng)驗的。

CSS 基礎語法

CSS 的目的是定義 HTML 元素的布局和樣式。語法非常簡單：

/* A CSS rule */
selector{ property: value;}

您也可以將其看作是：

who{ what: how;}

CSS 選擇器

因為我們不想一次為所有 HTML 元素設置樣式，所以我們需要能夠定位這些 HTML 元素的子集。

CSS 選擇器定義了我們希望樣式應用到哪些元素。

通用標簽選擇器

定位通用 HTML 標簽很容易：只需使用標簽名稱即可。

a{ /* Links */ }
p{ /* Paragraphs */ }
ul{ /* Unordered lists */ }
li{ /* List items */ }

HTML 標簽的名稱和所使用的 CSS 選擇器之間存在直接聯(lián)系。

class

考慮到我們可能不希望所有段落或所有標題的樣式都相同，因此需要區(qū)分它們。

在所有 HTML 屬性中，該 class 屬性對于 CSS 來說是最重要的。它允許我們定義一組專門設計的 HTML 元素。只需在要使用的類名前面加一個點 . ：

.date {
  color: red;
}

這樣，所有具有 class="redColor" 的 HTML 元素都會被設置為紅色：

<p class="date">
  Saturday Feb 21
</p>
<p>
  The event will be on <em class="date">Saturday</em>.
</p>

結果：

IDs

你也可以使用 id 屬性來作用于 HTML，只需要在 CSS 選擇器前面加上 # ：

#tagline{ color: orange;}

<h1 id="tagline">This heading will be orange.</h1>

id 屬性有點類似于 class 屬性，但 id 只能作用于唯一一個 HTML 元素，而 class 可以作用于一類。

一些例子

組合選擇器

我們重用之前的示例，該實例中，我們希望日期顯示為紅色：

.date {
  color: red;
}

<p class="date">
  Saturday Feb 21
</p>
<p>
  The event will be on <em class="date">Saturday</em>.
</p>

但如果我們希望 em 元素中的日期改為藍色應該怎么辦？我們可以添加以下 CSS：

em.date {
  color: blue;
}

結果：

該 em.date 選擇器僅適用于 <em class="date"></em> 的 HTML 元素。它不會影響 .date 或 em。

層級選擇器

選擇器中的空格定義祖先/后代關系。假設我們希望標題中的鏈接為紅色：

header a {
  color: red;
}

可以讀作："選擇 header 標簽內(nèi)所有的 a 元素"。這樣可以防止所有其他鏈接（不在標題中）受到影響。

偽類選擇器

HTML 元素可以具有不同的狀態(tài)。最常見的情況是當您將鼠標懸停在鏈接上時。當此類事件發(fā)生時，CSS 中可能會應用不同的樣式。

偽類選擇器附加到常規(guī)選擇器上，并以冒號開頭:：

/* 正常情況下的樣式 */
a {
  color: blue;
}
/* 鼠標懸停時的樣式 */
a:hover {
  color: red;
}

CSS 繼承

假設我們要更改網(wǎng)頁的文本顏色，為每個 HTML 元素指定顏色將很麻煩：

p,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6{ color: grey;}

值傳遞

但其實 color 值是可以從祖先繼承的。考慮到我們要更改整個頁面，我們可以選擇所有 HTML 元素的祖先 body 標簽：

body{ color: grey;}

所有子元素和后代元素都將從其共同祖先繼承該值。

“
當然我們也可以使用 html 標簽。

繼承的屬性

只能從祖先那里繼承少數(shù) CSS 屬性。它們主要是文本屬性：

文字顏色
字體（大小/ 字體 Family/ 樣式/ 粗細）
行高

“
一些 HTML 元素不會從其祖先那里繼承。例如，鏈接（<a> 標簽）不繼承該color屬性。

CSS 優(yōu)先級

一個 HTML 元素可以被多個 CSS 規(guī)則作為目標。讓我們以一個簡單的段落為例：

<p class="message" id="introduction">
  歡迎關注公眾號：wmyskxz
</p>

我們有三種方式使用 CSS 來對其設置樣式：

/* 標簽名 */
p{ color: blue;}
/* 類名 */
.message{ color: green;}
/* id */
#introduction{ color: red;}

由于瀏覽器只能選擇一種顏色應用于該段落，因此必須決定哪種 CSS 規(guī)則優(yōu)先于其他規(guī)則。這就是 CSS 優(yōu)先級。

在我們的示例中，該段落將為**紅色，**因為#id選擇器比其他選擇器具有更高優(yōu)先級。

CSS 規(guī)則的順序

如果您的 CSS 中有類似的選擇器，則最后定義的選擇器將具有優(yōu)先權。

p{ color: green;}
p{ color: red;}
/* Paragraphs will be red */

快速判斷的方法

判斷 CSS 優(yōu)先級的一種快速方法是給選擇器的打分：

#id 選擇器價值 100
.class 選擇器價值 10
tag 選擇器價值 1

無論 CSS 出現(xiàn)的順序如何， “得分”最高的選擇器都將優(yōu)先。

#introduction{ color: red;}
.message{ color: green;}
p{ color: blue;}

<p class="message" id="introduction">
  歡迎關注公眾號：wmyskxz
</p>

結果這一段將是紅色的。因為 #introduction{ color: red;} ID 選擇器具有更高的優(yōu)先級。

如何避免沖突

在編寫CSS時，很容易編寫有沖突的規(guī)則，比如多次應用同一屬性。

為了避免這種情況：

僅使用類：使用.introduction代替#introduction，即使該元素僅在您的網(wǎng)頁中出現(xiàn)一次
避免在單個 HTML 元素上應用多個類：不要編寫<p class="big red important">，而是<p class="title">在語義上更具描述性；
不要使用像這樣的內(nèi)聯(lián)樣式<div style="background: blue;">

CSS 常用屬性一覽表

body {
  width:100px;/*寬度*/
  min-width:1000px;/*最小寬度*/
  height :100px;/*高度*/
  line-height:100px;/*行高*/

  font-family:SimSun,"Microsoft YaHei";/*字體*/
  font-size :16px;/*字體大小*/
  font-style :italic;/*字體風格*/
  font:16px/26px "微軟雅黑";/*字號/行高  字體*/
  color:#ccc;/*字體顏色*/

  border-width:10px;/*四邊邊框粗細*/
  border-style:solid;/*四邊邊框的風格*/
  border-color:red;/*四邊邊框的顏色*/
  border:10px solid red;/*border-width,border-style,border-color的簡寫*/
  border-top-width:10px;/*上邊框的粗細*/
  border-top-style:dashed;/*上邊框的風格*/
  border-top-color:red;/*上邊框的顏色*/
  border-top:10px solid red;/*上面三個簡寫*/
  border-radius:2px;/*邊框圓角*/

  text-align:center;/*left,center,right,justify 水平方向居中*/
  letter-spacing:10px;/*字間距*/
  word-spacing:10px;/*單詞之間的間距*/
  text-indent:10px;/*首行縮進*/
  
  margin-top:10px;/*上外邊距*/
  margin:10px;/*四邊外邊距*/
  padding-top:10px;/*上內(nèi)邊距*/
  padding :10px;/*可以設置一,二,三,四種值.內(nèi)邊距*/
  
  float:left;/*right  左浮動,右浮動*/
  clear :both;/*清除浮動,,清除左浮動或者右浮動*/
  position:relative;/*相對定位*/
  position:absolute;/*絕對定位*/
  position:fixed;/*固定定位*/

  z-index:1;/*設置層疊元素的上下位置*/
  
  background-color:#ddd;/*背景顏色*/
  background-image:url("");/*背景圖片*/
  
  overflow:hidden;/*溢出部分隱藏*/
  visibility:hidden;/*隱藏,占位置*/
  display:block;/*設為塊狀元素 塊級元素自帶的屬性*/
  display:inline;/*設為行內(nèi)元素*/
  display:inline-block;/*非塊狀元素的塊狀盒子*/
  display:none;/*隱藏，不占位置*/
  opacity:0.5;/*透明度 兼容ie9以上的瀏覽器*/
  filter:alpha(opacity=50)/*設置透明度 兼容i6~ie8*/
}

Part 4. 頁面是如何渲染的

瀏覽器具有運行在操作系統(tǒng)之上的"操作系統(tǒng)"的"美稱"。這意味著這是一個相當復雜的過程。

對于瀏覽器如果感興趣的話，可以參考之前的文章。這里簡單回顧一下。

首先，渲染進程內(nèi)部包含主線程、工作線程、合成線程和光柵線程。

請先想象一個這樣的場景：您站在一副簡單繪畫的面前，如何通過打電話來讓您的朋友知道這幅畫究竟長什么樣子呢？

瀏覽器實際上要知道繪制些什么元素，每個元素屬性如何是要分成三步的：1）通過 HTML 繪制元素樹（俗稱 DOM 樹）；2）通過 CSS 文件繪制樣式樹（俗稱 CSSOM 樹）；3）綜合兩顆樹繪制渲染樹（俗稱 Render Tree）；

現(xiàn)在瀏覽器知道文檔的結構、每個元素的樣式、頁面的幾何形狀和繪制順序，它是如何繪制頁面的？把這些信息轉換為屏幕上的像素，我們稱為光柵化。

處理這種情況的一種簡單的方法是，先在光柵化視窗內(nèi)的畫面，如果用戶滾動頁面，則移動光柵框，并光柵化填充缺少的部分。這就是 Chrome 首次發(fā)布時處理光柵化的方式。

但是，現(xiàn)代瀏覽器會運行一個更復雜的過程，我們稱為合成。

合成是一種將頁面的各個部分分層，分別光柵化，并在稱為合成線程的單獨線程中合成為頁面的技術。如果發(fā)生滾動，由于圖層已經(jīng)光柵化，因此它所要做的只是合成一個新幀。動畫也可以以相同的方式（移動圖層和合成新幀）實現(xiàn)。

后記

如今我們紛繁復雜的網(wǎng)頁幾乎都靠 HTML 和 CSS 來實現(xiàn)。至此，我們已經(jīng)對它們有了最基礎的了解。

這一個系列的文章是準備嘗試跟著后端學習路線圖的腳步跟著大家一起學習進階。后續(xù)還會繼續(xù)更新，請持續(xù)關注。

參考資料

關于 HTTP 后端人員需要了解的 20+ 圖片！
驚了！原來瀏覽器的秘密藏在這31張圖里！
百度百科 | CSS
MarkSheet
HTML Tutorial
CSS 常用屬性

- End -

有你想看的精彩

一周精彩內(nèi)容分享（第 7 期）：工作的熱情從何而來？?

一周精彩內(nèi)容分享（第 6 期）：光努力是沒有用的?

2021 寫博客指南·萬字長文警告?

建議你寫博客的 3 條理由

一周精彩內(nèi)容分享（第 4 期）：你的命運不是一頭騾子

關于 HTTP 后端人員需要了解的 20+ 圖片！

Linux 和 Windows 到底有什么區(qū)別？

驚了！原來瀏覽器的秘密藏在這31張圖里！

Hi，這里是我沒有三顆心臟，在公眾號 wmyskxz 分享一個自由技術人的成長和思考，2021，與您在 Be Better 的路上共同成長！

HTML/ CSS 入門

前言

Part 1. HTML/ CSS 的發(fā)明

Part 2. HTML 基礎

什么是 HTML

HTML 基礎

在哪里寫 HTML？

屬性

注釋

自封閉元素

HTML 塊和內(nèi)聯(lián)

開始和結束標簽

HTML 層次結構

嵌套

順序

深度

塊元素和內(nèi)聯(lián)元素嵌套

HTML 是語義的

選擇合適匹配的元素

不要過分考慮語義

一個有效的 HTML 文檔

文檔類型

<html> 元素

<head>

<body>

完整的有效 HTML 文檔

Part 3. CSS 基礎

為什么存在 CSS？

什么是 CSS?

CSS 是如何工作的?

我在哪里寫 CSS？

CSS 作為標簽屬性

<head> 中的 CSS

CSS 在單獨的文件中

為什么不直接在 HTML 中設置樣式？

CSS 基礎語法

CSS 選擇器

通用標簽選擇器

class

IDs

一些例子

組合選擇器

層級選擇器

偽類選擇器

CSS 繼承

值傳遞

繼承的屬性

CSS 優(yōu)先級

CSS 規(guī)則的順序

快速判斷的方法

如何避免沖突

CSS 常用屬性一覽表

Part 4. 頁面是如何渲染的

后記

參考資料

`<html>` 元素

`<head>`

`<body>`

`<head>` 中的 CSS