2020年12月-前端基礎-認識WEB

愛吃小橘子的週週發表於2020-12-24
前端Web

認識WEB

1.認識網頁

網頁主要由文字、影像和超連結等元素構成。當然，除了這些元素，網頁中還可以包含音訊、視訊以及Flash等。

思考：
網頁是如何形成的呢?

總結

網頁有圖片、連結、文字等元素組成，我們後面的任務就是要把這部分網頁元素用程式碼寫出來。

2. 瀏覽器介紹

瀏覽器是網頁顯示、執行的平臺，常用的瀏覽器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我們平時稱為五大瀏覽器。

2.1 檢視瀏覽器佔有的市場份額

檢視網站：http://tongji.baidu.com/data/browser

browser

2008年，大名鼎鼎的網際網路巨頭Google公司釋出了它的首款瀏覽器Chrome瀏覽器。
沒辦法，後臺太強，而且確實先天能力得天獨厚。

2.2 常見瀏覽器核心（瞭解）

首先解釋一下瀏覽器核心是什麼東西。英文叫做：Rendering Engine，中文翻譯很多，排版引擎、解釋引擎、渲染引擎，現在流行稱為瀏覽器核心。

負責讀取網頁內容，整理訊息，計算網頁的顯示方式並顯示頁面.

因為瀏覽器太多啦， 但是現在主要流行的就是下面幾個：

瀏覽器核心備註
IETridentIE、獵豹安全、360極速瀏覽器、百度瀏覽器
FirefoxGecko可惜這幾年已經沒落了，開啟速度慢、升級頻繁、豬一樣的隊友flash、神一樣的對手chrome。
Safariwebkit現在很多人錯誤地把 webkit 叫做 chrome核心（即使 chrome核心已經是 blink 了）。蘋果感覺像被別人搶了媳婦，都哭暈再廁所裡面了。
ChromeChromium/Blink在 Chromium 專案中研發 Blink 渲染引擎（即瀏覽器核心），內建於 Chrome 瀏覽器之中。Blink 其實是 WebKit 的分支。大部分國產瀏覽器最新版都採用Blink核心。二次開發
OperaBlink現在跟隨chrome用blink核心。

擴充閱讀：

移動端的瀏覽器核心主要說的是系統內建瀏覽器的核心。

Android手機而言，使用率最高的就是Webkit核心，大部分國產瀏覽器宣稱的自己的核心，基本上也是屬於webkit二次開發。

iOS以及WP7平臺上，由於系統原因，系統大部分自帶瀏覽器核心，一般是Safari或者IE核心Trident的

3. Web標準（重點）

  • 能說出網頁 中 web 標準三層組成
  • 能結合人來表述web標準三層

Web標準不是某一個標準，而是由W3C組織和其他標準化組織制定的一系列標準的集合。

W3C 全球資訊網聯盟是國際最著名的標準化組織。1994年成立後，至今已釋出近百項相關全球資訊網的標準，對全球資訊網發展做出了傑出的貢獻。

w3c就類似於現實世界中的聯合國。

3.1 為什麼要遵循WEB標準呢？

通過以上瀏覽器不同核心不同，我們知道他們顯示頁面或者排版就有些許差異。

3.2 Web 標準的好處

遵循web標準可以讓不同我們寫的頁面更標準更統一外，還有許多優點

1、讓Web的發展前景更廣闊 
2、內容能被更廣泛的裝置訪問
3、更容易被搜尋引擎搜尋
4、降低網站流量費用
5、使網站更易於維護
6、提高頁面瀏覽速度

3.3 Web 標準構成

構成： 主要包括結構（Structure）、表現（Presentation）和行為（Behavior）三個方面。

標準說明備註
結構結構用於對網頁元素進行整理和分類，我們們主要學的是HTML。在這裡插入圖片描述
表現表現用於設定網頁元素的版式、顏色、大小等外觀樣式，主要指的是CSS。
行為行為是指網頁模型的定義及互動的編寫，我們們主要學的是 Javascript

理想狀態我們的原始碼： .HTML .css .js

結合人來記憶web標準：

  • 結構標準：是你天然的身體
  • 表現標準：決定你外觀是否打扮的美麗(衣服？化妝？)
  • 行為標準：決定你是否有吸引人的行為(動作)

web標準小結

  • web標準有三層結構，分別是結構（html）、表現（css）和行為（javascript）
  • 結構類似人的身體， 表現類似人的著裝， 行為類似人的行為動作
  • 理想狀態下，他們三層都是獨立的， 放到不同的檔案裡面

4. 擴充@

  • 介紹一下你對瀏覽器核心的理解？常見的瀏覽器核心有哪些？
    瀏覽器核心包括兩部分，渲染引擎和js引擎。渲染引擎負責讀取網頁內容，整理訊息，計算網頁的顯示方式並顯示頁面，js引擎是解析執行js獲取網頁的動態效果。 後來 JS 引擎越來越獨立，核心就傾向於只指渲染引擎。
    IE：Trident
    Firefox：Gecko
    Chrom、safari：webkit
    Opera：Presto
    Microsoft Edge：EdgeHTML

深度閱讀：五大主流瀏覽器核心的源起以及國內各大瀏覽器核心總結

相關文章