第一節(jié)：HTML基礎(chǔ)
什么是瀏覽器
瀏覽器是網(wǎng)頁運(yùn)行的平臺(tái)玖绿，常用的瀏覽器有IE搞监、火狐（Firefox）、谷歌（Chrome）镰矿、Safari和Opera等。
在實(shí)際網(wǎng)頁制作過程中火狐瀏覽器是最常用的瀏覽器俘种。
名詞解釋
?Internet：因特網(wǎng)秤标，互聯(lián)網(wǎng)≈媪酰可以實(shí)現(xiàn)全球信息互聯(lián)的網(wǎng)絡(luò)苍姜。
?WWW：萬維網(wǎng)（world wide?web），它是提供網(wǎng)站相關(guān)服務(wù)悬包，人們可以通過萬維網(wǎng)服務(wù)進(jìn)行網(wǎng)上聊天衙猪、網(wǎng)上沖浪、網(wǎng)購布近、搜索資料垫释、查看天氣、查看新聞呜投、交友聊天等努咐。
?W3C：萬維網(wǎng)聯(lián)盟創(chuàng)建于1994年.是Web技術(shù)領(lǐng)域最具權(quán)威和影響力的國際中立性技術(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)頁傳輸數(shù)據(jù)的約束和規(guī)范脏嚷。
?Web：web（互聯(lián)網(wǎng)總稱）web的本意是蜘蛛網(wǎng)和網(wǎng)的意思，在網(wǎng)頁設(shè)計(jì)中我們稱為網(wǎng)頁的意思÷饔現(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ù)庫阻肩，能夠使用戶更方便的訪問互聯(lián)網(wǎng)带欢，而不用去記住能夠被機(jī)器直接讀取的IP數(shù)串运授。通過主機(jī)名，最終得到該主機(jī)名對(duì)應(yīng)的IP地址的過程叫做域名解析（或主機(jī)名解析）
什么是服務(wù)器和Web服務(wù)器
–瀏覽器接受用戶操作→瀏覽器封裝HTTP請(qǐng)求→連接服務(wù)器：DNS解析→發(fā)送請(qǐng)求Request→服務(wù)器接收請(qǐng)求→處理請(qǐng)求→返回響應(yīng)報(bào)文→瀏覽器接收響應(yīng)報(bào)文→渲染頁面呈現(xiàn)
如下圖乔煞，形象地說明了瀏覽器和服務(wù)器是怎樣運(yùn)作的：
認(rèn)識(shí)網(wǎng)頁
網(wǎng)頁主要由文字吁朦、圖像和超鏈接等元素構(gòu)成。當(dāng)然渡贾，除了這些元素逗宜，網(wǎng)頁中還可以包含音頻、視頻以及Flash等空骚。
網(wǎng)頁的形成：特殊的符號(hào)和文本→經(jīng)過瀏覽器的渲染→生成圖文并茂的頁面
網(wǎng)頁的組成：
?HTML：頁面結(jié)構(gòu)
?CSS：頁面樣式表現(xiàn)
?JavaScript：交互行為
第二節(jié)：HTML部分
HTML簡介
–HTML（英文Hyper?Text Markup Language的縮寫）中文譯為“超文本標(biāo)記語言”纺讲，主要是通過HTML標(biāo)記對(duì)網(wǎng)頁中的文本、圖片囤屹、聲音等內(nèi)容進(jìn)行描述熬甚。
–HTML提供了許多標(biāo)記，如段落標(biāo)記肋坚、標(biāo)題標(biāo)記乡括、超鏈接標(biāo)記、圖片標(biāo)記等智厌，網(wǎng)頁中需要定義什么內(nèi)容诲泌，就用相應(yīng)的HTML標(biāo)記描述即可。
–HTML之所以稱為超文本標(biāo)記語言铣鹏，不僅是因?yàn)樗ㄟ^標(biāo)記描述網(wǎng)頁內(nèi)容档礁，同時(shí)也由于文本中包含了所謂的“超級(jí)鏈接”點(diǎn)。通過超鏈接將網(wǎng)站與網(wǎng)頁以及各種網(wǎng)頁元素鏈接起來吝沫，構(gòu)成了豐富多彩的Web頁面呻澜。
HTML發(fā)展歷程
–HTML 1.0?超文本標(biāo)記語言(第一版) -- 在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)過時(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),后來經(jīng)過修訂于2002年8月1日重新發(fā)布
–XHTML 1.1 --于2001年5月31日發(fā)布
–HTML5.02014年10月29日，萬維網(wǎng)聯(lián)盟宣布惨险，經(jīng)過接近8年的艱苦努力羹幸，該標(biāo)準(zhǔn)規(guī)范終于制定完成
HTML標(biāo)準(zhǔn)的選擇
?HTML標(biāo)準(zhǔn)的選擇
–目前最新的HTML版本是HTML5。
–部分國內(nèi)的網(wǎng)站還是使用XHTML標(biāo)準(zhǔn)辫愉，但是HTML5標(biāo)準(zhǔn)是趨勢
HTML的結(jié)構(gòu)
HTML：指的是超文本標(biāo)記語言 (Hyper Text Markup Language)栅受，是一種標(biāo)記語言 (markup language)，是用來描述頁面的結(jié)構(gòu)和組織頁面內(nèi)容的.
?查看網(wǎng)頁原代碼
?案例創(chuàng)建：第一個(gè)頁面
?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)恭朗，有開有閉合屏镊，尖括號(hào)括住了標(biāo)簽名。結(jié)束標(biāo)簽內(nèi)增加了斜線痰腮。
語法：<標(biāo)簽名> ?標(biāo)簽內(nèi)容</標(biāo)簽名>
第一：標(biāo)簽成對(duì)出現(xiàn)而芥。
第二：結(jié)束標(biāo)簽內(nèi)部用/開頭。
第三：標(biāo)簽可以嵌套膀值。
HTML語法
1.HTML標(biāo)簽以 ”<“開頭棍丐。
2.緊接著就是標(biāo)簽名（中間沒空格）
3.標(biāo)簽名之后如果有屬性的話误辑，加空格然后是屬性名=""
4.如果有多個(gè)屬性，屬性間用空格隔開歌逢，空格可以有多個(gè)巾钉。
5.屬性結(jié)束后可以加一個(gè)或多個(gè)空格。
6.然后是結(jié)束標(biāo)簽">",如果是閉合標(biāo)簽需要在標(biāo)簽名前加”/"秘案，例如：</html>
7.單標(biāo)簽砰苍，斜線沒有任何意義，可有可無阱高。
8.標(biāo)簽中間可嵌套內(nèi)容赚导。
HTML整體結(jié)構(gòu)標(biāo)簽
?Doctype標(biāo)簽，文檔協(xié)議聲明標(biāo)簽
–文檔協(xié)議聲明標(biāo)簽讨惩，非常重要
–協(xié)議不同影響整個(gè)頁面顯示的效果
–目前主流用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覽器說明當(dāng)前文檔使用哪種HTML或XHTML標(biāo)準(zhǔn)規(guī)范寡夹。主要用于瀏覽器解析文檔標(biāo)簽的依據(jù)处面。
?必需在開頭處使用<!DOCTYPE>標(biāo)記為所有的XHTML文檔指定XHTML版本和類型，只有這樣瀏覽器才能將該網(wǎng)頁作為有效的XHTML文檔菩掏，并按指定的文檔類型進(jìn)行解析魂角。
?<!DOCTYPE>標(biāo)記和瀏覽器的兼容性相關(guān)，刪除<!DOCTYPE>智绸，就是把如何展示HTML頁面的權(quán)利交給瀏覽器野揪。這時(shí)，IE6瞧栗，IE7斯稳，IE8，F(xiàn)irefox2迹恐，F(xiàn)irefox3挣惰，Chrome，有多少種瀏覽器殴边，頁面就有可能有多少種顯示效果憎茂，這是不被允許的。
–在sublime中
?html:xt+ tab//輸出xhtml 過渡標(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文檔的頭部信息锤岸，也稱為頭部標(biāo)記竖幔，緊跟在標(biāo)記之后。
?head標(biāo)簽定義的內(nèi)容只是提供給瀏覽器使用是偷，不用于用戶的呈現(xiàn)赏枚。
?主要用來封裝其他位于文檔頭部的標(biāo)記亡驰，例如、<meta>饿幅、<link>及<style>等凡辱，用來描述文檔的標(biāo)題、作者以及和其他文檔的關(guān)系等栗恩。
?一個(gè)HTML文檔只能含有一對(duì)標(biāo)記透乾，絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會(huì)真正作為內(nèi)容顯示在頁面中。
?title標(biāo)簽
標(biāo)記用于定義HTML頁面的標(biāo)題磕秤，即給網(wǎng)頁取一個(gè)名字乳乌，必須位于<head>標(biāo)記之內(nèi)。一個(gè)HTML文檔只能含有一對(duì)<title><title>標(biāo)記用于定義HTML頁面的標(biāo)題市咆，即給網(wǎng)頁取一個(gè)名字汉操，必須位于<head>標(biāo)記之內(nèi)。一個(gè)HTML文檔只能含有一對(duì)<title></title>標(biāo)記蒙兰，<title></title>之間的內(nèi)容將顯示在瀏覽器窗口的標(biāo)題欄中磷瘤。其基本語法格式如下：
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簡單中文
?GBK包含全部中文字符繁體
?BIG5繁體中文
?UTF-8則包含全世界所有國家需要用到的字符
?從二進(jìn)制說起挠他，符號(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頁面結(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過渡期的標(biāo)準(zhǔn)
?目前所有的新的網(wǎng)站都是用html5的標(biāo)準(zhǔn)走朴沿。
文檔聲明標(biāo)簽一定要有猜谚，不能省略，后面學(xué)了css之后赌渣，文檔聲明標(biāo)簽會(huì)嚴(yán)重影響頁面的展示效果魏铅。
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)亂碼的問題鸿竖。 -->
<meta charset="UTF-8">
<!-- 設(shè)置當(dāng)前瀏覽器頁面標(biāo)簽的 標(biāo)題內(nèi)容的 -->
??? ??? <title>前端與移動(dòng)開發(fā)學(xué)院首頁--傳智播客</title>
1.6?? 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">
?
