HTML 入门
當你在 web 瀏覽器中瀏覽網(wǎng)頁時，你看到的最基本的內(nèi)容是文字。這些文字一般有著一些樣式特性，比如不同的文字大小和顏色。在多數(shù)情況下，頁面還會展示圖片或者還可能帶有視頻；有時候會有一個表單，你可以填寫信息（或者搜索內(nèi)容）；或者可以依據(jù)喜好自定義頁面的展示效果；頁面也經(jīng)常會帶有包含動畫效果的內(nèi)容；頁面上有些內(nèi)容會不斷變化而有些內(nèi)容會保持不變。
一些技術(shù)（如CSS，JavaScript，Flash，AJAX，JSON）可以用來定義網(wǎng)頁中的一些元素。但是，網(wǎng)頁的基礎(chǔ)是由HTML（HyperText Markup Language 超文本標記語言）來定義的。沒有了HTML，網(wǎng)頁不可能存在。HTML是一個把所有東西包含起來的外殼：HTML是一個國際化的標準，由萬維網(wǎng)聯(lián)盟（W3C）和網(wǎng)頁超文本技術(shù)工作小組?(WHATWG)維護。WHATWG認為HTML是一個“活著的標準”，它應(yīng)該不斷地在進化。而W3C則致力于維護HTML的“多個版本快照”，即當前最新的版本HTML5和HTML的進化版HTML 5.1。
HTML規(guī)范所定義的這種語言，既可以使用較為松散的HTML語法，也可以使用更為嚴格的XML（Extensible Markup Language?擴展標記語言）語法，同時也解決了Web應(yīng)用的需求。HTML沒有描述內(nèi)容的樣式和格式，只是內(nèi)容本身和其意義。如果你想要在網(wǎng)站中加入樣式和格式，需要通過層疊樣式表（CSS）來定義和控制。
這篇文章提供了一個HTML的入門簡介。如果你想要了解瀏覽器背后的工作原理，這篇文章是一個很好的開始。
HTML 簡史
蒂姆·伯納斯-李，一名CERN（歐洲核子研究組織）的物理學(xué)家，在80年代后期設(shè)計了一種能在網(wǎng)路上分享文檔的方式。在這之前，網(wǎng)路上溝通的方式僅限于純文本傳遞，比如：電子郵件、FTP(文件傳輸協(xié)議)和Usenet討論版。HTML是利用內(nèi)容檔案儲存至中央服務(wù)器的方式，然后再將內(nèi)容透過瀏覽器傳遞至本機工作站。 它簡化了內(nèi)容存取的方式，也讓更多豐富內(nèi)容能夠顯示（諸如較復(fù)雜的文本格式與圖片的顯示）。HTML 源自于SGML——它是一種復(fù)雜的文檔結(jié)構(gòu)定義和內(nèi)容描述（文本或圖像）語法；從HTML5起，HTML不再堅守SGML的語法。
什么是 HTML？
HTML 是一種標記語言（markup language）。它告訴瀏覽器如何顯示內(nèi)容。HTML把內(nèi)容（文字，圖片，語言，影片等等）和表現(xiàn)（這個內(nèi)容是如何顯示，比如文字用什么顏色顯示等等）分開。HTML使用預(yù)先定義的元素集合來識別內(nèi)容形態(tài)。?元素包含一個以上的標記來包含或者表達內(nèi)容。標記利用尖括號表示，而結(jié)束標記（用來指示內(nèi)容尾端）則在前面加上斜線。
基礎(chǔ)的HTML編碼結(jié)構(gòu)如下：
<html> <head><title>這是標題</title> </head> <body>這是示例文本...<!-- 我們使用這種寫法來標記注釋 --><!-- 頁面標簽和其他的內(nèi)容都在這里.... --><!-- 這是在瀏覽器中顯示的實際區(qū)域 --> </body> </html>大多數(shù)瀏覽器允許用戶查看網(wǎng)頁的HTML文本，在Firefox中，使用快捷鍵Ctrl + U來查看頁面信息，初學(xué)者可能會發(fā)現(xiàn)復(fù)雜頁面的代碼幾乎不可讀，但如果你花了時間學(xué)習(xí)簡單頁面的代碼并對照頁面代碼渲染，你很快就能理解HTML語法是如何工作的
舉例來說，段落元素包含起始標記“<p>”和結(jié)束標記“</p>”。下面的例子展示一個包含HTML段落元素的段落
<p>你開始學(xué)習(xí)HTML了.</p>當此內(nèi)容顯示在網(wǎng)頁瀏覽器中，它看起來會像這樣：
在 CODEPEN 中打開? 在 JSFIDDLE 中打開?
瀏覽器利用標記來當作指示如何顯示標記中的內(nèi)容。
包含內(nèi)容的元素同時可以包含其他的元素，比如強調(diào)元素(<em>) 可以包裹在段落元素里面：
<p>你<em>開始</em>學(xué)習(xí)HTML了.</p>展示的時候它看起來是這樣的：
在 CODEPEN 中打開? 在 JSFIDDLE 中打開?
有一些元素是不能包含其他元素的，比如圖片標簽(<img>)，它只需要簡單的指定文件名，作為他的一個屬性即可。
<img src="smileyface.jpg">通常而言，尖括號括起的內(nèi)容前面有斜線意味著一個標簽的結(jié)束。這在HTML中是可選項，而在XHTML是必須的，包括XML模式下的HTML元素。
下文將闡述上面介紹這些概念的細節(jié)。如果你想動態(tài)地學(xué)習(xí)HTML，請點擊Mozilla Thimble，一個在線html編輯器。同時你可以參考HTML 元素參考來查看可用的HTML標簽以及他們的用法。
元素——基本的構(gòu)造區(qū)塊
HTML由不同元素的集合組成。元素定義了它們所包含內(nèi)容的語義。元素包含了兩個相匹配的元素標簽（tag）之中所有的內(nèi)容，當然也包含了標簽本身。例如，"<p>"標簽表示一個段落的開始；"<img>"標簽表示一張圖片。訪問HTML 元素參考頁面以查閱完整的列表。
一些元素都有著明確的含義， 例如 ”這是一張圖片”，“這是一個標題” 或者 “這是一個有序列表”。 另外一些則沒這么特殊，例如 "這是本頁面的一個節(jié)" 或者 "這是文本的一部分"，但是就技術(shù)層面上而言它們都是必不可少的，? 例如標記一些在網(wǎng)頁中不會被顯示的內(nèi)容。不論如何,所有的html元素都有其特定的語義及存在價值。
大部分的元素都支持元素嵌套，構(gòu)成了一個層次結(jié)構(gòu)。 一個簡單的完整的網(wǎng)頁結(jié)構(gòu)例子如下所示：
<html><head><title>一個小型web頁面</title></head><body><p>你在學(xué)習(xí)HTML的起始頁面</p></body> </html>顯而易見, <html> 元素將其他元素括起,，<body> 元素中包含網(wǎng)頁內(nèi)容。 該結(jié)構(gòu)通常被視為由主干（<html>）發(fā)展而來的具有分支(本例中分支為， 元素 <body> 和<p> )的樹形結(jié)構(gòu)。 該層次化結(jié)構(gòu)稱為?DOM:?Document Object Model--文檔對象模型。
標簽
HTML文檔由純文本表示。 你可以使用任意支持純文本編寫保存的文本編輯器來編寫HTML文檔，但大部分HTML程序員更傾向于使用專門的編輯器，這些編輯器支持語法高亮和DOM顯示，例如Notepad++和sublime Text。 標簽(Tag)的名字不區(qū)分大小寫。 但是,W3C?(維護了HTML標準的國際性性聯(lián)盟)建議使用小寫 (?XHTML?同樣要求使用小寫).
HTML 為由一對尖括號（<>）所括起來的內(nèi)容賦予了特定含義. 這樣的標識稱為一個?標簽（tag）. 例如:
<p>這是段落中的文本。</p>上述例子中有一個起始標簽（start tag）和一個結(jié)束標簽（end tag）。結(jié)束標簽與起始標簽在內(nèi)容上是一樣的，但結(jié)束標簽會在小于符號（<）后多一個整斜線/。 大多數(shù) HTML 元素由一個起始標簽和一個結(jié)束標簽標識。起始標簽和結(jié)束標簽應(yīng)成對出現(xiàn)，也就是說在一個起始標簽之后應(yīng)有其對應(yīng)的結(jié)束標簽。? 由兩個標簽（起始標簽和結(jié)束標簽）構(gòu)成的元素而言，缺少其中之一，這個元素都可能會被認為是無效的。
注釋：開始標簽常被稱為開放標簽（opening tag），結(jié)束標簽常稱為閉合標簽（closing tag)
有效代碼示例:
<em>我<strong>真的</strong>是這個意思</em>.無效代碼示例:
<!-- 無效: --> <em>我<strong>真的</em>是這個意思</strong>.有效實例代碼里的em的結(jié)束標簽寫在它內(nèi)嵌標簽strong的結(jié)束標簽之后。
HTML5之前的瀏覽器在遇到?jīng)]有正確嵌套的標簽時，它們的解析方式是不一樣的，所以顯示結(jié)果也不一樣。現(xiàn)代瀏覽器（）對沒正確嵌套的標簽已經(jīng)能解析出統(tǒng)一的文檔模型了
有些元素沒有包含文本內(nèi)容或者其他元素，這稱為空元素。它們沒有結(jié)束標簽，請看下面例子:
<img src="smileyface.jpg" alt="Smiley face" >一般在結(jié)束標簽后面空格加上個斜杠（這在XHTML是必需的）
<img src="smileyface.jpg" alt="Smiley face" />而在HTML就沒這么嚴格的規(guī)定，加上斜杠只是好看點而已，沒什么作用
屬性
開始標簽可能包含一些信息，這些信息叫做元素的特性，包括兩部分:
- 特性名.
- 特性值.
一些元素可以只有特性名沒有特性值。它們的特性名類似“是否”，“有或沒有”，所以可以省略特性值，所以下面三種寫法都是一樣的意思:
<input required="required"><input required=""><input required>特性值如果有包含空格就要用引號，單雙引號都可以。如果特性值是單個詞就可以不用引號，但為了避免出錯和易于識別一般會加上引號:
<p class=foo bar> <!-- (當心，這可能不意味著你想象的意思。) -->上面的例子就是沒加引號，瀏覽器錯誤地解析成下面的:
<p class="foo" bar="">命名字符參考
命名字符參考?(一般被稱作實體)?用于表示在HTML中具有特定含義的字符. 舉例說，HTML將“>”和“<”符號理解為標簽分隔符。所以，當你想在文本中用">"符號表達“大于”的含義時，你可以使用命名字符參考來作為替代。?以下例舉了四個非常重要的常用實體：
- >?表示大于符號">" (>)
- <?表示小于符號"<" (<)
- &?表示和符號"and"(&)
- "?表示引用符號" (")
除這四個外，還有許多其他的實體符號, 但以上所舉的例子是實體符號中最為重要的幾個，原因在于他們所表示的原本字符在HTML中具有特定的含義。（即是說，如果你沒有在HTML文本中使用實體符號來替代原本符號的話，瀏覽器可能會錯誤地理解你的意圖。）
文檔類型和注釋
除標簽，文本內(nèi)容和實體外，一個HTML文檔一定需要在第一行做出文檔類型聲明(doctype declaration)。在現(xiàn)代HTML中，這句聲明書寫如下：
<!DOCTYPE html>文檔類型聲明的演變有著復(fù)雜深長的歷史，但今天的我們只需知道上方的文檔類型聲明告訴了瀏覽器需要遵循W3C標準來解析HTML和CSS代碼，且不必嘗試去模擬90年代的IE環(huán)境。（參見quirks mode）
HTML擁有一個允許我們在HTML文檔添加注釋的機制。注釋并不會在瀏覽器渲染頁面時一并呈現(xiàn)給用戶，而是隱藏在源代碼內(nèi)。這個機制使我們能十分方便地為HTML文檔的某個部分添加注釋信息、給你的同事預(yù)留便箋、或者給你自己做個提示。HTML注釋被如下符號封閉：
<!-- 這是評論文本 -->一個完整且精簡的文檔
如下是一個迷你的HTML示例文檔。你可以把這些代碼復(fù)制到文本編輯器中，另存為myfirstdoc.html，然后用瀏覽器打開它。另外請注意，你需要確保使用了utf-8的編碼格式保存了這份HTML示例文檔。雖然我們沒有為這份文檔添加任何樣式信息（從而讓視覺效果顯得十分樸素），但這總歸算一個不錯的開始，不是嗎？祝你前路好運！
<!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> from: https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Introduction總結(jié)
- 上一篇： Jenkins+Maven+SVN快速搭
- 下一篇： HTML 中的表单