整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
TML 是一種標記語言，用于創(chuàng)建網(wǎng)頁和應用程序。它的基本結(jié)構(gòu)由以下三個部分組成：
一個 HTML 的基本結(jié)構(gòu)示例如下：
對于前端來說，HTML 都是最基礎的內(nèi)容。
今天，我們來了解一下 HTML 和網(wǎng)頁有什么關系，以及與 DOM 有什么不同。通過本講內(nèi)容，你將掌握瀏覽器是怎么處理 HTML 內(nèi)容的，以及在這個過程中我們可以進行怎樣的處理來提升網(wǎng)頁的性能，從而提升用戶的體驗。
不知你是否有過這樣的體驗：當打開某個瀏覽器的時候，發(fā)現(xiàn)一直在轉(zhuǎn)圈，或者等了好長時間才打開頁面……
此時的你，會選擇關掉頁面還是耐心等待呢？
這一現(xiàn)象，除了網(wǎng)絡不穩(wěn)定、網(wǎng)速過慢等原因，大多數(shù)都是由于頁面設計不合理導致加載時間過長導致的。
我們都知道，頁面是用 HTML/CSS/JavaScript 來編寫的。
HTML由一系列的元素組成，通常稱為HTML元素。HTML 元素通常被用來定義一個網(wǎng)頁結(jié)構(gòu)，基本上所有網(wǎng)頁都是這樣的 HTML 結(jié)構(gòu)：
<html>
<head></head>
<body></body>
</html>其中：
HTML 中的元素特別多，其中還包括可用于 Web Components 的自定義元素。
前面我們提到頁面 HTML 結(jié)構(gòu)不合理可能會導致頁面響應慢，這個過程很多時候體現(xiàn)在<script>和<style>元素的設計上，它們會影響頁面加載過程中對 Javascript 和 CSS 代碼的處理。
因此，如果想要提升頁面的加載速度，就需要了解瀏覽器頁面的加載過程是怎樣的，從根本上來解決問題。
瀏覽器在加載頁面的時候會用到 GUI 渲染線程和 JavaScript 引擎線程（更詳細的瀏覽器加載和渲染機制將在第 7 講中介紹）。其中，GUI 渲染線程負責渲染瀏覽器界面 HTML 元素，JavaScript 引擎線程主要負責處理 JavaScript 腳本程序。
由于 JavaScript 在執(zhí)行過程中還可能會改動界面結(jié)構(gòu)和樣式，因此它們之間被設計為互斥的關系。也就是說，當 JavaScript 引擎執(zhí)行時，GUI 線程會被掛起。
以網(wǎng)易云課堂官網(wǎng)為例，我們來看看網(wǎng)頁加載流程。
（1）當我們打開官網(wǎng)的時候，瀏覽器會從服務器中獲取到 HTML 內(nèi)容。
（2）瀏覽器獲取到 HTML 內(nèi)容后，就開始從上到下解析 HTML 的元素。
（3）<head>元素內(nèi)容會先被解析，此時瀏覽器還沒開始渲染頁面。
我們看到<head>元素里有用于描述頁面元數(shù)據(jù)的<meta>元素，還有一些<link>元素涉及外部資源（如圖片、CSS 樣式等），此時瀏覽器會去獲取這些外部資源。除此之外，我們還能看到<head>元素中還包含著不少的<script>元素，這些<script>元素通過src屬性指向外部資源。
（4）當瀏覽器解析到這里時（步驟 3），會暫停解析并下載 JavaScript 腳本。
（5）當 JavaScript 腳本下載完成后，瀏覽器的控制權(quán)轉(zhuǎn)交給 JavaScript 引擎。當腳本執(zhí)行完成后，控制權(quán)會交回給渲染引擎，渲染引擎繼續(xù)往下解析 HTML 頁面。
（6）此時<body>元素內(nèi)容開始被解析，瀏覽器開始渲染頁面。
在這個過程中，我們看到<head>中放置的<script>元素會阻塞頁面的渲染過程：把 JavaScript 放在<head>里，意味著必須把所有 JavaScript 代碼都下載、解析和解釋完成后，才能開始渲染頁面。
到這里，我們就明白了：如果外部腳本加載時間很長（比如一直無法完成下載），就會造成網(wǎng)頁長時間失去響應，瀏覽器就會呈現(xiàn)“假死”狀態(tài)，用戶體驗會變得很糟糕。
因此，對于對性能要求較高、需要快速將內(nèi)容呈現(xiàn)給用戶的網(wǎng)頁，常常會將 JavaScript 腳本放在<body>的最后面。這樣可以避免資源阻塞，頁面得以迅速展示。我們還可以使用defer/async/preload等屬性來標記<script>標簽，來控制 JavaScript 的加載順序。
百度首頁
對于百度這樣的搜索引擎來說，必須要在最短的時間內(nèi)提供到可用的服務給用戶，其中就包括搜索框的顯示及可交互，除此之外的內(nèi)容優(yōu)先級會相對較低。
瀏覽器在渲染頁面的過程需要解析 HTML、CSS 以得到 DOM 樹和 CSS 規(guī)則樹，它們結(jié)合后才生成最終的渲染樹并渲染。因此，我們還常常將 CSS 放在<head>里，可用來避免瀏覽器渲染的重復計算。
我們知道<p>是 HTML 元素，但又常常將<p>這樣一個元素稱為 DOM 節(jié)點，那么 HTML 和 DOM 到底有什么不一樣呢？
根據(jù) MDN 官方描述：文檔對象模型（DOM）是 HTML 和 XML 文檔的編程接口。
也就是說，DOM 是用來操作和描述 HTML 文檔的接口。如果說瀏覽器用 HTML 來描述網(wǎng)頁的結(jié)構(gòu)并渲染，那么使用 DOM 則可以獲取網(wǎng)頁的結(jié)構(gòu)并進行操作。一般來說，我們使用 JavaScript 來操作 DOM 接口，從而實現(xiàn)頁面的動態(tài)變化，以及用戶的交互操作。
在開發(fā)過程中，常常用對象的方式來描述某一類事物，用特定的結(jié)構(gòu)集合來描述某些事物的集合。DOM 也一樣，它將 HTML 文檔解析成一個由 DOM 節(jié)點以及包含屬性和方法的相關對象組成的結(jié)構(gòu)集合。
我們常見的 HTML 元素，在瀏覽器中會被解析成節(jié)點。比如下面這樣的 HTML 內(nèi)容：
<html>
<head>
<title>標題</title>
</head>
<body>
<a href='xx.com'>我的超鏈接</a>
<h1>頁面第一標題</h1>
</body>
</html>打開控制臺 Elements 面板，可以看到這樣的 HTML 結(jié)構(gòu)，如下圖所示：
在瀏覽器中，上面的 HTML 會被解析成這樣的 DOM 樹，如下圖所示：
我們都知道，對于樹狀結(jié)構(gòu)來說，常常使用parent/child/sibling等方式來描述各個節(jié)點之間的關系，對于 DOM 樹也不例外。
舉個例子，我們常常會對頁面功能進行抽象，并封裝成組件。但不管怎么進行整理，頁面最終依然是基于 DOM 的樹狀結(jié)構(gòu)，因此組件也是呈樹狀結(jié)構(gòu)，組件間的關系也同樣可以使用parent/child/sibling這樣的方式來描述。同時，現(xiàn)在大多數(shù)應用程序同樣以root為根節(jié)點展開，我們進行狀態(tài)管理、數(shù)據(jù)管理也常常會呈現(xiàn)出樹狀結(jié)構(gòu)。
我們知道，瀏覽器中各個元素從頁面中接收事件的順序包括事件捕獲階段、目標階段、事件冒泡階段。其中，基于事件冒泡機制，我們可以實現(xiàn)將子元素的事件委托給父級元素來進行處理，這便是事件委托。
如果我們在每個元素上都進行監(jiān)聽的話，則需要綁定三個事件;(假設頁面上有a,b,c三個兄弟節(jié)點)
function clickEventFunction(e) {
console.log(e.target === this); // logs `true`
// 這里可以用 this 獲取當前元素
}
// 元素a,b,c綁定
element2.addEventListener("click", clickEventFunction, false);
element5.addEventListener("click", clickEventFunction, false);
element8.addEventListener("click", clickEventFunction, false);使用事件委托，可以通過將事件添加到它們的父節(jié)點，而將事件委托給父節(jié)點來觸發(fā)處理函數(shù)：
function clickEventFunction(event) {
console.log(e.target === this); // logs `false`
// 獲取被點擊的元素
const eventTarget = event.target;
// 檢查源元素`event.target`是否符合預期
// 此處控制廣告面板的展示內(nèi)容
}
// 元素1綁定
element1.addEventListener("click", clickEventFunction, false);這樣能解決什么問題呢？
常見的使用方式主要是上述這種列表結(jié)構(gòu)，每個選項都可以進行編輯、刪除、添加標簽等功能，而把事件委托給父元素，不管我們新增、刪除、更新選項，都不需要手動去綁定和移除事件。
如果在列表數(shù)量內(nèi)容較大的時候，對成千上萬節(jié)點進行事件監(jiān)聽，也是不小的性能消耗。使用事件委托的方式，我們可以大量減少瀏覽器對元素的監(jiān)聽，也是在前端性能優(yōu)化中比較簡單和基礎的一個做法。
注意:
我們了解了 HTML 的作用，以及它是如何影響瀏覽器中頁面的加載過程的，同時還介紹了使用 DOM 接口來控制 HTML 的展示和功能邏輯。我們了解了DOM解析事件委托等相關概念。
大家在瀏覽網(wǎng)頁的時候，是否思考過這樣一個問題：怎樣才能制作出一個網(wǎng)頁呢？制作出一個網(wǎng)頁是很簡單的，只要知道什么是HTML并掌握HTML的基礎知識就可以制作出一個簡單的網(wǎng)頁，今天我就為講解HTML的入門及結(jié)構(gòu)組成。
一、什么是HTML?
1、在我們開始學習HTML之前我們需要知道什么是HTML？
HTML的全稱為Hyper Text Markup Language，中文名稱為超文本標記語言，閱覽方式為網(wǎng)頁瀏覽器，同時HTML也被稱為網(wǎng)頁。
2、一個簡單的HTML文檔
二、HTML編輯器
我們在可以使用TXT文本文檔或者專業(yè)的HTML編輯器來編輯HTML。
1、記事本
① 創(chuàng)建一個TXT文本
② 輸入HTML代碼
③ 點擊文件—另存為—輸入名稱+“html”的后綴名即可得到你的第一個HTML文件。
④ 然后雙擊這個文件運行。
運行結(jié)果
2、專業(yè)編輯器
① Sublime Text
② HBuilder
③ Adobe Dreamweaver
④ CoffeeCup HTML Editor
這其中我比較推薦HBuilder這款編輯器，界面簡單，編輯起來很快。
三、HTML的組成部分
在上面的案例中我們可以看到HTML是由頭部（head）和身體（body）所組成的。
1、頭部（head）
通常包含標題（title），也就是一個網(wǎng)頁的名稱
網(wǎng)頁標題
2、身體（body）
body的部分是整個網(wǎng)頁的重要內(nèi)容部分，讓人一眼就瀏覽到這個網(wǎng)頁的內(nèi)容，可以插入文本、圖片、多媒體等內(nèi)容。
四、HTML元素
l HTML元素是指以開始標簽起始，以結(jié)束標簽終止的元素：元素內(nèi)容即為開始標簽與結(jié)束標簽之間的內(nèi)容。
l <head></head>、<body></body>、<p></p>、<h1></h2>等這些都是HTML元素，在上面的案例中就有六個元素。
l 也有部分元素只有開始標簽，例如<br>,以開始標簽的結(jié)束而結(jié)束。
五、HTML的屬性
l 一般來說HTML的屬性就是HTML元素的屬性，屬性可以在元素中添加附加信息。
l 屬性總是以名稱/值對的形式出現(xiàn)，比如：name=”value”。
l 屬性一般描述于開始標簽。
l style中會有更多的屬性。
六、HTML格式化
HTML可定義很多供格式化輸出的元素，比如粗體字和斜體字。
HTML文本格式化標簽
標簽 | 描述 |
<b> | 定義粗體文本 |
<em> | 定義著重文字 |
<i> | 定義斜體字 |
<small> | 定義小號字 |
<strong> | 定義加重語氣 |
<sub> | 定義下標字 |
<sup> | 定義上標字 |
<ins> | 定義插入字 |
<del> | 定義刪除字 |
運行結(jié)果示意圖
HTML“計算機輸出”標簽
標簽 | 描述 |
<code> | 定義計算機代碼 |
<kdd> | 定義鍵盤碼 |
<samp> | 定義計算機代碼樣本 |
<var> | 定義變量 |
<pre> | 定義預格式文本 |
HTML引文、引用及標簽定義
標簽 | 描述 |
<abbr> | 定義縮寫 |
<address> | 定義地址 |
<bdo> | 定義文字方向 |
<blockquote> | 定義長的引用 |
<q> | 定義短的引用語 |
<cite> | 定義引用、引證 |
<dfn> | 定義一個定義項目 |
七、HTML超鏈接
超鏈接可以是圖片、文字、多媒體也可以是一個網(wǎng)址
示例：
結(jié)果：
點擊帶有下劃線的兩個字就可以進入某度的網(wǎng)站
八、HTML CSS
1、CSS是一種層疊樣式表，可以修飾html元素的樣式并可以精確地進行排版
2、CSS有三種方式：
l 內(nèi)部樣式，在HTML元素中使用“style”屬性
l 內(nèi)部樣式表，在頭部<head>區(qū)域使用<style>元素來包含CSS
l 外部引用，引用帶有后綴css的文件，示例：
html文檔
css文檔
如果你看到了這里，就說明你已經(jīng)打開了制作網(wǎng)頁的大門啦~
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
