前言

現在我們來學習一些基礎的HTML/ CSS 知識。希望閱讀完這篇文章能達到編寫簡單頁面的程度。

目錄：

1. HTML/ CSS 的發明；
2. HTML 基礎；
3. CSS 基礎；
4. 頁面是如何渲染的；

< h1 data-tool='mdnice編輯器' >Part 1. HTML/ CSS 的發明

1989 年3 月，互聯網還只屬於少數人。

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

這一想法的實踐促使了萬維網的誕生。它基於現有的 TCP/IP 協議構建，包括 4 個部分：

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

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

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

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

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

HTML 負責網頁內容，CSS 負責內容的基本樣式。

Part 2. HTML 基礎

什麼是HTML

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

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

HTML 基礎

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

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

說明：

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

在哪裡寫HTML？

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

打開您的任一文本編輯器，然後復制並粘貼以下內容：

<p>這是我的第一個網頁</p>

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



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



屬性

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

例如，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 代碼來進行調試，如下所示：

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

自封閉元素

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

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

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

HTML 塊和內聯

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



塊元素用於通過將內容劃分為連貫的塊來構造頁面的主要部分。

<p>這是第一段內容</p >
<p>這是第二段內容</p>

內聯元素旨在區分文本的一部分，以賦予其特定的功能或含義。內聯元素通常包含一個或幾個單詞。

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

開始和結束標籤

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

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



HTML 層次結構

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

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

嵌套

讓我們編寫一個簡單的段落，並通過插入兩個內聯元素來區分文本各個部分來對其進行增強：

<p>
  <strong >培根</strong>曾經說過：<q>合理安排時間，就等於節約時間</q>。 
</p>

結果：



其中：

• <strong> 對「培根」這一個詞語進行了強調；< /section>
• <q> 對「合理安排時間，就等於節約時間」這句話加上了引號；

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

這種情況下：

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

順序

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

由於 HTML 元素包含打開和關閉標籤，以及介於兩個標籤之間的內容，一個子元素的關閉必須結束於父元素之前。

<!-- 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< span ></strong> properly.
</p>

深度

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

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

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

結果：



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



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

塊元素和內聯元素嵌套

塊元素可以包含塊元素或內聯元素。

但是，內聯元素只能包含其他內聯元素。 （<a> 標籤除外）

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

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

HTML 是語義的

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

選擇合適匹配的元素

根據要編寫的內容，可以選擇與文本含義相匹配的適當元素。



不要過分考慮語義

大約有100 個語義HTML 元素可供選擇。遍歷該列表並為您的內容選擇適當的元素可能會讓人不知所措。

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

一個有效的HTML 文檔

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

文檔類型

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

曾經有很多 HTML 版本共存。如今，HTML 5 已經成為規範。

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

<!DOCTYPE html>

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

“

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

<html>  元素

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

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

<head>< span >

<head> 標籤相當於整個頁面（<html>包裹的內容）的屬性。為整個頁面提供了附加的額外信息，並且不會顯示。

例如，文檔的標題就包含在 <head> 標籤內：

<!DOCTYPE html>
<html>
  <head>
    <title>網頁標題</title>
  </head>
 </html>

<body>

<body> 使我們編寫所有網頁內容的地方。裡面的所有內容都會顯示在瀏覽器窗口中。

完整的有效HTML 文檔

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

<!DOCTYPE html>
<html>
  <head>
    <title>Java3y< /span></title>
  </head>
  < span ><body>
    <p>歡迎關注公眾號：Java3y< ;/p>
  </body>
</html>

瀏覽器視角：



Part 3. CSS 基礎

為什麼存在CSS？

隨著 90 年代網絡的普及，將特定設計應用於網站的意圖也隨之增強。 Web 開發人員依靠特定的 HTML 標籤來增強網頁顯示：

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

也可以使用幾個HTML 屬性：

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

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



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

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

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

什麼是CSS?

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

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

CSS 是如何工作的?

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

p {color: red;}

“

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

我在哪裡寫 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'>
      < span >p{ color: red;}
    </style>
 </head>
  <body>
    < p>This paragraph will be red.</p>
  </< span >body>
</html>

結果：



CSS 在單獨的文件中

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

p{ color: red;}

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

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

結果：



這種單獨使用一個 CSS 文件的方法是優選的。

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

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

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



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



簡而言之：更易維護、更靈活。不過應該怎麼描述是相當看經驗的。

CSS 基礎語法

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

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

您也可以將其看作是：

who{ what: how;}

CSS 選擇器

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

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

通用標籤選擇器

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

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

HTML 標籤的名稱和所使用的CSS 選擇器之間存在直接聯繫。

class

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

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

.date {
  color: red;
}
 

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

<p class='date'>< /span>
  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>< br>

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

em.date {
  color: blue;
 }

結果：



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

層級選擇器

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

header a {
  color: red;
} 

可以讀作：'選擇header 標籤內所有的a 元素'。這樣可以防止所有其他鏈接（不在標題中）受到影響。

偽類選擇器

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

偽類選擇器附加到常規選擇器上，並以冒號開頭:：

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

CSS 繼承

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

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

值傳遞

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

body{ color: grey;}

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

“

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

繼承的屬性

只能從祖先那裡繼承少數CSS 屬性。它們主要是文本屬性：

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

“

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

CSS 優先級

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

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

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

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

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

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

CSS 規則的順序

如果您的CSS中有類似的選擇器，則最後定義的選擇器將具有優先權。

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

快速判斷的方法

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

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

無論CSS 出現的順序如何， “得分”最高的選擇器都將優先。

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

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

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

如何避免衝突

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

為了避免這種情況：

• 僅使用類：使用.introduction代替< code >#introduction，即使該元素僅在您的網頁中出現一次
• 避免在單個HTML 元素上應用多個類：不要編寫<p class='big red important'>，而是<p class='title'>在語義上更具描述性；
• 不要使用像這樣的內聯樣式<div >

CSS 常用屬性一覽表

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

  < span >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;/*四邊邊框的顏色*/
  < span >border:10px solid red;/*border-width,border-style,border-color的簡寫*/
  border -top-width:10px;/*上邊框的粗細*/
  border-top-style:dashed ;/*上邊框的風格*/
  border-top-color:red;/*上邊框的顏色*/< br>  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;/*上內邊距*/
  padding < /span>:10px;/*可以設置一,二,三,四種值.內邊距*/
  
  float< /span>:left;/*right  左浮動,右浮動*/
  clear :both;/*清除浮動,,清除左浮動或者右浮動*/
  position:relative;/*相對定位*/
  position:absolute;< span >/*絕對定位*/
  position:fixed;/*固定定位*/

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

Part 4. 頁面是如何渲染的

瀏覽器具有運行在操作系統之上的'操作系統'的'美稱'。這意味著這是一個相當複雜的過程。

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



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

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



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



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




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

但是，現代瀏覽器會運行一個更複雜的過程，我們稱為合成。



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

後記

如今我們紛繁複雜的網頁幾乎都靠HTML 和CSS 來實現。至此，我們已經對它們有了最基礎的了解。






- End -