html基礎(chǔ)知識

HTML、XML、XHTML 有什么區(qū)別？

因為相同之處從字面可以看出，他們都是ML，都是標(biāo)記語言（Markup Language），所以不同就是前面的部分了。

HTML，超文本標(biāo)記語言，是語法較為松散的、不嚴(yán)格的Web語言，它是用來描述和定義網(wǎng)頁內(nèi)容的標(biāo)記語言，是構(gòu)成網(wǎng)頁的最基本的東西。所謂超文本，就是說它除了能標(biāo)記文本，還能標(biāo)記其他的內(nèi)容，比如：圖片，鏈接，音頻，視頻等。
　　它的作用就是一個規(guī)范，告訴所有瀏覽器都統(tǒng)一標(biāo)準(zhǔn)，比如我給這段文字加個<p> 標(biāo)簽，那就是告訴瀏覽器：這是一個段落。我加個 <img> 標(biāo)簽：這是一張圖片，別弄錯了。瀏覽器看到后，就會正確解析，產(chǎn)生相應(yīng)的行為。

XML，可擴(kuò)展標(biāo)記語言，主要用于存儲數(shù)據(jù)和結(jié)構(gòu)，可擴(kuò)展；它的表現(xiàn)形式就是給一個文檔加一堆標(biāo)簽，說明每段文字是干什么的，有什么意義。這樣做的目的是方便存儲、傳輸、分享數(shù)據(jù)，人和機(jī)器都可以很方便的閱讀。XML 和 HTML 有一個明顯的區(qū)別就是：HTML 的標(biāo)簽都是預(yù)定義的，你不可以自己隨便增加，比如你不能自造一個標(biāo)簽叫 <nihao>, 但是 XML 可以，你可以自己“發(fā)明”標(biāo)簽————這也是“可擴(kuò)展的”一個含義。

XHTML，可擴(kuò)展超文本標(biāo)記語言，基于XML，作用與HTML類似，但語法更嚴(yán)格。XHTML 就是以 XML 的語法形式來寫 HTML.
XHTML 出現(xiàn)的原因是：HTML 是一種語法形式比較松散的標(biāo)記語言，語法要求也不嚴(yán)格。比如大小可以混用，屬性值隨便你加不加引號，單引號還是雙引號也隨便你，標(biāo)簽也可以不閉合。HTML 標(biāo)準(zhǔn)的制定者 W3C 一看這樣下去不行，所謂無規(guī)矩不成方圓，所以就把 XML 的語法形式往 HTML 上一套，出現(xiàn)了 XHTML，所以你也可以把 XHTML 理解為 HTML 的嚴(yán)格語法形式，除此之外，其它方面基本一樣。比如 XHTML 有一些強(qiáng)制的要求，如下：

1.　必須包含一個文件頭聲明 <!DOCTYPE>
2.　所有元素名必須小寫
3.　所有空元素必須關(guān)閉
4.　所有屬性名必須小寫
5.　所有屬性值必須加引號
6.　所有布爾值屬性必須加上屬性值

怎樣理解 HTML 語義化？

語義化的含義就是用正確的標(biāo)簽做正確的事情，html語義化就是讓頁面的內(nèi)容結(jié)構(gòu)化，便于對瀏覽器、搜索引擎解析；在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的。搜索引擎的爬蟲依賴于標(biāo)記來確定上下文和各個關(guān)鍵字的權(quán)重，利于 SEO。使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。

怎樣理解內(nèi)容與樣式分離的原則？

1. HTML負(fù)責(zé)網(wǎng)頁內(nèi)容（結(jié)構(gòu)）部分，樣式則負(fù)責(zé)頁面的效果

2. 內(nèi)容與樣式分離使得內(nèi)容和樣式各自只負(fù)責(zé)自己的部分，消除兩者的耦合

3. 更重要的是分離增強(qiáng)了機(jī)器的可讀性，使得機(jī)器、網(wǎng)絡(luò)爬蟲能更好地理解頁面內(nèi)容

有哪些常見的meta標(biāo)簽？

那meta標(biāo)簽有什么用呢？W3School是這樣定義的：
標(biāo)簽提供關(guān)于HTML文檔的元數(shù)據(jù)。元數(shù)據(jù)不會顯示在頁面上，但是對于機(jī)器是可讀的。它可用于瀏覽器（如何顯示內(nèi)容或重新加載頁面），搜索引擎（關(guān)鍵詞），或其他web 服務(wù)。
　　以下是常用的標(biāo)簽以及作用：

  1. <meta name="keywords" content="your tags" />
    釋義：頁面關(guān)鍵詞，每個網(wǎng)頁應(yīng)具有描述該網(wǎng)頁內(nèi)容的一組唯一的關(guān)鍵字。使用人們可能會搜索，并準(zhǔn)確描述網(wǎng)頁上所提供信息的描述性和代表性關(guān)鍵字及短語。標(biāo)記內(nèi)容太短，則搜索引擎可能不會認(rèn)為這些內(nèi)容相關(guān)。另外標(biāo)記不應(yīng)超過 874 個字符
  2. <meta name="description" content="150 words" />
    釋義：頁面描述，每個網(wǎng)頁都應(yīng)有一個不超過 150 個字符且能準(zhǔn)確反映網(wǎng)頁內(nèi)容的描述標(biāo)簽
  3. <meta name="robots" content="index,follow" />
    釋義：搜索引擎索引方式，robotterms是一組使用逗號(,)分割的值，通常有如下幾種取值：none，noindex，nofollow，all，index和follow。確保正確使用nofollow和noindex屬性值。
  4. <meta http-equiv="refresh" content="0;url=" />
    釋義：頁面重定向和刷新： content內(nèi)的數(shù)字代表時間（秒），即是多少時間后刷新。如果加url,則會重定向到指定網(wǎng)頁（搜索引擎能夠自動檢測，也很容易被引擎視作誤導(dǎo)而受到懲罰）。
  5. <meta name="author" content="author name" />
    釋義：定義網(wǎng)頁作者
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
 <!-- width=device-width 會導(dǎo)致 iPhone 5 添加到主屏后以 WebApp 全屏模式打開頁面時出現(xiàn)黑邊 -->

釋義：viewport：能優(yōu)化移動瀏覽器的顯示。如果不是響應(yīng)式網(wǎng)站，不要使用initial-scale或者禁用縮放。大部分4.7-5寸設(shè)備的viewport寬設(shè)為360px；5.5寸設(shè)備設(shè)為400px；iphone6設(shè)為375px；ipone6
plus設(shè)為414px
　　注意：很多人使用initial-scale=1到非響應(yīng)式網(wǎng)站上，這會讓網(wǎng)站以100%寬度渲染，用戶需要手動移動頁面或者縮放。如果和initial-scale=1同時使用user-scalable=no或maximum-scale=1，則用戶將不能放大/縮小網(wǎng)頁來看到全部的內(nèi)容。

  1. <meta name="apple-mobile-web-app-capable" content="yes" />
    釋義：WebApp全屏模式：偽裝app，離線應(yīng)用
  2. <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    釋義：隱藏狀態(tài)欄/設(shè)置狀態(tài)欄顏色：只有在開啟WebApp全屏模式時才生效。content的值為default | black | black-translucent
  3. <meta name="apple-mobile-web-app-title" content="標(biāo)題"
    釋義：添加到主屏后的標(biāo)題
  4. <meta name="apple-mobile-web-app-title" content="標(biāo)題">
    釋義：忽略數(shù)字自動識別為電話號碼
  5. <meta content="telephone=no" name="format-detection" />
    釋義：忽略識別郵箱
  6. <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
    釋義：添加智能 App 廣告條 Smart App Banner：告訴瀏覽器這個網(wǎng)站對應(yīng)的app，并在頁面上顯示下載banner

其他：

<meta name="HandheldFriendly" content="true">

<meta name="MobileOptimized" content="320">

<meta name="screen-orientation" content="portrait">

<meta name="x5-orientation" content="portrait">

<meta name="full-screen" content="yes">

<meta name="x5-fullscreen" content="true">

<meta name="browsermode" content="application">

<meta name="x5-page-mode" content="app">

<meta name="msapplication-tap-highlight" content="no">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<meta http-equiv="X-UA-Compatible" content="IE=6" >
<meta http-equiv="X-UA-Compatible" content="IE=7" >
<meta http-equiv="X-UA-Compatible" content="IE=8" >

這個鏈接介紹的很詳細(xì)，值得一看

文檔聲明的作用?嚴(yán)格模式和混雜模式指什么?<!doctype html> 的作用?

1. <!DOCTYPE> 聲明位于文檔中的最前面的位置，處于 <html> 標(biāo)簽之前。此標(biāo)簽可告知瀏覽器文檔使用哪種方式渲染瀏覽器，可能是HTML也可能是XHTML。
　　2. 所謂的標(biāo)準(zhǔn)模式是指，瀏覽器按 W3C 標(biāo)準(zhǔn)解析執(zhí)行代碼；混雜模式則是使用瀏覽器自己的方式解析執(zhí)行代碼，因為不同瀏覽器解析執(zhí)行的方式不一樣，所以我們稱之為混雜模式。
　　3. <!doctype html> 的作用就是讓瀏覽器進(jìn)入標(biāo)準(zhǔn)模式，使用最新的 HTML5標(biāo)準(zhǔn)來解析渲染頁面；如果不寫，瀏覽器就會進(jìn)入混雜模式，而這是我們要避免的。

瀏覽器亂碼的原因是什么？如何解決

下面這個流程是我們寫入文件到展示文件的簡單描述：

  1. 我們使用編輯器編寫 HTML 文件
  2. 保存編寫的 HTML 文件
  3. 使用瀏覽器打開 HTML 文件
  4. HTML文件在瀏覽器展示

我們編寫 HTML 文件時，如果在<html>中指定了<meta charset="gbk">，設(shè)定字符集為gbk．
　　然后保存 HTML 文件時，編輯器用 utf-8 字符集保存，接著瀏覽器打開 HTML 文件時，它看到<meta charset="gbk">，這時候它就會用gbk字符集來解碼你的 HTML 文檔，由于utf-8和gbk對中文的編碼方式不一樣，那么HTML文件在瀏覽器中顯示示出來肯定是亂碼。
所以這里關(guān)于編碼涉及到3個方面：
　　1. HTML 文檔中的<meta charset=""> 指定的字符集
　　2. 編輯器保存文檔使用的字符集
　　3. 瀏覽器解析 HTML 文檔使用的字符集
　　這里的關(guān)鍵在于2和3步，如果這兩步的字符集不一樣，那么英文以外的文字就會出現(xiàn)亂碼。英文不會出現(xiàn)亂碼是因為一般主流的字符集對英文使用的編碼方式都是一樣的，可以互相兼容。
　　而第3步瀏覽器解析 HTML 文檔使用的字符集依賴于第1步 HTML 文檔中的<meta charset=""> 指定的字符，那如果 HTML 文檔沒指定呢？那瀏覽器就會用自己的方式去猜要用哪個字符集來解析 HTML 文檔，這里就可能會發(fā)生錯誤。

所以總結(jié)下如何解決瀏覽器亂碼：
　　HTML 文檔一定要指定字符集為utf-8，因為這個字符集包括了世界上幾乎所有的文字，沒有理由不用它。<meta charset="utf-8">
編輯器保存文檔使用的字符集一定要跟 HTML 文檔指定的字符集匹配，也就是 utf-8。

常見的瀏覽器有哪些，什么內(nèi)核？

1、Trident(IE內(nèi)核)

（1）、該內(nèi)核程序在1997年的IE4中首次被采用，是微軟在Mosaic代碼的基礎(chǔ)之上修改而來的，并沿用到IE11，也被普遍稱作”IE內(nèi)核”。Trident實際上是一款開放的內(nèi)核，其接口內(nèi)核設(shè)計的相當(dāng)成熟，因此才有許多采用IE內(nèi)核而非IE的瀏覽器(殼瀏覽器)涌現(xiàn)。此外，為了方便也有很多人直接簡稱其為IE內(nèi)核

（2）、IE從版本11開始，初步支持WebGL技術(shù)。

（3）、IE8的JavaScript引擎是Jscript，IE9開始用Chakra，這兩個版本區(qū)別很大。

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的特點(diǎn)是代碼完全公開，因此，其可開發(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條約下授權(quán)，同時支持BSD系統(tǒng)的開發(fā)。所以Webkit也是自由軟件，同時開放源代碼。

Google Chrome、360極速瀏覽器以及搜狗瀏覽器高速模式也使用webkit作為內(nèi)核。

WebKit內(nèi)核常見的瀏覽器：
Apple Safari (Win/Mac/iPhone/iPad)、Symbian手機(jī)瀏覽器、Android 默認(rèn)瀏覽器、Google Chrome

4、Blink(WebkitWebCore組件分支,Google與Opera Software共同開發(fā))
Blink是一個由Google和Opera Software開發(fā)的瀏覽器排版引擎，這一渲染引擎是開源引擎WebKit中WebCore組件的一個分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex瀏覽器中使用。

這篇文章介紹了各瀏覽器內(nèi)核的歷史，很有趣，值得一看

列出常見的標(biāo)簽，并簡單介紹這些標(biāo)簽用在什么場景

* <a> 用于超鏈接。<a href="">some text</a>
* <article> 用于一篇文章。<article>a self-contained article</article>
* <aside> 用于頁面的側(cè)邊欄。<aside>some content</aside>
* <blockquote> 用于大段的引用內(nèi)容。<blockquote>some big texts</blockquote>
* <body> 頁面上顯示的所有內(nèi)容都被包含在<body></body>里
* <br> 用于顯示一個換行
* <button> 用于顯示一個按鈕
* <code> 用于一包裹一段代碼內(nèi)容
* <dd> 用于一個dl列表的某個dt名詞的描述
* <del> 用于刪除一些不需要的文字
* <div> 用于包裹住一些其他的標(biāo)簽，制造一個容器
* <dl> 用于制作一個名詞和對應(yīng)解釋的列表
* <dt> 用于一個dl列表的某個dt名詞
* <em> 用于強(qiáng)調(diào)一些文本內(nèi)容
* <figcaption> 用于一張圖表的說明文字
* <figure> 用于一張圖表
* <footer> 用于包裹頁面的底部內(nèi)容
* <form> 用于制作一個表單
* <h1>-<h6> 用于標(biāo)記標(biāo)題，從h1到h6重要性依次遞減
* <head> 用于包裹頁面的元數(shù)據(jù)，如<meta>, <link>, <title>等
* <header> 用于包裹頁面的頭部內(nèi)容
* <hr> 用于制造出一條分隔線
* <html> 整個 HTML 文檔的根元素，包裹住其他所有的元素
* <iframe> 用于嵌入另一個小頁面到一個頁面中
* <img> 用于顯示一張圖片
* <input> 用于顯示一個表格輸入控件
* <label> 用于給一個表格輸入控件打上一個標(biāo)簽，說明輸入控件的作用
* <li> 用于<ul>和<ol>標(biāo)簽，代表一個列表項
* <link> 用于鏈接外部CSS文件
* <mark> 用于高亮顯示某些文本
* <meta> 用于下達(dá)一些元數(shù)據(jù)指令，或者對頁面進(jìn)行說明
* <nav> 用于包裹住一個導(dǎo)航條的內(nèi)容
* <ol> 用于制作一個有序列表
* <p> 用于顯示一個段落
* <q> 用于一小段引用文字
* <script> 用于一段JavaScript腳本代碼，或者引入一個外部JavaScript腳本文件
* <section> 用于包裹一部分有邏輯關(guān)系的頁面內(nèi)容
* <select> 用于制作一個下拉列表選框
* <span> 用于包裹住一小段文字，作為一個容器
* <strong> 用于著重強(qiáng)調(diào)重要的文本內(nèi)容
* <style> 用于給頁面元素加上樣式
* <sub> 用于下標(biāo)文本
* <sup> 用于上標(biāo)文本
* <table> 用于制作一個表格
* <tbody> 用于表格里的主體部分
* <td> 用于表格里的某一個單元格
* <textarea> 用于制作一大塊文本輸入框
* <tfoot> 用于表格里的底部
* <th> 用于表格里的表頭的單元格
* <thead> 用于表格里的表頭
* <time> 用于頁面內(nèi)容中的時間
* <title> 用于顯示整個頁面的標(biāo)題（顯示在瀏覽器的tab上）
* <tr> 用于標(biāo)記表格里的一行
* <ul> 用于制作一個無序列表
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容