前端學習

?

前端學習路線

?

學習網站

• 菜鳥驛站
• 慕課網
• freeCOdeCamp
• w3school
• try8

在線編輯

• codepen
• jsfiddle
• thecodeplayer

其他網站

• cssfilters
• cssstats
• 極客學院
• 搭建個人博客
• wordpress
• 博客園
• 網站檢查規范
• How to learn web

Tobe continue...

學習準備

查看瀏覽器占有的市場份額

查看瀏覽器占有的市場份額

編輯工具

Dreamweaver、sublime、HBuilder、Visual Studio Code、Notepad++等

切圖工具

Adobe Photoshop CC

認識網頁

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

常見瀏覽器內核

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

瀏覽器內核

瀏覽器內核又可以分成兩部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。 渲染引擎 它負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入 CSS 等），以及計算網頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同，所以渲染的效果也不相同。 JS 引擎 則是解析 Javascript 語言，執行 javascript語言來實現網頁的動態效果。 最開始渲染引擎和 JS 引擎并沒有區分的很明確，后來 JS 引擎越來越獨立，內核就傾向于只指渲染引擎。有一個網頁標準計劃小組制作了一個 ACID 來測試引擎的兼容性和性能。內核的種類很多，如加上沒什么人使用的非商業的免費內核，可能會有10多種，但是常見的瀏覽器內核可以分這四種：Trident、Gecko、Blink、Webkit。

1.Trident(IE內核)
國內很多的雙核瀏覽器的其中一核便是 Trident，美其名曰 "兼容模式"。
代表： IE、傲游、世界之窗瀏覽器、Avant、騰訊TT、獵豹安全瀏覽器、360極速瀏覽器、百度瀏覽器等。
Window10 發布后，IE 將其內置瀏覽器命名為 Edge，Edge 最顯著的特點就是新內核 EdgeHTML。

2.Gecko(firefox)
Gecko(Firefox 內核)： Mozilla FireFox(火狐瀏覽器) 采用該內核，Gecko 的特點是代碼完全公開，因此，其可開發程度很高，全世界的程序員都可以為其編寫代碼，增加功能。 可惜這幾年已經沒落了， 比如 打開速度慢、升級頻繁、豬一樣的隊友flash、神一樣的對手chrome。

3.webkit(Safari)
Safari 是蘋果公司開發的瀏覽器，所用瀏覽器內核的名稱是大名鼎鼎的 WebKit。
現在很多人錯誤地把 webkit 叫做 chrome內核（即使 chrome內核已經是 blink 了），蘋果感覺像被別人搶了媳婦，都哭暈再廁所里面了。
代表瀏覽器：傲游瀏覽器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手機瀏覽器、Android 默認瀏覽器，

4.Chromium/Blink(chrome)
在 Chromium 項目中研發 Blink 渲染引擎（即瀏覽器核心），內置于 Chrome 瀏覽器之中。Blink 其實是 WebKit 的分支。
大部分國產瀏覽器最新版都采用Blink內核。二次開發

5.Presto(Opera)
Presto（已經廢棄） 是挪威產瀏覽器 opera 的 "前任" 內核，為何說是 "前任"，因為最新的 opera 瀏覽器早已將之拋棄從而投入到了谷歌懷抱了。

6.手機
移動端的瀏覽器內核主要說的是系統內置瀏覽器的內核。
Android手機而言，使用率最高的就是Webkit內核，大部分國產瀏覽器宣稱的自己的內核，基本上也是屬于webkit二次開發。
iOS以及WP7平臺上，由于系統原因，系統大部分自帶瀏覽器內核，一般是Safari或者IE內核Trident的

Web 標準

通過以上瀏覽器的內核不同，我們知道他們工作原理、解析肯定不同，顯示就會有差別。
Web標準不是某一個標準，而是由W3C和其他標準化組織制定的一系列標準的集合。
主要包括結構（Structure）、表現（Presentation）和行為（Behavior）三個方面。

• 結構標準：結構用于對網頁元素進行整理和分類，主要學的是HTML。
• 表現標準：表現用于設置網頁元素的版式、顏色、大小等外觀樣式，主要指的是CSS。
• 行為標準：行為是指網頁模型的定義及交互的編寫，咱們主要學的是 Javascript

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

轉載于:https://www.cnblogs.com/dongqunren/p/10199786.html

總結

以上是生活随笔為你收集整理的前端基础_认识前端.md的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。