HTML教程（看完這篇就夠了）

TML教程

超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創建網頁的標準標記語言。

您可以使用 HTML 來建立自己的 WEB 站點，HTML 運行在瀏覽器上，由瀏覽器來解析。

在本教程中，您將學習如何使用 HTML 來創建站點。

HTML 很容易學習！相信您能很快學會它！

本教程包含了數百個 HTML 實例。

使用本站的編輯器，您可以輕松實現在線修改 HTML，并查看實例運行結果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>孫叫獸的博客</title>
    </head>
    <body>
        <h1>我的第一個標題</h1>
        <p>我的第一個段落。</p>
    </body>
</html>

HTML 文檔的后綴名

.html

.htm

都可以。

HTML 簡介

實例：

<!doctype html>
<html>
<header>
<meta charset="utf-8">
<title>孫叫獸的博客</title>
</header>
<body>
<h1>這是我的標題</h1>
<p>這是我的段落</p>
</body>
</html>

實例解析

<!DOCTYPE html> 聲明為 HTML5 文檔
<html> 元素是 HTML 頁面的根元素
<head> 元素包含了文檔的元（meta）數據，如 <meta charset=“utf-8”> 定義網頁編碼格式為 utf-8。
<title> 元素描述了文檔的標題
<body> 元素包含了可見的頁面內容
<h1> 元素定義一個大標題
元素定義一個段落

什么是HTML？

HTML 是用來描述網頁的一種語言。
HTML 指的是超文本標記語言: HyperText Markup Language
HTML 不是一種編程語言，而是一種標記語言
標記語言是一套標記標簽 (markup tag)
HTML 使用標記標簽來描述網頁
HTML 文檔包含了HTML 標簽及文本內容
HTML文檔也叫做 web 頁面
HTML 標簽
HTML 標記標簽通常被稱為 HTML

標簽

HTML 標簽是由尖括號包圍的關鍵詞，比如 <html>

HTML 標簽通常是成對出現的，比如 和

標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽

開始和結束標簽也被稱為開放標簽和閉合標簽

<標簽>內容</標簽>

html元素

“HTML 標簽” 和 “HTML 元素” 通常都是描述同樣的意思.

但是嚴格來講, 一個 HTML 元素包含了開始標簽與結束標簽，如下實例:

HTML 元素:

<p>這是一個段落</p>

web瀏覽器

Web瀏覽器（如谷歌瀏覽器，Internet Explorer，Firefox，Safari）是用于讀取HTML文件，并將其作為網頁顯示。

瀏覽器并不是直接顯示的HTML標簽，但可以使用標簽來決定如何展現HTML頁面的內容給用戶

html網頁結構

<html>
    <head>
        <title>頁面標題</title>
    </head>
    <body>
        <h1>這是一個標題</h1>
        <p>這是一個段落。</p>
        <p>這是另外一個段落。</p>
    </body>
</html>

html的版本：

<!DOCTYPE>聲明

<!DOCTYPE>聲明有助于瀏覽器中正確顯示網頁。

網絡上有很多不同的文件，如果能夠正確聲明HTML的版本，瀏覽器就能正確顯示網頁內容。

doctype 聲明是不區分大小寫的，以下方式均可：

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

html5

<!DOCTYPE html>

html4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4 Transitional//EN""
http://www.w3.org/TR/html4/loose.dtd">

xhtml1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

中文編碼

目前在大部分瀏覽器中，直接輸出中文會出現中文亂碼的情況，這時候我們就需要在頭部將字符聲明為 UTF-8。

. 瀏覽器內核

瀏覽器的功能：顯示在計算機中的網頁實際上是位于許多不同的計算機文件中的元素的集合。因此，瀏覽器的功能首先是檢索文件，然后將頁面的各個部分組合起來，根據文本中的HTML命令排列這些部分。

瀏覽器內核分為兩部分：渲染引擎 和 JavaScript引擎。其中，渲染引擎是瀏覽器內核中比較重要的部分，現在所說的內核一般指的都是渲染引擎。

常見的瀏覽器內核：

四大內核：

1、Trident內核，也稱IE內核。

2、Webkit內核。

3、Gecko內核。

4、Presto內核。

各瀏覽器所用內核：

1、IE瀏覽器內核：Trident內核，也是俗稱的IE內核；

2、Chrome瀏覽器內核：統稱為Chromium內核或Chrome內核，以前是Webkit內核，現在是Blink內核；

3、Firefox瀏覽器內核：Gecko內核，俗稱Firefox內核；

4、Safari瀏覽器內核：Webkit內核；

5、Opera瀏覽器內核：最初是自己的Presto內核，后來是Webkit，現在是Blink內核；

6、360瀏覽器、獵豹瀏覽器內核：IE+Chrome雙內核；

7、搜狗、遨游、QQ瀏覽器內核：Trident（兼容模式）+Webkit（高速模式）；

8、百度瀏覽器、世界之窗內核：IE內核；

9、2345瀏覽器內核：以前是IE內核，現在也是IE+Chrome雙內核；

二. 瀏覽器顯示頁面的步驟

1. 從網絡層（networking）獲取請求文檔的內容，解析HTML/SVG/XHTML，形成一個DOM樹(DOM Tree)

默認情況下，加載和執行javascript都會阻止DOM tree的構建。

內部js腳本會在引入它的位置執行，外聯腳本則是加載完畢后執行。

注意：因此，不管是內聯腳本還是外部腳本，都應該盡量放在標簽結束之前（除非某些腳本需要在頁面加載完之前調用），這樣可以保證在運行腳本之前，頁面已經基本加載完成。

2. 解析CSS代碼，計算出最終的樣式數據，產生一個CSS規則樹(CSS Rule Tree)

解析CSS的時候的順序：瀏覽器默認設置，用戶設置，外鏈樣式，內聯樣式，html中的style

3. 解析JavaScript

通過DOM API來操作DOM Tree，通過CSSOM API來操作CSS Rule Tree

4. 解析完上述三種代碼之后，就構建一個渲染樹 (rendering tree)

渲染樹和DOM樹有所不同：

渲染樹中不包括不需要渲染的節點 : html head meta link style script display : none的元素，渲染樹中每一個節點都儲存有對應的CSS屬性，加載css會阻止render tree的構建

5. 開始渲染，頁面初始化時會發生一次回流。

三. 頁面的重繪和回流

1. 什么是頁面的重繪和回流

回流：當render tree中的一部分(或全部)因為元素的規模尺寸，布局，隱藏等改變而需要重新構建。（需要改變布局、幾何屬性）

重繪：當render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響布局的，比如background-color。則就叫稱為重繪。

因此回流必定影響重繪，重繪不一定引起回流。回流比重繪的代價要更高

2. 回流何時發生

當頁面布局和幾何屬性改變時就需要回流。下述情況會發生瀏覽器回流：

1、添加或者刪除可見的DOM元素；

2、元素位置改變；

3、元素尺寸改變——邊距、填充、邊框、寬度和高度

4、內容改變——比如文本改變或者圖片大小改變而引起的計算值寬度和高度改變；

5、頁面渲染初始化；

6、瀏覽器窗口尺寸改變——resize事件發生時；（所以需要函數節流）

3. 瀏覽器對回流和重繪做的優化工作

瀏覽器會維護1個隊列，把所有會引起回流、重繪的操作放入這個隊列，等隊列中的操作到了一定的數量或者到了一定的時間間隔，瀏覽器就會釋放隊列，進行一個批處理。這樣就會讓多次的回流、重繪變成一次回流重繪。(有點類似文檔碎片frameElement感覺)

雖然有了瀏覽器的優化，但有時候我們寫的一些代碼可能會強制瀏覽器提前釋放隊列，這樣瀏覽器的優化可能就起不到作用了。當你請求向瀏覽器請求一些 style信息的時候，就會讓瀏覽器釋放隊列，比如：

offsetTop, offsetLeft, offsetWidth, offsetHeight
scrollTop/Left/Width/Height
clientTop/Left/Width/Height
width,height
請求了getComputedStyle(), 或者 IE的 currentStyle

當你請求上面的一些屬性的時候，瀏覽器為了給你最精確的值，需要釋放隊列，因為隊列中可能會有影響到這些值的操作。即使你獲取元素的布局和樣式信息跟最近發生或改變的布局信息無關，瀏覽器都會強行刷新渲染隊列。

4. 減少回流reflow和重繪repaint

(1) 不要一條一條修改DOM的樣式

替換方法：

預先定義好css，然后修改DOM的className，修改style的style.cssText

(2) 把DOM離線后修改

先把DOM給display:none(有一次reflow)，然后你想怎么改就怎么改。比如修改100次，然后再把他顯示出來。clone一個DOM結點到內存里，然后想怎么改就怎么改，改完后，和在線的那個的交換一下。

(3) 不要把DOM結點的屬性值放在一個循環里當成循環的變量。

(4) 盡可能修改層級比較低的DOM

(5) 為動畫的HTML元素使用fixed或者absolute的position

修改他們的CSS是不會reflow的，因為使用fixed或者absolute的元素會脫離文檔流

(6) 千萬不要使用table布局

注意：CSS匹配DOM Tree主要是從右到左解析CSS的Selector，CSS匹配HTML元素是一個相當復雜和有性能問題的事情。DOM樹要小，CSS盡量用id和class，千萬不要過渡層疊下去。

歡迎關注。

本標記語言，英語：HyperText Markup Language，簡稱：HTML，是一種用于創建網頁的標準標記語言。注意，HTML是標記語言，不是編程語言。

您可以使用 HTML 來建立自己的 WEB 站點，HTML 運行在瀏覽器上，由瀏覽器來解析。手機上的H5，也是瀏覽器解析的，只是App內置的瀏覽器組件，你看不到而已。

目前，HTML5是最新的版本，主流瀏覽器都支持的了。如果出現不支持的話，升級到最新版本就好了。HTML5也支持在手機上運行，所以我們沒理由不學H5的。

1.1 HTML頁面結構

在沒學HTML之前，很多人以為有復雜時的，其實學HTML就是學標簽。除了<!DOCTYPE html>聲明為H5文件,類似<meta charset="UTF-8">這種指定字符的之外，其他的，不是成對(如)，就是有結束符的標簽(如)。

你要做的就是理解標簽的意思和往里面放內容就好了。經我這么一說，是不是感覺挺簡單的。是就對了。HTML不止開發簡單，連開發工具都不挑，如WebStorm，Eclipse或VSCode等；如用來開發Java、C#、PHP、Python等的開發工具。

開發工具生成的HTML5文件模板里，便是一個完整的頁面結構。內容，根據你個人喜好，進行刪填即可。如果沒有內容，則被稱為空標簽。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML來了</title>
</head>
<body>
<h1>老陳說編程</h1>
<p>編程界一老頭</p>
<a href="home.html">個人主頁</a>
</body>
</html>

輸出結果(用瀏覽器打開)

1.2 HTML元素

HTML文檔由 HTML 元素定義。元素以開始標簽(如)起始,以結束標簽(如)終止，元素的內容是開始標簽與結束標簽之間的內容，如：老陳說編程。標簽對大小寫不敏感： 等同于 ，推薦使用小寫。

標簽<a>里面的href，是屬性。屬性可以在元素中添加附加信息，以名稱/值對的形式出現，一般放在開始標簽中。

HTML注釋：可以將注釋插入 HTML 代碼中，這樣可以提高其可讀性，使代碼更易被人理解。瀏覽器會忽略注釋，也不會顯示它們。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>第2個HTML</title>
</head>
<body>
<h3>做人要自然，自然美，才是真的美</h3>
<!--這是注釋,src是屬性-->
<img src="mm.jpg"/>
</body>
</html>

輸出結果

好了，有關html頁面結構和元素的內容，老陳講完了，如果覺得對你有所幫助，希望老鐵能轉發點贊，讓更多的人看到這篇文章。你的轉發和點贊，就是對老陳繼續創作和分享最大的鼓勵。

一個當了10年技術總監的老家伙，分享多年的編程經驗。想學編程的朋友，可關注：老陳說編程。分享Python，前端(小程序)、App和嵌入式方面的干貨。關注我，沒錯的。

#前端##HTML##CSS##程序員##設計師#

在線咨詢

上一篇：優雅的表單校驗
下一篇：JavaScript開發工具WebStorm使用教程：WebStorm項目

您的項目需求

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