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