目錄
前端學習
最近打算學習下前後端的東西，跟着cto學院的前後端課程，發現對前端有些基礎知識還不夠了解，特地查資料梳理了前端的相關知識，主要分爲：html,css,javascript,同時也需要了解瀏覽器的工作原理。
1、html是什麼？
超文本標記語言（HTML，HyperText Markup Language）用於描述、定義網頁內容。是一種網頁版文本標記語言。有各種標記關鍵字，代表在網頁中的文本的等級格式
2、css是什麼？
層疊樣式表（CSS，Cascading Style Sheets）用於描述網頁內容的外觀與展示。是一種渲染html的語言，單獨的html太過於單調，通常在html文件的頂部可以添加鏈接的css文件
3、css文件怎麼影響html？
因爲html每一塊有響應的欄標記限定，css可以利用欄進行引用，外加字典的方式對欄的各種展示屬性進行設置，比如字體大小、顏色、佈局、邊框等等；
例如，裏面涉及到不同的引用方式：相鄰引用，h1+p表示緊鄰標題的第一個段落；
p.special表示p中的special類的部分，還可以通過span.special進行復用。
css的級聯複用和關聯規則觸發。
瀏覽器有默認匹配模板。
總結一下就是：css包含了對html文檔裏面對應內容的定位引用，複用，還有就是區分不同的關鍵段落裏面的元素。學習前端關於瀏覽器佈局渲染展示的所有編程相關資料可參考MDN。
4、MDN是什麼？
MDN是MDN Web Docs（MDN 網絡文檔）這個網站的簡稱。其實他指的是一個網站，我們搜索MDN，打開的是這個鏈接：https://developer.mozilla.org/zh-CN/
它是一個瀏覽器web開發的開源網站，包含了html,css，js等的開源資料與學習社區；來源參考：網景和微軟的瀏覽器之爭；參考：https://www.jianshu.com/p/f1d3be17f0c6
5、nodejs是什麼？
JavaScript 是一種腳本，一門編程語言，它可以在網頁上實現複雜的功能，網頁展現給你的不再是簡單的靜態信息，而是實時的內容更新，交互式的地圖，2D/3D 動畫，滾動播放的視頻等等。JavaScript 怎能缺席。
- HTML是一種標記語言，用來結構化我們的網頁內容並賦予內容含義，例如定義段落、標題和數據表，或在頁面中嵌入圖片和視頻。
- CSS 是一種樣式規則語言，可將樣式應用於 HTML 內容， 例如設置背景顏色和字體，在多個列中佈局內容。
- JavaScript 是一種腳本語言，可以用來創建動態更新的內容，控制多媒體，製作圖像動畫，還有很多。（好吧，雖然它不是萬能的，但可以通過簡短的代碼來實現神奇的功能。）
這三層依次建立，秩序井然。以文本標籤(text label)的簡單示例。首先用 HTML 將文本標記起來，從而賦予它結構和目的：
<p>玩家1：小明</p>
玩家1：小明
然後我們可以爲它加一點 CSS 讓它更好看：
p {
font-family: sans-serif, '黑體';
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
border: 2px solid rgba(0, 0, 200, 0.6);
background: rgba(0, 0, 200, 0.3);
color: rgba(0, 0, 200, 0.6);
box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
border-radius: 10px;
padding: 3px 10px;
display: inline-block;
cursor: pointer;
}
最後，我們可以再加上一些 JavaScript 來實現動態行爲：
const para = document.querySelector('p');
para.addEventListener('click', updateName);
function updateName() {
let name = prompt('輸入一個新的名字：');
para.textContent = '玩家1：' + name;
}
-
JavaScript 是在瀏覽器中運行的編程語言。它可以爲你的網站或應用程序添加交互性和其他動態功能。
隨着 Node.js 的出現，你也可以在服務器上運行 JavaScript。
6 、瀏覽器的工作原理
6.1 、瀏覽器的主要功能
瀏覽器的主要功能就是向服務器發出請求，在瀏覽器窗口中展示您選擇的網絡資源。這裏所說的資源一般是指 HTML 文檔，也可以是 PDF、圖片或其他的類型。資源的位置由用戶使用 URI（統一資源標示符）指定。
瀏覽器解釋並顯示 HTML 文件的方式是在 HTML 和 CSS 規範中指定的。這些規範由網絡標準化組織 W3C（萬維網聯盟）進行維護。
多年以來，各瀏覽器都沒有完全遵從這些規範，同時還在開發自己獨有的擴展程序，這給網絡開發人員帶來了嚴重的兼容性問題。如今，大多數的瀏覽器都是或多或少地遵從規範。
瀏覽器的用戶界面有很多彼此相同的元素，其中包括：
- 用來輸入 URI 的地址欄
- 前進和後退按鈕
- 書籤設置選項
- 用於刷新和停止加載當前文檔的刷新和停止按鈕
- 用於返回主頁的主頁按鈕
奇怪的是，瀏覽器的用戶界面並沒有任何正式的規範，這是多年來的最佳實踐自然發展以及彼此之間相互模仿的結果。HTML5 也沒有定義瀏覽器必須具有的用戶界面元素，但列出了一些通用的元素，例如地址欄、狀態欄和工具欄等。當然，各瀏覽器也可以有自己獨特的功能，比如 Firefox 的下載管理器。
6.2、 瀏覽器的高層結構
瀏覽器的主要組件爲 (1.1)：
- 用戶界面 - 包括地址欄、前進/後退按鈕、書籤菜單等。除了瀏覽器主窗口顯示的您請求的頁面外，其他顯示的各個部分都屬於用戶界面。
瀏覽器引擎 - 在用戶界面和呈現引擎之間傳送指令。 - 呈現引擎 - 負責顯示請求的內容。如果請求的內容是 HTML，它就負責解析 HTML 和 CSS 內容，並將解析後的內容顯示在屏幕上。
- 網絡 - 用於網絡調用，比如 HTTP 請求。其接口與平臺無關，併爲所有平臺提供底層實現。
- 用戶界面後端 - 用於繪製基本的窗口小部件，比如組合框和窗口。其公開了與平臺無關的通用接口，而在底層使用操作系統的用戶界面方法。
- JavaScript 解釋器。用於解析和執行 JavaScript 代碼。
- 數據存儲。這是持久層。瀏覽器需要在硬盤上保存各種數據，例如 Cookie。新的 HTML 規範 (HTML5) 定義了“網絡數據庫”，這是一個完整（但是輕便）的瀏覽器內數據庫。
![在這裏插入圖片描述]()
圖：瀏覽器的主要組件。
值得注意的是，和大多數瀏覽器不同，Chrome 瀏覽器的每個標籤頁都分別對應一個呈現引擎實例。每個標籤頁都是一個獨立的進程。
7、 參考
什麼是JavaScript：https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/What_is_JavaScript
Vue參考：https://www.runoob.com/vue2/vue-tutorial.html
瀏覽器的工作原理：https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/#The_browser_high_level_structure