什么是HTML？
超文本標(biāo)記語言(Hypertext Markup Language，簡稱：HTML)大猛，是一種用于描述網(wǎng)頁的標(biāo)記語言历涝，由一系列的HTML元素組成诅需，每個元素（elements）都有其各自的結(jié)構(gòu)作用。
- 超文本的基本特征就是可以超鏈接文檔荧库，用來顯示文本及與文本之間相關(guān)的內(nèi)容堰塌。
- HTML元素大多數(shù)都是由一個開始標(biāo)簽（opening tag）、結(jié)束標(biāo)簽（closing tag）和兩者之間的元素內(nèi)容組成分衫。例如：<h1>hello world</h1>中场刑，<h1>這個是開始標(biāo)簽，它本身還可以包含屬性(Attribute)蚪战，用來指示元素的附加的性質(zhì)牵现。</h1>是結(jié)束標(biāo)簽,元素內(nèi)容為hello world。
- HTML不是編程語言邀桑，是一種標(biāo)記語言瞎疼。
什么是HTML5？
HTML5是HTML最新的修訂版本壁畸，提供了一些新的語義贼急、圖形以及多媒體元素茅茂，如<header>、<footer>太抓、<nav>標(biāo)簽等等空闲，這些語義化的標(biāo)簽，也便于我們更加清晰的閱讀與定義HTML文檔內(nèi)容走敌。
HTML碴倾、XML、XHTML的區(qū)別
- HTML掉丽，超文本標(biāo)記語言跌榔，是語法較為松散、不嚴(yán)格的Web語言机打。
- XML矫户，可擴(kuò)展標(biāo)記語言，主要用于儲存數(shù)據(jù)和結(jié)構(gòu)残邀。
- XHTML皆辽，可擴(kuò)展超文本標(biāo)記語言，基于XML芥挣，作用于HTML類似驱闷，但語法更嚴(yán)格。
HTML文檔的基本結(jié)構(gòu)
<!DOCTYPE html>
<html lang=“zh">
<head>
<meta charset="utf-8”>
<meta http-equiv=“X-UA-Compatible” content="IE=edge,chrome=1”>
<meta name=“viewport" content="width=device-width, initial-scale=1,maximum-scale=1”>
<meta name="keywords" content=“頁面的關(guān)鍵字”>
<meta name="description" content="頁面描述內(nèi)容">
<title>網(wǎng)頁標(biāo)題</title>
</head>
<body>
<p>這是一個段落</p>
</body>
</html>
<!DOCTYPE>
<!DOCTYPE html>是目前最推薦的HTML5文檔類型聲明空免。<!DOCTYPE>聲明只能放在html文檔中的第一行空另，在它前面不能出現(xiàn)任何注釋、空白字符以及標(biāo)簽內(nèi)容蹋砚。用來告知瀏覽器這個頁面是使用HTML5文檔類型來渲染頁面的扼菠，可以寫為小寫<!doctype html>。
瀏覽器渲染模式有兩種坝咐，一種是標(biāo)準(zhǔn)模式另外一種是怪異模式循榆。如果我們沒有在HTML文檔中書寫<!doctype>聲明，那么瀏覽器就會選擇怪異模式對頁面進(jìn)行渲染墨坚。
- 標(biāo)準(zhǔn)模式（Standards Mode）：在標(biāo)準(zhǔn)模式下瀏覽器會按照W3C標(biāo)準(zhǔn)去渲染頁面秧饮。如<!DOCYTPE html>就是指定了HTML5標(biāo)準(zhǔn)去進(jìn)行頁面渲染。
- 怪異模式（Quirks Mode）：與標(biāo)準(zhǔn)模式相對應(yīng)的是怪異模式泽篮，也稱為混雜模式软吐，是瀏覽器為了兼容很早之前針對舊版本瀏覽器設(shè)計费尽、并未嚴(yán)格遵循 W3C 標(biāo)準(zhǔn)的網(wǎng)頁而產(chǎn)生的一種頁面渲染模式杭抠。如果沒有書寫<!doctype>聲明夷磕，瀏覽器就會處于怪異模式對頁面進(jìn)行渲染，會對CSS布局造成影響亏拉。
<html lang=“zh”>
<html>標(biāo)簽定義了整個HTML文檔扣蜻，所有標(biāo)簽都包含在<html></html>中寸癌，也被稱作根元素。
lang屬性定義當(dāng)前頁面顯示的語言弱贼，這段代碼是告知瀏覽器當(dāng)前頁面使用的是中文。
<head>
<head>元素. 這個元素包含了所有和你頁面相關(guān)的信息磷蛹，其中的信息雖然不會被用戶所看到吮旅，但卻是文檔的最基本的元信息。
<meta>
用于描述一個HTML網(wǎng)頁文檔的屬性味咳，例如使用語言庇勃、網(wǎng)頁描述、關(guān)鍵字等槽驶，是<head>標(biāo)簽中的一個很重要的標(biāo)簽责嚷。
META標(biāo)簽可分為兩大部分：HTTP-EQUIV和NAME變量。
- <meta charset="UTF-8”>
聲明文檔使用的字符編碼掂铐。charset 屬性是 HTML5 中的新屬性罕拂，它是用來告知瀏覽器這個html文檔是使用utf-8的字符編碼進(jìn)行解析。如果網(wǎng)頁中出現(xiàn)了亂碼的問題全陨，通常是因為html文檔保存的編碼方式和瀏覽器的解碼方式不同所造成的爆班，需要將字符編碼聲明與保存的編碼方式保持一致即可。
- <meta http-equiv=“X-UA-compatible” content="IE=edge,chrome=1>優(yōu)先使用最新版本的IE進(jìn)行渲染辱姨，如果支持Chrome內(nèi)核就用Chrome內(nèi)核去渲染柿菩。
- <meta name=“viewport" content="width=device-width, initial-scale=1,maximum-scale=1”>，針對移動端網(wǎng)頁進(jìn)行頁面優(yōu)化雨涛，用來控制視口的尺寸及比例枢舶。
- <meta name="keywords" content="網(wǎng)頁的關(guān)鍵字">，告訴搜索引擎網(wǎng)頁中的關(guān)鍵字替久，用于搜索引擎優(yōu)化凉泄，當(dāng)爬蟲爬取頁面的時候，就會知道當(dāng)前頁面的關(guān)鍵詞是什么侣肄，這樣用戶在網(wǎng)頁中搜索這個關(guān)鍵詞時就能很容易找到這個頁面旧困。
- <meta name="description" content="網(wǎng)頁內(nèi)容描述">用來告訴搜索引擎你的網(wǎng)站主要內(nèi)容，描述內(nèi)容一般控制在150字以內(nèi)稼锅，多余部分將不會顯示吼具。
<title>
用來定義文檔的標(biāo)題。
<body>
被<body>標(biāo)簽所包含的都是你想讓用戶看到的內(nèi)容矩距。
HTML常用標(biāo)簽
<h1>
標(biāo)題（heading）
頁面中文檔標(biāo)題共六級拗盒，<h1>是最大的標(biāo)題，<h6>是最小的標(biāo)題锥债。通常一個頁面中只有一個<h1>陡蝇。
<h1>一級標(biāo)題</h1>
<h2>二級標(biāo)題</h2>
<h3>三級標(biāo)題</h3>
<h4>四級標(biāo)題</h4>
<h5>五級標(biāo)題</h5>
<h6>六級標(biāo)題</h6>
<p>
段落（paragraph）
段落標(biāo)簽痊臭，在大段文字中使用。
<p>這是一個段落</p>
<a>
錨點(diǎn)(anchor)
超鏈接是通過<a>標(biāo)簽來定義的登夫，用于從一個頁面鏈接到另一個頁面广匙。
<a href=“鏈接地址” target=“_blank”>這是一個鏈接</a>
href屬性：連接地址
target屬性：_blank在新的頁面打開，_self在當(dāng)前頁面中打開恼策。
<img>
圖片（images）
展示頁面中的一張圖片鸦致，自閉和標(biāo)簽，最后不需要加 “ / ”涣楷。
<img src=“a .png” alt=“頭像" >
src屬性：圖片路徑地址分唾。
alt屬性：用于顯示圖片的替換文本信息，當(dāng)圖片未加載成功時狮斗，會顯示alt中的文字绽乔。添加alt屬性有利于搜索引擎識別。
<div>
塊（division）
語義為“一大塊”碳褒，用于給頁面劃分區(qū)塊或者一個區(qū)域部分折砸，使頁面結(jié)構(gòu)更清晰。
<div id=“header” >…</div>
<div id=“content” >…</div>
<div id=“footer” >…</div>
<ul>
無序列表（unsort list）
用于表示并列的內(nèi)容沙峻，ul的直接子元素是li鞍爱，可以嵌套。
<ul class=“nav”>
<li><a href=“#”>首頁</a></li>
<li><a href=“#”>關(guān)于</a></li>
<li><a href=“#”>更多</a></li>
<ul>
<li>聯(lián)系</li>
<li>地址</li>
<ul>
</ul>
<ol>
有序列表（order list）
有序列表用于表示帶步驟或者編號的并列內(nèi)容专酗，<ol>的直接子元素只能是<li>睹逃，可以嵌套。
<ol>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ul>
<dl>
自定義列表（definition list）
用于展示一系列“標(biāo)題：內(nèi)容”的場景祷肯。
<dl>
<dt>列表標(biāo)題</dt>
<dd>列表內(nèi)容</dd>
<dd>列表內(nèi)容</dd>
<dd>列表內(nèi)容</dd>
</dl>
<button>
用于定義按鈕沉填。
<button>按鈕</button>
<em>
強(qiáng)調(diào)(emphasized)
定義強(qiáng)調(diào)文本
<p>讓我<em>受益匪淺</em>的一本書</p>
<strong>
用來定義很重要的文本，強(qiáng)調(diào)性更強(qiáng)
<p>優(yōu)惠<strong>100</strong>元</p>
<iframe>
內(nèi)聯(lián)框架元素佑笋，可用于在當(dāng)前頁面中嵌入另一個頁面翼闹。
<iframe src="http://www.baidu.com" name="mypage"></iframe>
<p><a target="mypage">W3C</a></p>
<table>
用于展示表格。thead tbody tfoot可省略蒋纬。
<th> Table head cell 表格中的表頭單元格猎荠。
<tr> table row表格中的行。
<td> table data cell 表格中的單元格蜀备。
<table>
<tr>
<th>姓名</th>
<th>性別</th>
</tr>
<tr>
<td>小李</td>
<td>男</td>
</tr>
<tr>
<td>小趙</td>
<td>女</td>
</tr>
</table>
參考資料：
