TML5 元素有多種維度展示方式，常見以下：

• 1.按照類別分類
• 2.按照是否Block元素

按照類別分：

根元素

• - html 代表 HTML 或 XHTML 文檔的根。其他所有元素必須是這個元素的子節點。
• 文檔元數據
• head 代表關于文檔元數據的一個集合，包括腳本或樣式表的鏈接或內容。
• title 定義文檔的標題，將顯示在瀏覽器的標題欄或標簽頁上。該元素只能包含文本，包含的標簽不會被解釋。
• base 定義頁面上相對 URL 的基準 URL。
• link 用于鏈接外部的 CSS 到該文檔。
• meta 定義其他 HTML 元素無法描述的元數據。
• style 用于內聯 CSS。
• -
• 腳本
• script 定義一個內聯腳本或鏈接到外部腳本。腳本語言是 JavaScript。
• noscript 定義當瀏覽器不支持腳本時顯示的替代文字。
• template 這個元素在 HTML5 中加入 通過 JavaScript 在運行時實例化內容的容器。
• -
• 章節
• body 代表 HTML 文檔的內容。在文檔中只能有一個 元素。
• section 這個元素在 HTML5 中加入 定義文檔中的一個章節。
• nav 這個元素在 HTML5 中加入 定義只包含導航鏈接的章節。
• article 這個元素在 HTML5 中加入 定義可以獨立于內容其余部分的完整獨立內容塊。
• aside 這個元素在 HTML5 中加入 定義和頁面內容關聯度較低的內容——如果被刪除，剩下的內容仍然很合理。
• h1~ h6 標題元素實現了六層文檔標題，h1 是最大的標題，h6 是最小的標題。標題元素簡要地描述章節的主題。
• header 這個元素在 HTML5 中加入 定義頁面或章節的頭部。它經常包含 logo、頁面標題和導航性的目錄
• footer 這個元素在 HTML5 中加入 定義頁面或章節的尾部。它經常包含版權信息、法律信息鏈接和反饋建議用的地址。
• address 定義包含聯系信息的一個章節。
• main 這個元素在 HTML5 中加入 定義文檔中主要或重要的內容。
• -
• 內容組織
• p 定義一個段落。
• hr 代表章節、文章或其他長內容中段落之間的分隔符。
• pre 代表其內容已經預先排版過，格式應當保留 。
• blockquote 代表引用自其他來源的內容。
• ol 定義一個有序列表。
• ul 定義一個無序列表。
• li 定義列表中的一個列表項。
• dl 定義一個定義列表（一系列術語和其定義）。
• dt 代表一個由下一個
• 定義的術語。
• dd 代表出現在它之前術語的定義。
• figure 這個元素在 HTML5 中加入 代表一個和文檔有關的圖例。
• figcaption 這個元素在 HTML5 中加入 代表一個圖例的說明。
• div 代表一個通用的容器，沒有特殊含義。
• -
• 文字展示
• a 代表一個鏈接到其他資源的超鏈接 。
• em 代表強調 文字。
• strong 代表特別重要 文字。
• small 代表注釋 ，如免責聲明、版權聲明等，對理解文檔不重要。
• s 代表不準確或不相關 的內容。
• cite 代表作品標題 。
• q 代表內聯的引用 。
• dfn 代表一個術語包含在其最近祖先內容中的定義 。
• abbr 代表省略 或縮寫 ，其完整內容在 title 屬性中。
• data 這個元素在 HTML5 中加入 關聯一個內容的機器可讀的等價形式 （該元素只在 WHATWG 版本的 HTML 標準中，不在 W3C 版本的 HTML5 標準中）。
• time 這個元素在 HTML5 中加入 代表日期 和時間 值；機器可讀的等價形式通過 datetime 屬性指定。
• code 代表計算機代碼 。
• var 代表代碼中的變量 。
• samp 代表程序或電腦的輸出 。
• kbd 代表用戶輸入 ，一般從鍵盤輸出，但也可以代表其他輸入，如語音輸入。
• sub,- sup 分別代表下標 和上標 。
• i 代表一段不同性質 的文字，如技術術語、外文短語等。
• b 代表一段需要被關注 的文字。
• u 代表一段需要下劃線呈現的文本注釋，如標記出拼寫錯誤的文字等。
• mark 這個元素在 HTML5 中加入 代表一段需要被高亮的引用 文字。
• ruby 這個元素在 HTML5 中加入 代表被ruby 注釋 標記的文本，如中文漢字和它的拼音。
• rt 這個元素在 HTML5 中加入 代表ruby 注釋 ，如中文拼音。
• rp 這個元素在 HTML5 中加入 代表 ruby 注釋兩邊的額外插入文本 ，用于在不支持 ruby 注釋顯示的瀏覽器中提供友好的注釋顯示。
• bdi 這個元素在 HTML5 中加入 代表需要脫離 父元素文本方向的一段文本。它允許嵌入一段不同或未知文本方向格式的文本。
• bdo 指定子元素的文本方向 ，顯式地覆蓋默認的文本方向。
• span 代表一段沒有特殊含義的文本，當其他語義元素都不適合文本時候可以使用該元素。
• br 代表換行 。
• wbr 這個元素在 HTML5 中加入 代表建議換行 (Word Break Opportunity) ，當文本太長需要換行時將會在此處添加換行符。
• -
• 文字編輯
• ins 定義增加 到文檔的內容。
• del 定義從文檔移除 的內容。
• -
• 圖片等資源展示
• img 代表一張圖片 。
• iframe 代表一個內聯的框架 。
• embed 這個元素在 HTML5 中加入 代表一個嵌入 的外部資源，如應用程序或交互內容。
• object 代表一個外部資源 ，如圖片、HTML 子文檔、插件等。
• param 代表 - object 元素所指定的插件的參數 。
• video 這個元素在 HTML5 中加入 代表一段視頻 及其視頻文件和字幕，并提供了播放視頻的用戶界面。
• audio 這個元素在 HTML5 中加入 代表一段聲音 ，或音頻流 。
• source 這個元素在 HTML5 中加入 為 - video 或 - audio 這類媒體元素指定媒體源 。
• track 這個元素在 HTML5 中加入 為 - video 或 - audio 這類媒體元素指定文本軌道（字幕） 。
• canvas 這個元素在 HTML5 中加入 代表位圖區域 ，可以通過腳本在它上面實時呈現圖形，如圖表、游戲繪圖等。
• map 與 - area 元素共同定義圖像映射 區域。
• area 與 - map 元素共同定義圖像映射 區域。
• svg 這個元素在 HTML5 中加入 定義一個嵌入式矢量圖 。
• math 這個元素在 HTML5 中加入 定義一段數學公式 。
• -
• 表格
• table 定義多維數據 。
• caption 代表表格的標題 。
• colgroup 代表表格中一組單列或多列 。
• col 代表表格中的列 。
• tbody 代表表格中一塊具體數據 （表格主體）。
• thead 代表表格中一塊列標簽 （表頭）。
• tfoot 代表表格中一塊列摘要 （表尾）。
• tr 代表表格中的行 。
• td 代表表格中的單元格 。
• th 代表表格中的頭部單元格 。
• -
• 表單
• form 代表一個表單 ，由控件組成。
• fieldset 代表控件組 。
• legend 代表 - fieldset 控件組的標題 。
• label 代表表單控件的標題 。
• input 代表允許用戶編輯數據的數據區 （文本框、單選框、復選框等）。
• button 代表按鈕 。
• select 代表下拉框 。
• datalist 這個元素在 HTML5 中加入 代表提供給其他控件的一組預定義選項 。
• optgroup 代表一個選項分組 。
• option 代表一個 - select 元素或 - datalist 元素中的一個選項
• textarea 代表多行文本框 。
• keygen 這個元素在 HTML5 中加入 代表一個密鑰對生成器 控件。
• output 這個元素在 HTML5 中加入 代表計算值 。
• progress 這個元素在 HTML5 中加入 代表進度條 。
• meter 這個元素在 HTML5 中加入 代表滑動條 。
• -
• 導航等交互元素
• details 這個元素在 HTML5 中加入 代表一個用戶可以(點擊)獲取額外信息或控件的小部件 。
• summary 這個元素在 HTML5 中加入 代表 - details 元素的綜述 或標題 。
• menuitem 這個元素在 HTML5 中加入 代表一個用戶可以點擊的菜單項。
• menu 這個元素在 HTML5 中加入 代表菜單。

按照是否Block元素分：

• 1.Empty Elements
• area 與 map 元素共同定義圖像映射 區域。
• base 定義頁面上相對 URL 的基準 URL。
• basefont 4.0種標簽，目前已廢棄
• br 代表換行 。
• col 代表表格中的列 。
• frame 4.0種標簽，目前已廢棄
• hr 代表章節、文章或其他長內容中段落之間的分隔符。
• img 代表一張圖片 。
• input 代表允許用戶編輯數據的數據區 （文本框、單選框、復選框等）。
• isindex 4.0種標簽，目前已廢棄
• link 用于鏈接外部的 CSS 到該文檔。
• meta 定義其他 HTML 元素無法描述的元數據。
• param 代表 object 元素所指定的插件的參數
• embed 代表一個嵌入 的外部資源，如應用程序或交互內容
• -
• 2.Block Elements
• address 定義包含聯系信息的一個章節
• applet 4.0種標簽，目前已廢棄
• blockquote 代表引用自其他來源的內容。
• button 代表按鈕
• center 4.0種標簽，目前已廢棄
• dd 代表出現在它之前術語的定義
• del 定義從文檔移除 的內容。
• dir 4.0種標簽，目前已廢棄
• div 代表一個通用的容器，沒有特殊含義
• dl 定義一個定義列表（一系列術語和其定義）
• dt 代表一個由下一個 dd 定義的術語
• fieldset 代表控件組
• form 代表一個表單 ，由控件組成
• frameset 4.0種標簽，目前已廢棄
• hr 代表章節、文章或其他長內容中段落之間的分隔符
• iframe 代表一個內聯的框架
• ins 定義增加 到文檔的內容
• isindex 4.0種標簽，目前已廢棄
• li 定義列表中的一個列表項
• map 與 area 元素共同定義圖像映射 區域
• menu 代表菜單
• noframes
• noscript 定義當瀏覽器不支持腳本時顯示的替代文字
• object 代表一個外部資源 ，如圖片、HTML 子文檔、插件等
• ol 定義一個有序列表
• p 定義一個段落
• pre 代表其內容已經預先排版過，格式應當保留
• script 定義一個內聯腳本或鏈接到外部腳本。腳本語言是 JavaScript
• table 定義多維數據
• tbody 代表表格中一塊具體數據 （表格主體）
• td 代表表格中的單元格
• tfoot 代表表格中一塊列摘要 （表尾）
• th 代表表格中的頭部單元格
• thead 代表表格中一塊列標簽 （表頭）
• tr 代表表格中的行
• ul 定義一個無序列表
• -
• 3.Inline Elements
• a 代表一個鏈接到其他資源的超鏈接
• abbr 代表省略 或縮寫 ，其完整內容在 title 屬性中
• acronym 4.0種標簽，目前已廢棄
• applet 4.0種標簽，目前已廢棄
• b 代表一段需要被關注 的文字
• basefont 4.0種標簽，目前已廢棄
• bdo 指定子元素的文本方向 ，顯式地覆蓋默認的文本方向
• big 4.0種標簽，目前已廢棄
• br 代表換行
• button 代表按鈕
• cite 代表作品標題
• code 代表計算機代碼
• del 定義從文檔移除 的內容
• dfn 代表一個術語包含在其最近祖先內容中的定義
• em 代表強調 文字
• font 4.0種標簽，目前已廢棄
• i 代表一段不同性質 的文字，如技術術語、外文短語等
• iframe 代表一個內聯的框架
• img 代表一張圖片
• input 代表允許用戶編輯數據的數據區 （文本框、單選框、復選框等）
• ins 定義增加 到文檔的內容
• kbd 4.0種標簽，目前已廢棄
• label 代表表單控件的標題
• map 與 area 元素共同定義圖像映射 區域
• object 代表一個外部資源 ，如圖片、HTML 子文檔、插件等
• q 代表內聯的引用
• s 代表不準確或不相關 的內容
• samp 代表程序或電腦的輸出
• script 定義一個內聯腳本或鏈接到外部腳本。默認腳本語言是 JavaScript
• select 代表下拉框
• small 代表注釋 ，如免責聲明、版權聲明等，對理解文檔不重要
• span 代表一段沒有特殊含義的文本，當其他語義元素都不適合文本時候可以使用該元素
• strike 4.0種標簽，目前已廢棄
• strong 代表特別重要 文字
• sub 代表下標
• sup 代表上標
• textarea 代表多行文本框
• tt 4.0種標簽，目前已廢棄
• u 4.0種標簽，目前已廢棄
• var 代表代碼中的變量
• -

參考文獻：

• https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list
• 本文作者：前端首席體驗師(CheongHu)
• 聯系郵箱：simple2012hcz@126.com
• 版權聲明： 本文章除特別聲明外，均采用 CC BY-NC-SA 4.0 許可協議。轉載請注明出處！

TML是由多種骨頭(標簽)組成的骨架。

HTML5是更多的新骨頭(標簽),同時去掉了以前覺得不好用的骨頭.

CSS是皮膚。CSS3是更美的皮膚

JS控制單個動作。(抬手,張嘴,放下手,抬腿,轉頭,握拳等)是把一組常用動作編排成了一個招式。

(例如吃飯這個動作里面編排了:拿起勺子,挖一勺飯,把勺子貼近嘴,張嘴,勺子送進嘴,勺子拿出嘴,咀嚼.)

作者：潘韜

鏈接：https://www.zhihu.com/question/20408103/answer/15981004

來源：知乎

著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

什么是HTML與CSS

超文本標記語言（英文：HyperText Markup Language，HTML） 是為“網頁創建和其它可在網頁瀏覽器中看到的信息”設計的一種標記語言。HTML被用來結構化信息——例如標題、段落和列表等等，也可用來在一定程度上描述文檔的外觀和語義。1982年由蒂姆·伯納斯-李創建，由IETF用簡化的SGML（標準通用標記語言）語法進行進一步發展的HTML，后來成為國際標準，由萬維網聯盟（W3C）維護。

層疊樣式表（英語：Cascading Style Sheets，簡寫CSS） ，又稱串樣式列表，由W3C定義和維護的標準，一種用來為結構化文檔（如HTML文檔或XML應用）添加樣式（字體、間距和顏色等）的計算機語言。目前最新版本是CSS2.1，為W3C的候選推薦標準。CSS3現在已被大部分現代瀏覽器支持，而下一版的CSS4仍在開發過程中。

上面這段引用自維基百科對 HTML 和 CSS 解釋，簡單地向我們闡述了什么是HTML和CSS，但是如果你從來沒有接觸過它們，那請繼續往下看。

來觀察一下你在哪里見過HTML和CSS

其實任何一個使用過電腦的人幾乎都經歷過 HTML 與 CSS，只是可能我們并不知道而已，看下面這些場景：

• 
  
• 胡總QQ收到新聞消息，說是XX藝人有OO緋聞，這正對胡總胃口，于是就點了一下那個消息窗口，這個時候就自動的彈出了IE瀏覽器（是的，胡總的電腦還是XP的默認配置），然后看到了一個網頁 A 。
• 
  
• 劉哥喜歡財付通，還我錢的時候習慣性的點一下QQ上面的那個我的錢包，然后打開一個對話框 B 。
• 
  
• 劉哥又沒錢了，我也沒錢，然后他打開它的QQ郵箱 C 給胡總發了一封郵件 D ，里面用很紅的大號字寫著：借我十塊錢吃早飯。

看看上面的 A,B,C,D 四種情況，其實都和 HTML+CSS有關，怎么知道它有關？很簡單，A會打開一個網頁，其實B也是一個網頁，只不過不是IE打開的而已，C一般也都是進郵箱的網頁界面，而D，看那個情景的最后面說的： 很紅的大號字 ，這也可以知道 HTML+CSS與這肯定有關，雖然你可能還沒有發現，但是很簡單，在上面的任何一種情景下點擊鼠標后鍵，你肯定會看到一個 查看網頁源代碼 或者意思與之相近的選項，點擊它，你就會看到類似下面這樣的開頭的文字：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-hans" version="XHTML+RDFa 1.0" dir="ltr">
<head profile="http://www.w3.org/1999/xhtml/vocab">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
...
</html>

你現在所看到的就是HTML，它是一種超文本標記語言，它的文檔類型為HTML或者相似的如 XHTML 等，我們可以打開任何一個網頁（網頁都是由 HTML構成的），將它另存為，如果不你作任何修改的話，那么你將會得到一個以 .html 結尾的文檔， .html 是最常見的 HTML 文檔后綴，同時使用的還有 .htm ，這是在 DOS 時代，系統最長只能接受三位的后綴，但是現在的你，應該使用 html 。

那CSS又在哪里呢？你問對了，在上面的四個情景下，要說的話，最后那個 很紅的大號字 應該算是最容易說明 CSS 相關性的了，你可以試試，如果你也使用QQ郵箱（其實一般的情況都是可以的），先輸入“給我借十元錢吃早飯”這段文字，然后選擇它，再點擊上面的編輯工具條（這個和Word／WPS等編輯器是很相似的，只不過它是網頁版的），點擊 Tt 這個按鈕，選擇 最大 這個選項，這會把上面這段文字放得到大，然后點擊那個有一個顏色下邊框的大寫的 A 的按鈕，選擇大紅色，這個時候就成了：很大的大號字了?，F在關鍵的地方來了，點擊那個工具條的 <HTML> 按鈕，可以查看到郵件的源代碼，可以看到（餓……）原來不是CSS：

<font size="6" color="#ff0000">
 給我借十元錢吃早飯
</font>

上面這個還是HTML，不過我們可以看到里面有 color="#ff0000" 這樣的（本來還以為會使用標準的CSS呢），這個就表示，這個里面的文字的顏色為 #ff0000，而 #ff0000 是什么？這個以后會說，在這里就直接告訴你，它表示紅色，雖然CSS沒看著，不過沒關系，把上面那三行刪除掉，然后把下面這三行復制到刪除的位置，再點一下編輯框的左上角的 返回編輯器 的按鈕，你會發現，字還更大了一點，顏色也是紅色：

<div style="font-size: 3em; color: #ff0000">
 給我借十元錢吃早飯
</div>

這是為什么呢？在這里， style="font-size: 3em; color: #ff0000" 這一段就是CSS示例了，它的作用就是樣式化HTML元素，在上面的示例中，它樣式化了它所屬于的那一個 DIV 元素（什么是HTML元素？后面慢慢地說，在這里 DIV就是一個元素），讓它的文字大小為 3em （font-size: 3em），文字顏色為 紅色 (color: #ff0000) 。

到現在為止你應該明白一點了：HTML構成網頁，而CSS樣式化HTML元素，所以，CSS樣式化網頁，你現在也應該清楚的知道了，網頁都是由HTML構成的，然后，再想想，CSS是必須的嗎？

簡單的解釋一個網頁

我們現在先使用一個純文本編輯器（如果你使用的是Windows系統，那么就打開記事本軟件）新建一個文件，另存為 demo.html ，然后將下面這一段代碼復制進該文件，再保存：

<!DOCTYPE html>
<html lang="zh-CN">
 <head>
 <meta charset="utf-8" />
 <title>示例網頁</title>
 </head>
 <body>
 <h1>示例網頁</h1>
 <p>這只是一個很簡單的示例網頁而已，它來自 <a  title="Matrix Stack">Matrix Stack</a>。</p>
 </body>
</html>

保存之后，再雙擊該文件看看。發現沒，雙擊它，并不會再打開記事本，而是打開了一個瀏覽器（你系統當前所設置的默認瀏覽器），瀏覽器里面有兩行內容，一行是字體大一些的，內容為 "示例網頁" ，而下面的那一行則是字體小一些的一句話，類似下面這樣的效果

這只是一個很簡單的示例網頁而已，它來自 Matrix Stack 。

為什么我們會看到這樣的內容，我們輸入的那些如 <html> 或者 <h1> 這些內容都云哪里了呢？如果你發現他們不見了，那就像前面說的一樣，在現在的這個網頁里面點一下鼠標的右鍵，然后點擊查看源代碼，你會發現，源代碼就是你輸入的那一段字符。

在上面的這個示例中，那些在網頁里面看不到的內容都是屬于 HTML 標簽，或者稱之為HTML元素，比如 <h1> ，它就是一個HTML標簽，HTML有很多個不同的標簽，不同的標簽有著它存在的特殊意義，比如 <h1> 表示“一級標題”，或者 Heading 1 ，在HTML中，標題有六級，分別為 h1 至 h6 ，同樣的在上面的示例中，那些 <p> ，*<body> 等等的也都是HTML標簽。

我們打開任何一個網址，其實就是瀏覽器在幫你向網絡上的某一臺服務器請求數據，而一般情況下，如果請求到的數據瀏覽器直接為你顯示出來了，那么請求到的數據一般就是HTML文檔（為什么說一般就是HTML文檔，而不是說肯定就是HTML文檔？），就是上面這個示例中這樣的文字，如上面所說的，因為HTML標簽都是有特殊的意義的，瀏覽器會把每一個標簽按它所表示的 意義 展示 給瀏覽器使用者，這里說的展示，并不表現在直接把那些文字顯示出來，比如，你可以做一個下面這樣的示例，在上面的那個 demo.html 文件中的示例網頁那一行下面，加上下面這一行：

<h2>示例網頁</h2>
<h3>示例網頁</h3>

保存之后，再使用瀏覽器打開，你就會發現，同樣的文字，因為使用的HTML標簽不同，它的字體大小不同了，這種不同就是瀏覽器給這些標簽作出的解釋，當它遇到<h1> 之后，就知道了，這里面的內容是一個一級標題，我需要把這個文字加粗，并且以最大號兒的字體顯示，但是 <h1; 這個是HTMl標簽，這個文字就不需要顯示。

那么CSS在哪里呢？再來修改一下 demo.html 這個文件，把 <h1; 這一行改成下面這樣的：

<h1 style="color: #ff0000; ">示例網頁</h1>

再使用瀏覽器打開該文件，你會發現，示例網頁這四個字現在變成了紅色的了，在這里，你輸入的 style="color: #ff0000; " 就是一行CSS代碼，從前面關于那個QQ郵箱的示例中你應該已經知道了，這表示這個HTML元素里面的文字要以紅色顯示，看到沒，CSS樣式化了HTML元素，我們再來改一下這一行，改成下面這樣的：

<h1 style="color: #ff0000; font-size: 12px;">示例網頁</h1>

使用瀏覽器打開該文件，看到什么效果了？是不是除了把這四個字改成紅色之后，字體還變得很小了？

稍稍深入理解一下HTML與CSS

在上面的這個示例中，我們創建了一個一級標題，一個二級標題，一個三級標題，以及一個段落（ <p> 創建的 ），最開始一級標題很大，還是加粗的，顏色為黑色，后來我們改成了紅色，最后連字體都改成了很小的，那么在我們做這些修改之前，為什么 h1 就比 h2 大呢？原因很簡單，還記得前面說過的瀏覽器看到HTML標簽之后，會根據它的意義展示出該標簽的內容，瀏覽器對于 h1 標簽，它把字體大小改大，再把文字加粗等等，其實就只是為 h1 指定了一個默認的CSS樣式，雖然你沒有明示，但是瀏覽器卻知道，現在開始，你需要安裝一個谷歌瀏覽器（如果不知道怎么安裝，那你就別再繼續往下看了，學學電腦基礎知識要緊），然后使用谷歌瀏覽器打開 demo.html 這個文件（請先把該文件還原成為上面未修改過的那個版本，也就是最開始保存的那個版本，只有一個一級標題和一個段落），打開該文件之后，你也會看到和前面類似的網頁，現在在 示例網頁 四個大字上面點鼠標后鍵，再點擊彈出菜單中的 審查元素 選項，這會在瀏覽器的最下方打開一個分為兩欄的子窗口，后邊的你應該一看就明白，那就是你的網頁源代碼，而右側，有很多選項，點擊第一項 Computed Style 這一項，你就會看到下面這樣的內容：

display: block;
font-size: 32px;
font-weight: bold;
height: 38px;
width: 935px;

上面這段內容中的 width: 935px 可能不一樣，為什么不一樣？這一段代碼就是CSS樣式，但是我們并沒有指定過任何樣式，為什么會有？這是因為瀏覽器會為每一個HTML標簽根據其意義添加默認的樣式，而上面這一段CSS樣式就是谷歌瀏覽器為 h1 標簽添加的默認樣式，這個時候你應該知道為什么在上面我們能把它的字體改成很小了吧？還記得嗎？我們把 h1 的 font-size 設置為 12px 之后，字體就變小了，這是因為新的樣式會把舊的樣式覆蓋掉，所以，在上面的示例中，12px 會覆蓋掉32px，所以，字體會變小。

HTML與CSS的版本

HTML與CSS就像我們常常使用的軟件一樣，也是有它們自己的版本的（比如我們中國人用得最多的軟件QQ就有什么2011版，2012版或者2013版等），對于HTML來說，不同的版本體現在它們有很一些特有的標簽，或者同一個標簽的意義不一樣，而對于CSS來說，不同的版本可能有它們各自特有的屬性，事物總是處于發展的過程中，而且一般都是向好的方向發展，HTML與CSS也一樣，新的版本總是提供了很多的功能與特性以滿足現代的需求，比如最開始網頁不能播放視頻，然后可以了，但是在網頁里面加一個視頻很麻煩，而現在，不但可以播放視頻了，而且加入一個視頻也變得很簡單；以前我們如果想做一個美觀的網頁很麻煩，而現在，什么3D技術，動畫等等都可以通過CSS很簡單的實現，所以，對于版本而言，如果你是一個新手，我建議你直接進入到最新版本中來，而我絕大多數情況下，也都是只講最新的版本，但是由于最新版本并不是任何一個瀏覽器都能很好的支持，所以，如果你將來以這些技術為職業，那可能還需要自己云研究其它版本，或者兼容方案，比如在HTML5中，有一個<nav> 標簽，它表示導航，這在HTML5以前是不存在的，所以不支持HTML5的瀏覽器看到這個標簽之后就不知道怎么辦，那么我們要么改用其它替代標簽，要么使用一些特殊的方法告訴老的瀏覽器應該怎么辦。

如何查看以及如何定義一個HTML文檔的HTML版本

比如下面這個示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-hans" version="XHTML+RDFa 1.0" dir="ltr">
<head profile="http://www.w3.org/1999/xhtml/vocab">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
...
</html>

這個是某一個網站的HTML代碼片段，中間省略了很多，該網頁所使用的HTML版本可以從第一行查看到，即：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">

不過有一個好消息是你以后寫任何一個HTML文檔都不再需要在網頁里面加入這么長的一串了，只需要像下面這樣即可：

<!DOCTYPE html>

最新的HTML5只要求你聲明該文檔的類型為HTML即可，不再需要指定HTML的確切版本，不用擔心老瀏覽器不兼容，它們都會知道這是什么東西。

一點小小的擴展

在上面的所有這些示例中，我們都將CSS樣式寫在HTML標簽里面，作為它們的一個屬性，該屬性名稱為 style ，但是，這僅僅只是示例，在以后的文章中，有可能還會出現這種方式，但是請記住，這并不是說我們就應該這么寫，而正好相反，我們不應該這么寫，原因在于：HTML是用來定義文檔結構的，我們不應該在文檔結構中寫入它的樣式，而應該將它們分開，我們稱之為結構與樣式分離，從而達到內容與樣式分離，簡單的實現方法就是把CSS樣式寫進一個單獨的以 .css 為后綴的文件中，然后在HTML文檔中使用一個 link 標簽將該CSS文檔引入到HTML文檔中來，這樣我們如果想修改HTML中元素的樣式就不需要修改HTML文檔了，而僅僅只需要修改它的樣式文件即可。