篇目錄

• 本篇目錄

• 什么是HTML

• HTML的作用

• HTML發(fā)展史

• IETF簡(jiǎn)介

• W3C簡(jiǎn)介

• 網(wǎng)頁(yè)的固定格式

• html標(biāo)簽

• head標(biāo)簽

• title標(biāo)簽

• body標(biāo)簽

• head內(nèi)部標(biāo)簽

• meta標(biāo)簽

• HTML標(biāo)簽

• HTML標(biāo)簽分類

• HTML標(biāo)簽關(guān)系分類

• DTD文檔聲明

• HTML和XHTML、HTML5區(qū)別

• htm 和 .html擴(kuò)展名區(qū)別

什么是HTML

• HTML其實(shí)是HyperText Markup Language的縮寫, 超文本標(biāo)記語(yǔ)言

HTML的作用

• 1.首先利用記事本保存了一個(gè)標(biāo)題和兩段描述, 然后修改純文本文件的擴(kuò)展名為.html, 然后再利用瀏覽器打開(kāi)

• 2.打開(kāi)之后發(fā)現(xiàn)顯示的格式不對(duì), 不對(duì)的原因是因?yàn)樵诩兾谋疚募兴形淖侄际峭?jí)別的, 瀏覽器不知道哪些文字代表什么意思. 也就是瀏覽器不知道哪些文字是標(biāo)題, 哪些文字是段落…., 所以導(dǎo)致了顯示的格式不正確

• 正是因?yàn)槿绱? 所以HTML應(yīng)用而生. HTML就只有一個(gè)作用, 它是專門用來(lái)描述文本的語(yǔ)義的. 也就是說(shuō)我們可以利用HTML來(lái)告訴瀏覽器哪些是標(biāo)題, 哪些是段落.

• 這些用于描述其它文本語(yǔ)義的文本, 我們稱之為標(biāo)簽. 并且這些用于描述文本語(yǔ)義的標(biāo)簽將來(lái)在瀏覽器中是不會(huì)被顯示出來(lái)的

• 所以正是因?yàn)镠TML的這些標(biāo)簽是專門用來(lái)描述其它文本語(yǔ)義的, 并且在瀏覽器中不會(huì)被顯示出來(lái), 所以我們稱這些文本為"超文本", 而這些文本又叫做標(biāo)簽, 所以HTML被稱之為"超文本標(biāo)記語(yǔ)言"

• 注意事項(xiàng):

• 雖然我們利用H1標(biāo)簽描述一段文本之后, 這段文本在瀏覽器中顯示出來(lái)會(huì)被放大和加粗, 看上去我們是利用HTML的標(biāo)簽修改了被描述的那段文本的樣式. 但是一定要記住, HTML只有一個(gè)作用, 它是專門用來(lái)給文本添加語(yǔ)義的, 而不是用來(lái)修改文本的樣式的

• H1標(biāo)簽它的作用是什么?

• 錯(cuò)誤: H1標(biāo)簽可以用來(lái)修改文字的大小, 并且還可以將文字加粗

• 正確: H1標(biāo)簽的作用是用來(lái)告訴瀏覽器, 哪些文字是標(biāo)題. 也就是H1標(biāo)簽是專門用于給指定的文字添加標(biāo)題語(yǔ)義的

HTML發(fā)展史

IETF簡(jiǎn)介

• IETF是英文Internet Engineering Task Force的縮寫, 翻譯過(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的縮寫， 翻譯過(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)定制的。

Tim Berners-Lee（蒂姆·伯納斯-李），萬(wàn)維網(wǎng)之父、html設(shè)計(jì)者、w3c創(chuàng)始人

百度百科

網(wǎng)頁(yè)的固定格式

• 1.編寫網(wǎng)頁(yè)和寫信一樣都有一套規(guī)范和要求, 這套規(guī)范和要求中規(guī)定了寫信的固定格式

• 2.寫信基本結(jié)構(gòu)

• 3.編寫網(wǎng)頁(yè)的步驟:

  3.1.新建一個(gè)文本文檔

  3.2.利用記事本打開(kāi)

  3.3.編寫THML代碼

  3.4.保存并且修改純文本文檔的擴(kuò)展名為.html

  3.5.利用瀏覽器打開(kāi)編寫好的文件

• 4.網(wǎng)頁(yè)基本結(jié)構(gòu):

  5.通過(guò)觀察我們發(fā)現(xiàn), HTML基本結(jié)構(gòu)中所有的標(biāo)簽都是成對(duì)出現(xiàn)的, 這些成對(duì)出現(xiàn)的標(biāo)簽中有一個(gè)帶/有一個(gè)不帶/, 那么這些不帶/的標(biāo)簽我們稱之為開(kāi)始標(biāo)簽, 這些帶/的我們稱之為結(jié)束標(biāo)簽

html標(biāo)簽

• 作用:

• 用于告訴瀏覽器這是一個(gè)網(wǎng)頁(yè), 也就是說(shuō)告訴瀏覽器我是一個(gè)HTML文檔

• 注意點(diǎn):

• 其它所有的標(biāo)簽都必須寫在html標(biāo)簽里面, 也就是寫在html開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽中間

head標(biāo)簽

• 作用:

• 指定網(wǎng)站的標(biāo)題 / 指定網(wǎng)站的小圖片

• 添加網(wǎng)站的SEO相關(guān)的信息(指定網(wǎng)站的關(guān)鍵字/指定網(wǎng)站的描述信息)

• 外掛一些外部的css/js文件

• 添加一些瀏覽器適配相關(guān)的內(nèi)容

• 用于給網(wǎng)站添加一些配置信息

• 例如:

• 注意點(diǎn):

• 一般情況下, 寫在head標(biāo)簽內(nèi)部的內(nèi)容都不會(huì)顯示給用戶查看, 也就是說(shuō)一般情況下寫在head標(biāo)簽內(nèi)部的內(nèi)容我們都看不到

title標(biāo)簽

• 作用:

• 專門用于指定網(wǎng)站的標(biāo)題, 并且這個(gè)指定的標(biāo)題將來(lái)還會(huì)作為用戶保存網(wǎng)站的默認(rèn)標(biāo)題

• 注意點(diǎn):

• title標(biāo)簽必須寫在head標(biāo)簽里面

body標(biāo)簽

• 作用:

• 專門用于定義HTML文檔中需要顯示給用戶查看的內(nèi)容(文字/圖片/音頻/視頻)

• 注意點(diǎn):

• 雖然說(shuō)有時(shí)候你可能將內(nèi)容寫到了別的地方在網(wǎng)頁(yè)中也能看到, 但是千萬(wàn)不要這么干, 一定要將需要顯示的內(nèi)容寫在body中

• 一對(duì)html標(biāo)簽中(一個(gè)html開(kāi)始標(biāo)簽和一個(gè)html結(jié)束標(biāo)簽)只能有一對(duì)body標(biāo)簽

head內(nèi)部標(biāo)簽

meta標(biāo)簽

• 1.為什么會(huì)有亂碼現(xiàn)象?

• 因?yàn)槲覀冊(cè)诰帉懢W(wǎng)頁(yè)的時(shí)候沒(méi)有指定字符集

• 2.如何解決亂碼現(xiàn)象?

• 在head標(biāo)簽中添加<meta charset="GBK" />, 指定字符集

• 3.什么是字符集

• 字符集就是字符的集合, 也就是很多字符堆在一起. 其實(shí)字符集很像我們古代的”活字印刷術(shù)”, 在活字印刷術(shù)中就是將很多刻有漢字的小章放到一個(gè)盒子中, 然后需要印刷文字的時(shí)候再去盒子中取這個(gè)小章出來(lái)用, 正是因?yàn)槿绱? 所以導(dǎo)致了亂碼問(wèn)題

• 假設(shè)北方人和南方人都擁有裝滿小章的盒子, 但是南方人和北方人在盒子中存儲(chǔ)小章的順序不太一樣, 那么這個(gè)時(shí)候如果北方人和南方人都需要去取”李”字, 在南方人記憶中李字在第6個(gè)盒子的第6行的第6列中(666), 在北方人的記憶中李字在第8個(gè)盒子的第8行的第8列中(888). 那么此時(shí)如果讓一個(gè)南方人去北方人的盒子中取”李”字的小章, 必然找不到,, 所以就導(dǎo)致了亂碼問(wèn)題

• 這個(gè)地方北方人的存儲(chǔ)小章的盒子和南方人存儲(chǔ)小章的盒子就對(duì)應(yīng)網(wǎng)頁(yè)中指定的字符集, 在網(wǎng)頁(yè)中我們常見(jiàn)的字符集有兩個(gè)GBK/UTF-8, GBK就對(duì)應(yīng)北方人存儲(chǔ)的盒子, UTF-8就對(duì)應(yīng)南方人存儲(chǔ)的盒子

• 所以在網(wǎng)頁(yè)中指定字符集的意義就在于告訴瀏覽器我用的是哪個(gè)盒子, 你應(yīng)該如何去查找才能找到對(duì)應(yīng)的正確的內(nèi)容

• 4.GBK(GB2312)和UTF-8區(qū)別

• 提交比較大

• 體積比較小

• GBK(GB2312)里面存儲(chǔ)的字符比較少, 僅僅存儲(chǔ)了漢字和一些常用外文

• UTF-8里面存儲(chǔ)的世界上所有的文字

• 5.那么在企業(yè)開(kāi)發(fā)中我們應(yīng)該使用GBK(GB2312)還是UTF-8呢?

• 如果你的網(wǎng)站僅僅包含中文, 那么推薦使用GB2312, 因?yàn)樗捏w積更小, 訪問(wèn)速度更快

• 如果你的網(wǎng)站除了中文以外, 還包含了一些其它國(guó)家的語(yǔ)言 , 那么推薦使用UTF-8

• 懶人推薦: 不管三七二十一, 一律寫UTF-8即可

• 6.注意點(diǎn):

• 在HTML文件中指定的字符集必須和保存這個(gè)文件的字符集一致, 否則還是會(huì)出現(xiàn)亂碼

• 所以僅僅指定字符集不一定能解決亂碼問(wèn)題, 還需要保存文件的時(shí)候, 文件的保存格式必須和指定的字符集一致才能保證沒(méi)有亂碼問(wèn)題

HTML標(biāo)簽

HTML標(biāo)簽分類

• 單標(biāo)簽

• 只有開(kāi)始標(biāo)簽沒(méi)有結(jié)束標(biāo)簽, 也就是由一個(gè)<>組成的

  
  
  

• 雙標(biāo)簽

• 有開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽, 也就是由一個(gè)<>和一個(gè)</>組成的

  HTML標(biāo)簽關(guān)系分類

• 并列關(guān)系(兄弟/平級(jí))

  
  
  

• 嵌套關(guān)系(父子/上下級(jí))

  
  
  

DTD文檔聲明

• 什么是DTD文檔聲明?

• 由于HTML有很多個(gè)版本的規(guī)范, 每個(gè)版本的規(guī)范之間又有一定的差異. 所以為了讓瀏覽器能夠正確的編譯/解析/渲染我們的網(wǎng)頁(yè), 我們需要在HTML文件的第一行告訴瀏覽器, 我們當(dāng)前這個(gè)網(wǎng)頁(yè)是用哪一個(gè)版本的HTML規(guī)范來(lái)編寫的. 瀏覽器只要知道了我們是用哪一個(gè)版本的規(guī)范來(lái)編寫之后, 它就能夠正確的編譯/解析/渲染我們的網(wǎng)頁(yè)

• DTD文檔聲明格式:

  
  
  

• 注意事項(xiàng):

• 不寫也能運(yùn)行

• H5網(wǎng)頁(yè)里面用H4也能運(yùn)行

• <!DOCTYPE>聲明必須是 HTML 文檔的第一行，位于 <html> 標(biāo)簽之前

• <!DOCTYPE> 聲明不是 HTML 標(biāo)簽

• <!DOCTYPE> 聲明沒(méi)有結(jié)束標(biāo)簽

• <!DOCTYPE> 聲明對(duì)大小寫不敏感

• 這個(gè)聲明瀏覽器會(huì)看, 但是并不是完全依賴于這個(gè)聲明, 瀏覽器有一套自己的默認(rèn)的處理機(jī)制

• HTML5之前有2大種規(guī)范, 每種規(guī)范中又有3小種規(guī)范

• HTML的DTD文檔聲明和XHTML的DTD文檔聲明有何區(qū)別?

• XHTML本身規(guī)定比如標(biāo)簽必須小寫、必須嚴(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è)文本加上下劃線,但這和HTML的本質(zhì)有沖突,因?yàn)镠TML只能負(fù)責(zé)語(yǔ)義,不能負(fù)責(zé)樣式,而u標(biāo)簽是用于添加下劃線是樣式.所以在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有如下幾種

• 有這么多規(guī)范我們學(xué)習(xí)過(guò)程中到底使用哪一種比較合適呢?

• www.baidu.com (B)

• www.taobao.com (A)

• www.qq.com (T)

• www.sohu.com(大奇葩)

• 無(wú)論是HTML還是XHTML,過(guò)去企業(yè)級(jí)開(kāi)發(fā)中用的比較多的大部分都是Transitional類型的文檔聲明

• 但是HTML5的時(shí)代已經(jīng)到來(lái),以上6中規(guī)范僅僅作為了解, 以后都用HTML5類型的文檔聲明, HTML5向下兼容(求此刻WC3心里陰影面積)

• 目前國(guó)內(nèi)一線網(wǎng)站都更新到了HTML5的文檔聲明, 所以后續(xù)授課也是全程使用HTML5的文檔聲明

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ā)者寫出了大量含有錯(cuò)誤的HTML頁(yè)面

• html語(yǔ)言本身有一些缺陷（例如： 內(nèi)容和形式不能分離；標(biāo)簽單一；數(shù)據(jù)不能復(fù)用等等），隨著xml的興起人們希望xml來(lái)彌補(bǔ)html的不足，但是目前有成千上萬(wàn)的網(wǎng)頁(yè)都是用html編寫的，所以完全使用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)寫頁(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)簽必須小寫、必須嚴(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命名格式存在的

關(guān)于課程的疑問(wèn)和討論，可以登錄http://bbs.520it.com/forum.php?mod=viewthread&tid=2423。

人認(rèn)為現(xiàn)在市面上不用編寫代碼就能輕松制作生成 h5 頁(yè)面的工具都是一些噱頭，其大致都是套用現(xiàn)成的模板，替換里面的文字或者圖片，作為一個(gè)開(kāi)發(fā)者使用類似網(wǎng)站這些功能根本不能真正意義上達(dá)到自己想要的效果，目前這類工具以邀請(qǐng)函、生日卡、企業(yè)宣傳等為主，以下是一些我了解到的網(wǎng)站僅做參考

1、戰(zhàn)鼓

這個(gè)網(wǎng)站部分免費(fèi) 沒(méi)有登錄時(shí)候可以進(jìn)入制作頁(yè)面 但是具體使用還是要登錄后使用 頁(yè)面可自由操作的比較多 但是大多都是聚焦在文字、圖片的修改，使用起來(lái)還是比較簡(jiǎn)單

2、八圖

八圖網(wǎng)也是部分免費(fèi) 和上面戰(zhàn)鼓不同的是 需要登錄后才能進(jìn)入制作頁(yè)面 能夠DIY 的東西略多 多了一個(gè)特效功能 使用起來(lái)制作過(guò)程比較簡(jiǎn)單

3、歡慶網(wǎng)

制作頁(yè)面和功能和戰(zhàn)鼓差不多 登錄后才能制作這個(gè)功能也是一毛一樣 在此就不過(guò)多的介紹了

4、兔展

這個(gè)網(wǎng)站目前在同類網(wǎng)站中知名度較高 模板也比較多 但是大多都是收費(fèi)的 幾十塊錢一個(gè)模板收費(fèi)不等 需要購(gòu)買后才能進(jìn)入制作頁(yè)面

總結(jié)：其實(shí)這類網(wǎng)站現(xiàn)在還是很多 但是都是大同小異 套用模板 如果真正想要比較特別的還是自己寫出來(lái)的比較實(shí)在沒(méi)有局限性 而且也許在這些制作上就會(huì)花一天兩天去改還是比較耗費(fèi)時(shí)間 但是寫出來(lái)的東西并不是獨(dú)一無(wú)二 所以個(gè)人還是認(rèn)為自己學(xué)習(xí)自己寫比較好 畢竟是自己的東西 再丑也是親生的對(duì)吧。

?來(lái)源：千鋒web前端