HTML頁面基本結構和加載過程

家好，我是皮皮。

前言

對于前端來說，HTML 都是最基礎的內容。

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

一、瀏覽器頁面加載過程

不知你是否有過這樣的體驗：當打開某個瀏覽器的時候，發現一直在轉圈，或者等了好長時間才打開頁面……

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

這一現象，除了網絡不穩定、網速過慢等原因，大多數都是由于頁面設計不合理導致加載時間過長導致的。

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

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

HTML由一系列的元素組成，通常稱為HTML元素。HTML 元素通常被用來定義一個網頁結構，基本上所有網頁都是這樣的 HTML 結構：

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

其中：

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

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 的加載順序。

百度首頁

三、DOM 解析

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

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

二、HTML 與 DOM 有什么不同

我們知道<p>是 HTML 元素，但又常常將<p>這樣一個元素稱為 DOM 節點，那么 HTML 和 DOM 到底有什么不一樣呢？

根據 MDN 官方描述：文檔對象模型（DOM）是 HTML 和 XML 文檔的編程接口。

也就是說，DOM 是用來操作和描述 HTML 文檔的接口。如果說瀏覽器用 HTML 來描述網頁的結構并渲染，那么使用 DOM 則可以獲取網頁的結構并進行操作。一般來說，我們使用 JavaScript 來操作 DOM 接口，從而實現頁面的動態變化，以及用戶的交互操作。

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

三、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);

這樣能解決什么問題呢？

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

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

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

注意:

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

五、總結

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

么是HTML / HTM文件？他們相差一個字母有什么區別嗎，如何查看或編輯源代碼以及如何轉換成其他格式，例如DOCX，PDF，JPG 等，針對這些問題編程獅W3Cschool整理以下資料希望能對你有所幫助：

什么是HTM或HTML文件？

HTM / HTML 文件是超文本標記語言（Hyper Text Markup Language）文件，是 Internet 上的標準網頁文件類型。

由于 HTM 文件是純文本文件，因此它們僅包含文本（例如您現在正在閱讀的內容）以及對其他外部文件的文本引用（例如本文中的配圖）。

HTM 和 HTML 文件還可以引用其他文件，例如視頻，CSS 或 JS 文件。

HTM與HTML的區別

HTM 與 HTML 沒有本質意義的區別，只是為了滿足 DOS 僅能識別 8+3 的文件名而已，因為一些老的系統 (win32) 不能識別四位文件名，所以某些網頁服務器要求 index.html 最后一個 l 不能省略。MSIE 能自動識別和打開這些文件，但編寫網頁地址的時候必須是完全對應的，也就是說 index.htm 和 index.html 是兩個不同的文件，對應著不同的地址。值得一提的是 UNIX 系統中對大小寫敏感，不吻合的話就可能報沒有文件或者找不到文件。

如何打開HTM或HTML文件？

任何 Web 瀏覽器，例如 Edge，Firefox，Chrome，Opera，IE，360 安全瀏覽器等，都可以打開并正確顯示 HTM 和 HTML 文件。換句話說，在瀏覽器中打開這些文件并“解碼（decode）” HTM 或 HTML 文件使其能正確顯示。

現在有很多簡化編輯和創建 HTM / HTML 文件的工具。一些著名的免費 HTML 編輯器包括 Eclipse ，Komodo Edit 和 Bluefish 。另一個流行的具有許多高級功能的 HTM / HTML 編輯器是 Adobe Dreamweaver ，不過它是收費的。

雖然 Windows 系統自帶的記事本等簡單的文本編輯器的功能不如專用的 HTM 編輯器那么豐富，但是對 HTM 或 HTML 文件進行簡單編輯修改還是可以的。不過，W3Cschool還是建議大家使用專用的編輯器，如 WebStorm、VS Code 等，它具更多專業功能。

這是一個非常簡單的 HTML 頁面以文本形式顯示的示例：

源碼：

<!doctype html>
<html>

    
<head>
<meta charset="utf-8">
<title>什么是HTM或HTML文件？ - 編程獅(w3cschool.cn)</title>
</head>


<body>
    <h1>什么是HTM或HTML文件？</h1>
    <p>HTM / HTML 文件是超文本標記語言（Hyper Text Markup Language）文件，是 Internet 上的標準網頁文件類型。</p>
    <p>由于 HTM 文件是純文本文件，因此它們僅包含文本（例如您現在正在閱讀的內容）以及對其他外部文件的文本*引用*（例如本文中的配圖）。</p>
    <p>HTM 和 HTML 文件還可以引用其他文件，例如視頻，CSS 或 JS 文件。</p>   
</body>

    
</html>

當 Web 瀏覽器呈現信息時，HTML 文件的源代碼被“轉換”為真實的網頁（盡管源代碼已很精簡了）。

如何轉換HTML和HTM文件？

HTM 文件以特定的語法（規則）構成，以使其中的代碼和文本在瀏覽器中打開時能夠正確顯示。因此，將 HTM / HTML 文件轉換為另一種格式可能會丟失頁面上的所有功能。

如果你想要做的是將一個 HTM / HTML 文件轉換為方便離線查看的文件，這時圖片或 PDF 格式會方便很多。

在 Chrome 中，鼠標右鍵單擊網頁，出現的選項菜單中進入 “打印(P)...”(快捷鍵：CTRL + P) ，在打印選項中選擇另存為 PDF，以將窗口中的頁面轉換為 PDF 文件。Chrome 瀏覽器的擴展功能也稱為“全屏截屏”，可將 Chrome 瀏覽器中所有打開的 HTM / HTML 文件轉換為 PNG 文件。

其他瀏覽器具有類似的功能，例如 Firefox 的 “另存為 PDF” 加載項。

您也可以使用專門用于 HTM / HTML 進行圖像文件轉換的網站，例如iWeb2Shot 或Web-capture 。

一個免費的文件轉換器可以用來轉換并保存 HTM / HTML 文件到您的計算機。如 FileZigZag 是一個免費的文檔轉換器網站，可將 HTM 轉換為RTF，EPS，CSV，PDF 和許多其他格式。

HTM / HTML 文件不能轉換為文本文件格式以外的任何格式。例如，HTML 文件永遠不能轉換為 MP3 音頻文件。

文件打不開？

HTML / HTM 文件應該很容易打開，因為它們只是任何 Web 瀏覽器都可以查看的文本文件。如果您的文件沒有從上面建議的任何程序打開，則很有可能正在打開的這個文件并非超文本標記語言文件。

某些文件格式使用的文件擴展名與 HTML / HTM 非常相似，但實際上并非相同。一個主要的示例是用于壓縮 HTML 電子書文件的 HTMLZ 文件擴展名。有 HTML 文件在內的 HTMLZ 文件，但整個包的格式為 ZIP，不會在 Web 瀏覽器或文本編輯器打開。

在此示例中，您需要特定的 HTMLZ 文件查看器，例如Caliber 。或者，由于此文件格式實際上是存檔，因此您可以使用 7-Zip 之類的文件解壓縮器將其打開，然后您可以使用網絡瀏覽器或上述任何其他 HTML 查看器/編輯器打開任何單獨的 HTML 文件。

TMLANGUAGE 是另一個可能與 HTML / HTM 文件混淆的文件擴展名。這些實際上是TextMate 用于 macOS 的 TextMate 語言語法文件。

以上就是編程獅W3Cschool為你整理的關于《什么是HTM或HTML文件？如何打開、編輯和轉換HTM和HTML文件？》的全部內容，現希望可以幫到你~

本篇文章開始成哥將帶大家一起學習一下前端的基礎知識，我們先講解前端的基礎HTML與CSS，這個講完我們將講解VUE前端框架，最后我們再講講Ant Design的VUE前端框架，從而形成前端一個系列的教程，下面就開始我們今天的內容吧！

01 HTML簡介

HTML的英文全稱是 Hyper Text Markup Language，即超文本標記語言。

HTML是由Web的發明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年創立的一種標記語言，它是標準通用化標記語言SGML的應用。用HTML編寫的超文本文檔稱為HTML文檔，它能獨立于各種操作系統平臺(如UNIX， Windows等)。

使用HTML語言，將所需要表達的信息按某種規則寫成HTML文件，通過專用的瀏覽器來識別，并將這些HTML文件"翻譯"成可以識別的信息，即現在所見到的網頁。HTML 不需要編譯，可以直接由瀏覽器執行，非常方便開發時調試。

02 HTML實例

我們現在創建一個典型的HTML結構具體如下：

1. <!DOCTYPE html>  
2. <html lang="ch">  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <title>HTML實例</title>  
6. </head>  
7. <body>  
8.   <h1>我是標題</h1>  
9.   <p>我是段落。</p>  
10. </body>  
11. </html>

如上頁面中各個標簽代表的意思如下：

1）<!DOCTYPE html>是文檔聲明頭，它告訴游覽器當前處理的內容是HTML頁面

2）html是 HTML 頁面的根元素，用于標識HTML內容的開始與結束

3） head是HTML頁面的頭，包含了文檔的一些屬性。其中meta是元數據這邊charset="UTF-8"標識當前頁面編碼格式為UTF-8，title為文檔的標題

4）body是HTML主體也是游覽器在顯示頁面時的內容。h1是body內容中定義的標題，p是body內容中定義的段落

我們現在通過游覽器打開編寫的HTML內容，具體內容如下

在HTML中的內容可以通過以下格式進行內容注釋具體如下：

03 HTML標簽、元素、屬性、實體編碼與事件

（1）HTML標簽

HTML 標簽是 HTML 語言中最基本的單位，HTML 標簽是 HTML（標準通用標記語言下的一個應用）最重要的組成部分。HTML標簽具有如下特點：

1）標簽一般是成對出現的如:<div></div>;也有空標簽如:<br />

2）標簽由<>包括,分為開始標簽(開放標簽)和結束標簽(閉合標簽)

3）標簽不區分大小寫,根據W3C(萬維網聯盟)推薦,統一使用小寫字母

標簽的示列如下：

標簽按照<>的對數可以分為如下兩類分別為雙標簽與單標簽，下面我們具體來了解一下這兩類標簽。

1）雙標簽

雙標簽指由開始和結束兩個標記符組成的標記。其基本語法格式如下：

1. <標記名></標記名>

常見的雙標簽有如下幾種：

1. <html></html>  
2. <head></head>  
3. <title></title>  
4. <body></body>  
5. <h1></h1>  
6. <p></p>  
7.   
8. <!-- 塊級元素 -->  
9. <div></div>  
10. <span></span>  
11.   
12. <!-- 超鏈接元素 -->  
13. <a></a>  
14.   
15. <!-- 列表元素 -->  
16. <ul></ul>

2）單標簽

單標簽是指用一個標記符號即可完整地描述某個功能的標記。其基本語法格式如下：

1. <標記名/>

常見的單標簽有如下幾種：

1. <!-- 換行標簽 -->  
2. <br />  
3.   
4. <!-- 分隔線標簽 -->  
5. <hr />  
6.   
7. <!-- 圖片標簽 -->  
8. <img />

（2）HTML元素

HTML 元素指的是從開始標簽（start tag）到結束標簽（end tag）的所有代碼，如<p>段落</p>。元素可以進行嵌套具體如下：

1. <div>  
2.   <h1>我是標題</h1>  
3.     
4.   <div>  
5.     <p>元素嵌套示列</p>  
6.   </div>  
7.   
8. </div>

（3）HTML屬性

屬性為 HTML 元素提供附加信息，可分為全局屬性（即所有元素均可使用的屬性，如id,class等）和元素屬性（部分元素可使用的屬性，例如<a href="http://www.baidu.com">搜索</a>），屬性通常由屬性名="屬性值"構成,存在于開始標簽中，示列如下:

（4）HTML實體編碼

對于部分不易通過鍵盤輸入的或和HTML沖突的部分符合,引入對應的"實體編碼"，如< <> >空格。

（5）HTML事件

通過某個動作,執行某個操作/JS腳本的能力。如點擊按鈕,改變顏色，事件可以分為多類比多鼠標點擊、鼠標聚焦等，下面我看看看一個事件編寫示列：

04 HTML常用標簽示列

（1）h標簽

h 標簽有六種分別為h1、h2、h3、h4、h5、h6，這六個分別對應六種樣式的標題，我們現在來編寫這六種h標簽，演示代碼如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   <h1>H1標題</h1>  
9.   <h2>H2標題</h2>  
10.   <h3>H3標題</h3>  
11.   <h4>H4標題</h4>  
12.   <h5>H5標題</h5>  
13.   <h6>H6標題</h6>  
14. </body>  
15. </html>

我們來運行該HTML文件，來看看這六種h標簽有什么樣式差異，從示列中可以發現h1標簽字體最大然后依次減小。

（2）p標簽

p 標簽是文本標簽，現在我們來編寫一段含有p標簽的html文本，然后運行了看看p標簽的樣式具體操作如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <h4>標題一</h4>  
10.   <p>我是段落1</p>  
11.   
12.   <h4>標題二</h4>  
13.   <p>我是段落2</p>  
14.   
15. </body>  
16. </html>

（3）a標簽

a標簽是超鏈接標簽，點擊a標簽可以跳轉到其設置的網站，具體示列如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   <div>  
9.     <a href="http://www.baidu.com">點我跳轉到百度頁面</a>  
10.   </div>  
11.   
12.   <div>  
13.     <a href="http://www.qq.com">點我跳轉到騰訊頁面</a>  
14.   </div>  
15.   
16. </body>  
17. </html>

（4）div標簽

div標簽是一個塊級元素，它可用于組合其他 HTML 元素的容器。可以把div看成一個盒子，我們可以為這個盒子設置各種各樣屬性（如高度、寬度、顏色等），下面我們編寫一個div標簽并設置其長為300px，寬度為200px，同時給其一個背景顏色，具體如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <div style="width: 200px;height: 300px;background: #2eabff">我是div元素</div>  
10.   
11. </body>  
12. </html>

（5）列表標簽

列表作為網頁設計的重要內容之一，能夠用來制作導航欄和新聞列表等。HTML 列表分為：有序列表（ol），無序列表（ul）以及自定義列表（dl）

1）有序列表ul

有序列表的順序是有序的，默認情況下會以數字來排列，但也可以通過設置其type屬性以大寫字母、小寫字母、大寫羅馬數字、小寫羅馬數字來排列，我們現在來寫一個示列，具體如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <!--  有序列表，以默認方式數字排列 -->  
10.   <p>有序列表默認方式數字排列</p>  
11.   <ol>  
12.     <li>列表1</li>  
13.     <li>列表2</li>  
14.     <li>列表3</li>  
15.   </ol>  
16.   
17.   <!--  有序列表，以大寫字母排列 -->  
18.   <p>有序列表大寫字母排列</p>  
19.   <ol type="A">  
20.     <li>列表1</li>  
21.     <li>列表2</li>  
22.     <li>列表3</li>  
23.   </ol>  
24.   
25. </body>  
26. </html>

2）無序列表ol

無序列表的順序是無序的，不會按照某個值來排序，無序列表中每個列表前默認都有一個實心圓，也可以通過type屬性來設置成空心圓或者小方塊，無序列表示列如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <p>無序列表默認type樣式</p>  
10.   <ul>  
11.     <li>列表1</li>  
12.     <li>列表2</li>  
13.     <li>列表3</li>  
14.   </ul>  
15.   
16.   <p>無序列表方塊樣式</p>  
17.   <ul type="square">  
18.     <li>列表1</li>  
19.     <li>列表2</li>  
20.     <li>列表3</li>  
21.   </ul>  
22.   
23. </body>  
24. </html>

3）自定義列表dl

自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始，其列表內容是以<dd> 開始，自定義列表前面沒有任何標識，其具體示例如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <p>自定義列表</p>  
10.   <dl>  
11.     <dt>東岳</dt>  
12.     <dd>泰山</dd>  
13.   
14.     <dt>南岳</dt>  
15.     <dd>衡山</dd>  
16.   
17.     <dt>西岳</dt>  
18.     <dd>華山</dd>  
19.   
20.     <dt>北岳</dt>  
21.     <dd>恒山</dd>  
22.   
23.     <dt>中岳</dt>  
24.     <dd>嵩山</dd>  
25.   </dl>  
26.   
27. </body>  
28. </html>

（6）其它標簽

1）換行標簽<br/>

在HTML中如果想給內容進行換行可以使用換行標簽，具體示列如下：

2）分割線標簽<hr/>

<hr/> 標簽用于在 HTML創建一條分割線，具體示列如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <p>我是張三</p>  
10.   <!-- 分割線標簽 -->  
11.   <hr/>  
12.   <p>我是李四</p>  
13. </body>  
14. </html>

05 總結

至此我們《HTML基礎教程上篇》就講完了，下篇內容主要講解HTML樣式、HTML表單、Tabel等，敬請期待。最后如果喜歡本篇文章不要忘了點贊、關注與轉發哦！

-END-

@IT管理局專注計算機領域技術、大學生活、學習方法、求職招聘、職業規劃、職場感悟等類型的原創內容。期待與你相遇，和你一同成長。

文章推薦：

一文秒懂Web框架基礎之WSGI協議
IT工程師都需要掌握的容器技術之掃盲篇

在線咨詢

上一篇：優雅的使用CSS實現文字居中顯示
下一篇：8個可以讓你自學成才的網站，質量高且免費，自學改變一生

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML頁面基本結構和加載過程

家好，我是皮皮。

前言

一、瀏覽器頁面加載過程

三、DOM 解析

二、HTML 與 DOM 有什么不同

三、DOM 解析

四、事件委托

五、總結

什么是HTM或HTML文件？

HTM與HTML的區別

如何打開HTM或HTML文件？

如何轉換HTML和HTM文件？

文件打不開？

01 HTML簡介

02 HTML實例

03 HTML標簽、元素、屬性、實體編碼與事件

04 HTML常用標簽示列

05 總結

您的項目需求