1.html、xml、xhtml

HTML

• HTML(Hyper Text Mark-up Language)即超文本標記語言或超文本鏈接標示語言，是目前網(wǎng)絡上應用最為廣泛的語言，也是構成網(wǎng)頁文檔的主要語言。它告訴瀏覽器如何顯示內(nèi)容。
  主要特點
  簡易性：超級文本標記語言版本升級采用超集方式，從而更加靈活方便。
  可擴展性：超級文本標記語言的廣泛應用帶來了加強功能，增加標識符等要求，超級文本標記語言采取子類元素的方式，為系統(tǒng)擴展帶來保證。
  平臺無關性：雖然個人計算機大行其道，但使用MAC等其他機器的大有人在，超級文本標記語言可以使用在廣泛的平臺上，這也是萬維網(wǎng)（WWW）盛行的另一個原因。
  通用性：另外，HTML是網(wǎng)絡的通用語言,一種簡單、通用的全置標記語言。它允許網(wǎng)頁制作人建立文本與圖片相結(jié)合的復雜頁面，這些頁面可以被網(wǎng)上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。
• XML
  XML即ExtentsibleMarkupLanguage(可擴展標記語言)，是用于網(wǎng)絡上數(shù)據(jù)交換的語言。它沒有標簽集，也沒有語法規(guī)則，但是它有句法規(guī)則。
  與HTML的主要區(qū)別
  **目標 **:HTML的設計目標是顯示數(shù)據(jù)并集中于數(shù)據(jù)外觀，而XML的設計目標是描述數(shù)據(jù)并集中于數(shù)據(jù)的內(nèi)容，它的顯示形式靠CSS或XSL幫完成。
  語法：HTML的標記不是所有的都需要成對出現(xiàn)，XML則要求所有的標記必須成對出現(xiàn)；HTML標記不區(qū)分大小寫，XML則大小敏感，即區(qū)分大小寫。
  更新：XML允許粒度更新，不必在XML文檔每次有局部改變時都發(fā)送整個文檔的內(nèi)容，只有改變的元素才必須從服務器發(fā)送到客戶機，而HTML卻不支持這樣的功能。
  可讀性：HTML側(cè)重于網(wǎng)頁數(shù)據(jù)表現(xiàn)形式的定義和描述，欠缺對文檔數(shù)據(jù)含義的確切描述，不能適應對于日益增多的各類信息進行傳遞與存檔的需求。例如<H2>Apple</H2>,在瀏覽器中顯示的Apple，人們并不知道它具體是水果還是一個手機，HTML并不能解釋數(shù)據(jù)Apple的含義；而XML不會給大家這個錯覺如果描述的是水果中的蘋果的話它會很清楚的這樣表示<水果>Apple</水果>。所以說HTML的可讀性相對較差。
  還有一點就是XML標記由架構或文檔的作者定義，并且是無限制的。HTML 標記則是預定義的;HTML 作者只能使用當前 HTML 標準所支持的標記。
• XHTML
  意義:指擴展超文本標簽語言（EXtensible HyperText Markup Language）,目標是取代HTML.
  與HTML的主要區(qū)別
  XHTML是當前HTML版的繼承者,由于HTML的語法較為松散,對于許多其他設備的要求較高,因此就出現(xiàn)了由DTD定義規(guī)則,語法要求更加嚴格的XHTML。
  XHTML與HTML的最大的變化在于所有標簽必須閉合。
  XHTML中所有的標簽必須小寫。
  XHTML 元素必須被正確地嵌套。
  XHTML 文檔必須擁有根元素。

2.html和css的關系：

• 學習web前端開發(fā)基礎技術需要掌握：HTML、CSS、JavaScript語言。下面我們就來了解下這三門技術都是用來實現(xiàn)什么的：

1. HTML是網(wǎng)頁內(nèi)容的載體。內(nèi)容就是網(wǎng)頁制作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。
2. CSS樣式是表現(xiàn)。就像網(wǎng)頁的外衣。比如，標題字體、顏色變化，或為標題加入背景圖片、邊框等。所有這些用來改變內(nèi)容外觀的東西稱之為表現(xiàn)。
3. JavaScript是用來實現(xiàn)網(wǎng)頁上的特效效果。如：鼠標滑過彈出下拉菜單?；蚴髽嘶^表格的背景顏色改變。還有焦點新聞（新聞圖片）的輪換?？梢赃@么理解，有動畫的，有交互的一般都是用JavaScript來實現(xiàn)的。

• 怎樣理解 HTML 語義化
  1.什么是HTML語義化？
  根據(jù)內(nèi)容的結(jié)構化（內(nèi)容語義化），選擇合適的標簽（代碼語義化）便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。
  2.為什么要語義化？
  （1）為了在沒有CSS的情況下，頁面也能呈現(xiàn)出很好地內(nèi)容結(jié)構、代碼結(jié)構:為了裸奔時好看；
  （2）用戶體驗：例如title、alt用于解釋名詞或解釋圖片信息、label標簽的活用；
  （3）有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關鍵字的權重；
  方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網(wǎng)頁；
  （4） 便于團隊開發(fā)和維護，語義化更具可讀性，是下一步吧網(wǎng)頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。
  3.怎樣理解內(nèi)容與樣式分離的原則
  在 Web 開發(fā)中，所謂內(nèi)容與樣式分離，就是讓內(nèi)容的歸 HTML, 樣式歸 CSS, 不要混著用。如果把樣式分離出來，代碼會得到精簡和重用，后期的維護會變得非常簡單。我只用寫一個 class 的樣式，就可以同時更改多個有相同 class 的元素的樣式；只用一個 css 文件，就可以同時鏈接到多個 HTML 頁面上。
  這樣，整套文檔就變得清晰易讀、易維護！
  總結(jié)來說：
  寫 HTML 僅處理內(nèi)容，只考慮 HTML 的結(jié)構和語義化，避免出現(xiàn)屬性樣式。
  寫 JS 的時候，盡量不使用 JS直接操作樣式。
  頁面展現(xiàn)的所有樣式，都由CSS來負責實現(xiàn)。

3.常見的瀏覽器及其內(nèi)核

1、Trident(IE內(nèi)核)
（1）、該內(nèi)核程序在1997年的IE4中首次被采用，是微軟在Mosaic代碼的基礎之上修改而來的，并沿用到IE11，也被普遍稱作”IE內(nèi)核”。Trident實際上是一款開放的內(nèi)核，其接口內(nèi)核設計的相當成熟，因此才有許多采用IE內(nèi)核而非IE的瀏覽器(殼瀏覽器)涌現(xiàn)。此外，為了方便也有很多人直接簡稱其為IE內(nèi)核
（2）、IE從版本11開始，初步支持WebGL技術。
（3）、IE8的JavaScript引擎是Jscript，IE9開始用Chakra，這兩個版本區(qū)別很大，Chakra無論是速度和標準
Trident內(nèi)核的常見瀏覽器有：
（1）IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）；
（2）獵豹安全瀏覽器：1.0-4.2版本為Trident+Webkit，4.3版本為Trident+Blink；
（3）360安全瀏覽器 ：1.0-5.0為Trident，6.0為Trident+Webkit，7.0為Trident+Blink；
（4）360極速瀏覽器：7.5之前為Trident+Webkit,7.5為Trident+Blink；
（5）傲游瀏覽器 ：傲游1.x、2.x為IE內(nèi)核，3.x為IE與Webkit雙核；
（6）搜狗高速瀏覽器：1.x為Trident，2.0及以后版本為Trident+Webkit；
2.Gecko(Firefox內(nèi)核)
Gecko是套開放源代碼的，Netscape6開始采用的內(nèi)核，后來的Mozilla FireFox(火狐瀏覽器) 也采用了該內(nèi)核，Gecko的特點是代碼完全公開，因此，其可開發(fā)程度很高，全世界的程序員都可以為其編寫代碼，增加功能。因為這是個開源內(nèi)核，因此受到許多人的青睞，Gecko內(nèi)核的瀏覽器也很多，這也是Gecko內(nèi)核雖然年輕但市場占有率能夠迅速提高的重要原因。
不過事實上，Gecko 內(nèi)核的瀏覽器仍然還是Firefox (火狐) 用戶最多，所以有時也會被稱為Firefox內(nèi)核。此外Gecko也是一個跨平臺內(nèi)核，可以在Windows、 BSD、Linux和Mac OS X中使用。
3、Webkit(Safari內(nèi)核,Chrome內(nèi)核原型,開源)
它是蘋果公司自己的內(nèi)核，也是蘋果的Safari瀏覽器使用的內(nèi)核。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是從KDE的KHTML及KJS引擎衍生而來，它們都是自由軟件，在GPL條約下授權，同時支持BSD系統(tǒng)的開發(fā)。所以Webkit也是自由軟件，同時開放源代碼。
Google Chrome、360極速瀏覽器以及搜狗瀏覽器高速模式也使用webkit作為內(nèi)核。
WebKit內(nèi)核常見的瀏覽器：
Apple Safari (Win/Mac/iPhone/iPad)、Symbian手機瀏覽器、Android 默認瀏覽器、Google Chrome
4、Blink(WebkitWebCore組件分支,Google與Opera Software共同開發(fā))
Blink是一個由Google和Opera Software開發(fā)的瀏覽器排版引擎，這一渲染引擎是開源引擎WebKit中WebCore組件的一個分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex瀏覽器中使用。

4.文檔聲明的作用以及嚴格模式和混雜模式

標準模式和混雜模式
當瀏覽器廠商開始創(chuàng)建與標準兼容的瀏覽器時，他們希望確保向后兼容性。為了實現(xiàn)這一點，他們創(chuàng)建了兩種呈現(xiàn)模式：標準模式和混雜模式
在標準模式中，瀏覽器以其支持的最高標準呈現(xiàn)頁面；
在混雜模式中，頁面以一種比較寬松的向后兼容的方式顯示?；祀s模式通常模擬老式瀏覽器的行為以防止老站點無法工作。

5.編碼與亂碼

1.認識幾種編碼方式

• ASCII
  計算機發(fā)明之后需要使用0和1來表示字符，于是美國人在50年代發(fā)明了 ASCII (美國標準信息交換代碼,American Standard Code for Information Interchange) 碼。它由128個字符組成，包括大小寫字母、數(shù)字0-9、標點符號、非打印字符（換行符、制表符等4個）以及控制字符（退格、響鈴等）組成，每個字符占7位（1字節(jié)是8位）。比如 'a'的 ASCII碼10進制是97，二進制是 01100001。
• ISOLatin-1
  可以認為ASCII是美國發(fā)明針對英語設計的，但歐洲人在用的時候出現(xiàn)了問題。對于一些特殊的拉丁字符，比如法文德文里某些字符，ASCII字符集就不包括。于是歐洲人發(fā)明了一種8位字符集是ISO 8859-1Latin 1，也簡稱為ISOLatin-1。它對ASCII做了個擴充，對于0-127之間的字符還使用ASCII里的字符不變， 把位于128-255之間的字符表示拉丁字母表中特殊語言字符。
• UNICODE
  后來計算機不斷發(fā)展擴展到亞洲非洲，如何用計算機使用的二進制表示這些語言又成了問題。ISOLatin-1的8位字符集只能表示256個字符，而僅漢語就有80000以上個字符。如何把地球上絕大多數(shù)語言用一種編碼方式表示出來呢？ 于是發(fā)明了UNICODE編碼，只用2個字節(jié)(16位)就可以編碼地球上幾乎所有地區(qū)的文字。
  但是，UNICODE只是理論上的編碼方式，相當于給世界上每個文字打了個編號，但這編號具體如何在計算機里面存儲，可以有多種實現(xiàn)方式。比如utf-8和gbk。
  前面說了UNICODE只是給每個文字打了個編號，為啥不把這個編號直接轉(zhuǎn)化成二進制存儲在計算機里面呢？ 比如英文字母s的編號是115, 用二進制表示是00000000 1110011, 中文日的編號是26085 (16進制是65e5) ，二進制是11001011 1100101。老外才沒那么傻，對于老外這種日常純粹是用英文字符的人來說明明之前1個字節(jié)就能存儲一個字母，現(xiàn)在為了全球大一統(tǒng)非要存儲為2個字節(jié)，相當于一個之前一個1M的文檔，現(xiàn)在變?yōu)?M。于是老外耍了賴，英文字母s是115沒錯，但我就用1個字節(jié)1110011表示，而你中文日是26085號也沒錯，但是你不能在使用2個表示，而是用2個甚至6個字節(jié)表示。（為了英文的特權，犧牲其他語言的存儲空間的便利），這個編碼方式就是UTF-8。
• UTF-8
  UTF-8（8-bit Unicode Transformation Format）是一種針對Unicode的可變長度字符編碼，又稱萬國碼。UTF-8用1到6個字節(jié)編碼UNICODE字符。用在網(wǎng)頁上可以同一頁面顯示中文簡體繁體及其它語言（如英文，日文，韓文）。
  那GBK又是如何產(chǎn)生的呢？
• GBK
  這時候中國人不干了，為啥你制定了全球大一統(tǒng)的規(guī)則，卻為了自己的便利又破壞規(guī)則，連這點小便宜都不放過(典型的美國人作風)？ 明明用2個字節(jié)就能表示中文一個漢字，現(xiàn)在UTF-8編碼中文竟然需要2個甚至4個字節(jié)來表示。于是中國制定一套自己的規(guī)則，于是用2個字節(jié)來表示一個漢字，總共可以覆蓋2萬多個文字。 對于英文，好吧讓一步，還保留和你UTF-8同樣的方式使用一個字節(jié)來表示。
  下圖是把當前文章分別保存為 gbk 何 utf-8兩種編碼格式下文件大小的對比，表明用 gbk 確實省空間
  
  記住：UNICODE只是給字符一個代號，而GBK和UTF-8使用不同的規(guī)則來表示同一個代號。

2.網(wǎng)頁亂碼如何產(chǎn)生的呢？

下面這個流程是我們寫入文件到展示文件的簡單描述：
我們使用編輯器編寫 HTML 文件
保存編寫的HTML文件
使用瀏覽器打開HTML文件
HTML文件在瀏覽器展示

亂碼產(chǎn)生的根源就在與第2步驟和第4步。
在第2步保持文件時會把我們寫入的文字使用編輯器默認的編碼方式進行保存。如果大家使用的是vscode編輯器，默認的編碼方式是utf-8。

3.總結(jié)：
（1） 亂碼產(chǎn)生的根本原因是你保存的編碼格式和瀏覽器解析時的解碼格式不匹配導致的。
（2） 亂碼一般是英文以外的字符才會出現(xiàn)。為啥純粹的英文不會出現(xiàn)亂碼問題，即使編碼方式和解碼方式不一致？那是因為前面講過了 utf-8、gbk對英文都是采用1個字節(jié)的編碼方式，并且使用了相同的碼字。

6.初識html標簽：

• <h1></h1>就是標題標簽，它在網(wǎng)頁上的代碼寫成<h1>這是標題</h1>。
• <p></p>是段落標簽。它在網(wǎng)頁上的代碼寫成 <p>這是段落</p>。

• 圖片由<img>標簽來完成的，它在網(wǎng)頁上的代碼寫成
  

  ,1.jpg可以是圖片地址。

• 標簽的語法：
  （1）標簽由英文尖括號<和>括起來，如<html>就是一個標簽。
  （2）html中的標簽一般都是成對出現(xiàn)的，分開始標簽和結(jié)束標簽。結(jié)束標簽比開始標簽多了一個/。
  （3）標簽與標簽之間是可以嵌套的，但先后順序必須保持一致，如：<div>里嵌套<p>，那么</p>必須放在</div>的前面,嵌套元素應當縮進一次（即兩個空格）。
  （4）HTML標簽不區(qū)分大小寫，<h1>和<H1>是一樣的，但建議小寫，因為大部分程序員都以小寫為準。
  （5）對于屬性的定義，確保全部使用雙引號，絕不要使用單引號。
  （6）不要在自閉合（self-closing）元素的尾部添加斜線 -- HTML5 規(guī)范中明確說明這是可選的。
  （7）不要省略可選的結(jié)束標簽（closing tag）（例如，</li> 或 </body>）。

• html的基本結(jié)構
  （1）<html></html>稱為根標簽，所有的網(wǎng)頁標簽都在<html></html>中。
  （2）<head> 標簽用于定義文檔的頭部，它是所有頭部元素的容器。頭部元素有<title>、<script>、 <style>、<link>、 <meta>等標簽，頭標簽以后再進行總結(jié)。
  （3）在<body>和</body>標簽之間的內(nèi)容是網(wǎng)頁的主要內(nèi)容，如<h1>、<p>、<a>、<img>等網(wǎng)頁內(nèi)容標簽，在這里的標簽中的內(nèi)容會在瀏覽器中顯示出來。
  （4）在<title>和</title>標簽之間的文字內(nèi)容是網(wǎng)頁的標題信息，它會出現(xiàn)在瀏覽器的標題欄中。網(wǎng)頁的title標簽用于告訴用戶和搜索引擎這個網(wǎng)頁的主要內(nèi)容是什么，搜索引擎可以通過網(wǎng)頁標題，迅速的判斷出網(wǎng)頁的主題。每個網(wǎng)頁的內(nèi)容都是不同的，每個網(wǎng)頁都應該有一個獨一無二的title。
  

  （5）代碼注釋的作用是幫助程序員標注代碼的用途，過一段時間后再看你所編寫的代碼，就能很快想起這段代碼的用途。代碼注釋不僅方便程序員自己回憶起以前代碼的用途，還可以幫助其他程序員很快的讀懂你的程序的功能，方便多人合作開發(fā)網(wǎng)頁代碼。語法：