HTML5前端開發(fā)入門：HTML頁面的基本代碼結(jié)構(gòu)是

HTML5前端開發(fā)入門：HTML頁面的基本代碼結(jié)構(gòu)是什么？

多剛?cè)腴THTML5前端開發(fā)的小伙伴對HTML頁面的基本機(jī)構(gòu)代碼還不是很清楚，下面和千鋒廣州小編一起來看看吧。

1、什么是標(biāo)簽：

html標(biāo)簽組成是html文檔的最基本元素,一般是成對出現(xiàn),由開始標(biāo)簽和與其對應(yīng)的結(jié)束標(biāo)簽構(gòu)成.?如<html></html>，<p></p>，<body></body>，<head></head>，<span></span>等,此外，還有一些標(biāo)簽是單獨(dú)出現(xiàn)的，如<img/>,<input/>等，標(biāo)簽可以相互嵌套使用。

由于html語言是一門弱類型語言,對格式的要求不是非常嚴(yán)格，因此所有標(biāo)簽是不區(qū)分大小寫的,但是，一般在實際開發(fā)中，大家都統(tǒng)一使用小寫。

2、html文檔的基本結(jié)構(gòu)

如上圖，每一個html文檔的基本結(jié)構(gòu)為：

第一層：

<!DOCTTYPE>------！文檔類型，它的目的是要告訴標(biāo)準(zhǔn)通用標(biāo)記語言解析器，它應(yīng)該使用什么樣的文檔類型定義（DTD）來解析文檔，在html5文檔中，一般寫為<!DOCTTYPE html> ;值得注意的是，<!DOCTTYPE>不屬于html標(biāo)簽。

<html></html>-------html標(biāo)簽，是html文檔的根標(biāo)簽，所有的網(wǎng)頁標(biāo)簽都放在這對標(biāo)簽中，是所有html標(biāo)簽的祖先容器。

第二層：

<head></head>-------頭部標(biāo)簽，代表著html文檔的頭信息，是所有頭部元素的容器，內(nèi)部一般包含：<title> <script><style><meta><link>這些頭部元素。

<body></body>-------網(wǎng)頁主體標(biāo)簽，其內(nèi)部主要包含著構(gòu)成網(wǎng)頁內(nèi)容的一些元素，如<p></p>,<span></span>,<div></div>,<table></table>等。這些元素都會在網(wǎng)頁的內(nèi)容部分顯示。

3、標(biāo)簽的屬性

就如人有這身高、體重、年齡等這些屬性一樣，html標(biāo)簽也有自己的屬性，如字體顏色，寬，高，背景等。這些屬性一般通過鍵值對的形式卸載標(biāo)簽中，是標(biāo)簽的一部分，并且每種標(biāo)簽的屬性都不完全像同，有的標(biāo)簽有著自己特有的屬性。如下圖所示：

4、html注釋

在實際開發(fā)中，我們需要在html文檔中做一些標(biāo)記，方便日后對代碼的維護(hù)及修改，也方便其他程序員了解我們的代碼。而在html文檔中，注釋的格式為:

我們可以理解為，html中，標(biāo)簽元素是給計算機(jī)讀的，為注釋是給程序員看的。

以上就是今天分享的內(nèi)容，希望對大家有幫助哦！

tml 的結(jié)構(gòu)部分標(biāo)簽

二、網(wǎng)頁常見的結(jié)構(gòu)

header 標(biāo)簽 --- 頭部分結(jié)構(gòu)

nav 標(biāo)簽 --- 導(dǎo)航條部分結(jié)構(gòu)

main 標(biāo)簽 --- 主核心部分內(nèi)容

footer 標(biāo)簽 --- 頁尾

01.代碼示例：

<body>

</body>

02.以上源代碼使用 DOM（文件對象模型）表示：

body

header

nav

main

footer

03. header 與 footer 用法

header --- 指整個網(wǎng)頁/或某個區(qū)塊的頭部。

一定會包含該區(qū)塊的標(biāo)題

可能會包含該區(qū)塊的副標(biāo)題、版本、署名等等

footer --- 表示整個網(wǎng)頁/或某個區(qū)塊的腳部

可能包括版權(quán)信息、參考資源、附注等等

小結(jié)：

頭是header,腳是footer。

header 和 footer 都可能多次出現(xiàn)，但它們的級別是不同的。

04.nav(navgation 導(dǎo)航) --- 包含一組鏈接，連接至網(wǎng)站其它主要頁面。

nav 標(biāo)簽與 header 標(biāo)簽的關(guān)系

不建議將nav放置在header內(nèi)

頭部/header是從上下文邏輯關(guān)系上來說的，并不一定是視覺設(shè)計中擺在頂上的內(nèi)

容，所以一般不會包含nav。

小結(jié)：

導(dǎo)航 navigation包含一組鏈接，指向網(wǎng)站的其他主要欄目。

nav和header通常是互相獨(dú)立的并列關(guān)系。

nav可能在頁面中多次出現(xiàn)，分別指主導(dǎo)航、二級導(dǎo)航等等。

05.main 標(biāo)簽和 aside 標(biāo)簽

main --- 代表網(wǎng)頁中的主要內(nèi)容/主結(jié)構(gòu)

不會包含網(wǎng)站的主導(dǎo)航條、網(wǎng)站總標(biāo)題和網(wǎng)站總頁腳，但可能包含次一級別的

header/van/footer。

*注：每個網(wǎng)頁最多只有一個main

main 不可能是以下元素的后代：

article(文章標(biāo)簽)、aside(附屬內(nèi)容標(biāo)簽)、footer(網(wǎng)頁標(biāo)簽)、deader(頭部標(biāo)簽) 或

nav(導(dǎo)航標(biāo)簽)

aside(附屬內(nèi)容)

附屬內(nèi)容

如果刪除，影響不大

應(yīng)與主內(nèi)容main相關(guān)

aside有時被翻譯成"側(cè)邊"，這種翻譯是不準(zhǔn)確的。

代碼示例：

<body>

<main>

</main>

</body>

按 DOM(文件對象模型)構(gòu)建 html :

body

header

nav

main

aside

footer

小結(jié)：

01.主內(nèi)容main，每個頁面只有一個，指該頁面專屬的內(nèi)容塊，區(qū)別于網(wǎng)站的其他頁面。

02.附屬內(nèi)容aside,與主內(nèi)容有一些聯(lián)系，如果被刪除，對網(wǎng)頁的閱讀沒有明顯影響。

06. article 標(biāo)簽與 section 標(biāo)簽

article 是一篇完整的文章，代表頁面中獨(dú)立的、完整的、可以獨(dú)自被外部引用的內(nèi)容。

注意：header/footer/nav都可能出現(xiàn)在article中，作為文章自身的頭、尾與文章內(nèi)部導(dǎo)航。

section (片段或章節(jié)) ：

無法獨(dú)立成文，通常性屬于 article 的一部分，該片段里的開始部分仍有一個自然標(biāo)題以

及相關(guān)內(nèi)容。

section 也可能是main的子元素。

07.關(guān)于 id ：

唯一標(biāo)識符，同一頁面里id不得重復(fù)，以半角英文字母開頭，不含特殊字符與空格，描述職能

，不描述樣式。

小結(jié)：

01.article 是一篇獨(dú)立的完整的文章，可以被外界引用的。

02.section 可以是 article 中的一個章節(jié)，也可以是主內(nèi)容中的一個區(qū)塊。

03.不管是 article 還是 section , 第一個子元素總是標(biāo)題（header 或 h1）。

08. div 標(biāo)簽（部門、分塊）

div --- 根據(jù)職能的不同，劃分出特定的一塊區(qū)域，常常結(jié)合id屬性使用。

示例：

<h1>internet...</h1>

</header>

<div id="today">...</div> ---今日熱點功能區(qū)域

<div id="login">...</div> ---登陸相關(guān)功能區(qū)域

<div id="search">...</div> ---搜索功能區(qū)域

article、section、div 的區(qū)別：

aricle：文章

如果上下文能聯(lián)合組成一個有意義的獨(dú)立文章；應(yīng)優(yōu)先使用 article

section：片段，章節(jié)

無法使用article時，該片段里的開始部分仍有一個自然標(biāo)題，和相關(guān)內(nèi)容。

div：部門、分塊

在無法使用article/section/aside等時，仍承擔(dān)著特定功能的分塊。

小結(jié)：

在無法使用article/section/aside等時，仍承擔(dān)著特定功能的分塊，就可以使用 div 標(biāo)簽。

div標(biāo)簽和section標(biāo)簽一樣，常常帶有id屬性。

家好，我是皮皮。

前言

對于前端來說，HTML 都是最基礎(chǔ)的內(nèi)容。

今天，我們來了解一下 HTML 和網(wǎng)頁有什么關(guān)系，以及與 DOM 有什么不同。通過本講內(nèi)容，你將掌握瀏覽器是怎么處理 HTML 內(nèi)容的，以及在這個過程中我們可以進(jìn)行怎樣的處理來提升網(wǎng)頁的性能，從而提升用戶的體驗。

一、瀏覽器頁面加載過程

不知你是否有過這樣的體驗：當(dāng)打開某個瀏覽器的時候，發(fā)現(xiàn)一直在轉(zhuǎn)圈，或者等了好長時間才打開頁面……

此時的你，會選擇關(guān)掉頁面還是耐心等待呢？

這一現(xiàn)象，除了網(wǎng)絡(luò)不穩(wěn)定、網(wǎng)速過慢等原因，大多數(shù)都是由于頁面設(shè)計不合理導(dǎo)致加載時間過長導(dǎo)致的。

我們都知道，頁面是用 HTML/CSS/JavaScript 來編寫的。

HTML 的職責(zé)在于告知瀏覽器如何組織頁面，以及搭建頁面的基本結(jié)構(gòu)；
CSS 用來裝飾 HTML，讓我們的頁面更好看；
JavaScript 則可以豐富頁面功能，使靜態(tài)頁面動起來。

HTML由一系列的元素組成，通常稱為HTML元素。HTML 元素通常被用來定義一個網(wǎng)頁結(jié)構(gòu)，基本上所有網(wǎng)頁都是這樣的 HTML 結(jié)構(gòu)：

<html>
    <head></head>
    <body></body>
</html>

其中：

html元素是頁面的根元素，它描述完整的網(wǎng)頁；
head元素包含了我們想包含在 HTML 頁面中，但不希望顯示在網(wǎng)頁里的內(nèi)容；
body元素包含了我們訪問頁面時所有顯示在頁面上的內(nèi)容，是用戶最終能看到的內(nèi)容;

HTML 中的元素特別多，其中還包括可用于 Web Components 的自定義元素。

前面我們提到頁面 HTML 結(jié)構(gòu)不合理可能會導(dǎo)致頁面響應(yīng)慢，這個過程很多時候體現(xiàn)在<script>和<style>元素的設(shè)計上，它們會影響頁面加載過程中對 Javascript 和 CSS 代碼的處理。

因此，如果想要提升頁面的加載速度，就需要了解瀏覽器頁面的加載過程是怎樣的，從根本上來解決問題。

瀏覽器在加載頁面的時候會用到 GUI 渲染線程和 JavaScript 引擎線程（更詳細(xì)的瀏覽器加載和渲染機(jī)制將在第 7 講中介紹）。其中，GUI 渲染線程負(fù)責(zé)渲染瀏覽器界面 HTML 元素，JavaScript 引擎線程主要負(fù)責(zé)處理 JavaScript 腳本程序。

由于 JavaScript 在執(zhí)行過程中還可能會改動界面結(jié)構(gòu)和樣式，因此它們之間被設(shè)計為互斥的關(guān)系。也就是說，當(dāng) JavaScript 引擎執(zhí)行時，GUI 線程會被掛起。

以網(wǎng)易云課堂官網(wǎng)為例，我們來看看網(wǎng)頁加載流程。

（1）當(dāng)我們打開官網(wǎng)的時候，瀏覽器會從服務(wù)器中獲取到 HTML 內(nèi)容。

（2）瀏覽器獲取到 HTML 內(nèi)容后，就開始從上到下解析 HTML 的元素。

（3）<head>元素內(nèi)容會先被解析，此時瀏覽器還沒開始渲染頁面。

我們看到<head>元素里有用于描述頁面元數(shù)據(jù)的<meta>元素，還有一些<link>元素涉及外部資源（如圖片、CSS 樣式等），此時瀏覽器會去獲取這些外部資源。除此之外，我們還能看到<head>元素中還包含著不少的<script>元素，這些<script>元素通過src屬性指向外部資源。

（4）當(dāng)瀏覽器解析到這里時（步驟 3），會暫停解析并下載 JavaScript 腳本。

（5）當(dāng) JavaScript 腳本下載完成后，瀏覽器的控制權(quán)轉(zhuǎn)交給 JavaScript 引擎。當(dāng)腳本執(zhí)行完成后，控制權(quán)會交回給渲染引擎，渲染引擎繼續(xù)往下解析 HTML 頁面。

（6）此時<body>元素內(nèi)容開始被解析，瀏覽器開始渲染頁面。

在這個過程中，我們看到<head>中放置的<script>元素會阻塞頁面的渲染過程：把 JavaScript 放在<head>里，意味著必須把所有 JavaScript 代碼都下載、解析和解釋完成后，才能開始渲染頁面。

到這里，我們就明白了：如果外部腳本加載時間很長（比如一直無法完成下載），就會造成網(wǎng)頁長時間失去響應(yīng)，瀏覽器就會呈現(xiàn)“假死”狀態(tài)，用戶體驗會變得很糟糕。

因此，對于對性能要求較高、需要快速將內(nèi)容呈現(xiàn)給用戶的網(wǎng)頁，常常會將 JavaScript 腳本放在<body>的最后面。這樣可以避免資源阻塞，頁面得以迅速展示。我們還可以使用defer/async/preload等屬性來標(biāo)記<script>標(biāo)簽，來控制 JavaScript 的加載順序。

百度首頁

三、DOM 解析

對于百度這樣的搜索引擎來說，必須要在最短的時間內(nèi)提供到可用的服務(wù)給用戶，其中就包括搜索框的顯示及可交互，除此之外的內(nèi)容優(yōu)先級會相對較低。

瀏覽器在渲染頁面的過程需要解析 HTML、CSS 以得到 DOM 樹和 CSS 規(guī)則樹，它們結(jié)合后才生成最終的渲染樹并渲染。因此，我們還常常將 CSS 放在<head>里，可用來避免瀏覽器渲染的重復(fù)計算。

二、HTML 與 DOM 有什么不同

我們知道<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)并進(jìn)行操作。一般來說，我們使用 JavaScript 來操作 DOM 接口，從而實現(xiàn)頁面的動態(tài)變化，以及用戶的交互操作。

在開發(fā)過程中，常常用對象的方式來描述某一類事物，用特定的結(jié)構(gòu)集合來描述某些事物的集合。DOM 也一樣，它將 HTML 文檔解析成一個由 DOM 節(jié)點以及包含屬性和方法的相關(guān)對象組成的結(jié)構(gòu)集合。

三、DOM 解析

我們常見的 HTML 元素，在瀏覽器中會被解析成節(jié)點。比如下面這樣的 HTML 內(nèi)容：

<html>
    <head>
        <title>標(biāo)題</title>
    </head>
    <body>
        <a href='xx.com'>我的超鏈接</a>
        <h1>頁面第一標(biāo)題</h1>
    </body>
</html>

打開控制臺 Elements 面板，可以看到這樣的 HTML 結(jié)構(gòu)，如下圖所示：

在瀏覽器中，上面的 HTML 會被解析成這樣的 DOM 樹，如下圖所示：

我們都知道，對于樹狀結(jié)構(gòu)來說，常常使用parent/child/sibling等方式來描述各個節(jié)點之間的關(guān)系，對于 DOM 樹也不例外。

舉個例子，我們常常會對頁面功能進(jìn)行抽象，并封裝成組件。但不管怎么進(jìn)行整理，頁面最終依然是基于 DOM 的樹狀結(jié)構(gòu)，因此組件也是呈樹狀結(jié)構(gòu)，組件間的關(guān)系也同樣可以使用parent/child/sibling這樣的方式來描述。同時，現(xiàn)在大多數(shù)應(yīng)用程序同樣以root為根節(jié)點展開，我們進(jìn)行狀態(tài)管理、數(shù)據(jù)管理也常常會呈現(xiàn)出樹狀結(jié)構(gòu)。

四、事件委托

我們知道，瀏覽器中各個元素從頁面中接收事件的順序包括事件捕獲階段、目標(biāo)階段、事件冒泡階段。其中，基于事件冒泡機(jī)制，我們可以實現(xiàn)將子元素的事件委托給父級元素來進(jìn)行處理，這便是事件委托。

如果我們在每個元素上都進(jìn)行監(jiān)聽的話，則需要綁定三個事件;(假設(shè)頁面上有a,b,c三個兄弟節(jié)點)

function clickEventFunction(e) {
  console.log(e.target===this); // logs `true`
  // 這里可以用 this 獲取當(dāng)前元素
}
// 元素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`是否符合預(yù)期
  // 此處控制廣告面板的展示內(nèi)容
}
// 元素1綁定
element1.addEventListener("click", clickEventFunction, false);

這樣能解決什么問題呢？

綁定子元素會綁定很多次的事件，而綁定父元素只需要一次綁定。
將事件委托給父節(jié)點，這樣我們對子元素的增加和刪除、移動等，都不需要重新進(jìn)行事件綁定。

常見的使用方式主要是上述這種列表結(jié)構(gòu)，每個選項都可以進(jìn)行編輯、刪除、添加標(biāo)簽等功能，而把事件委托給父元素，不管我們新增、刪除、更新選項，都不需要手動去綁定和移除事件。

如果在列表數(shù)量內(nèi)容較大的時候，對成千上萬節(jié)點進(jìn)行事件監(jiān)聽，也是不小的性能消耗。使用事件委托的方式，我們可以大量減少瀏覽器對元素的監(jiān)聽，也是在前端性能優(yōu)化中比較簡單和基礎(chǔ)的一個做法。

注意:

如果我們直接在document.body上進(jìn)行事件委托，可能會帶來額外的問題;
由于瀏覽器在進(jìn)行頁面渲染的時候會有合成的步驟，合成的過程會先將頁面分成不同的合成層，而用戶與瀏覽器進(jìn)行交互的時候需要接收事件。此時，瀏覽器會將頁面上具有事件處理程序的區(qū)域進(jìn)行標(biāo)記，被標(biāo)記的區(qū)域會與主線程進(jìn)行通信。
如果我們document.body上被綁定了事件，這時候整個頁面都會被標(biāo)記;
即使我們的頁面不關(guān)心某些部分的用戶交互，合成器線程也必須與主線程進(jìn)行通信，并在每次事件發(fā)生時進(jìn)行等待。這種情況，我們可以使用passive: true選項來解決

五、總結(jié)

我們了解了 HTML 的作用，以及它是如何影響瀏覽器中頁面的加載過程的，同時還介紹了使用 DOM 接口來控制 HTML 的展示和功能邏輯。我們了解了DOM解析事件委托等相關(guān)概念。

在線咨詢

上一篇：JCSHOP 一個企業(yè)級的B2B2C電商平臺解決方案
下一篇：郵件模版編輯器MailStyler Newslett

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML5前端開發(fā)入門：HTML頁面的基本代碼結(jié)構(gòu)是

tml 的結(jié)構(gòu)部分標(biāo)簽

家好，我是皮皮。

前言

一、瀏覽器頁面加載過程

三、DOM 解析

二、HTML 與 DOM 有什么不同

三、DOM 解析

四、事件委托

五、總結(jié)

您的項目需求

家好，我是皮皮。

一、瀏覽器頁面加載過程

三、DOM 解析

二、HTML 與 DOM 有什么不同

四、事件委托

五、總結(jié)