【01】HTML_day01_01-前言&WEB標準

---

typora-copy-images-to: media

---

第01階段.前端基礎.認識WEB

基礎班學習目標

目標： 能根據psd文件，用HTML+CSS 佈局出符合W3C規範的網頁。

網站首頁

列表頁、詳情頁、登陸頁、 註冊頁等等。。。。

課程安排

就業班詳情 參看： http://www.itcast.cn/course/web.shtml

HTML 第一天目標

可以寫出基本的html頁面（裏面包含圖片、連接、文字等網頁元素標籤）

認識WEB

1. 認識網頁

網頁主要由文字、圖像和超連接等元素構成。固然，除了這些元素，網頁中還能夠包含音頻、視頻以及Flash等。

思考：

網頁是如何造成的呢?

總結

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

2. 瀏覽器（顯示代碼）

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

可能你最熟悉的是 IE瀏覽器，可是。。。

2.1 查看瀏覽器佔有的市場份額

查看網站： http://tongji.baidu.com/data/browser

2008年，大名鼎鼎的互聯網巨頭Google公司發佈了它的首款瀏覽器Chrome瀏覽器。

跟王思聰同樣，沒辦法，生下來人家就是富二代官二代啊，後臺太強，並且確實先天能力得天獨厚。

pink老師 一句話說出他們:

出自谷歌，惟我不敗；一統江湖，千秋萬代。

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

首先解釋一下瀏覽器內核是什麼東西。英文叫作：Rendering Engine，中文翻譯不少，排版引擎、解釋引擎、渲染引擎，如今流行稱爲瀏覽器內核.

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

由於瀏覽器太多啦， 可是如今主要流行的就是下面幾個：

瀏覽器	內核	備註
IE	Trident	IE、獵豹安全、360極速瀏覽器、百度瀏覽器
firefox	Gecko	惋惜這幾年已經沒落了，打開速度慢、升級頻繁、豬同樣的隊友flash、神同樣的對手chrome。
Safari	webkit	如今不少人錯誤地把 webkit 叫作 chrome內核（即便 chrome內核已是 blink 了）。蘋果感受像被別人搶了媳婦，都哭暈再廁所裏面了。
chrome	Chromium/Blink	在 Chromium 項目中研發 Blink 渲染引擎（即瀏覽器核心），內置於 Chrome 瀏覽器之中。Blink 實際上是 WebKit 的分支。大部分國產瀏覽器最新版都採用Blink內核。二次開發
Opera	blink	如今跟隨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

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