HTML-網(wǎng)頁大樓的框架

HTML蜻直、XML饵逐、XHTML 有什么區(qū)別

首先從字面可以看出括眠，他們都是ML，也就是說都是標(biāo)記語言（Markup Language）倍权，所以不同就是前面的部分了掷豺。

HTML

超文本標(biāo)記語言（HyperText Markup Language，簡稱：HTML）

HTML發(fā)展歷史

超文本標(biāo)記語言（第一版）——在1993年6月作為互聯(lián)網(wǎng)工程工作小組（IETF）工作草案發(fā)布（* 并非標(biāo)準(zhǔn)*）：
HTML 2.0——1995年11月作為RFC 1866發(fā)布账锹，在RFC 2854于2000年6月發(fā)布之后被宣布已經(jīng)過時(shí)
HTML 3.2——1997年1月14日萌业，W3C推薦標(biāo)準(zhǔn)
HTML 4.0——1997年12月18日，W3C推薦標(biāo)準(zhǔn)
HTML 4.01（微小改進(jìn)）——1999年12月24日奸柬，W3C推薦標(biāo)準(zhǔn)
HTML 5——2014年10月28日生年，W3C推薦標(biāo)準(zhǔn) （詳見本處參考資料）

XML

可擴(kuò)展標(biāo)記語言（Extensible Markup Language ，簡稱：XML）

1998年2月廓奕，W3C正式批準(zhǔn)了可擴(kuò)展標(biāo)記語言的標(biāo)準(zhǔn)定義抱婉，可擴(kuò)展標(biāo)記語言可以對文檔和數(shù)據(jù)進(jìn)行結(jié)構(gòu)化處理，從而能夠在部門桌粉、客戶和供應(yīng)商之間進(jìn)行交換蒸绩，實(shí)現(xiàn)動(dòng)態(tài)內(nèi)容生成，企業(yè)集成和應(yīng)用開發(fā)铃肯』家冢可擴(kuò)展標(biāo)記語言可以使我們能夠更準(zhǔn)確的搜索，更方便的傳送軟件組件押逼，更好的描述一些事物步藕。例如電子商務(wù)交易等。

它被設(shè)計(jì)用來傳輸和存儲(chǔ)數(shù)據(jù)
超文本標(biāo)記語言被設(shè)計(jì)用來顯示數(shù)據(jù)挑格。
它們都是標(biāo)準(zhǔn)通用標(biāo)記語言的子集咙冗。

什么是可擴(kuò)展標(biāo)記語言？

可擴(kuò)展標(biāo)記語言是一種很像超文本標(biāo)記語言的標(biāo)記語言漂彤。
它的設(shè)計(jì)宗旨是傳輸數(shù)據(jù)雾消，而不是顯示數(shù)據(jù)灾搏。
它的標(biāo)簽沒有被預(yù)定義。您需要自行定義標(biāo)簽立润。
它被設(shè)計(jì)為具有自我描述性狂窑。
它是W3C的推薦標(biāo)準(zhǔn)。

可擴(kuò)展標(biāo)記語言和超文本標(biāo)記語言之間的差異

超文本標(biāo)記語言旨在顯示信息范删，而它旨在傳輸信息蕾域。對它最好的描述是：它是獨(dú)立于軟件和硬件的信息傳輸工具。

它不是超文本標(biāo)記語言的替代到旦。
它是對超文本標(biāo)記語言的補(bǔ)充。
它和超文本標(biāo)記語言為不同的目的而設(shè)計(jì)：

它被設(shè)計(jì)用來傳輸和存儲(chǔ)數(shù)據(jù)巨缘，其焦點(diǎn)是數(shù)據(jù)的內(nèi)容添忘。
超文本標(biāo)記語言被設(shè)計(jì)用來顯示數(shù)據(jù)，其焦點(diǎn)是數(shù)據(jù)的外觀若锁。

可擴(kuò)展標(biāo)記語言是W3C的推薦標(biāo)準(zhǔn)

XML 于 1998 年 2 月 10 日成為 W3C 的推薦標(biāo)準(zhǔn)搁骑。

可擴(kuò)展標(biāo)記語言無所不在

XML 是各種應(yīng)用程序之間進(jìn)行數(shù)據(jù)傳輸?shù)淖畛Ｓ玫墓ぞ摺?/p>

XHTML

可擴(kuò)展標(biāo)記語言（Extensible HyperText Markup Language，簡稱：XHTML）
可擴(kuò)展超文本標(biāo)記語言又固，是一種置標(biāo)語言仲器，表現(xiàn)方式與超文本標(biāo)記語言（HTML）類似，不過語法上更加嚴(yán)格仰冠。
HTML是一種基本的WEB網(wǎng)頁設(shè)計(jì)語言乏冀，XHTML是一個(gè)基于可擴(kuò)展標(biāo)記語言的標(biāo)記語言，看起來與HTML有些相象洋只，只有一些小的但重要的區(qū)別辆沦，XHTML就是一個(gè)扮演著類似HTML的角色的可擴(kuò)展標(biāo)記語言（XML），所以识虚，本質(zhì)上說肢扯，XHTML是一個(gè)過渡技術(shù)，結(jié)合了部分XML的強(qiáng)大功能及大多數(shù)HTML的簡單特性担锤。

2000年底捆憎，國際W3C組織（萬維網(wǎng)聯(lián)盟）組織公布發(fā)行了XHTML 1.0版本。XHTML 1.0是一種在HTML 4.0基礎(chǔ)上優(yōu)化和改進(jìn)的的新語言宫静，目的是基于XML應(yīng)用蚊夫。XHTML是一種增強(qiáng)了的HTML,XHTML 是更嚴(yán)謹(jǐn)更純凈的 HTML 版本。它的可擴(kuò)展性和靈活性將適應(yīng)未來網(wǎng)絡(luò)應(yīng)用更多的需求育拨。XML雖然數(shù)據(jù)轉(zhuǎn)換能力強(qiáng)大谨履，完全可以替代HTML，但面對成千上萬已有的基于HTML語言設(shè)計(jì)的網(wǎng)站熬丧，直接采用XML還為時(shí)過早笋粟。因此怀挠，在HTML4.0的基礎(chǔ)上，用XML的規(guī)則對其進(jìn)行擴(kuò)展害捕，得到了XHTML绿淋。所以，建立XHTML的目的就是實(shí)現(xiàn)HTML向XML的過渡尝盼。國際上在網(wǎng)站設(shè)計(jì)中推崇的WEB標(biāo)準(zhǔn)就是基于XHTML的應(yīng)用（即通常所說的CSS+DIV）吞滞。

XHTML與HTML的區(qū)別

XHTML是當(dāng)前HTML版的繼承者。HTML語法要求比較松散盾沫，這樣對網(wǎng)頁編寫者來說裁赠，比較方便，但對于機(jī)器來說赴精，語言的語法越松散佩捞，處理起來就越困難，對于傳統(tǒng)的計(jì)算機(jī)來說蕾哟，還有能力兼容松散語法一忱，但對于許多其他設(shè)備，比如手機(jī)谭确，難度就比較大帘营。因此產(chǎn)生了語法要求更加嚴(yán)格的XHTML。

大部分常見的瀏覽器都可以正確地解析XHTML逐哈，即使老一點(diǎn)的瀏覽器芬迄，XHTML作為HTML的一個(gè)子集，許多也可以解析鞠眉。也就是說薯鼠，幾乎所有的網(wǎng)頁瀏覽器在正確解析HTML的同時(shí)，可兼容XHTML械蹋。當(dāng)然出皇，從HTML完全轉(zhuǎn)移到XHTML，還需要一個(gè)過程哗戈。

跟層疊式樣式表（外語縮寫：CSS）結(jié)合后郊艘，XHTML能發(fā)揮真正的威力；這使實(shí)現(xiàn)樣式跟內(nèi)容的分離的同時(shí)唯咬，又能有機(jī)地組合網(wǎng)頁代碼纱注，在另外的單獨(dú)文件中，還可以混合各種XML應(yīng)用胆胰，比如MathML狞贱、SVG。

從HTML到XHTML過渡的變化比較小蜀涨，主要是為了適應(yīng)XML瞎嬉。最大的變化在于文檔必須是良構(gòu)的蝎毡，所有標(biāo)簽必須閉合，也就是說開始標(biāo)簽要有相應(yīng)的結(jié)束標(biāo)簽氧枣。另外沐兵，XHTML中所有的標(biāo)簽必須小寫。而按照HTML 2.0以來的傳統(tǒng)便监，很多人都是將標(biāo)簽大寫扎谎，這點(diǎn)兩者的差異顯著。在XHTML中烧董，所有的參數(shù)值毁靶，包括數(shù)字，必須用雙引號括起來（而在SGML和HTML中解藻，引號不是必須的老充，當(dāng)內(nèi)容只是數(shù)字、字母及其它允許的特殊字符時(shí)螟左，可以不用引號）。所有元素觅够，包括空元素胶背，比如img、br等喘先，也都必須閉合钳吟，實(shí)現(xiàn)的方式是在開始標(biāo)簽?zāi)┪布尤胄笨福÷詤?shù)窘拯，比如<option selected>红且，也不允許，必須用<option selected="selected"/>涤姊。兩者的詳細(xì)差別暇番，可通過W3C XHTML說明來查閱。

總結(jié)

XHTML 指擴(kuò)展超文本標(biāo)簽語言（EXtensible HyperText Markup Language）思喊。
XHTML 的目標(biāo)是取代 HTML壁酬。
XHTML 與 HTML 4.01 幾乎是相同的。
XHTML 是更嚴(yán)格更純凈的 HTML 版本恨课。
XHTML 是作為一種 XML 應(yīng)用被重新定義的 HTML舆乔。

表現(xiàn)（內(nèi)容）、樣式剂公、行為分離原則

寫HTML的時(shí)候先不管樣式希俩，重點(diǎn)放在HTML的結(jié)構(gòu)和語義化上，讓HTML能體現(xiàn)頁面結(jié)構(gòu)或者內(nèi)容纲辽。之后再去寫樣式颜武。
寫JS的時(shí)候璃搜，盡量不要用JS去直接操作樣式，而是通過給元素添加刪除class來控制樣式變化
HTML內(nèi)不允許出現(xiàn)屬性樣式盒刚，盡量不要出現(xiàn)行內(nèi)樣式腺劣。

HTML語義化

語義化HTML是一種編寫HTML的方式

1. 運(yùn)用合適的標(biāo)簽
2. 使用合理的代碼結(jié)構(gòu)
3. 便于開發(fā)者閱讀
4. 使瀏覽器和爬蟲可以很好地解析

常見的meta標(biāo)簽

1. <meta charset='xxx'>

<meta charset='xxx'>

告訴瀏覽器，我這個(gè)頁面的代碼是用的xxx編碼方式因块。（用xxx來解碼）

2. <meta http-equiv='參數(shù)' content='參數(shù)變量值'>

<meta http-equiv='參數(shù)' content='參數(shù)變量值'>

瀏覽器讀到這些代碼時(shí)橘原，可以得到一些頁面信息，更好的顯示網(wǎng)頁內(nèi)容涡上。

meta http-equiv='expires' content='時(shí)間' ：【expires期限】趾断，告訴瀏覽器到了某個(gè)時(shí)間就重新傳輸一次頁面。
meta http-equic='refresh' content='數(shù)字;url=一個(gè)網(wǎng)址' ：【refresh刷新】吩愧，告訴瀏覽器在【數(shù)字】秒后跳轉(zhuǎn)到【一個(gè)網(wǎng)址】
meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' :強(qiáng)制瀏覽器按照特定的版本標(biāo)準(zhǔn)進(jìn)行渲染芋酌。但不支持IE7及以下版本。如果是ie瀏覽器就用最新的ie渲染雁佳，如果是雙核瀏覽器就用chrome內(nèi)核脐帝。

3. <meta name='參數(shù)' content='具體的參數(shù)值'>

主要用于描述網(wǎng)頁，更便于搜索機(jī)器人讀取代碼糖权。

meta name='viewport' content='width=xxx等等' ：讓移動(dòng)端能夠以更合理的比例顯示網(wǎng)頁
meta name='keywords' content='xxxx' ：告訴搜索引擎堵腹，當(dāng)前頁面的關(guān)鍵字
meta name='dscription' content='xxx' ：告訴搜索引擎，當(dāng)前頁面的主要內(nèi)容是xxx

HTML之前的準(zhǔn)備工作

1. 文檔聲明

告知瀏覽器的解析器星澳，用什么文檔類型規(guī)范來解析這個(gè)文檔疚顷。

2. DOCYTYPE html

<!DOCYTYPE html>

在HTML文件開頭第一行，出現(xiàn)的<!DOCYTYPE html>的意思是禁偎，告訴加載網(wǎng)頁的瀏覽器腿堤，我要用html5的方式解碼，也就是標(biāo)準(zhǔn)模式如暖。
如果沒有文檔聲明笆檀，瀏覽器就會(huì)使用混雜模式，可能會(huì)出現(xiàn)亂碼的情況装处。

2. 標(biāo)準(zhǔn)模式和混雜模式

在標(biāo)準(zhǔn)模式中误债，瀏覽器以其支持的最高標(biāo)準(zhǔn)呈現(xiàn)頁面
在混雜模式中，頁面以一種比較寬松的向后兼容的方式顯示妄迁∏薜福混雜模式通常模擬老式瀏覽器的行為以防止老站點(diǎn)無法工作。

瀏覽器亂碼登淘？

因?yàn)榇a的編碼保存方式和瀏覽器的解碼方式不同箫老，從而導(dǎo)致加載出的網(wǎng)頁一堆亂碼，所以只要保證編輯器寫代碼的時(shí)候首行的聲明好編碼方式
<meta charset='xxx'>
并且保存的時(shí)候仍選擇同樣的編碼方式黔州，就不會(huì)出現(xiàn)亂碼的情況了

常見的瀏覽器及其對應(yīng)內(nèi)核

1. 使用Trident的是internet explorer耍鬓，國產(chǎn)的絕大部分瀏覽器阔籽。Trident是就是ie內(nèi)核
2. 使用Gecko的是Mozilla Firefox，使用 Gecko 內(nèi)核的瀏覽器也有不少牲蜀，如 Netscape MozillaSuite/SeaMonkey 等
3. 使用Presto的是opera笆制，這是目前公認(rèn)網(wǎng)頁瀏覽速度最快的瀏覽器內(nèi)核
4. 使用WebKit的有蘋果的safari，谷歌的chrome涣达，還有國產(chǎn)的大部分雙核瀏覽器其中一核就是WebKit

HTML常見標(biāo)簽及使用時(shí)機(jī)

常用標(biāo)簽	使用時(shí)機(jī)	代碼樣式
h1~h6	標(biāo)題	`<h1>This is a heading</h1>`
p	段落	`<p>This is my first paragraph.</p>`
a	鏈接	`<a >This is a link</a>`
img	展示一張圖片	`![](boat.gif)`
div	給頁面劃分區(qū)塊	`<div id="header">...</div>`
ul li	無序列表	如下

<ul class="nav">
  <li><a href="#">首頁</a></li>
  <li><a href="#">關(guān)于</a></li>
  <li>
    <a href="#">更多</a>
    <ul>
      <li>聯(lián)系</li>
      <li>地址</li>
    </ul>
  </li>
</ul>

常用標(biāo)簽	使用時(shí)機(jī)	代碼樣式
ol li	有序列表	如下

<h2>把大象關(guān)到冰箱的步驟</h2>
<ol>
  <li>把大象變小</li>
  <li>打開冰箱</li>
  <li>把大象塞進(jìn)去</li>
</ol>

常用標(biāo)簽	使用時(shí)機(jī)	代碼樣式
dl dt dd	展示一系列 “標(biāo)題:內(nèi)容... ”	如下

<dl>
  <dt>商品名稱:</dt>
  <dd>青花瓷</dd>
  <dt>特征:</dt>
  <dd>白色</dd>
  <dd>圓口</dd>
  <dt>商品介紹</dt>
  <dd>這是一個(gè)年代久遠(yuǎn)的瓷器在辆，很貴，易碎</dd>
</dl>

常用標(biāo)簽	使用時(shí)機(jī)	代碼樣式
button	按鈕	`<button>點(diǎn)我</button>`
em	需要強(qiáng)調(diào)一下	`<p>小谷 <em>2</em> 歲了</p>`
strong	很重要度苔、強(qiáng)調(diào)性更強(qiáng)	`<p>優(yōu)惠 <strong>100</strong> 元</p>`
iframe	嵌入一個(gè)頁面	如下

<iframe src="http://jirengu.com" name="myPage"></iframe>
<p><a  target="myPage">W3Cschool.cc</a></p>

常用標(biāo)簽	使用時(shí)機(jī)	代碼樣式
table	表格	如下

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年紀(jì)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>姓名</th>
      <th>年紀(jì)</th>
    </tr>
    <tr>
      <td>小明</td>
      <td>18</td>
    </tr>
    <tr>
      <td>小花</td>
      <td>20</td>
    </tr>  
  </tbody>
  <tfoot></tfoot>
</table>

<table>
  <tr>
    <th>姓名</th>
    <th>年紀(jì)</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>18</td>
  </tr>
  <tr>
    <td>小花</td>
    <td>20</td>
  </tr>
</table>

本博客版權(quán)歸流光號船長和饑人谷所有匆篓，轉(zhuǎn)載需說明來源

最后編輯于：2017.12.05 07:03:40

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市寇窑，隨后出現(xiàn)的幾起案子鸦概，更是在濱河造成了極大的恐慌，老刑警劉巖甩骏，帶你破解...
沈念sama閱讀 221,331評論 6贊 515
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件窗市，死亡現(xiàn)場離奇詭異，居然都是意外死亡饮笛，警方通過查閱死者的電腦和手機(jī)谨设，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 94,372評論 3贊 398
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來缎浇，“玉大人，你說我怎么就攤上這事赴肚∷囟澹” “怎么了？”我有些...
開封第一講書人閱讀 167,755評論 0贊 360
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵誉券，是天一觀的道長指厌。經(jīng)常有香客問我，道長踊跟，這世上最難降的妖魔是什么踩验？我笑而不...
開封第一講書人閱讀 59,528評論 1贊 296
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮商玫，結(jié)果婚禮上箕憾，老公的妹妹穿的比我還像新娘。我一直安慰自己拳昌，他們只是感情好袭异，可當(dāng)我...
茶點(diǎn)故事閱讀 68,526評論 6贊 397
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著炬藤，像睡著了一般御铃。火紅的嫁衣襯著肌膚如雪碴里。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 52,166評論 1贊 308
城市分裂傳說
那天上真，我揣著相機(jī)與錄音咬腋，去河邊找鬼。笑死睡互，一個(gè)胖子當(dāng)著我的面吹牛根竿，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播湃缎，決...
沈念sama閱讀 40,768評論 3贊 421
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼犀填，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了嗓违？” 一聲冷哼從身側(cè)響起九巡，我...
開封第一講書人閱讀 39,664評論 0贊 276
萬榮殺人案實(shí)錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎蹂季，沒想到半個(gè)月后冕广，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 46,205評論 1贊 319
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡偿洁，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 38,290評論 3贊 340
?白月光啟示錄
正文我和宋清朗相戀三年撒汉，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片涕滋。...
茶點(diǎn)故事閱讀 40,435評論 1贊 352
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡睬辐，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出宾肺，到底是詐尸還是另有隱情溯饵，我是刑警寧澤，帶...
沈念sama閱讀 36,126評論 5贊 349
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布锨用，位于F島的核電站丰刊，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏增拥。R本人自食惡果不足惜啄巧，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,804評論 3贊 333
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望掌栅。院中可真熱鬧秩仆，春花似錦、人聲如沸渣玲。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,276評論 0贊 23
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至逾苫，卻和暖如春卿城，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背铅搓。一陣腳步聲響...
開封第一講書人閱讀 33,393評論 1贊 272
情欲美人皮
我被黑心中介騙來泰國打工瑟押，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人星掰。一個(gè)月前我還...
沈念sama閱讀 48,818評論 3贊 376
代替公主和親
正文我出身青樓多望，卻偏偏與公主長得像，于是被迫代替她去往敵國和親氢烘。傳聞我的和親對象是個(gè)殘疾皇子怀偷，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,442評論 2贊 359