HTML知識點(diǎn)

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

HTML

HTML含義:(HyperText Markup Language)超文本標(biāo)記語言。

“超文本”就是指頁面內(nèi)可以包含圖片、鏈接,甚至音樂、程序等非文字元素,“標(biāo)記”是指用特定的標(biāo)記符號來標(biāo)記要顯示的內(nèi)容的各個部分。超文本標(biāo)記語言是標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用,也是一種規(guī)范,一種標(biāo)準(zhǔn),它被設(shè)計(jì)用來顯示數(shù)據(jù)。HTML文本就是我們通常所說的網(wǎng)頁,擴(kuò)展名可以是html或htm。

HTML 是用來描述網(wǎng)頁的一種語言

  • HTML 不是一種編程語言,而是一種標(biāo)記語言 (markup language)
  • 標(biāo)記語言是一套標(biāo)記標(biāo)簽 (markup tag)
  • HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁

XML

  • XML含義:(Extensible Markup Language),可擴(kuò)展標(biāo)記語言。

XML是標(biāo)準(zhǔn)通用標(biāo)記語言的子集,是一種用于標(biāo)記電子文件使其具有結(jié)構(gòu)性的標(biāo)記語言,它被設(shè)計(jì)用來傳輸和存儲數(shù)據(jù),是對超文本標(biāo)記語言的補(bǔ)充。可擴(kuò)展標(biāo)記語言是一種元標(biāo)記語言,即定義了用于定義其他特定領(lǐng)域有關(guān)語義的、結(jié)構(gòu)化的標(biāo)記語言,這些標(biāo)記語言將文檔分成許多部件并對這些部件加以標(biāo)識。它能夠更精確地聲明內(nèi)容,方便跨越多種平臺的更有意義的搜索結(jié)果。它提供了一種描述結(jié)構(gòu)數(shù)據(jù)的格式,簡化了網(wǎng)絡(luò)中數(shù)據(jù)交換和表示,使得代碼、數(shù)據(jù)和表示分離,并作為數(shù)據(jù)交換的標(biāo)準(zhǔn)格式,因此它常被稱為智能數(shù)據(jù)文檔,文件擴(kuò)展名為xml。

  • XML 是一種標(biāo)記語言,很類似 HTML
  • XML 的設(shè)計(jì)宗旨傳輸數(shù)據(jù),而非顯示數(shù)據(jù)
  • XML 標(biāo)簽沒有被預(yù)定義。您需要自行定義標(biāo)簽
  • XML 被設(shè)計(jì)為具有自我描述性。
  • XML 是 W3C 的推薦標(biāo)準(zhǔn)

XML與HTML之間的差異

它不是超文本標(biāo)記語言的替代。

它是對超文本標(biāo)記語言的補(bǔ)充。

它和超文本標(biāo)記語言為不同的目的而設(shè)計(jì):

  • 它被設(shè)計(jì)用來傳輸和存儲數(shù)據(jù),其焦點(diǎn)是數(shù)據(jù)的內(nèi)容。

  • 超文本標(biāo)記語言被設(shè)計(jì)用來顯示數(shù)據(jù),其焦點(diǎn)是數(shù)據(jù)的外觀。

超文本標(biāo)記語言旨在顯示信息,而它旨在傳輸信息。

對它最好的描述是:它是獨(dú)立于軟件和硬件的信息傳輸工具。

XML的用途

  • XML 把數(shù)據(jù)從 HTML 分離

如果你需要在 HTML 文檔中顯示動態(tài)數(shù)據(jù),那么每當(dāng)數(shù)據(jù)改變時將花費(fèi)大量的時間來編輯 HTML。

通過 XML,數(shù)據(jù)能夠存儲在獨(dú)立的 XML 文件中。這樣你就可以專注于使用 HTML 進(jìn)行布局和顯示,并確保修改底層數(shù)據(jù)不再需要對 HTML 進(jìn)行任何的改變。

通過使用幾行 JavaScript,你就可以讀取一個外部 XML 文件,然后更新 HTML 中的數(shù)據(jù)內(nèi)容。

  • XML 簡化數(shù)據(jù)共享

在真實(shí)的世界中,計(jì)算機(jī)系統(tǒng)和數(shù)據(jù)使用不兼容的格式來存儲數(shù)據(jù)。

XML 數(shù)據(jù)以純文本格式進(jìn)行存儲,因此提供了一種獨(dú)立于軟件和硬件的數(shù)據(jù)存儲方法。

這讓創(chuàng)建不同應(yīng)用程序可以共享的數(shù)據(jù)變得更加容易。

  • XML 簡化數(shù)據(jù)傳輸

通過 XML,可以在不兼容的系統(tǒng)之間輕松地交換數(shù)據(jù)。

對開發(fā)人員來說,其中一項(xiàng)最費(fèi)時的挑戰(zhàn)一直是在因特網(wǎng)上的不兼容系統(tǒng)之間交換數(shù)據(jù)。

由于可以通過各種不兼容的應(yīng)用程序來讀取數(shù)據(jù),以 XML 交換數(shù)據(jù)降低了這種復(fù)雜性。

  • XML 簡化平臺的變更

升級到新的系統(tǒng)(硬件或軟件平臺),總是非常費(fèi)時的。必須轉(zhuǎn)換大量的數(shù)據(jù),不兼容的數(shù)據(jù)經(jīng)常會丟失。

XML 數(shù)據(jù)以文本格式存儲。這使得 XML 在不損失數(shù)據(jù)的情況下,更容易擴(kuò)展或升級到新的操作系統(tǒng)、新應(yīng)用程序或新的瀏覽器。

  • XML 使您的數(shù)據(jù)更有用

由于 XML 獨(dú)立于硬件、軟件以及應(yīng)用程序,XML 使您的數(shù)據(jù)更可用,也更有用。

不同的應(yīng)用程序都能夠訪問您的數(shù)據(jù),不僅僅在 HTML 頁中,也可以從 XML 數(shù)據(jù)源中進(jìn)行訪問。

通過 XML,您的數(shù)據(jù)可供各種閱讀設(shè)備使用(手持的計(jì)算機(jī)、語音設(shè)備、新聞閱讀器等),還可以供盲人或其他殘障人士使用。

  • XML 用于創(chuàng)建新的 Internet 語言
    很多新的 Internet 語言是通過 XML 創(chuàng)建的:
    其中的例子包括:

  • XHTML - 最新的 HTML 版本

  • WSDL - 用于描述可用的 web service

  • WAP 和 WML - 用于手持設(shè)備的標(biāo)記語言

  • RSS - 用于 RSS feed 的語言

  • RDF 和 OWL - 用于描述資源和本體

  • SMIL - 用于描述針針對 web 的多媒體

XHTML

  • XHTML含義:可擴(kuò)展標(biāo)記語言(Extensible HyperText Markup Language,簡稱:XHTML)

XHTML基于可擴(kuò)展標(biāo)記語言(XML)。XHTML就是一個扮演著類似HTML的角色的可擴(kuò)展標(biāo)記語言(XML),所以,本質(zhì)上說,XHTML是一個過渡技術(shù),結(jié)合了部分XML的強(qiáng)大功能及大多數(shù)HTML的簡單特性。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還為時過早。因此,在HTML4.0的基礎(chǔ)上,用XML的規(guī)則對其進(jìn)行擴(kuò)展,得到了XHTML。所以,建立XHTML的目的就是實(shí)現(xiàn)HTML向XML的過渡。XHTML 于2000年的1月26日成為 W3C (World Wide Web Consortium ,萬維網(wǎng)聯(lián)盟),文件擴(kuò)展名為xhtml.。

XHTML 是更嚴(yán)格更純凈的 HTML 代碼

  • XHTML 的目標(biāo)是取代 HTML。
  • XHTML 與 HTML 4.01 幾乎是相同的。
  • XHTML 是更嚴(yán)格更純凈的 HTML 版本。
  • XHTML 是作為一種 XML 應(yīng)用被重新定義的 HTML。
  • XHTML 是一個 W3C 標(biāo)準(zhǔn)。

為什么要使用XHTML?

XHTML是當(dāng)前HTML版的繼承者。HTML語法要求比較松散,這樣對網(wǎng)頁編寫者來說,比較方便,但對于機(jī)器來說,語言的語法越松散,處理起來就越困難,對于傳統(tǒng)的計(jì)算機(jī)來說,還有能力兼容松散語法,但對于許多其他設(shè)備,比如手機(jī),難度就比較大。因此產(chǎn)生了由DTD定義規(guī)則,語法要求更加嚴(yán)格XHTML。大部分常見的瀏覽器都可以正確地解析XHTML,即使早期的瀏覽器,XHTML作為HTML的一個子集,許多也可以解析。也就是說,幾乎所有的網(wǎng)頁瀏覽器在正確解析HTML的同時,也可兼容XHTML。當(dāng)然,從HTML完全轉(zhuǎn)移到XHTML,還需要一個過程。

HTML與XHTML的區(qū)別

  • XHTML 元素必須被正確地嵌套。
  • XHTML 元素必須被關(guān)閉。
  • 標(biāo)簽名必須用小寫字母。
  • XHTML 文檔必須擁有根元素。

總結(jié)

  • HTML、XML、XHTML都是標(biāo)記語言
  • HTML關(guān)注網(wǎng)頁內(nèi)容的展現(xiàn)
  • XML關(guān)注數(shù)據(jù)的準(zhǔn)確,語法嚴(yán)格,用于數(shù)據(jù)傳輸
  • XHTML將XML的嚴(yán)謹(jǐn)性和HTML的簡便性結(jié)合,適應(yīng)更加靈活多變的網(wǎng)頁需求

2.怎么理解HTML語義化?

語義化是指用合理HTML標(biāo)記以及其特有的屬性去格式化文檔內(nèi)容。通俗地講,語義化就是對數(shù)據(jù)和信息進(jìn)行處理,使得機(jī)器可以理解。

也就是說,用html中的標(biāo)簽,讓整個網(wǎng)頁有一定的格式,機(jī)器在理解是,遇到某個標(biāo)簽,知道這部分是做什么的。

語義化的優(yōu)點(diǎn)
1.為了在沒有css代碼時,也能呈現(xiàn)很好的內(nèi)容結(jié)構(gòu),代碼結(jié)構(gòu),以至于達(dá)到?jīng)]有編程基礎(chǔ)的非技術(shù)人員,也能看懂一二。(其實(shí),就是為了不穿CSS外衣,裸奔依然好看)。
2.提高用戶體驗(yàn),比如:title,alt用于解釋名詞和圖片信息。
3.利于SEO,語義化能和搜索引擎建立良好的聯(lián)系,有利于爬蟲抓取更多的有效信息。爬蟲依賴于標(biāo)簽來確定上下文和各個關(guān)鍵字的權(quán)重。
4.方便其他設(shè)備解析(如屏幕閱讀器、盲人閱讀器、移動設(shè)備)以語義的方式來渲染網(wǎng)頁。
5.便于團(tuán)隊(duì)開發(fā)和維護(hù),語義化更具可讀性,如果遵循W3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個標(biāo)準(zhǔn),可以減少差異化,利于規(guī)范化。

3.怎樣理解內(nèi)容與樣式分離原則?

  • 寫HTML的時候先不管樣式,重點(diǎn)放在HTML的結(jié)構(gòu)和語義化上,讓HTML能體現(xiàn)頁面結(jié)構(gòu)或者內(nèi)容。樣式交給CSS完成,交互交給JS完成
  • 寫JS的時候,盡量不要用JS去直接操作樣式,而是通過給元素添加刪除class來控制樣式變化
  • HTML內(nèi)不允許出現(xiàn)屬性樣式,盡量不要出現(xiàn)行內(nèi)樣式。

4.有哪些常見的meta標(biāo)簽?

<meta>標(biāo)簽

  • <meta> 元素可提供有關(guān)頁面的元信息(meta-information),比如針對搜索引擎和更新頻度的描述和關(guān)鍵詞。
  • <meta> 標(biāo)簽位于文檔的頭部,不包含任何內(nèi)容。<meta> 標(biāo)簽的屬性定義了與文檔相關(guān)聯(lián)的名稱/值對。


    image.png

<meta charset='xxx'>:告訴瀏覽器器,當(dāng)前頁面采用的編碼方式。

name屬性

name屬性主要用于描述網(wǎng)頁,與之對應(yīng)的屬性值為content,content中的內(nèi)容主要是便于搜索引擎機(jī)器人查找信息和分類信息用的。

格式<meta name="參數(shù)"content="具體的參數(shù)值">。

1.Keywords(關(guān)鍵字):告訴搜索引擎你網(wǎng)頁的關(guān)鍵字是什么。
<meta name="keywords"content="meta總結(jié),html meta,meta屬性,meta跳轉(zhuǎn)">

2.description(網(wǎng)站內(nèi)容描述):用來告訴搜索引擎你的網(wǎng)站主要內(nèi)容。
<meta name="description"content="xxx博客,html的meta總結(jié),meta是html語言head區(qū)的一個輔助性標(biāo)簽。">

3.robots(機(jī)器人向?qū)?:告訴搜索機(jī)器人哪些頁面需要索引,哪些頁面不需要索引。
<meta name="robots"content="none">
可選擇參數(shù)

  • 信息參數(shù)為all:文件將被檢索,且頁面上的鏈接可以被查詢

  • 信息參數(shù)為none:文件將不被檢索,且頁面上的鏈接不可以被查詢

  • 信息參數(shù)為index:文件將被檢索

  • 信息參數(shù)為follow:頁面上的鏈接可以被查詢

  • 信息參數(shù)為noindex:文件將不被檢索,但頁面上的鏈接可以被查詢

  • 信息參數(shù)為nofollow:文件將被檢索,但頁面上的鏈接不可以被查詢

4.author(作者):標(biāo)注網(wǎng)頁的作者
<meta name="author"content="root,root@xxxx.com">

5.generator:明網(wǎng)站的采用的什么軟件制作。
<meta name="generator"content="信息參數(shù)"/>

6.COPYRIGHT:代表說明網(wǎng)站版權(quán)信息。
<META NAME="COPYRIGHT"CONTENT="信息參數(shù)">

7.revisit-after:代表網(wǎng)站重訪,7days代表7天,依此類推。
<META name="revisit-after"CONTENT="7days">

http-equiv屬性

相當(dāng)于http的文件頭作用,它可以向?yàn)g覽器傳回一些有用的信息,以幫助正確和精確地顯示網(wǎng)頁內(nèi)容,與之對應(yīng)的屬性值為content,content中的內(nèi)容其實(shí)就是各個參數(shù)的變量值。

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

1.Expires(期限):可以用于設(shè)定網(wǎng)頁的到期時間。一旦網(wǎng)頁過期,必須到服務(wù)器上重新傳輸。
<meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT">
PS:必須使用GMT的時間格式。

2.Pragma(cache模式):禁止瀏覽器從本地計(jì)算機(jī)的緩存中訪問頁面內(nèi)容。訪問者無法脫機(jī)瀏覽
<meta http-equiv="Pragma"content="no-cache">

3.Refresh(刷新):自動刷新并指向新頁面。
<meta http-equiv="Refresh"content="2;URL=http://www.xxx.com">
PS:注意后面的引號,分別在秒數(shù)的前面和網(wǎng)址的后面,例子中為2秒后刷新到url的網(wǎng)址

4.Set-Cookie(cookie設(shè)定):如果網(wǎng)頁過期,那么存盤的cookie將被刪除。
<meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT;path=/">
PS:必須使用GMT的時間格式。

5.Window-target(顯示窗口的設(shè)定):強(qiáng)制頁面在當(dāng)前窗口以獨(dú)立頁面顯示。
<meta http-equiv="Window-target"content="_top">
PS:用來防止別人在框架里調(diào)用自己的頁面。

6.content-Type(顯示字符集的設(shè)定):設(shè)定頁面使用的字符集。
<meta http-equiv="content-Type"content="text/html;charset=gb2312">
不同參數(shù)
meta標(biāo)簽的charset的信息參數(shù)如GB2312時,代表說明網(wǎng)站是采用的編碼是簡體中文

meta標(biāo)簽的charset的信息參數(shù)如BIG5時,代表說明網(wǎng)站是采用的編碼是繁體中文

meta標(biāo)簽的charset的信息參數(shù)如iso-2022-jp時,代表說明網(wǎng)站是采用的編碼是日文

meta標(biāo)簽的charset的信息參數(shù)如ks_c_5601時,代表說明網(wǎng)站是采用的編碼是韓文

meta標(biāo)簽的charset的信息參數(shù)如ISO-8859-1時,代表說明網(wǎng)站是采用的編碼是英文

meta標(biāo)簽的charset的信息參數(shù)如UTF-8時,代表世界通用的語言編碼

7.content-Language(顯示語言的設(shè)定)
<meta http-equiv="Content-Language"content="zh-cn"/>

8.http-equiv="imagetoolbar":指定是否顯示圖片工具欄,當(dāng)為false代表不顯示,當(dāng)為true代表顯示。
<meta http-equiv="imagetoolbar"content="false"/>

9.Content-Script-Type:W3C網(wǎng)頁規(guī)范,指明頁面中腳本的類型。
<Meta http-equiv="Content-Script-Type"Content="text/javascript">

**10.Pics-label(網(wǎng)頁等級評定) **:在IE的internet選項(xiàng)中有一項(xiàng)內(nèi)容設(shè)置,可以防止瀏覽一些受限制的網(wǎng)站,而網(wǎng)站的限制級別就是通過meta屬性來設(shè)置的。
`<meta http-equiv="Pics-label" content=""> ·

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

  • 文檔聲明的作用:告知瀏覽器的解析器, 用什么 文檔類型規(guī)范 來解析這個文檔。
  • 嚴(yán)格模式和混雜模式
    嚴(yán)格模式:標(biāo)準(zhǔn)模式,瀏覽器使用W3C的標(biāo)準(zhǔn)解析渲染頁面。
    混雜模式:瀏覽器使用自己的怪異模式解析渲染頁面。
  • <!doctype html> 的作用

它是html5標(biāo)準(zhǔn)網(wǎng)頁聲明,全稱為Document Type HyperText Mark-up Language,意思為文檔種類為超文本標(biāo)記性語言或超文本鏈接標(biāo)示語言,現(xiàn)在是這個簡潔形式,支持html5標(biāo)準(zhǔn)的主流瀏覽器都認(rèn)識這個聲明。表示網(wǎng)頁采用html5,<!DOCTYPE> 聲明位于文檔中的最前面的位置,處于 <html> 標(biāo)簽之前。此標(biāo)簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范。

6.瀏覽器亂碼的原因是什么?如何解決?

  • 保存的編碼格式和瀏覽器解析時的解碼格式不匹配導(dǎo)致的。
  • 在保存文件時,charset的屬性值與當(dāng)前頁面保持一致

7.常見的瀏覽器有哪些?使用什么內(nèi)核?

  • 常見內(nèi)核:Trident、Gecko、Webkit、Blink。
    常見瀏覽器
  • IE: trident內(nèi)核(IE6~IE11)
  • Chrome:Blink(基于webkit,Google與Opera Software共同開發(fā))
  • Firefox:gecko內(nèi)核
  • Safari:webkit內(nèi)核
  • Opera:以前是presto內(nèi)核,Opera現(xiàn)已改用Google Chrome的Blink內(nèi)核
  • 360安全瀏覽器:1.0-5.0為Trident,6.0為Trident+Webkit,7.0為Trident+Blink
  • 360極速瀏覽器:7.5之前為Trident+Webkit,7.5為Trident+Blink
  • QQ瀏覽器:Chromium內(nèi)核+IE雙內(nèi)核

8.常見html標(biāo)簽及使用場景

常見的html標(biāo)簽

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

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

  • 一.HTML、XML、XHTML 有什么區(qū)別 什么是 HTML? HTML 指的是超文本標(biāo)記語言 (Hyper T...
    Sunset125閱讀 714評論 0 1
  • HTML、XML、XHTML 有什么區(qū)別 HTML:超文本標(biāo)記語言 (Hyper Text Markup Lang...
    喵不吱閱讀 467評論 0 1
  • 1. HTML、XML、XHTML 有什么區(qū)別: HTML(Hypertext Markup Language):...
    饑人谷_兔子君閱讀 758評論 0 2
  • HTML、XML和XHTML的區(qū)別 HTML,超文本標(biāo)記語言,被設(shè)計(jì)用來顯示數(shù)據(jù),標(biāo)記內(nèi)容的格式,“超文本”體現(xiàn)在...
    佳聯(lián)閱讀 362評論 0 0
  • 我,90后,天秤座。 01 在簡書不長的日子寫里寫了很多關(guān)于別人的故事,這次想寫一下有關(guān)于我自己的小事在往后的日子...
    JM立夏閱讀 358評論 23 4