第一節(jié)：HTML基礎(chǔ)
什么是瀏覽器
瀏覽器是網(wǎng)頁(yè)運(yùn)行的平臺(tái)，常用的瀏覽器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。
在實(shí)際網(wǎng)頁(yè)制作過(guò)程中火狐瀏覽器是最常用的瀏覽器。
名詞解釋
?Internet：因特網(wǎng)，互聯(lián)網(wǎng)。可以實(shí)現(xiàn)全球信息互聯(lián)的網(wǎng)絡(luò)。
?WWW：萬(wàn)維網(wǎng)（world wide?web），它是提供網(wǎng)站相關(guān)服務(wù)，人們可以通過(guò)萬(wàn)維網(wǎng)服務(wù)進(jìn)行網(wǎng)上聊天、網(wǎng)上沖浪、網(wǎng)購(gòu)、搜索資料、查看天氣、查看新聞、交友聊天等。
?W3C：萬(wàn)維網(wǎng)聯(lián)盟創(chuàng)建于1994年.是Web技術(shù)領(lǐng)域最具權(quán)威和影響力的國(guó)際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)。我們后面學(xué)的html、css等標(biāo)準(zhǔn)都是由此機(jī)構(gòu)主導(dǎo)制定。
?HTTP：超文本傳輸協(xié)議（HTTP，HyperText Transfer?Protocol），也就是瀏覽器和服務(wù)器端的網(wǎng)頁(yè)傳輸數(shù)據(jù)的約束和規(guī)范。
?Web：web（互聯(lián)網(wǎng)總稱(chēng)）web的本意是蜘蛛網(wǎng)和網(wǎng)的意思，在網(wǎng)頁(yè)設(shè)計(jì)中我們稱(chēng)為網(wǎng)頁(yè)的意思。現(xiàn)廣泛譯作網(wǎng)絡(luò)、互聯(lián)網(wǎng)等技術(shù)領(lǐng)域。表現(xiàn)為三種形式，即超文本（hypertext）、超媒體（hypermedia）、超文本傳輸協(xié)議（HTTP）等。
?DNS：DNS（Domain Name?System，域名系統(tǒng)），因特網(wǎng)上作為域名和IP地址相互映射的一個(gè)分布式數(shù)據(jù)庫(kù)，能夠使用戶(hù)更方便的訪(fǎng)問(wèn)互聯(lián)網(wǎng)，而不用去記住能夠被機(jī)器直接讀取的IP數(shù)串。通過(guò)主機(jī)名，最終得到該主機(jī)名對(duì)應(yīng)的IP地址的過(guò)程叫做域名解析（或主機(jī)名解析）
什么是服務(wù)器和Web服務(wù)器
–瀏覽器接受用戶(hù)操作→瀏覽器封裝HTTP請(qǐng)求→連接服務(wù)器：DNS解析→發(fā)送請(qǐng)求Request→服務(wù)器接收請(qǐng)求→處理請(qǐng)求→返回響應(yīng)報(bào)文→瀏覽器接收響應(yīng)報(bào)文→渲染頁(yè)面呈現(xiàn)
如下圖，形象地說(shuō)明了瀏覽器和服務(wù)器是怎樣運(yùn)作的：
認(rèn)識(shí)網(wǎng)頁(yè)
網(wǎng)頁(yè)主要由文字、圖像和超鏈接等元素構(gòu)成。當(dāng)然，除了這些元素，網(wǎng)頁(yè)中還可以包含音頻、視頻以及Flash等。
網(wǎng)頁(yè)的形成：特殊的符號(hào)和文本→經(jīng)過(guò)瀏覽器的渲染→生成圖文并茂的頁(yè)面
網(wǎng)頁(yè)的組成：
?HTML：頁(yè)面結(jié)構(gòu)
?CSS：頁(yè)面樣式表現(xiàn)
?JavaScript：交互行為
第二節(jié)：HTML部分
HTML簡(jiǎn)介
–HTML（英文Hyper?Text Markup Language的縮寫(xiě)）中文譯為“超文本標(biāo)記語(yǔ)言”，主要是通過(guò)HTML標(biāo)記對(duì)網(wǎng)頁(yè)中的文本、圖片、聲音等內(nèi)容進(jìn)行描述。
–HTML提供了許多標(biāo)記，如段落標(biāo)記、標(biāo)題標(biāo)記、超鏈接標(biāo)記、圖片標(biāo)記等，網(wǎng)頁(yè)中需要定義什么內(nèi)容，就用相應(yīng)的HTML標(biāo)記描述即可。
–HTML之所以稱(chēng)為超文本標(biāo)記語(yǔ)言，不僅是因?yàn)樗ㄟ^(guò)標(biāo)記描述網(wǎng)頁(yè)內(nèi)容，同時(shí)也由于文本中包含了所謂的“超級(jí)鏈接”點(diǎn)。通過(guò)超鏈接將網(wǎng)站與網(wǎng)頁(yè)以及各種網(wǎng)頁(yè)元素鏈接起來(lái)，構(gòu)成了豐富多彩的Web頁(yè)面。
HTML發(fā)展歷程
–HTML 1.0?超文本標(biāo)記語(yǔ)言(第一版) -- 在1993年6月發(fā)為互聯(lián)網(wǎng)工程工作小組(IETF)工作草案發(fā)布(并非標(biāo)準(zhǔn))
–HTML 2.0 --?1995年11月作為RFC 1866發(fā)布,在RFC 2854于2000年6月發(fā)布之后被宣布已經(jīng)過(guò)時(shí)
–HTML 3.2 --1996年1月14日,W3C推薦標(biāo)準(zhǔn)
–HTML 4.0 --1997年12月18日,W3C推薦標(biāo)準(zhǔn)
–HTML 4.01(微小改進(jìn)) --1999年12月24日,W3C推薦標(biāo)準(zhǔn)
–XHTML 1.0 --發(fā)布于2000年1月26日,是W3C推薦標(biāo)準(zhǔn),后來(lái)經(jīng)過(guò)修訂于2002年8月1日重新發(fā)布
–XHTML 1.1 --于2001年5月31日發(fā)布
–HTML5.02014年10月29日，萬(wàn)維網(wǎng)聯(lián)盟宣布，經(jīng)過(guò)接近8年的艱苦努力，該標(biāo)準(zhǔn)規(guī)范終于制定完成
HTML標(biāo)準(zhǔn)的選擇
?HTML標(biāo)準(zhǔn)的選擇
–目前最新的HTML版本是HTML5。
–部分國(guó)內(nèi)的網(wǎng)站還是使用XHTML標(biāo)準(zhǔn)，但是HTML5標(biāo)準(zhǔn)是趨勢(shì)
HTML的結(jié)構(gòu)
HTML：指的是超文本標(biāo)記語(yǔ)言 (Hyper Text Markup Language)，是一種標(biāo)記語(yǔ)言 (markup language)，是用來(lái)描述頁(yè)面的結(jié)構(gòu)和組織頁(yè)面內(nèi)容的.
?查看網(wǎng)頁(yè)原代碼
?案例創(chuàng)建：第一個(gè)頁(yè)面
?HTML的結(jié)構(gòu)
<html> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? html文檔
? ? ? ? ?<head></head> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?html頭部
? ? ? ? ?<body> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? html身體
? ? ? ? ? ? ? ? ? ? ? ? ? ?<h1>My First Heading</h1> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?內(nèi)容
? ? ? ? ? ? ? ? ? ? ? ? ? ?<p>My first paragraph</p>
? ? ? ? ? </body>
</html>
特點(diǎn)：成對(duì)出現(xiàn)，有開(kāi)有閉合，尖括號(hào)括住了標(biāo)簽名。結(jié)束標(biāo)簽內(nèi)增加了斜線(xiàn)。
語(yǔ)法：<標(biāo)簽名> ?標(biāo)簽內(nèi)容</標(biāo)簽名>
第一：標(biāo)簽成對(duì)出現(xiàn)。
第二：結(jié)束標(biāo)簽內(nèi)部用/開(kāi)頭。
第三：標(biāo)簽可以嵌套。
HTML語(yǔ)法
1.HTML標(biāo)簽以 ”<“開(kāi)頭。
2.緊接著就是標(biāo)簽名（中間沒(méi)空格）
3.標(biāo)簽名之后如果有屬性的話(huà)，加空格然后是屬性名=""
4.如果有多個(gè)屬性，屬性間用空格隔開(kāi)，空格可以有多個(gè)。
5.屬性結(jié)束后可以加一個(gè)或多個(gè)空格。
6.然后是結(jié)束標(biāo)簽">",如果是閉合標(biāo)簽需要在標(biāo)簽名前加”/"，例如：</html>
7.單標(biāo)簽，斜線(xiàn)沒(méi)有任何意義，可有可無(wú)。
8.標(biāo)簽中間可嵌套內(nèi)容。
HTML整體結(jié)構(gòu)標(biāo)簽
?Doctype標(biāo)簽，文檔協(xié)議聲明標(biāo)簽
–文檔協(xié)議聲明標(biāo)簽，非常重要
–協(xié)議不同影響整個(gè)頁(yè)面顯示的效果
–目前主流用HTML5的協(xié)議文檔
?html標(biāo)簽，文檔標(biāo)簽
?head，文檔頭部標(biāo)簽
?body，文檔內(nèi)容部分標(biāo)簽
–p段落標(biāo)簽
–h1標(biāo)題標(biāo)簽
第三節(jié)：HTML頭部標(biāo)簽
?doctype標(biāo)簽
HTML基本文檔格式—<!DOCTYPE>標(biāo)記
?<!DOCTYPE>標(biāo)記位于文檔的最前面，用于向?yàn)g覽器說(shuō)明當(dāng)前文檔使用哪種HTML或XHTML標(biāo)準(zhǔn)規(guī)范。主要用于瀏覽器解析文檔標(biāo)簽的依據(jù)。
?必需在開(kāi)頭處使用<!DOCTYPE>標(biāo)記為所有的XHTML文檔指定XHTML版本和類(lèi)型，只有這樣瀏覽器才能將該網(wǎng)頁(yè)作為有效的XHTML文檔，并按指定的文檔類(lèi)型進(jìn)行解析。
?<!DOCTYPE>標(biāo)記和瀏覽器的兼容性相關(guān)，刪除<!DOCTYPE>，就是把如何展示HTML頁(yè)面的權(quán)利交給瀏覽器。這時(shí)，IE6，IE7，IE8，F(xiàn)irefox2，F(xiàn)irefox3，Chrome，有多少種瀏覽器，頁(yè)面就有可能有多少種顯示效果，這是不被允許的。
–在sublime中
?html:xt+ tab//輸出xhtml 過(guò)渡標(biāo)準(zhǔn)
?html:xs+tab//輸出xhtml 嚴(yán)格標(biāo)準(zhǔn)
?html:4t
?html:4s
?html:5
?head標(biāo)簽
?標(biāo)記用于定義HTML文檔的頭部信息，也稱(chēng)為頭部標(biāo)記，緊跟在標(biāo)記之后。
?head標(biāo)簽定義的內(nèi)容只是提供給瀏覽器使用，不用于用戶(hù)的呈現(xiàn)。
?主要用來(lái)封裝其他位于文檔頭部的標(biāo)記，例如、<meta>、<link>及<style>等，用來(lái)描述文檔的標(biāo)題、作者以及和其他文檔的關(guān)系等。
?一個(gè)HTML文檔只能含有一對(duì)標(biāo)記，絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會(huì)真正作為內(nèi)容顯示在頁(yè)面中。
?title標(biāo)簽
標(biāo)記用于定義HTML頁(yè)面的標(biāo)題，即給網(wǎng)頁(yè)取一個(gè)名字，必須位于<head>標(biāo)記之內(nèi)。一個(gè)HTML文檔只能含有一對(duì)<title><title>標(biāo)記用于定義HTML頁(yè)面的標(biāo)題，即給網(wǎng)頁(yè)取一個(gè)名字，必須位于<head>標(biāo)記之內(nèi)。一個(gè)HTML文檔只能含有一對(duì)<title></title>標(biāo)記，<title></title>之間的內(nèi)容將顯示在瀏覽器窗口的標(biāo)題欄中。其基本語(yǔ)法格式如下：
title標(biāo)簽對(duì)于網(wǎng)站SEO至關(guān)重要，標(biāo)題的好壞直接影響網(wǎng)站的SEO
SEO（Search?Engine Optimization）：網(wǎng)站搜索引擎優(yōu)化
?link標(biāo)簽
–引入DNS預(yù)先解析
–DNS預(yù)解析（了解）
?<link rel="dns-prefetch" >
–引入網(wǎng)站icon圖標(biāo)：
?<link rel="shortcut icon" />
–引入css樣式，【后面講】
?<link rel="stylesheet" href="css/bg.css">
?meta標(biāo)簽
?<meta charset="UTF-8">
?utf-8是目前最常用的字符集編碼方式，常用的字符集編碼方式還有g(shù)bk和gb2312。
?gb2312簡(jiǎn)單中文
?GBK包含全部中文字符繁體
?BIG5繁體中文
?UTF-8則包含全世界所有國(guó)家需要用到的字符
?從二進(jìn)制說(shuō)起，符號(hào)表示文字，表示的模式就是編碼：聯(lián)想電報(bào)
?script標(biāo)簽
?style標(biāo)簽
1.1?? HTML文件的后綴
HTML文檔的后綴名： .html??? .htm
在早期的dos 8位機(jī)的時(shí)代，電腦只識(shí)別 3個(gè)字母的后綴名文件。所以
HTML文件的后綴為：.htm
?現(xiàn)在所有的電腦都支持 多字符的文件后綴名，所以現(xiàn)在大家都在使用.html后綴名了，當(dāng)然用? .htm? == .html進(jìn)行命名html文檔的后綴名都是一樣的效果。
1.2?? 快速生成HTML頁(yè)面結(jié)構(gòu)
Html:5 + tab鍵快速 生成html5 的文檔結(jié)構(gòu)。
1.3?? Doctype標(biāo)簽
<!DOCTYPE html><!-- 文檔的聲明：當(dāng)前文件是一個(gè)html文檔，遵循的標(biāo)準(zhǔn)是html5的標(biāo)準(zhǔn) --
Html:4s + tab
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
??? <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
??? <title>Document</title>
</head>
<body>???
</body>
</html>
Html:4t? + tab
Html:xt + tab : xhml過(guò)渡期的標(biāo)準(zhǔn)
?目前所有的新的網(wǎng)站都是用html5的標(biāo)準(zhǔn)走。
文檔聲明標(biāo)簽一定要有，不能省略，后面學(xué)了css之后，文檔聲明標(biāo)簽會(huì)嚴(yán)重影響頁(yè)面的展示效果。
1.4?? HTML標(biāo)簽
HTML標(biāo)簽代表整個(gè)文檔結(jié)構(gòu)。
HTML標(biāo)簽只嵌套 head標(biāo)簽和body標(biāo)簽。
1.5?? Head標(biāo)簽
Head標(biāo)簽中設(shè)置都是用于給瀏覽器使用的一些配置和設(shè)置。比如meta標(biāo)簽告訴瀏覽器當(dāng)前文檔的編碼格式。
<!-- 當(dāng)瀏覽器解析當(dāng)前文檔的編碼 和 文檔實(shí)際的編碼不一致的時(shí)候那么會(huì)出現(xiàn)亂碼的問(wèn)題。 -->
<meta charset="UTF-8">
<!-- 設(shè)置當(dāng)前瀏覽器頁(yè)面標(biāo)簽的 標(biāo)題內(nèi)容的 -->
??? ??? <title>前端與移動(dòng)開(kāi)發(fā)學(xué)院首頁(yè)--傳智播客</title>
1.6?? Link標(biāo)簽的常見(jiàn)用法
引入DNS預(yù)先解析
dns預(yù)解析(了解)
<link rel="dns-prefetch" >
引入網(wǎng)站icon圖標(biāo)：
<link rel="shortcut icon" />
引入css樣式，【后面講】
<link rel="stylesheet" href="css/bg.css">
?
