整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
多剛入門HTML5前端開發的小伙伴對HTML頁面的基本機構代碼還不是很清楚，下面和千鋒廣州小編一起來看看吧。
1、什么是標簽：
html標簽組成是html文檔的最基本元素,一般是成對出現,由開始標簽和與其對應的結束標簽構成.?如<html></html>，<p></p>，<body></body>，<head></head>，<span></span>等,此外，還有一些標簽是單獨出現的，如<img/>,<input/>等，標簽可以相互嵌套使用。
由于html語言是一門弱類型語言,對格式的要求不是非常嚴格，因此所有標簽是不區分大小寫的,但是，一般在實際開發中，大家都統一使用小寫。
2、html文檔的基本結構
如上圖，每一個html文檔的基本結構為：
第一層：
<!DOCTTYPE>------！文檔類型，它的目的是要告訴標準通用標記語言解析器，它應該使用什么樣的文檔類型定義（DTD）來解析文檔，在html5文檔中，一般寫為<!DOCTTYPE html> ;值得注意的是，<!DOCTTYPE>不屬于html標簽。
<html></html>-------html標簽，是html文檔的根標簽，所有的網頁標簽都放在這對標簽中，是所有html標簽的祖先容器。
第二層：
<head></head>-------頭部標簽，代表著html文檔的頭信息，是所有頭部元素的容器，內部一般包含：<title> <script><style><meta><link>這些頭部元素。
<body></body>-------網頁主體標簽，其內部主要包含著構成網頁內容的一些元素，如<p></p>,<span></span>,<div></div>,<table></table>等。這些元素都會在網頁的內容部分顯示。
3、標簽的屬性
就如人有這身高、體重、年齡等這些屬性一樣，html標簽也有自己的屬性，如字體顏色，寬，高，背景等。這些屬性一般通過鍵值對的形式卸載標簽中，是標簽的一部分，并且每種標簽的屬性都不完全像同，有的標簽有著自己特有的屬性。如下圖所示：
4、html注釋
在實際開發中，我們需要在html文檔中做一些標記，方便日后對代碼的維護及修改，也方便其他程序員了解我們的代碼。而在html文檔中，注釋的格式為:
我們可以理解為，html中，標簽元素是給計算機讀的，為注釋是給程序員看的。
以上就是今天分享的內容，希望對大家有幫助哦！
二、網頁常見的結構
header 標簽 --- 頭部分結構
nav 標簽 --- 導航條部分結構
main 標簽 --- 主核心部分內容
footer 標簽 --- 頁尾
01.代碼示例：
<body>
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>
</body>
02.以上源代碼使用 DOM（文件對象模型）表示：
body
header
nav
main
footer
03. header 與 footer 用法
header --- 指整個網頁/或某個區塊的頭部。
一定會包含該區塊的標題
可能會包含該區塊的副標題、版本、署名等等
footer --- 表示整個網頁/或某個區塊的腳部
可能包括版權信息、參考資源、附注等等
小結：
頭是header,腳是footer。
header 和 footer 都可能多次出現，但它們的級別是不同的。
04.nav(navgation 導航) --- 包含一組鏈接，連接至網站其它主要頁面。
nav 標簽 與 header 標簽的關系
不建議將nav放置在header內
頭部/header是從上下文邏輯關系上來說的，并不一定是視覺設計中擺在頂上的內
容，所以一般不會包含nav。
小結：
導航 navigation包含一組鏈接，指向網站的其他主要欄目。
nav和header通常是互相獨立的并列關系。
nav可能在頁面中多次出現，分別指主導航、二級導航等等。
05.main 標簽和 aside 標簽
main --- 代表網頁中的主要內容/主結構
不會包含網站的主導航條、網站總標題和網站總頁腳，但可能包含次一級別的
header/van/footer。
*注：每個網頁最多只有一個main
main 不可能是以下元素的后代：
article(文章標簽)、aside(附屬內容標簽)、footer(網頁標簽)、deader(頭部標簽) 或
nav(導航標簽)
aside(附屬內容)
附屬內容
如果刪除，影響不大
應與主內容main相關
aside有時被翻譯成"側邊"，這種翻譯是不準確的。
代碼示例：
<body>
<header>...</header>
<nav>...</nav>
<main>
</main>
<aside></aside>
<footer>...</footer>
</body>
按 DOM(文件對象模型)構建 html :
body
header
nav
main
aside
footer
小結：
01.主內容main，每個頁面只有一個，指該頁面專屬的內容塊，區別于網站的其他頁面。
02.附屬內容aside,與主內容有一些聯系，如果被刪除，對網頁的閱讀沒有明顯影響。
06. article 標簽與 section 標簽
article 是一篇完整的文章，代表頁面中獨立的、完整的、可以獨自被外部引用的內容。
注意：header/footer/nav都可能出現在article中，作為文章自身的頭、尾與文章內部導航。
section (片段或章節) ：
無法獨立成文，通常性屬于 article 的一部分，該片段里的開始部分仍有一個自然標題以
及相關內容。
section 也可能是main的子元素。
07.關于 id ：
唯一標識符，同一頁面里id不得重復，以半角英文字母開頭，不含特殊字符與空格，描述職能
，不描述樣式。
小結：
01.article 是一篇獨立的完整的文章，可以被外界引用的。
02.section 可以是 article 中的一個章節，也可以是主內容中的一個區塊。
03.不管是 article 還是 section , 第一個子元素總是標題（header 或 h1）。
08. div 標簽（部門、分塊）
div --- 根據職能的不同，劃分出特定的一塊區域，常常結合id屬性使用。
示例：
<header>
<h1>internet...</h1>
</header>
<div id="today">...</div> ---今日熱點功能區域
<div id="login">...</div> ---登陸相關功能區域
<div id="search">...</div> ---搜索功能區域
article、section、div 的區別：
aricle：文章
如果上下文能聯合組成一個有意義的獨立文章；應優先使用 article
section：片段，章節
無法使用article時，該片段里的開始部分仍有一個自然標題，和相關內容。
div：部門、分塊
在無法使用article/section/aside等時，仍承擔著特定功能的分塊。
小結：
在無法使用article/section/aside等時，仍承擔著特定功能的分塊，就可以使用 div 標簽。
div標簽和section標簽一樣，常常帶有id屬性。
對于前端來說，HTML 都是最基礎的內容。
今天，我們來了解一下 HTML 和網頁有什么關系，以及與 DOM 有什么不同。通過本講內容，你將掌握瀏覽器是怎么處理 HTML 內容的，以及在這個過程中我們可以進行怎樣的處理來提升網頁的性能，從而提升用戶的體驗。
不知你是否有過這樣的體驗：當打開某個瀏覽器的時候，發現一直在轉圈，或者等了好長時間才打開頁面……
此時的你，會選擇關掉頁面還是耐心等待呢？
這一現象，除了網絡不穩定、網速過慢等原因，大多數都是由于頁面設計不合理導致加載時間過長導致的。
我們都知道，頁面是用 HTML/CSS/JavaScript 來編寫的。
HTML由一系列的元素組成，通常稱為HTML元素。HTML 元素通常被用來定義一個網頁結構，基本上所有網頁都是這樣的 HTML 結構：
<html>
<head></head>
<body></body>
</html>其中：
HTML 中的元素特別多，其中還包括可用于 Web Components 的自定義元素。
前面我們提到頁面 HTML 結構不合理可能會導致頁面響應慢，這個過程很多時候體現在<script>和<style>元素的設計上，它們會影響頁面加載過程中對 Javascript 和 CSS 代碼的處理。
因此，如果想要提升頁面的加載速度，就需要了解瀏覽器頁面的加載過程是怎樣的，從根本上來解決問題。
瀏覽器在加載頁面的時候會用到 GUI 渲染線程和 JavaScript 引擎線程（更詳細的瀏覽器加載和渲染機制將在第 7 講中介紹）。其中，GUI 渲染線程負責渲染瀏覽器界面 HTML 元素，JavaScript 引擎線程主要負責處理 JavaScript 腳本程序。
由于 JavaScript 在執行過程中還可能會改動界面結構和樣式，因此它們之間被設計為互斥的關系。也就是說，當 JavaScript 引擎執行時，GUI 線程會被掛起。
以網易云課堂官網為例，我們來看看網頁加載流程。
（1）當我們打開官網的時候，瀏覽器會從服務器中獲取到 HTML 內容。
（2）瀏覽器獲取到 HTML 內容后，就開始從上到下解析 HTML 的元素。
（3）<head>元素內容會先被解析，此時瀏覽器還沒開始渲染頁面。
我們看到<head>元素里有用于描述頁面元數據的<meta>元素，還有一些<link>元素涉及外部資源（如圖片、CSS 樣式等），此時瀏覽器會去獲取這些外部資源。除此之外，我們還能看到<head>元素中還包含著不少的<script>元素，這些<script>元素通過src屬性指向外部資源。
（4）當瀏覽器解析到這里時（步驟 3），會暫停解析并下載 JavaScript 腳本。
（5）當 JavaScript 腳本下載完成后，瀏覽器的控制權轉交給 JavaScript 引擎。當腳本執行完成后，控制權會交回給渲染引擎，渲染引擎繼續往下解析 HTML 頁面。
（6）此時<body>元素內容開始被解析，瀏覽器開始渲染頁面。
在這個過程中，我們看到<head>中放置的<script>元素會阻塞頁面的渲染過程：把 JavaScript 放在<head>里，意味著必須把所有 JavaScript 代碼都下載、解析和解釋完成后，才能開始渲染頁面。
到這里，我們就明白了：如果外部腳本加載時間很長（比如一直無法完成下載），就會造成網頁長時間失去響應，瀏覽器就會呈現“假死”狀態，用戶體驗會變得很糟糕。
因此，對于對性能要求較高、需要快速將內容呈現給用戶的網頁，常常會將 JavaScript 腳本放在<body>的最后面。這樣可以避免資源阻塞，頁面得以迅速展示。我們還可以使用defer/async/preload等屬性來標記<script>標簽，來控制 JavaScript 的加載順序。
百度首頁
對于百度這樣的搜索引擎來說，必須要在最短的時間內提供到可用的服務給用戶，其中就包括搜索框的顯示及可交互，除此之外的內容優先級會相對較低。
瀏覽器在渲染頁面的過程需要解析 HTML、CSS 以得到 DOM 樹和 CSS 規則樹，它們結合后才生成最終的渲染樹并渲染。因此，我們還常常將 CSS 放在<head>里，可用來避免瀏覽器渲染的重復計算。
我們知道<p>是 HTML 元素，但又常常將<p>這樣一個元素稱為 DOM 節點，那么 HTML 和 DOM 到底有什么不一樣呢？
根據 MDN 官方描述：文檔對象模型（DOM）是 HTML 和 XML 文檔的編程接口。
也就是說，DOM 是用來操作和描述 HTML 文檔的接口。如果說瀏覽器用 HTML 來描述網頁的結構并渲染，那么使用 DOM 則可以獲取網頁的結構并進行操作。一般來說，我們使用 JavaScript 來操作 DOM 接口，從而實現頁面的動態變化，以及用戶的交互操作。
在開發過程中，常常用對象的方式來描述某一類事物，用特定的結構集合來描述某些事物的集合。DOM 也一樣，它將 HTML 文檔解析成一個由 DOM 節點以及包含屬性和方法的相關對象組成的結構集合。
我們常見的 HTML 元素，在瀏覽器中會被解析成節點。比如下面這樣的 HTML 內容：
<html>
<head>
<title>標題</title>
</head>
<body>
<a href='xx.com'>我的超鏈接</a>
<h1>頁面第一標題</h1>
</body>
</html>打開控制臺 Elements 面板，可以看到這樣的 HTML 結構，如下圖所示：
在瀏覽器中，上面的 HTML 會被解析成這樣的 DOM 樹，如下圖所示：
我們都知道，對于樹狀結構來說，常常使用parent/child/sibling等方式來描述各個節點之間的關系，對于 DOM 樹也不例外。
舉個例子，我們常常會對頁面功能進行抽象，并封裝成組件。但不管怎么進行整理，頁面最終依然是基于 DOM 的樹狀結構，因此組件也是呈樹狀結構，組件間的關系也同樣可以使用parent/child/sibling這樣的方式來描述。同時，現在大多數應用程序同樣以root為根節點展開，我們進行狀態管理、數據管理也常常會呈現出樹狀結構。
我們知道，瀏覽器中各個元素從頁面中接收事件的順序包括事件捕獲階段、目標階段、事件冒泡階段。其中，基于事件冒泡機制，我們可以實現將子元素的事件委托給父級元素來進行處理，這便是事件委托。
如果我們在每個元素上都進行監聽的話，則需要綁定三個事件;(假設頁面上有a,b,c三個兄弟節點)
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);使用事件委托，可以通過將事件添加到它們的父節點，而將事件委托給父節點來觸發處理函數：
function clickEventFunction(event) {
console.log(e.target===this); // logs `false`
// 獲取被點擊的元素
const eventTarget=event.target;
// 檢查源元素`event.target`是否符合預期
// 此處控制廣告面板的展示內容
}
// 元素1綁定
element1.addEventListener("click", clickEventFunction, false);這樣能解決什么問題呢？
常見的使用方式主要是上述這種列表結構，每個選項都可以進行編輯、刪除、添加標簽等功能，而把事件委托給父元素，不管我們新增、刪除、更新選項，都不需要手動去綁定和移除事件。
如果在列表數量內容較大的時候，對成千上萬節點進行事件監聽，也是不小的性能消耗。使用事件委托的方式，我們可以大量減少瀏覽器對元素的監聽，也是在前端性能優化中比較簡單和基礎的一個做法。
注意:
我們了解了 HTML 的作用，以及它是如何影響瀏覽器中頁面的加載過程的，同時還介紹了使用 DOM 接口來控制 HTML 的展示和功能邏輯。我們了解了DOM解析事件委托等相關概念。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
