開始之前

為了更清晰的理解這篇文章，你應該學會使用browser，如果你了解如何創建并編輯文本文件，你就可以自己動手測試本文中的例子了

當你在 web 瀏覽器中瀏覽網頁時，你看到的最基本的內容是文字。這些文字一般有著一些樣式特性，比如不同的文字大小和顏色。在多數情況下，頁面還會展示圖片或者還可能帶有視頻；有時候會有一個表單，你可以填寫信息（或者搜索內容）；或者可以依據喜好自定義頁面的展示效果；頁面也經常會帶有包含動畫效果的內容；頁面上有些內容會不斷變化而有些內容會保持不變。

一些技術（如CSS，javaScript，Flash，Ajax，JSON）可以用來定義網頁中的一些元素。但是，網頁的基礎是由HTML（HyperText Markup Language 超文本標記語言）來定義的。沒有了HTML，網頁不可能存在。HTML是一個把所有東西包含起來的外殼：HTML是一個國際化的標準，由萬維網聯盟（W3C）和網頁超文本技術工作小組 (WHATWG)維護。WHATWG認為HTML是一個“活著的標準”，它應該不斷地在進化。而W3C則致力于維護HTML的“多個版本快照”，即當前最新的版本HTML5和HTML的進化版HTML 5.1。

HTML規范所定義的這種語言，既可以使用較為松散的HTML語法，也可以使用更為嚴格的xml（Extensible Markup Language 擴展標記語言）語法，同時也解決了Web應用的需求。HTML**沒有描述內容的樣式和格式，只是內容本身和其意義**。如果你想要在網站中加入樣式和格式，需要通過層疊樣式表（CSS）來定義和控制。

這篇文章提供了一個HTML的入門簡介。如果你想要了解瀏覽器背后的工作原理，這篇文章是一個很好的開始。

HTML 簡史

蒂姆·伯納斯-李，一名CERN（歐洲核子研究組織）的物理學家，在80年代后期設計了一種能在網路上分享文檔的方式。在這之前，網路上溝通的方式僅限于純文本傳遞，比如：電子郵件、FTP(文件傳輸協議)和Usenet討論版。HTML是利用內容檔案儲存至中央服務器的方式，然后再將內容透過瀏覽器傳遞至本機工作站。 它簡化了內容存取的方式，也讓更多豐富內容能夠顯示（諸如較復雜的文本格式與圖片的顯示）。HTML 源自于SGML——它是一種復雜的文檔結構定義和內容描述（文本或圖像）語法；從HTML5起，HTML不再堅守SGML的語法。

什么是 HTML？

HTML 是一種標記語言（*markup language*）。它告訴瀏覽器如何顯示內容。HTML把內容（文字，圖片，語言，影片等等）和「PResentation」（這個內容是如何顯示，比如文字用什么顏色顯示等等）分開。HTML使用預先定義的元素集合來識別內容形態。 元素包含一個以上的標記來包含或者表達內容。標記利用尖括號表示，而結束標記（用來指示內容尾端）則在前面加上斜線。

基礎的HTML編碼結構如下：

大多數瀏覽器允許用戶查看網頁的HTML文本，在Firefox中，使用快捷鍵Ctrl + U來查看頁面信息，初學者可能會發現復雜頁面的代碼幾乎不可讀，但如果你花了時間學習簡單頁面的代碼并對照頁面代碼渲染，你很快就能理解HTML語法是如何工作的

舉例來說，段落元素包含起始標記“

”和結束標記“

當此內容顯示在網頁瀏覽器中，它看起來會像這樣：

在 CODEPEN 中打開 在 JSFIDDLE 中打開

瀏覽器利用標記來當作指示如何顯示標記中的內容。

包含內容的元素同時可以包含其他的元素，比如強調元素() 可以包裹在段落元素里面：

展示的時候它看起來是這樣的：

在 CODEPEN 中打開 在 JSFIDDLE 中打開

有一些元素是不能包含其他元素的，比如圖片標簽()，它只需要簡單的指定文件名，作為他的一個屬性即可。

通常而言，尖括號括起的內容前面有斜線意味著一個標簽的結束。這在HTML中是可選項，而在XHTML是必須的，包括XML模式下的HTML元素。

下文將闡述上面介紹這些概念的細節。如果你想動態地學習HTML，請點擊Mozilla Thimble，一個在線html編輯器。同時你可以參考HTML 元素參考來查看可用的HTML標簽以及他們的用法。

元素——基本的構造區塊

HTML由不同元素的集合組成。元素定義了它們所包含內容的語義。元素包含了兩個相匹配的元素標簽（tag）之中所有的內容，當然也包含了標簽本身。例如，”

”標簽表示一個段落的開始；””標簽表示一張圖片。訪問HTML 元素參考頁面以查閱完整的列表。

一些元素都有著明確的含義， 例如 ”這是一張圖片”，“這是一個標題” 或者 “這是一個有序列表”。 另外一些則沒這么特殊，例如 “這是本頁面的一個節” 或者 “這是文本的一部分”，但是就技術層面上而言它們都是必不可少的， 例如標記一些在網頁中不會被顯示的內容。不論如何,所有的html元素都有其特定的語義及存在價值。

大部分的元素都支持元素嵌套，構成了一個層次結構。 一個簡單的完整的網頁結構例子如下所示：

顯而易見, 元素將其他元素括起,， 元素中包含網頁內容。 該結構通常被視為由主干（）發展而來的具有分支(本例中分支為， 元素 和

)的樹形結構。 該層次化結構稱為 DOM: Document Object Model–文檔對象模型。

標簽

HTML文檔由純文本表示。 你可以使用任意支持純文本編寫保存的文本編輯器來編寫HTML文檔，但大部分HTML程序員更傾向于使用專門的編輯器，這些編輯器支持語法高亮和DOM顯示，例如Notepad++和sublime Text。 標簽(Tag)的名字不區分大小寫。 但是,W3C (維護了HTML標準的國際性性聯盟)建議使用小寫 ( XHTML 同樣要求使用小寫).

HTML 為由一對尖括號（<>）所括起來的內容賦予了特定含義. 這樣的標識稱為一個 標簽（tag）. 例如:

上述例子中有一個起始標簽（*start tag*）和一個結束標簽（*end tag*）。結束標簽與起始標簽在內容上是一樣的，但結束標簽會在小于符號（<）后多一個整斜線/。 大多數 HTML 元素由一個起始標簽和一個結束標簽標識。起始標簽和結束標簽應成對出現，也就是說在一個起始標簽之后應有其對應的結束標簽。 由兩個標簽（起始標簽和結束標簽）構成的元素而言，缺少其中之一，這個元素都可能會被認為是無效的。

注釋：開始標簽常被稱為開放標簽（opening tag），結束標簽常稱為閉合標簽（closing tag)

有效代碼示例:

無效代碼示例:

有效實例代碼里的em的結束標簽寫在它內嵌標簽strong的結束標簽之后。

HTML5之前的瀏覽器在遇到沒有正確嵌套的標簽時，它們的解析方式是不一樣的，所以顯示結果也不一樣?，F代瀏覽器（）對沒正確嵌套的標簽已經能解析出統一的文檔模型了

有些元素沒有包含文本內容或者其他元素，這稱為空元素。它們沒有結束標簽，請看下面例子:

一般在結束標簽后面空格加上個斜杠（這在XHTML是必需的）

而在HTML就沒這么嚴格的規定，加上斜杠只是好看點而已，沒什么作用

屬性

開始標簽可能包含一些信息，這些信息叫做元素的特性，包括兩部分:

一些元素可以只有特性名沒有特性值。它們的特性名類似“是否”，“有或沒有”，所以可以省略特性值，所以下面三種寫法都是一樣的意思:

特性值如果有包含空格就要用引號，單雙引號都可以。如果特性值是單個詞就可以不用引號，但為了避免出錯和易于識別一般會加上引號:

上面的例子就是沒加引號，瀏覽器錯誤地解析成下面的:

命名字符參考

命名字符參考 (一般被稱作實體) 用于表示在HTML中具有特定含義的字符. 舉例說，HTML將“>”和“<”符號理解為標簽分隔符。所以，當你想在文本中用”>”符號表達“大于”的含義時，你可以使用命名字符參考來作為替代。 以下例舉了四個非常重要的常用實體：

除這四個外，還有許多其他的實體符號, 但以上所舉的例子是實體符號中最為重要的幾個，原因在于他們所表示的原本字符在HTML中具有特定的含義。（即是說，如果你沒有在HTML文本中使用實體符號來替代原本符號的話，瀏覽器可能會錯誤地理解你的意圖。）

文檔類型和注釋

除標簽，文本內容和實體外，一個HTML文檔一定需要在第一行做出文檔類型聲明(doctype declaration)。在現代HTML中，這句聲明書寫如下：

文檔類型聲明的演變有著復雜深長的歷史，但今天的我們只需知道上方的文檔類型聲明告訴了瀏覽器需要遵循W3C標準來解析HTML和CSS代碼，且不必嘗試去模擬90年代的IE環境。（參見quirks mode）

HTML擁有一個允許我們在HTML文檔添加注釋的機制。注釋并不會在瀏覽器渲染頁面時一并呈現給用戶，而是隱藏在源代碼內。這個機制使我們能十分方便地為HTML文檔的某個部分添加注釋信息、給你的同事預留便箋、或者給你自己做個提示。HTML注釋被如下符號封閉：

一個完整且精簡的文檔

如下是一個迷你的HTML示例文檔。你可以把這些代碼復制到文本編輯器中，另存為myfirstdoc.html，然后用瀏覽器打開它。另外請注意，你需要確保使用了utf-8的編碼格式保存了這份HTML示例文檔。雖然我們沒有為這份文檔添加任何樣式信息（從而讓視覺效果顯得十分樸素），但這總歸算一個不錯的開始，不是嗎？祝你前路好運！