知識(shí)介紹
HTML介紹
-
HTML（Hyper Text Markup Language），中文意思是超文本標(biāo)記語(yǔ)言。
超文本：超越了普通的文本，網(wǎng)頁(yè)有文字，有超鏈接，甚至有圖片、音頻和視頻等。
標(biāo)記：我們通常使用一對(duì)對(duì)的標(biāo)簽，來(lái)對(duì)網(wǎng)頁(yè)內(nèi)容進(jìn)行標(biāo)記。
語(yǔ)言：是一種體系，html語(yǔ)言是用各種各樣的標(biāo)簽組成，描述著網(wǎng)頁(yè)的視頻，音樂(lè)和鏈接等超文本內(nèi)容。
HTML發(fā)展史
W3C管理和維護(hù)HTML標(biāo)準(zhǔn)，1993年推HTML1.0，1999年推HTML4.01，2000年推XHTML1.0，還有夭折的XHTML2.0；2005年另外的組織WHATWG推出HTML5草案，2008年，W3C和WHATWG合并，2014年，HTML5定稿推出。
故事：W3C是用于維護(hù)和制定html標(biāo)準(zhǔn)的組織，在1999年推出HTML4.01之后覺(jué)得HTML已經(jīng)不必要再維護(hù)下去，開(kāi)始主推XHTML，可是瀏覽器廠商（如微軟、蘋果等公司）并不買賬，開(kāi)發(fā)者和以前編寫的網(wǎng)頁(yè)也無(wú)法適應(yīng)XHTML。這種情況下，WHATWG（瀏覽器廠商聯(lián)合起來(lái)的組織）提出HTML5草案拋開(kāi)W3C自己玩，W3C在XHTML時(shí)代發(fā)現(xiàn)沒(méi)人和他玩，只好找WHATWG談判，于是兩派合并，最后于2014年正式推出HTML標(biāo)準(zhǔn)。
HTML5是向上兼容的，他既支持以前的寬松的HTML4.01書寫方式，也支持嚴(yán)格的XHTML格式，同時(shí)它還有很多新的特性。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>HTML第一課</title>
</head>
<body>
html介紹
</body>
</html>
代碼介紹
doctype html描述的是文檔類型
doctype必須放在文檔的第一行。<!doctype html>這句話的作用是，告訴瀏覽器，用標(biāo)準(zhǔn)模式進(jìn)行解析，因?yàn)闉g覽器對(duì)頁(yè)面的渲染有兩種模式，一種是怪異模式（瀏覽器使用自己的模式解析渲染頁(yè)面），還有一種是標(biāo)準(zhǔn)模式（瀏覽器使用W3C官方標(biāo)準(zhǔn)解析渲染頁(yè)面）。doctype是不區(qū)分大小寫的。
<html lang="en"></html>文檔開(kāi)始。
<html>標(biāo)簽是該網(wǎng)頁(yè)總所有標(biāo)簽的頂層標(biāo)簽，用于表示HTML文檔的開(kāi)始。lang="en"是 <html>標(biāo)簽的屬性，表示文檔語(yǔ)言是英文。
<head></head>設(shè)置網(wǎng)頁(yè)文檔的頭部信息
<head>主要用來(lái)設(shè)置一些與網(wǎng)頁(yè)相關(guān)的信息，與網(wǎng)頁(yè)標(biāo)題，網(wǎng)頁(yè)字符集，網(wǎng)頁(yè)的描述關(guān)鍵詞等等，設(shè)置的信息一般不會(huì)顯示在瀏覽器窗口中，主要是給瀏覽器看的，通常不是給用戶看的。
<title></title>網(wǎng)頁(yè)文檔的標(biāo)題。
<title>標(biāo)簽的作用有兩個(gè)一是設(shè)置網(wǎng)頁(yè)的標(biāo)題，會(huì)顯示在瀏覽器的標(biāo)簽欄當(dāng)中，告訴瀏覽者網(wǎng)頁(yè)的主題是什么。二是用于搜索引擎索引，作為搜索關(guān)鍵字以及搜索結(jié)果的標(biāo)題使用。特別提醒，搜索引擎會(huì)根據(jù)title標(biāo)簽設(shè)置的內(nèi)容，將網(wǎng)站或文章進(jìn)行歸類。所以一個(gè)好的標(biāo)題，可以使網(wǎng)站獲得更好的搜索排名。
<title>百度一下，你就知道</title>
<meta></meta>定義文檔元數(shù)據(jù)。
<meta>標(biāo)簽位于文檔的頭部。元數(shù)據(jù)，就是用來(lái)描述數(shù)據(jù)的數(shù)據(jù)，在這里也就是用它來(lái)對(duì)網(wǎng)頁(yè)的特性進(jìn)行描述。比如文檔字符集，關(guān)鍵字，網(wǎng)頁(yè)描述信息等等。
使用<meta>設(shè)置頁(yè)面字符集.
<meta charset="XX">可以設(shè)置頁(yè)面內(nèi)容所使用的字符編碼，瀏覽器會(huì)根據(jù)此處的字符編碼，來(lái)調(diào)用相應(yīng)的字符編碼來(lái)顯示頁(yè)面內(nèi)容和標(biāo)題.
網(wǎng)頁(yè)有時(shí)會(huì)出現(xiàn)亂碼。出現(xiàn)亂碼的原因是<meta charset="XX">里面設(shè)置的字符編碼和文件保存的字符編碼不一致。
為避免出現(xiàn)亂碼，推薦大家使用萬(wàn)國(guó)碼“utf-8”，并且對(duì)應(yīng)在保存的時(shí)候，設(shè)置文件的編碼格式為utf-8。
萬(wàn)國(guó)碼的好處是，可以的在網(wǎng)頁(yè)當(dāng)中顯示各個(gè)國(guó)家的各種文字和字符。如果你確認(rèn)只需要顯示中文和英文，那么，也可以設(shè)置字符集為GBK。比如百度使用的是萬(wàn)國(guó)碼，網(wǎng)易用的是GBK。
<meta charset="UTF-8"> | <meta charset="GBK">
使用<meta>設(shè)置關(guān)鍵字
網(wǎng)頁(yè)關(guān)鍵字，是為了方便搜索引擎搜索而設(shè)置的，用戶在網(wǎng)頁(yè)中是看不到的，它的主要作用是用于搜索引擎優(yōu)化，可以有多個(gè)關(guān)鍵字,關(guān)鍵字之間用空格或者英文逗號(hào)隔開(kāi)，需要注意的是，設(shè)定多個(gè)關(guān)鍵字，可以提高被搜索到的幾率，但是大多數(shù)的搜索引擎在檢索時(shí)，都會(huì)限制關(guān)鍵詞的數(shù)量，一般10個(gè)以內(nèi)比較合理.
<meta name="keyword" content="淘寶,掏寶,網(wǎng)上購(gòu)物,C2C,在線交易,交易市場(chǎng),網(wǎng)上交易,交易市場(chǎng),網(wǎng)上買,網(wǎng)上賣,購(gòu)物網(wǎng)站,團(tuán)購(gòu),網(wǎng)上貿(mào)易,安全購(gòu)物,電子商務(wù),放心買,供應(yīng),買賣信息,網(wǎng)店,一口價(jià),拍賣,網(wǎng)上開(kāi)店,網(wǎng)絡(luò)購(gòu)物,打折,免費(fèi)開(kāi)店,網(wǎng)購(gòu),頻道,店鋪">
使用<meta>設(shè)置網(wǎng)頁(yè)描述信息
網(wǎng)頁(yè)的描述信息，主要用于描述網(wǎng)頁(yè)的主要內(nèi)容.是對(duì)關(guān)鍵詞的補(bǔ)充性描述，并且會(huì)作為搜索結(jié)果返回給用戶。同時(shí)，像關(guān)鍵字一樣，搜索引擎對(duì)描述信息的字?jǐn)?shù)也有限制，一般不超過(guò)100個(gè)，所以描述信息的內(nèi)容，也應(yīng)盡量簡(jiǎn)明扼要。
下圖紅色箭頭指向的是百度搜索引擎返回網(wǎng)易首頁(yè)的描述信息。
<meta name="Description" content="網(wǎng)易是中國(guó)領(lǐng)先的互聯(lián)網(wǎng)技術(shù)公司，為用戶提供免費(fèi)郵箱、游戲、搜索引擎服務(wù)，開(kāi)設(shè)新聞、娛樂(lè)、體育等30多個(gè)內(nèi)容頻道，及博客、視頻、論壇等互動(dòng)交流，網(wǎng)聚人的力量。">
<body></body>頁(yè)面主體內(nèi)容
<body>代表了頁(yè)面的主體部分，用于放置頁(yè)面內(nèi)容，按照html標(biāo)準(zhǔn)，需要在瀏覽器窗口中顯示的內(nèi)容，都必須放在<body></body>標(biāo)簽之間。不過(guò)需要提醒的是，html是一個(gè)很寬松的標(biāo)準(zhǔn)，你即使把內(nèi)容放在 <body></body>之外，也能正常顯示，但是不符合標(biāo)準(zhǔn)。
總結(jié)
上面講的是html的介紹和基本結(jié)構(gòu)標(biāo)簽的含義和使用，我們可以總結(jié)出:
- html是由標(biāo)簽組成
- 標(biāo)簽，是由尖括號(hào)包圍起來(lái)的有一定作用和意義的關(guān)鍵詞，如 <html>.
- 標(biāo)簽通常是成對(duì)出現(xiàn)的，稱為雙標(biāo)簽，有開(kāi)始和結(jié)束標(biāo)簽<body></body>。內(nèi)容放在開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽之間，即開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽標(biāo)明該標(biāo)簽的作用范圍.
- 少量標(biāo)簽是單標(biāo)簽，只有開(kāi)頭沒(méi)有結(jié)尾<meta charset="utf-8" />，什么時(shí)候使用單標(biāo)簽?zāi)?？不需要指定?biāo)簽作用范圍的時(shí)候。
- 標(biāo)簽的屬性，標(biāo)簽通常含有若干個(gè)屬性，每個(gè)屬性的格式是：屬姓名="屬性值"。<meta name="keyword" content="淘寶,掏寶">中，meta是標(biāo)簽，它有兩個(gè)屬性，屬性名分別是name和content。屬性之間用空格隔開(kāi)。
測(cè)試
小組討論或自問(wèn)自答每行代碼含義和作用。
<html >
<head>
<title>HTML第一課</title>
</head>
<body>
html練習(xí)：01-a
</body>
</html>
練習(xí)
請(qǐng)大家打開(kāi)記事本，在記事本中輸入下列代碼，保存為01-a.html和01-b.html，保存時(shí)字符集選擇UTF-8。
<html >
<head>
<title>HTML第一課</title>
</head>
<body>
html練習(xí)：01-a
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="HTML,CSS,JS,Bootstrap,Node.js,VUE,網(wǎng)頁(yè)設(shè)計(jì),前端設(shè)計(jì)">
<meta name="Description" content="MeWill老師，多年企業(yè)和學(xué)校工作經(jīng)驗(yàn)，如果你想學(xué)習(xí)網(wǎng)頁(yè)，請(qǐng)收藏，這里將為你提供系統(tǒng)而詳細(xì)的前端設(shè)計(jì)知識(shí)，聯(lián)系QQ:10090119">
<title>HTML第一課</title>
</head>
<body>
html練習(xí)：01-b
</body>
</html>
