HTML實(shí)際上就是通過(guò)已經(jīng)設(shè)定好的一個(gè)協(xié)議把內(nèi)容按照相應(yīng)的形式展示出來(lái)。
網(wǎng)頁(yè)有很多不同的內(nèi)容(比如說(shuō)，文本輸入，按鈕，圖片，視頻等等)，我們?cè)趺磪^(qū)分呢，那么每個(gè)就都有一個(gè)id標(biāo)示吧，從而就需要標(biāo)簽來(lái)與不同的內(nèi)容進(jìn)行一一的對(duì)應(yīng)。例如，<button>就表示一個(gè)按鈕，<img>就表示圖片。那各個(gè)元素定義好了，元素還有多樣性呢，就好比按鈕有名字吧，要對(duì)外界對(duì)他的操作做出相應(yīng)，那么就需要定義它的屬性例如 value，onclick等等，從而實(shí)現(xiàn)每個(gè)元素的不同的展現(xiàn)形式及響應(yīng)。
本溪紅海傳媒廣告——本溪網(wǎng)站建設(shè)，卓越領(lǐng)導(dǎo)者！（reviseyourwebsite.com)
綜上所屬 html的幾個(gè)基本的東西實(shí)際上就是 標(biāo)簽 和元素 。
對(duì)每一個(gè)標(biāo)簽?zāi)軌蚴炀毷褂镁涂梢粤?br />
詳細(xì)看一下這篇文章的講解當(dāng)你在 web 瀏覽器中瀏覽網(wǎng)頁(yè)時(shí)，你看到的最基本的內(nèi)容是文字。這些文字一般有著一些樣式特性，比如不同的文字大小和顏色。在多數(shù)情況下，頁(yè)面還會(huì)展示圖片或者還可能帶有視頻；有時(shí)候會(huì)有一個(gè)表格，你可以填寫信息（或者搜索內(nèi)容）；或者可以依據(jù)喜好自定義頁(yè)面的展示效果；頁(yè)面也經(jīng)常會(huì)帶有動(dòng)畫效果的內(nèi)容；頁(yè)面上有些內(nèi)容會(huì)不斷變化但有些內(nèi)容會(huì)保持不變。
一些技術(shù)（如CSS，JavaScript，F(xiàn)lash，AJAX，JSON）可以用來(lái)定義網(wǎng)頁(yè)中的一些元素。但是，網(wǎng)頁(yè)的基礎(chǔ)是由HTML（HyperText Markup Language 超文本標(biāo)記語(yǔ)言）來(lái)定義的。沒(méi)有了HTML，網(wǎng)頁(yè)不可能存在。HTML是一個(gè)把所有東西包含起來(lái)的外殼：HTML是一個(gè)國(guó)際化的標(biāo)準(zhǔn)，由萬(wàn)維網(wǎng)聯(lián)盟（W3C）和網(wǎng)頁(yè)超文本技術(shù)工作小組 (WHATWG)維護(hù)。WHATWG認(rèn)為HTML是一個(gè)“活著的標(biāo)準(zhǔn)”，它應(yīng)該不斷地在進(jìn)化。而W3C則致力于維護(hù)HTML的“多個(gè)版本快照”，即當(dāng)前最新的版本HTML5和HTML的進(jìn)化版HTML 5.1。
HTML規(guī)范所定義的這種語(yǔ)言，既可以使用較為松散的HTML語(yǔ)法，也可以使用更為嚴(yán)格的XML（Extensible Markup Language 擴(kuò)展標(biāo)記語(yǔ)言）語(yǔ)法，同時(shí)也解決了Web應(yīng)用的需求。HTML沒(méi)有描述內(nèi)容的樣式和格式，只是內(nèi)容本身和其意義。如果你想要在網(wǎng)站中加入樣式和格式，需要通過(guò)層疊樣式表（CSS）來(lái)定義和控制。
這篇文章提供了一個(gè)HTML的入門簡(jiǎn)介。如果你想要了解瀏覽器背后的工作原理，這篇文章是一個(gè)很好的開(kāi)始。
HTML 簡(jiǎn)史
蒂姆·伯納斯-李是CERN（歐洲核子研究組織）的一位物理學(xué)家，在80年代后期建立了能在網(wǎng)路上分享文件的一種方式。而在這之前，網(wǎng)路上溝通的方式僅能以純文本傳遞，比如：電子郵件、FTP(文件傳輸協(xié)議)和Usenet討論版。HTML是利用內(nèi)容檔案儲(chǔ)存至中央服務(wù)器的方式，然后再將內(nèi)容透過(guò)瀏覽器傳遞至本機(jī)工作站。 它簡(jiǎn)化了內(nèi)容存取的方式，也讓更多豐富內(nèi)容能夠顯示（諸如較復(fù)雜的文本格式與圖片的顯示）。
什么是 HTML？
HTML 是一種標(biāo)記語(yǔ)言（markup language）。它告訴游覽器如何顯示內(nèi)容。HTML把內(nèi)容（文字，圖片，語(yǔ)言，影片等等）和「presentation」（這個(gè)內(nèi)容是如何顯示，比如文字用什么顏色顯示等等）分開(kāi)。HTML使用預(yù)先定義的元素集合來(lái)識(shí)別內(nèi)容形態(tài)。 元素包含一個(gè)以上的標(biāo)記來(lái)包含或者表達(dá)內(nèi)容。標(biāo)記利用尖括號(hào)表示，而結(jié)束標(biāo)記（用來(lái)指示內(nèi)容尾端）則在前面加上斜線。
舉例來(lái)說(shuō)，段落元素包含起始標(biāo)記“<p>”和結(jié)束標(biāo)記“</p>”。下面的例子展示一個(gè)包含HTML段落元素的段落
<p>My dog ate all the guacamole.</p>
當(dāng)此內(nèi)容顯示在網(wǎng)頁(yè)游覽器中，它看起來(lái)會(huì)像這樣：
游覽器利用標(biāo)記來(lái)當(dāng)作指示如何顯示標(biāo)記中的內(nèi)容。
包含內(nèi)容的元素同時(shí)可以包含其他的元素，比如強(qiáng)調(diào)元素(<em>) 可以包裹在段落元素里面：
<p>My dog ate <em>all</em> the guacamole.</p>
展示的時(shí)候它看起來(lái)是這樣的：
有一些元素是不能包含其他元素的，比如圖片標(biāo)簽(<img>)，它只需要簡(jiǎn)單的指定文件名，作為他的一個(gè)屬性即可。
<img src="smileyface.jpg">
通常而言，尖括號(hào)括起的內(nèi)容前面有斜線意味著一個(gè)標(biāo)簽的結(jié)束。這在HTML中是可選項(xiàng)，而在XHTML是必須的，包括XML模式下的HTML元素。
下文將闡述上面介紹這些概念的細(xì)節(jié)。如果你想動(dòng)態(tài)地學(xué)習(xí)HTML，請(qǐng)點(diǎn)擊Mozilla Thimble，一個(gè)在線html編輯器。同時(shí)你可以參考HTML Elements來(lái)查看可用的HTML標(biāo)簽以及他們的用法。
元素——基本的構(gòu)造區(qū)塊
HTML由不同元素的集合組成。元素定義了它們所包含內(nèi)容的語(yǔ)義。元素包含了兩個(gè)相匹配的元素標(biāo)簽之中所有的內(nèi)容，當(dāng)然也包含了標(biāo)簽本身。例如，"<p>"標(biāo)簽表示一個(gè)段落；"<img>"標(biāo)簽表示一張圖片。訪問(wèn)HTML Elements頁(yè)面以查閱完整的列表。
一些元素都有著明確的含義， 例如 ”這是一張圖片”，“這是一個(gè)標(biāo)題” 或者 “這是一個(gè)有序列表”。 另外一些則沒(méi)這么特殊，例如 "這是本頁(yè)面的一個(gè)節(jié)" 或者 "這是文本的一部分"，但是就技術(shù)層面上而言它們都是必不可少的， 例如標(biāo)記一些在網(wǎng)頁(yè)中不會(huì)被顯示的內(nèi)容。不論如何,所有的html元素都有其特定的語(yǔ)義及存在價(jià)值。
大部分的元素都支持元素嵌套，構(gòu)成了一個(gè)層次結(jié)構(gòu)。 一個(gè)簡(jiǎn)單的完整的網(wǎng)頁(yè)結(jié)構(gòu)例子如下所示：
<html>
<body>
<p>My dog ate all the guacamole.</p>
</body>
</html>
顯而易見(jiàn), <html> 元素將其他元素括起,，<body> 元素中包含網(wǎng)頁(yè)內(nèi)容。 該結(jié)構(gòu)通常被視為由主干（<html>）發(fā)展而來(lái)的具有分支(本例中分支為， 元素 <body> 和<p> )的樹(shù)形結(jié)構(gòu)。 該層次化結(jié)構(gòu)稱為 DOM: Document Object Model--文檔對(duì)象模型。
標(biāo)簽
HTML文檔由純文本表示。 你可以使用任意支持純文本編寫保存的文本編輯器來(lái)編寫HTML文檔，但大部分HTML程序員更傾向于使用專門的編輯器，這些編輯器支持語(yǔ)法高亮和DOM顯示，例如Notepad++和sublime Text。 標(biāo)簽(Tag)的名字不區(qū)分大小寫。 但是,W3C (維護(hù)了HTML標(biāo)準(zhǔn)的國(guó)際性性聯(lián)盟)建議使用小寫 ( XHTML 同樣要求使用小寫).
HTML 為由一對(duì)尖括號(hào)（<>）所括起來(lái)的內(nèi)容以特定含義. 這樣的標(biāo)識(shí)稱為一個(gè) 標(biāo)簽（tag）. 例如:
<p>This is text within a paragraph.</p>
上述例子中有一個(gè)起始標(biāo)簽（start tag）和一個(gè)結(jié)束標(biāo)簽（end tag）。結(jié)束標(biāo)簽與起始標(biāo)簽在內(nèi)容上是一樣的，但結(jié)束標(biāo)簽會(huì)在小于符號(hào)（<）后多一個(gè)整斜線/。 大多數(shù) HTML 元素由一個(gè)起始標(biāo)簽和一個(gè)結(jié)束標(biāo)簽標(biāo)識(shí)。起始標(biāo)簽和結(jié)束標(biāo)簽應(yīng)成對(duì)出現(xiàn)，也就是說(shuō)在一個(gè)起始標(biāo)簽之后應(yīng)有其對(duì)應(yīng)的結(jié)束標(biāo)簽。 由連個(gè)標(biāo)簽（起始標(biāo)簽和結(jié)束標(biāo)簽）構(gòu)成的元素而言，缺少其中之一，這個(gè)元素都肯能會(huì)被認(rèn)為是無(wú)效的。
注釋：開(kāi)始標(biāo)簽常被稱為開(kāi)放標(biāo)簽（opening tag），結(jié)束標(biāo)簽常稱為閉合標(biāo)簽（closing tag
有效代碼示例:
<em>I <strong>really</strong> mean that</em>.
無(wú)效代碼示例:
Invalid: <em>I <strong>really</em> mean that</strong>.
有效實(shí)例代碼里的em的結(jié)束標(biāo)簽寫在它內(nèi)嵌標(biāo)簽strong的結(jié)束標(biāo)簽之前。
HTML5之前的瀏覽器在遇到?jīng)]有正確嵌套的標(biāo)簽時(shí)，它們的解析方式是不一樣的，所以現(xiàn)實(shí)結(jié)果也不一樣。現(xiàn)代瀏覽器（）對(duì)沒(méi)正確嵌套的標(biāo)簽已經(jīng)能解析出統(tǒng)一的文檔模型了
有些元素沒(méi)有包含文本內(nèi)容或者其他元素，這稱為空元素。它們沒(méi)有結(jié)束標(biāo)簽，請(qǐng)看下面例子:
<img src="smileyface.jpg">
一般在結(jié)束標(biāo)簽后面空格加上個(gè)斜杠（這在XHTML是必需的）
<img src="smileyface.jpg" />
而在HTML就沒(méi)這么嚴(yán)格的規(guī)定，加上斜杠只是好看點(diǎn)而已，沒(méi)什么作用
屬性
開(kāi)始標(biāo)簽可能包含一些信息，這些信息叫做元素的屬性，包括兩部分:
元素名.
元素值.
一些元素可以只有元素名沒(méi)有元素值。它們的元素名類似“是非”，“有或沒(méi)有”，所以可以省略元素值，所以下面三種寫法都是一樣的意思:
<input required="required">
<input required="">
<input required>
元素值如果有包含空格就要用引號(hào)，單雙引號(hào)都可以。如果元素值是單個(gè)詞就可以不用引號(hào)，但為了避免出錯(cuò)和易于識(shí)別一般會(huì)加上引號(hào):
<p class=foo bar> (Beware, this probably does not mean what you think it means.)
上面的例子就是沒(méi)加引號(hào)，瀏覽器錯(cuò)誤地解析成下面的:
<p class="foo" bar="">
命名字符參考
命名字符參考 (一般被稱作實(shí)體) 用于表示在HTML中具有特定含義的字符. 舉例說(shuō)，HTML將“>”和“<”符號(hào)理解為標(biāo)簽分隔符。所以，當(dāng)你想在文本中用">"符號(hào)表達(dá)“大于”的含義時(shí)，你可以使用命名字符參考來(lái)作為替代。 以下例舉了四個(gè)非常重要的常用實(shí)體：
> 表示大于符號(hào)">" (>)
< 表示小于符號(hào)"<" (<)
& 表示和符號(hào)"and"(&)
" 表示引用符號(hào)" (")
除這四個(gè)外，還有許多其他的實(shí)體符號(hào), 但以上所舉的例子是實(shí)體符號(hào)中最為重要的幾個(gè)，原因在于他們所表示的原本字符在HTML中具有特定的含義。（即是說(shuō)，如果你沒(méi)有在HTML文本中使用實(shí)體符號(hào)來(lái)替代原本符號(hào)的話，瀏覽器可能會(huì)錯(cuò)誤地理解你的意圖。）
文檔類型和注釋
除標(biāo)簽，文本內(nèi)容和實(shí)體外，一個(gè)HTML文檔一定需要在第一行做出文檔類型斷言(doctype declaration)。在現(xiàn)代HTML中，這句斷言書寫如下：
<!DOCTYPE html>
文檔類型斷言的演變有著復(fù)雜深長(zhǎng)的歷史，但今天的我們只需知道上方的文檔類型斷言告訴了瀏覽器需要遵循W3C標(biāo)準(zhǔn)來(lái)解析HTML和CSS代碼，且不必嘗試去模擬90年代的IE環(huán)境。（參見(jiàn)quirks mode）
HTML擁有一個(gè)允許我們?cè)贖TML文檔添加評(píng)論的機(jī)制。評(píng)論并不會(huì)在瀏覽器渲染頁(yè)面時(shí)一并呈現(xiàn)給用戶，而是隱藏在源代碼內(nèi)。這個(gè)機(jī)制使我們能十分方便地為HTML文檔的某個(gè)部分添加解釋信息、給你的同事預(yù)留便箋、或者給你自己做個(gè)提示。HTML評(píng)論被如下符號(hào)封閉：
<!-- This is comment text -->
一個(gè)完整且精簡(jiǎn)的文檔
如下是一個(gè)迷你的HTML示例文檔。你可以把這些代碼復(fù)制到文本編輯器中，另存為myfirstdoc.html，然后用瀏覽器打開(kāi)它。另外請(qǐng)注意，你需要確保使用了utf-8的編碼格式保存了這份HTML示例文檔。雖然我們沒(méi)有為這份文檔添加任何樣式信息（從而讓視覺(jué)效果顯得十分樸素），但這總歸算一個(gè)不錯(cuò)的開(kāi)始，不是嗎？祝你前路好運(yùn)！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>A tiny document</title>
</head>
<body>
<h1>Main heading in my document</h1>
<!-- Note that it is "h" + "1", not "h" + the letter "one" -->
<p>Loook Ma, I am coding <abbr title="Hyper Text Markup Language">HTML</abbr>.</p>
</body>
</html>
