HTML,XML和XHTML的區(qū)別和聯(lián)系

XHTML產(chǎn)生的原因杭煎，一方面是為了和未來的XML大規(guī)模的應(yīng)用接軌习绢，一方面還要兼容目前的數(shù)以萬計的用HTML編寫的網(wǎng)頁以及他們的設(shè)計者驹暑，開發(fā)者相兼容，于是便出現(xiàn)了這個東西。以HTML編寫的網(wǎng)頁中墅拭，標記使用有些混亂淤齐。由于許多瀏覽器都有自己的私有標簽股囊，而私有標簽的大規(guī)模應(yīng)用，就導(dǎo)致了不同瀏覽器上訪問同一個網(wǎng)頁的結(jié)果不同更啄。舉個例子iframe標簽稚疹，就是IE的私有標簽。

而XHTML產(chǎn)生的原因祭务，正是為了統(tǒng)一這種標記使用混亂的局面内狗，瀏覽器廠商將聯(lián)合采用"嚴格的錯誤防御標準"，如果XML代碼不兼容义锥，瀏覽器將拒絕顯示柳沙。

這可以說也是對瀏覽器的一個改變，目前的瀏覽器拌倍，為了最大限度的容錯赂鲤，把網(wǎng)頁中的內(nèi)容，最大限度的顯示出來柱恤。而改變之后数初，變成，只要不標準梗顺，就不顯示泡孩。感覺就好像代碼編譯中的警告信息一樣，目前荚守，是忽略有可能導(dǎo)致問題的警告珍德，而將來练般，將會把警告也作為錯誤來處理。

HTML是一種基本的WEB網(wǎng)頁設(shè)計語言锈候，XHTML是一個基于XML的置標語言薄料，看起來與HTML有些相象，只有一些小的但重要的區(qū)別泵琳，XHTML就是一個扮演著類似HTML的角色的XML摄职，所以，本質(zhì)上說获列，XHTML是一個過渡技術(shù)谷市，結(jié)合了XML（有幾分）的強大功能及HTML（大多數(shù)）的簡單特性。

2000年底击孩，國際W3C(World Wide Web Consortium)組織公布發(fā)行了XHTML 1.0版本迫悠。XHTML 1.0是一種在HTML 4.0基礎(chǔ)上優(yōu)化和改進的的新語言，目的是基于XML應(yīng)用巩梢。XHTML是一種增強了的HTML,它的可擴展性和靈活性將適應(yīng)未來網(wǎng)絡(luò)應(yīng)用更多的需求创泄。下面是W3C的HTML工作組主席Steven Pemberton回答的關(guān)于XHTML的常見基礎(chǔ)問題。

1. XHTML解決HTML語言所存在的嚴重制約其發(fā)展的問題括蝠。HTML發(fā)展到今天存在三個主要缺點：不能適應(yīng)現(xiàn)在越多的網(wǎng)絡(luò)設(shè)備和應(yīng)用的需要鞠抑，比如手機、PDA忌警、信息家電都不能直接顯示HTML搁拙；由于HTML代碼不規(guī)范、臃腫法绵，瀏覽器需要足夠智能和龐大才能夠正確顯示HTML箕速；數(shù)據(jù)與表現(xiàn)混雜，這樣你的頁面要改變顯示礼烈，就必須重新制作HTML弧满。因此HTML需要發(fā)展才能解決這個問題，于是W3C又制定了XHTML此熬，XHTML是HTML向XML過度的一個橋梁庭呜。
2. XML是web發(fā)展的趨勢，所以人們急切的希望加入XML的潮流中犀忱。XHTML是當前替代HTML4標記語言的標準募谎，使用XHTML1.0，只要你小心遵守一些簡單規(guī)則阴汇，就可以設(shè)計出既適合XML系統(tǒng)数冬，又適合當前大部分HTML瀏覽器的頁面。這個意思就是說，你可以立刻設(shè)計使用XML拐纱，而不需要等到人們都使用支持XML的瀏覽器铜异。這個指導(dǎo)方針可以使web平滑的過渡到XML。
3. 使用XHTML的另一個優(yōu)勢是：它非常嚴密秸架。當前網(wǎng)絡(luò)上的HTML的糟糕情況讓人震驚揍庄，早期的瀏覽器接受私有的HTML標簽，所以人們在頁面設(shè)計完畢后必須使用各種瀏覽器來檢測頁面东抹，看是否兼容蚂子，往往會有許多莫名其妙的差異，人們不得不修改設(shè)計以便適應(yīng)不同的瀏覽器缭黔。
4. XHTML是能與其它基于XML的標記語言食茎、應(yīng)用程序及協(xié)議進行良好的交互工作。
5. XHTML是Web標準家族的一部分馏谨，能很好在無線設(shè)備等其它用戶代理上别渔。
6. 在網(wǎng)站設(shè)計方面，XHTML可助你去掉表現(xiàn)層代碼的惡習(xí)田巴，幫助你養(yǎng)成標記校驗來測試頁面工作的習(xí)慣钠糊。

HTML語義化

什么是HTML語義化

HTML標簽可分為有語義的標簽和無語義的標簽挟秤。比如有語義的標簽中table表示表格壹哺，form表示表單，a標簽表示超鏈接艘刚，strong標簽表強調(diào)管宵。無語義標簽典型的有<div>和<span>。
HTML語義化就是根據(jù)頁面內(nèi)容的結(jié)構(gòu)（結(jié)構(gòu)語義化）攀甚，選擇合適的語義標簽（標簽語義化）來書寫html頁面

為什么要語義化

1. 裸奔時好看：為了在去掉或丟失CSS樣式的情況下,頁面也能呈現(xiàn)出很好地內(nèi)容結(jié)構(gòu)箩朴、代碼結(jié)構(gòu)
2. 有利于SEO：爬蟲依賴于語義標簽來確定上下文和各個關(guān)鍵字的權(quán)重，有助于爬蟲抓取更多的有效信息
3. 方便其他設(shè)備解析：使屏幕閱讀器秋度、盲人閱讀器炸庞、移動設(shè)備等以一種有意義的方式來渲染網(wǎng)頁
4. 便于團隊開發(fā)和維護：語義化代碼更具可讀性醉锄，遵循這個標準可以減少差異化昔汉。

寫HTML代碼時應(yīng)注意什么？

1. 盡量使用有語義的標对碌，如標題（H1~H6）事期、列表（ul滥壕、ol、li兽泣、dd绎橘、dl、dt）唠倦、強調(diào)（strong称鳞、em）涮较、段落（p）等2、盡可能少使用無語義的標簽div和span冈止；
2. 在語義不明顯時法希，既可以使用div或者p時，盡量用p, 因為p在默認情況下有上下間距靶瘸，對兼容特殊終端有利苫亦；不要使用純樣式標簽，如：b怨咪、font屋剑、u等，改用css設(shè)置诗眨。
3. 需要強調(diào)的文本唉匾，可以包含在strong或者em標簽中（瀏覽器預(yù)設(shè)樣式，能用CSS指定就不用他們）匠楚，strong默認樣式是加粗（不要用b）巍膘，em是斜體（不用i）；
4. 使用表格時芋簿，標題要用caption峡懈，表頭用thead，主體部分用tbody包圍与斤，尾部用tfoot包圍肪康。表頭和一般單元格要區(qū)分開，表頭用th撩穿，單元格用td磷支；表單域要用fieldset標簽包起來，并用legend標簽說明表單的用途食寡；
5. 每個input標簽對應(yīng)的說明文本都需要使用label標簽雾狈，并且通過為input設(shè)置id屬性，在lable標簽中設(shè)置for=someld來讓說明文本和相對應(yīng)的input關(guān)聯(lián)起來抵皱。

內(nèi)容與樣式分離

將樣式和內(nèi)容寫在一起善榛，也就是直接將樣式寫在html標簽中，會使整個html文檔很亂叨叙，可讀性變差锭弊，不利于維護。
將樣式與內(nèi)容分離有很多的好處：

1. 利用CSS中的重用擂错、組合味滞、繼承等特性減少樣式的代碼量，樣式結(jié)構(gòu)上非常清晰；
2. 頁面視覺有變動只需要修改相應(yīng)的CSS文件剑鞍，不用或者基本上不用改動html文檔中的標簽結(jié)構(gòu)昨凡；
3. 方便JavaScript腳本編寫，比如用js控制標簽的className來方便的蚁署、動態(tài)的改變元素的樣式便脊，而不是直接修改其具體樣式
4. 適合產(chǎn)品級、模塊化的開發(fā)

但是在網(wǎng)站需要部分更改的時候需要同時修改html和css光戈，這時候并不能體現(xiàn)出這種寫法易于維護的特性哪痰？

常見meta標簽

1. Keywords (關(guān)鍵字)
   說明：告訴搜索引擎你網(wǎng)頁的關(guān)鍵字是什么。
   用法：<meta name="keywords" content="">

2. Description (網(wǎng)頁描述)
   說明：Description用來告訴搜索引擎你的網(wǎng)頁主要內(nèi)容久妆。
   用法：<meta name="description" content="學(xué)習(xí)研究搜索引擎優(yōu)化網(wǎng)提供專業(yè)的SEO優(yōu)化教程晌杰，收集整理SEO優(yōu)化文章、SEO優(yōu)化工具筷弦，為網(wǎng)絡(luò)營銷貢獻出自己的一份力量肋演。" />

3. Robots (機器人向?qū)?
   說明：Robots用來告訴搜索機器人哪些頁面需要索引，哪些頁面不需要索引烂琴。Content的參數(shù)有all爹殊、none、index奸绷、noindex梗夸、follow、nofollow健盒。默認是all绒瘦。
   用法：<meta name="robots" content="All|None|Index|Noindex|Follow|Nofollow">
   all：文件將被檢索，且頁面上的鏈接可以被查詢扣癣；
   none：文件將不被檢索，且頁面上的鏈接不可以被查詢憨降；(和 "noindex, no follow" 起相同作用)
   index：文件將被檢索父虑；（讓robot/spider登錄）
   follow：頁面上的鏈接可以被查詢；
   noindex：文件將不被檢索授药，但頁面上的鏈接可以被查詢士嚎；(不讓robot/spider登錄)
   nofollow：文件將不被檢索，頁面上的鏈接可以被查詢悔叽。(不讓robot/spider順著此頁的連接往下探找)

4. Author (作者)
   說明：標注網(wǎng)頁的作者或制作組
   用法：<meta name="author" content="">
   注意：Content可以是：你或你的制作組的名字,或Email

5. Copyright (版權(quán))
   說明：標注版權(quán)
   用法：<meta name="copyright" content="">

6. Generator (編輯器)
   說明：編輯器的說明
   用法：<meta name="generator" content="PCDATA|FrontPage|">
   注意：Content="你所用編輯器"

7. Revisit-after (重訪)
   說明：通知搜索引擎多少天訪問一次
   用法：<meta name="revisit-after" content="7 days">
   從IE9開始引入了固定網(wǎng)站功能莱衩，對用戶來說這是一種只需在任務(wù)欄上單擊圖標即可直接訪問網(wǎng)站的簡單方式。固定網(wǎng)站還易于實現(xiàn)娇澎，僅需要非常少的代碼笨蚁。以下的元數(shù)據(jù)標簽只在IE9+生效。如Windows Vista,Windows 7系統(tǒng)上。官方文檔地址http://msdn.microsoft.com/zh-cn/library/ie/gg491732%28v=vs.85%29.aspx 括细。所有元素都是可選的伪很。

8. 移動端viewport標簽
   含義如下：
   width
   控制 viewport 的大小，可以指定的一個值或者特殊的值奋单，如 device-width 為設(shè)備的寬度（單位為縮放為 100% 時的 CSS 的像素）锉试。

文檔聲明及<!DOCTYPE html>的作用 嚴格模式和混雜模式

1. doctype聲明指出閱讀程序應(yīng)該用什么規(guī)則集來解釋文檔中的標記。在Web文檔的情況下览濒，“閱讀程序”通常是瀏覽器或者校驗器這樣的一個程序呆盖，“規(guī)則”則是W3C所發(fā)布的一個文檔類型定義（DTD）中包含的規(guī)則。每個DTD都包括一系列標記贷笛、attributes和properties絮短，它們用于標記Web文檔的內(nèi)容；此外還包括一些規(guī)則昨忆，它們規(guī)定了哪些標記能出現(xiàn)在其他哪些標記中丁频。每個Web建議標準（比如HTML 4 Frameset和XHTML 1.0 Transitional）都有自己的DTD。假如文檔中的標記不遵循doctype聲明所指定的DTD邑贴，這個文檔除了不能通過代碼校驗之外席里，還有可能無法在瀏覽器中正確顯示。對于標記不一致的問題拢驾，瀏覽器相較于校驗器來說更寬容奖磁。但是，不正確的doctype聲明經(jīng)常導(dǎo)致網(wǎng)頁不正確顯示繁疤，或者導(dǎo)致它們根本不能顯示咖为。
2. 現(xiàn)代瀏覽器包括不同的呈現(xiàn)模式，目的是既支持遵循標準的網(wǎng)頁稠腊，也支持為老式瀏覽器而設(shè)計的網(wǎng)頁躁染。其中， Standards（標準）模式（也就是嚴格呈現(xiàn)模式）用于呈現(xiàn)遵循最新標準的網(wǎng)頁架忌，而 Quirks （包容）模式（也就是松散呈現(xiàn)模式或者兼容模式）用于呈現(xiàn)為傳統(tǒng)瀏覽器而設(shè)計的網(wǎng)頁吞彤。另外，注意Mozilla/Netscape 6新增了一種 Almost Standards（近似標準）模式叹放，用于支持為標準的某個老版本而設(shè)計的網(wǎng)頁饰恕。

瀏覽器亂碼的產(chǎn)生和問題解決

原因

產(chǎn)生亂碼的主要原因是在保存html文檔時采用的編碼方式和瀏覽器解析時采用的編碼方式不一致導(dǎo)致的，未聲明編碼方式的文檔會由瀏覽器以默認的方式解碼井仰。（英文在不用的編碼方式中采用相同的碼字埋嵌，純英文網(wǎng)頁不會因為此原因亂碼）

解決方法

在html中聲明保存文檔的編碼方式，如使用UTF-8保存時俱恶，在文檔中聲明<meta charset="utf-8">雹嗦，這樣瀏覽器解析時會采用相同的方式解碼范舀，避免亂碼

常用瀏覽器及其內(nèi)核

瀏覽器用的內(nèi)核，一般不外乎微軟的IE 內(nèi)核和webkit內(nèi)核俐银。所謂內(nèi)核尿背，就是常駐內(nèi)存、能夠快速響應(yīng)的那一部分核心代碼捶惜，非內(nèi)核代碼都是要用到時再調(diào)入內(nèi)存并執(zhí)行的田藐。webkit內(nèi)核更小巧快速，但兼容性不如IE內(nèi)核吱七。所以有些瀏覽器是用的雙內(nèi)核汽久，可以在高速模式和兼容模式間切換。

1. Trident內(nèi)核代表產(chǎn)品Internet Explorer踊餐，又稱其為IE內(nèi)核景醇。Trident（又稱為MSHTML），是微軟開發(fā)的一種排版引擎吝岭。使用Trident渲染引擎的瀏覽器包括：IE三痰、Avant、Netscape8窜管、NetCaptor散劫、Sleipnir、GOSURF幕帆、GreenBrowser和KKman等获搏。
2. Gecko內(nèi)核代表作品MozillaFirefoxGecko是一套開放源代碼的、以C++編寫的網(wǎng)頁排版引擎失乾。Gecko是最流行的排版引擎之一常熙，僅次于Trident。使用它的最著名瀏覽器有Firefox碱茁、Netscape6至9裸卫。
3. WebKit內(nèi)核代表作品Safari、Chromewebkit是一個開源項目早芭，包含了來自KDE項目和蘋果公司的一些組件彼城，主要用于Mac OS系統(tǒng)，它的特點在于源碼結(jié)構(gòu)清晰退个、渲染速度極快。缺點是對網(wǎng)頁代碼的兼容性不高调炬，導(dǎo)致一些編寫不標準的網(wǎng)頁無法正常顯示语盈。主要代表作品有Safari和Google的瀏覽器Chrome。
4. Presto內(nèi)核代表作品OperaPresto是由Opera Software開發(fā)的瀏覽器排版引擎缰泡，供Opera 7.0及以上使用刀荒。它取代了舊版Opera4至6版本使用的Elektra排版引擎代嗤，包括加入動態(tài)功能，例如網(wǎng)頁或其部分可隨著DOM及Script語法的事件而重新排版缠借。

國產(chǎn)瀏覽器如搜狗瀏覽器干毅，360安全瀏覽器，獵豹瀏覽器都采用trident和webkit雙內(nèi)核設(shè)計

常用HTML標簽

1. html標題<h1> to <h6>
2. html水平線 <hr/>
3. html注釋``
   注釋不會在網(wǎng)頁上顯示
4. html段落<p>以及段落換行<br/>
5. html超鏈接<a>
6. html的圖像<img>
7. html的表格<table>
8. html列表<ul> <ol>
9. html表單<form>
10. 換行<br>
11. 聲明html<html>
12. 文檔內(nèi)容<body>
13. 文檔標題<head>