什么是HTML
- HTML其實(shí)是HyperText Markup Language的縮寫(xiě), 超文本標(biāo)記語(yǔ)言
HTML發(fā)展史
IETF簡(jiǎn)介
- IETF是英文Internet Engineering Task Force的縮寫(xiě), 翻譯過(guò)來(lái)就是'互聯(lián)網(wǎng)工程任務(wù)組'
- IETF負(fù)責(zé)定義并管理因特網(wǎng)技術(shù)的所有方面。包括用于數(shù)據(jù)傳輸?shù)腎P協(xié)議、讓域名與IP地址匹配的域名系統(tǒng)（DNS）、用于發(fā)送郵件的簡(jiǎn)單郵件傳輸協(xié)議（SMTP）等
W3C簡(jiǎn)介
- W3C是英文World Wide Web Consortium的縮寫(xiě)， 翻譯過(guò)來(lái)就是W3C理事會(huì)或萬(wàn)維網(wǎng)聯(lián)盟, W3C是全球互聯(lián)網(wǎng)最具權(quán)威的技術(shù)標(biāo)準(zhǔn)化組織.
- W3C于1994年10月在麻省理工學(xué)院計(jì)算機(jī)科學(xué)實(shí)驗(yàn)室成立。創(chuàng)建者是萬(wàn)維網(wǎng)的發(fā)明者Tim Berners-Lee
- W3C負(fù)責(zé)web方面標(biāo)準(zhǔn)的制定，像HTML、XHTML、CSS、XML的標(biāo)準(zhǔn)就是由W3C來(lái)定制的。
網(wǎng)頁(yè)的固定格式
- 1.編寫(xiě)網(wǎng)頁(yè)和寫(xiě)信一樣都有一套規(guī)范和要求, 這套規(guī)范和要求中規(guī)定了寫(xiě)信的固定格式
- 2.寫(xiě)信基本結(jié)構(gòu)
- 3.編寫(xiě)網(wǎng)頁(yè)的步驟:
- 3.1.新建一個(gè)文本文檔
- 3.2.利用記事本打開(kāi)
- 3.3.編寫(xiě)THML代碼
- 3.4.保存并且修改純文本文檔的擴(kuò)展名為.html
- 3.5.利用瀏覽器打開(kāi)編寫(xiě)好的文件
- 4.網(wǎng)頁(yè)基本結(jié)構(gòu):
<html> <head> <title></title> </head> <body> </body></html>
- 5.通過(guò)觀察我們發(fā)現(xiàn), HTML基本結(jié)構(gòu)中所有的標(biāo)簽都是成對(duì)出現(xiàn)的, 這些成對(duì)出現(xiàn)的標(biāo)簽中有一個(gè)帶/有一個(gè)不帶/, 那么這些不帶/的標(biāo)簽我們稱(chēng)之為開(kāi)始標(biāo)簽, 這些帶/的我們稱(chēng)之為結(jié)束標(biāo)簽
html標(biāo)簽
- 作用:
- 用于告訴瀏覽器這是一個(gè)網(wǎng)頁(yè), 也就是說(shuō)告訴瀏覽器我是一個(gè)HTML文檔
- 注意點(diǎn):
- 其它所有的標(biāo)簽都必須寫(xiě)在html標(biāo)簽里面, 也就是寫(xiě)在html開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽中間
head標(biāo)簽
- 作用:
- 用于給網(wǎng)站添加一些配置信息
- 例如:
- 指定網(wǎng)站的標(biāo)題 / 指定網(wǎng)站的小圖片
- 添加網(wǎng)站的SEO相關(guān)的信息(指定網(wǎng)站的關(guān)鍵字/指定網(wǎng)站的描述信息)
- 外掛一些外部的css/js文件
- 添加一些瀏覽器適配相關(guān)的內(nèi)容
- 注意點(diǎn):
- 一般情況下, 寫(xiě)在head標(biāo)簽內(nèi)部的內(nèi)容都不會(huì)顯示給用戶(hù)查看, 也就是說(shuō)一般情況下寫(xiě)在head標(biāo)簽內(nèi)部的內(nèi)容我們都看不到
title標(biāo)簽
- 作用:
- 專(zhuān)門(mén)用于指定網(wǎng)站的標(biāo)題, 并且這個(gè)指定的標(biāo)題將來(lái)還會(huì)作為用戶(hù)保存網(wǎng)站的默認(rèn)標(biāo)題
- 注意點(diǎn):
- title標(biāo)簽必須寫(xiě)在head標(biāo)簽里面
body標(biāo)簽
- 作用:
- 專(zhuān)門(mén)用于定義HTML文檔中需要顯示給用戶(hù)查看的內(nèi)容(文字/圖片/音頻/視頻)
- 注意點(diǎn):
- 雖然說(shuō)有時(shí)候你可能將內(nèi)容寫(xiě)到了別的地方在網(wǎng)頁(yè)中也能看到, 但是千萬(wàn)不要這么干, 一定要將需要顯示的內(nèi)容寫(xiě)在body中
- 一對(duì)html標(biāo)簽中(一個(gè)html開(kāi)始標(biāo)簽和一個(gè)html結(jié)束標(biāo)簽)只能有一對(duì)body標(biāo)簽
HTML標(biāo)簽
HTML標(biāo)簽分類(lèi)
- 單標(biāo)簽
- 只有開(kāi)始標(biāo)簽沒(méi)有結(jié)束標(biāo)簽, 也就是由一個(gè)<>組成的
<meta charset='UTF-8' />
- 雙標(biāo)簽
- 有開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽, 也就是由一個(gè)<>和一個(gè)</>組成的
<html></html>
HTML標(biāo)簽關(guān)系分類(lèi)
<head></head><body></body>
<head> <meta charset='UTF-8' /> <title>百度一下,你就知道123</title></head>
DTD文檔聲明
- 什么是DTD文檔聲明?
- 由于HTML有很多個(gè)版本的規(guī)范, 每個(gè)版本的規(guī)范之間又有一定的差異. 所以為了讓瀏覽器能夠正確的編譯/解析/渲染我們的網(wǎng)頁(yè), 我們需要在HTML文件的第一行告訴瀏覽器, 我們當(dāng)前這個(gè)網(wǎng)頁(yè)是用哪一個(gè)版本的HTML規(guī)范來(lái)編寫(xiě)的. 瀏覽器只要知道了我們是用哪一個(gè)版本的規(guī)范來(lái)編寫(xiě)之后, 它就能夠正確的編譯/解析/渲染我們的網(wǎng)頁(yè)
- DTD文檔聲明格式:
<!DOCTYPE html>
- 注意事項(xiàng):<!DOCTYPE>聲明必須是 HTML 文檔的第一行，位于 <html> 標(biāo)簽之前
- <!DOCTYPE> 聲明不是 HTML 標(biāo)簽
- <!DOCTYPE> 聲明沒(méi)有結(jié)束標(biāo)簽
- <!DOCTYPE> 聲明對(duì)大小寫(xiě)不敏感
- 這個(gè)聲明瀏覽器會(huì)看, 但是并不是完全依賴(lài)于這個(gè)聲明, 瀏覽器有一套自己的默認(rèn)的處理機(jī)制
- 不寫(xiě)也能運(yùn)行
- H5網(wǎng)頁(yè)里面用H4也能運(yùn)行
- HTML5之前有2大種規(guī)范, 每種規(guī)范中又有3小種規(guī)范
- 大規(guī)范 小規(guī)范 HTML Strict (嚴(yán)格的) HTML Transitional(過(guò)度的,普通的,寬松的) HTML Frameset(帶有框架的頁(yè)面) XHTML Strict (嚴(yán)格的) XHTML Transitional(過(guò)度的,普通的,寬松的) XHTML Frameset(帶有框架的頁(yè)面) HTML的DTD文檔聲明和XHTML的DTD文檔聲明有何區(qū)別?
- XHTML本身規(guī)定比如標(biāo)簽必須小寫(xiě)、必須嚴(yán)格閉合、必須使用引號(hào)引起屬性等等, 而HTML會(huì)更加松散沒(méi)有這么嚴(yán)格
- Strict表示嚴(yán)格的, 這種模式里面的要求更為嚴(yán)格.這種嚴(yán)格主要體現(xiàn)在有一些標(biāo)簽不能使用
- 例如font標(biāo)簽/u標(biāo)簽等
- font標(biāo)簽可以修改一個(gè)文本的字號(hào)、顏色、字體,但這和HTML的本質(zhì)有沖突,因?yàn)镠TML只能負(fù)責(zé)語(yǔ)義,不能負(fù)責(zé)樣式,而font標(biāo)簽是用于修改樣式的,所以在Strict中是不能使用font標(biāo)簽
- u標(biāo)簽可以給一個(gè)文本加上下劃線(xiàn),但這和HTML的本質(zhì)有沖突,因?yàn)镠TML只能負(fù)責(zé)語(yǔ)義,不能負(fù)責(zé)樣式,而u標(biāo)簽是用于添加下劃線(xiàn)是樣式.所以在Strict中是不能使用u標(biāo)簽
- Transitional表示普通的, 這種模式是沒(méi)有一些別的要求
- 例如可以使用font標(biāo)簽、u標(biāo)簽等
- 但是在企業(yè)開(kāi)發(fā)中不會(huì)使用這些標(biāo)簽,因?yàn)檫@違背了HTML的本質(zhì), 而是將這些標(biāo)簽作為css的鉤子使用
- Frameset表示框架, 在框架的頁(yè)面使用
- 后面學(xué)到框架/NodeJS 再做詳細(xì)了解
- 常見(jiàn)的DOCTYPE有如下幾種
HTML4.01:<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN''http://www.w3.org/TR/html4/loose.dtd'>XHTML 1.0<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN''http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>HTML5: <!DOCTYPE html>
- 有這么多規(guī)范我們學(xué)習(xí)過(guò)程中到底使用哪一種比較合適呢?
- 無(wú)論是HTML還是XHTML,過(guò)去企業(yè)級(jí)開(kāi)發(fā)中用的比較多的大部分都是Transitional類(lèi)型的文檔聲明
- 但是HTML5的時(shí)代已經(jīng)到來(lái),以上6中規(guī)范僅僅作為了解, 以后都用HTML5類(lèi)型的文檔聲明, HTML5向下兼容(求此刻WC3心里陰影面積)
- 目前國(guó)內(nèi)一線(xiàn)網(wǎng)站都更新到了HTML5的文檔聲明, 所以后續(xù)授課也是全程使用HTML5的文檔聲明
- www.baidu.com (B)
- www.taobao.com (A)
- www.qq.com (T)
- www.sohu.com(大奇葩)
HTML和XHTML、HTML5區(qū)別
- 在HTML的早期發(fā)展中，大部分標(biāo)準(zhǔn)都是所謂的retro-spec，即先有實(shí)現(xiàn)后有標(biāo)準(zhǔn)。在這種情況下，HTML標(biāo)準(zhǔn)不是很規(guī)范，瀏覽器也對(duì)HTML頁(yè)面中的錯(cuò)誤相當(dāng)寬容。這反過(guò)來(lái)又導(dǎo)致了HTML開(kāi)發(fā)者寫(xiě)出了大量含有錯(cuò)誤的HTML頁(yè)面
- html語(yǔ)言本身有一些缺陷（例如： 內(nèi)容和形式不能分離；標(biāo)簽單一；數(shù)據(jù)不能復(fù)用等等），隨著xml的興起人們希望xml來(lái)彌補(bǔ)html的不足，但是目前有成千上萬(wàn)的網(wǎng)頁(yè)都是用html編寫(xiě)的，所以完全使用xml來(lái)替代html還為時(shí)過(guò)早，于是W3C在2000年推出了xhtml1.0， 建立xhtml的目的就是實(shí)現(xiàn)從html向xml的過(guò)度
- 為了規(guī)范HTML，W3C結(jié)合XML制定了XHTML 1.0標(biāo)準(zhǔn)，這個(gè)標(biāo)準(zhǔn)沒(méi)有增加任何新的標(biāo)簽，只是按照XML的要求來(lái)規(guī)范HTML，并定義了一個(gè)新的MIME type application/xhtml xml。W3C的初衷是要求瀏覽器對(duì)這個(gè)MIME type實(shí)行強(qiáng)錯(cuò)誤檢查，如果頁(yè)面有HTML錯(cuò)誤，就要顯示錯(cuò)誤信息。但是由于已有的web頁(yè)面中已經(jīng)有了大量的錯(cuò)誤，很多開(kāi)發(fā)者拒絕使用新的MIME type。W3C不得已，在XHTML 1.0的標(biāo)準(zhǔn)之后增加了一個(gè)附錄C，允許開(kāi)發(fā)者使用XHTML語(yǔ)法來(lái)寫(xiě)頁(yè)面，同時(shí)使用舊的MIME type，application/html，來(lái)分發(fā)頁(yè)面
- W3C隨后在XHTML 1.1中取消了附錄C，即使用XHTML 1.1標(biāo)準(zhǔn)的頁(yè)面必須用新的MIME type來(lái)分發(fā)。于是這個(gè)標(biāo)準(zhǔn)并沒(méi)有很多人采用
- 有了XHTML的教訓(xùn)，W3C在制定下一代HTML標(biāo)準(zhǔn)時(shí)（HTML5），就將向后兼容作為了一個(gè)很重要的原則。HTML5確實(shí)引入了許多新的特性，但是它最重要的一個(gè)特性是，不會(huì)break已有的網(wǎng)頁(yè)。你可以將任何已有的網(wǎng)頁(yè)的第一行改成<!DOCTYPE html>，它就成也一個(gè)HTML5頁(yè)面，并且可以照樣在瀏覽器里正常的展示。
- 簡(jiǎn)而言之
- HTML語(yǔ)法非常寬松容錯(cuò)性強(qiáng);
- XHTML更為嚴(yán)格,它要求標(biāo)簽必須小寫(xiě)、必須嚴(yán)格閉合、標(biāo)簽中的屬性必須使用引號(hào)引起等等;
- HTML5是HTML的下一個(gè)版本所以除了非常寬松容錯(cuò)性強(qiáng)以外,還增加許多新的特性
.htm 和 .html擴(kuò)展名區(qū)別
- DOS操作系統(tǒng)（win95或win98）下只能支持長(zhǎng)度為3的后綴名，所以是htm
- 但在windows后綴長(zhǎng)度可以大于3位，所以windows下無(wú)所謂htm與html，html是為長(zhǎng)文件的格式命名的
- 所以htm是為了兼容過(guò)去的DOS命名格式存在的
