摘要：開始標(biāo)簽和結(jié)束標(biāo)簽也被稱為開放標(biāo)簽和閉合標(biāo)簽。網(wǎng)頁(yè)主要由三部分組成結(jié)構(gòu)表現(xiàn)和行為對(duì)應(yīng)標(biāo)準(zhǔn)也分三方面結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言行為標(biāo)準(zhǔn)。表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言主要是，用于對(duì)網(wǎng)頁(yè)進(jìn)行美化。

初識(shí)HTML和WEB標(biāo)準(zhǔn)

什么是 HTML？

• HTML 超文本標(biāo)記語(yǔ)言的縮寫(Hyper Text Markup Language)
• HTML 并不是編程語(yǔ)言，而是一種標(biāo)記語(yǔ)言(markup language)
  • 標(biāo)記 <英文單詞或者字母>稱為標(biāo)記，一個(gè)HTML頁(yè)面都是由各種標(biāo)記組成。
  • 標(biāo)記語(yǔ)言 一套標(biāo)記標(biāo)簽(markup tag)
  • 標(biāo)記語(yǔ)言 和編程語(yǔ)言有一個(gè)編譯過(guò)程不一樣，它是直接將HTML頁(yè)面交由瀏覽器解析執(zhí)行的。
• HTML 使用標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè)，用于描述超文本內(nèi)容的顯示方式，如字體，顏色，大小等。
  • 超文本基本特征就是可以超鏈接文檔。
  • 這些標(biāo)記標(biāo)簽在瀏覽器解析完展示給用戶看的時(shí)候是不會(huì)出現(xiàn)在頁(yè)面的。

HTML 有什么用？

• 作用 HTML用于描述文檔語(yǔ)義。(html中，除了語(yǔ)義，其他什么都沒有)

什么是HTML 標(biāo)簽？

* HTML 標(biāo)記標(biāo)簽通常被稱為 HTML 標(biāo)簽(HTML tag)
* HTML 標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞，如。
* HTML 標(biāo)簽通常是成對(duì)出現(xiàn)的，如
和
。
* 標(biāo)簽對(duì)中的第一個(gè)標(biāo)簽是開始標(biāo)簽，第二個(gè)(通常帶"/"號(hào))標(biāo)簽是結(jié)束標(biāo)簽。
* 開始標(biāo)簽和結(jié)束標(biāo)簽也被稱為開放標(biāo)簽和閉合標(biāo)簽。

HTML標(biāo)簽 有什么用？

• 作用: 不同的HTML標(biāo)簽給文本不同的語(yǔ)義。
  • 面試的時(shí)候問(wèn)你，h1標(biāo)簽有什么作用？
    • 正確答案: h1標(biāo)簽用于給文本增加主標(biāo)題的語(yǔ)義，且一個(gè)頁(yè)面中只能有一個(gè)h1標(biāo)簽(文章名稱只能有一個(gè))
    • 錯(cuò)誤答案: h1標(biāo)簽用于給文字加粗，加黑，增大。

HTML 文檔 = 網(wǎng)頁(yè)

web 瀏覽器的作用是讀取HTML文檔，并將其以網(wǎng)頁(yè)的形式顯示，瀏覽器不會(huì)顯示當(dāng)中的HTML標(biāo)簽，而是使用標(biāo)簽來(lái)解析頁(yè)面的內(nèi)容。

• HTML文檔 用于描述網(wǎng)頁(yè)。
• HTML文檔 包含HTML標(biāo)簽和純文本。
• HTML文檔 被稱為網(wǎng)頁(yè)(通俗術(shù)語(yǔ))
• 網(wǎng)頁(yè) 可以看成是由各種標(biāo)記組成的一個(gè)頁(yè)面。
  • 主頁(yè)(首頁(yè)) 網(wǎng)站的起始頁(yè)面或者導(dǎo)航頁(yè)面。

例：

    
    
        
        
 主標(biāo)題：鐵樂與貓學(xué)習(xí)HTML 
        
        
 正文段落：學(xué)習(xí)HTML的第一天。
        
    

WEB標(biāo)準(zhǔn)

• w3c 萬(wàn)維網(wǎng)聯(lián)盟組織，制定web標(biāo)準(zhǔn)的機(jī)構(gòu)。
  • 官方鏈接：w3c官網(wǎng)
• web標(biāo)準(zhǔn) 制作網(wǎng)頁(yè)遵循的規(guī)范，它不是一個(gè)標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。
• 網(wǎng)頁(yè)主要由三部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）
• 對(duì)應(yīng)web標(biāo)準(zhǔn)也分三方面：結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言、表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言、行為標(biāo)準(zhǔn)。
  • 結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言：主要是XHTML和XML，用于描述網(wǎng)頁(yè)。
  • 表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言：主要是CSS，用于對(duì)網(wǎng)頁(yè)進(jìn)行美化。
  • 行為標(biāo)準(zhǔn)：主要包括對(duì)象模型（如W3C DOM）、ECMAScript等，JS讓網(wǎng)頁(yè)富有生命力，動(dòng)態(tài)。

代碼標(biāo)準(zhǔn)

• 必須結(jié)束標(biāo)記
  • HTML可以打開多個(gè)標(biāo)簽而不要求一定要寫對(duì)應(yīng)的結(jié)束標(biāo)簽來(lái)關(guān)閉它們。
  • 這在XHTML中是不合法的。另外約定俗成也必須帶結(jié)束標(biāo)記。
  • XHTML要求有嚴(yán)謹(jǐn)?shù)慕Y(jié)構(gòu)，所有標(biāo)簽必須關(guān)閉。
  • 如果是多帶帶不成對(duì)的標(biāo)簽，在標(biāo)簽最后加一個(gè)"/"來(lái)關(guān)閉它。
    * 雙邊標(biāo)記 * 單邊標(biāo)記
轉(zhuǎn)成

• 小寫元素
  • HTML對(duì)大小寫不敏感，XHTML對(duì)大小寫敏感。
  • XHTML要求所有的標(biāo)簽和屬性的名字都必須使用小寫。
  • 大小寫夾雜也是不被認(rèn)可的。
    • 例dreamweaver自動(dòng)生成的屬性名字"onMouseOver"也必須修改成"onmouseover"。
• 合理嵌套
  • 所有的嵌套都必須按順序。
    * 例
    必須修改為

  • 一層一層的嵌套必須是嚴(yán)格對(duì)稱。
• 屬性值加引號(hào)
  • 在HTML中，沒有強(qiáng)制給屬性值加引號(hào)，但在XHTML中，必須被加引號(hào)。
    * 例必須修改為：
  • 特殊情況需要在屬性值中使用雙引號(hào)時(shí)可以用相應(yīng)代表的特殊符號(hào)去引用。
• 特殊符號(hào)

    * 任何小于號(hào)(<)，只要不是標(biāo)簽的一部分，都必須被編碼為<
    * 任何大于號(hào)(>)，只要不是標(biāo)簽的一部分，都必須被編碼為>
    * 任何與符號(hào)(&)，只要不是實(shí)體的一部分，都必須被編碼為&
    * 注：上面的特殊符號(hào)中間沒有空格，且后面帶分號(hào)。

• 所有屬性賦值
  • XHTML規(guī)定所有屬性都必須有一個(gè)值，沒有值的就重復(fù)本身。
• "--"在注釋中
  • “--”只能發(fā)生在XHTML注釋的開頭和結(jié)束，也就是說(shuō)，在內(nèi)容中它們不再有效。

以上標(biāo)準(zhǔn)雖然只在XHMTL中要求規(guī)范，HTML中不算不合法，但程序員默認(rèn)還是要遵循它們的。

HTML的基本語(yǔ)法特征

• HTML對(duì)換行不敏感，對(duì)tab不敏感，換多少行和tab多少都不影響頁(yè)面的結(jié)構(gòu)。
  • HTML并不依靠縮進(jìn)來(lái)表示嵌套，而是直接看標(biāo)簽的包裹關(guān)系。
  • 但是良好的縮進(jìn)有助于閱讀和理解代碼，所以最好還是正確的使用縮進(jìn)標(biāo)簽。
• 空白折疊現(xiàn)象
  • HTML中所有的文字之間，如果有空格、換行、tab都只會(huì)被折疊成一個(gè)空格顯示。
• 標(biāo)簽要嚴(yán)格封閉

HTML與XHTML

• XHTML：Extensible Hypertext Markup Language，可擴(kuò)展超文本標(biāo)注語(yǔ)言。
  • 在XHTML中的字母X，表示“嚴(yán)格的”。
  • XHMTL與HTML4.0的標(biāo)記基本上一樣。
  • XHTML不同于HTML4.0，可稱之為嚴(yán)格嚴(yán)謹(jǐn)?shù)摹⒓儍舻?/strong>HTML。
  • XHTML的主要目的是為了規(guī)范HTML4.0，也可以理解為HTML4.0的升級(jí)版。
  • 但是真正的升級(jí)版，HTML5極大的簡(jiǎn)化了DTD(規(guī)范)，也就是說(shuō)HTML5中就不用區(qū)分XHTML和HTML了。
• HTML的標(biāo)記書寫很不規(guī)范，有可能會(huì)造成其它的設(shè)備(ipad、手機(jī)、電視等)無(wú)法正常顯示。
  • HTML4.01里面規(guī)定了普通和XHTML兩大種規(guī)范。
  • HTML4.01這個(gè)版本是IE6開始兼容的。
  • HTML5是IE9開始兼容的。