從“上網(wǎng)”說開去
1.上網(wǎng)就是請求數(shù)據(jù)
老師現(xiàn)在進行一個互聯(lián)網(wǎng)原理的整體感知的教學，你注意，整體感知中，一些具體的細節(jié)，可能令你沒有安全感（很多的知識盲點）。沒有關系，老師進行的是“整體感知”，就是為了讓你宏觀地學習一些東西，先不要在意細節(jié)。
網(wǎng)頁是真實的物理存在，我們現(xiàn)在來看一下老師購買的一個服務器的操作。
所以我們就能通過網(wǎng)址www.shaoshanhuan.com/aaa.html來查看這個頁面。
我們來看看文件夾的情況：
www.shaoshanhuan.com/ccc/ddd.html
小問題：我們想訪問www.shaoshanhuan.com/haha/xixi/hehe.html
那么請問，我們的網(wǎng)頁應該放在哪里？
答案：放在haha文件夾中的xixi文件夾中里面。
更深入的問題：我們平時輸入網(wǎng)址，都是www.shaoshanhuan.com ， 沒有后綴
實際上等價于訪問了www.shaoshanhuan.com/index.html文件。
index是英語目錄、列表的意思，這是默認的首頁文件。
文件夾的默認文件，也是index.html
等價于
www.shaoshanhuan.com/aaa/index.html
總結一下，一會兒我們馬上展開研究：
也就是說，上網(wǎng)就是一個請求數(shù)據(jù)的過程。當我們輸入一個網(wǎng)址www.shaoshanhuan.com/aaa/1.html的時候，我們的計算機將對遠程服務器發(fā)出一個HTTP請求。我要請求你的aaa文件夾中的1.html文件。服務器響應了這個請求，將1.html這個網(wǎng)頁文件，通過HTTP請求，傳輸?shù)接脩舻挠嬎銠C中。用戶的瀏覽器，對這個文件進行渲染。
上網(wǎng)就是一個請求文件、回饋文件的過程，沒有持久連接。
2.HTTP協(xié)議
HTTP大家肯定不陌生，一說網(wǎng)址，裝X的人就愛說：
HTTP的全稱叫做Hypertext Transfer Protocal，超文本傳輸協(xié)議。干嘛用的？就是瀏覽器和服務器之間傳輸文件用的。（建議大家背誦簡稱的全名，面試的時候嚇死面試官?。?/p>
HTTP是有兩部分，請求request、響應response。當你輸入網(wǎng)址的時候，此時瀏覽器會發(fā)出一個HTTP請求，請求服務器上的響應頁面。服務器收到請求之后，會再次通過HTTP將頁面?zhèn)鬏敾貋怼?/p>
注意：
訪問一個網(wǎng)頁的時候，并不一定只有一次HTTP請求發(fā)出！如果頁面上有圖片、視頻、音頻，那么將產(chǎn)生更多的HTTP請求。
不光輸入網(wǎng)址能夠產(chǎn)生HTTP請求，我們點擊超級鏈接的時候，也能夠產(chǎn)生HTTP請求。
Ajax課程上我們拓展學習HTTP，現(xiàn)在先學這么多。
3.服務器
服務器server就是計算機，也有CPU、硬盤、內存，也安裝軟件?？赡軟]有顯示器、鼠標、鍵盤（用普通計算機遠程管理它）。
服務器上存放文件的，服務器要24小時開機，不能斷點，一旦斷點，就無法訪問網(wǎng)站了。
我們可以通過管理軟件，來遠程管理服務器，比如老師演示的8U-FTP。
4.瀏覽器
瀏覽器browser，就是渲染網(wǎng)頁的一個軟件，安裝在客戶的電腦里面。
HTTP請求的發(fā)起、接收，都是由瀏覽器來完成的。
瀏覽器都有臨時文件夾，比如IE的臨時文件夾就是：
C:\Users\Danny\AppData\Local\Microsoft\Windows\Temporary Internet Files
你請求的所有網(wǎng)頁文件，都是存放在這個臨時文件夾中的。所有的網(wǎng)頁都是在計算機本地進行渲染的。所以，有些時候，第一次打開網(wǎng)頁速度慢，第二次打開網(wǎng)頁速度快，這是因為第一次已經(jīng)把文件傳輸過來了，就不用傳輸了。
HTML初步
HTML的全稱叫做Hypertext Markup Language，超文本標記語言，是網(wǎng)頁的文件格式。網(wǎng)頁的格式，還有PHP、JSP、ASP等等，那么HTML是最最基本的網(wǎng)頁文件格式。
1.純文本
我們現(xiàn)在先來學習什么是“純文本”。
拓展名的含義：
不同的拓展名： .mp3音樂文件， .jpg 圖片文件 ， .docx 文檔
要讓我們的操作系統(tǒng)，顯示出文件的拓展名。
我們來看一個實驗：
1.doc和1.txt中， 都是只有“哈哈”兩個字。但是doc文件，尺寸很大；而txt文件，尺寸只有4字節(jié)。
這是因為txt文件是純文本文件，里面只有文字，沒有其他的任何東西，沒有樣式、沒有字號、沒有顏色。
而doc文件，里面存放著頁邊距、行高、顏色、字號、字體這些信息。
HTML文件是純文本文件。
我們這么創(chuàng)建一個網(wǎng)頁：
創(chuàng)建出來一個txt文件：
強行更改txt這個拓展名為html：
這個html文件就是一個網(wǎng)頁文件了。
不要給我提什么DreamWeaver了！因為HTML文件是純文本文件，所以任何的純文本編輯器，都能夠編寫網(wǎng)頁！
HTML的制作，不依賴于任何編輯器。
網(wǎng)頁的制作和瀏覽，分別使用記事本和瀏覽器：
2.HTML是負責描述文本語義的語言
我們用標簽對文字添加語義：
比如下面的文字：
劉詩詩簡介
它是沒有任何語義的文字。
而：
<h1>劉詩詩簡介</h1>
給這幾個字添加了“1級標題”的語義。
比如下面的文字，
劉詩詩，1987年3月10日出生于北京。中國內地影視女演員，畢業(yè)于北京舞蹈學院芭蕾舞專業(yè)2006屆本科班。
也是沒有任何語義的文字。
而：
<p>劉詩詩，1987年3月10日出生于北京。中國內地影視女演員，畢業(yè)于北京舞蹈學院芭蕾舞專業(yè)2006屆本科班。</p>
給這些文字增加了“段落”的語義。
HTML不過如此，就是通過一對兒一對兒的標簽，來給文本增加語義的語言。
<p> 叫做起始標簽
</p> 叫做結束標簽
頁面渲染的時候，<h1>這些標簽，是不會顯示在頁面上的，這就是“超”字的含義：一些文本，就是文本；而一些文本（標簽），是描述別的文本語義的文本，不會照搬顯示在頁面上。 這種文件就是超文本文件。
也解釋了什么是“標記”，就是一對兒一對兒的標簽對兒。
超文本標記語言HTML： Hypertext Markup Language。
你加上h1標簽之后，文本就是主標題的語義，瀏覽器此時會默認將h1的文字變得大、黑、粗，這個是瀏覽器的默認樣式，和語義是無關的。瀏覽器會默認給一些語義的文字加上合適的樣式。
但是，一定要記住,任何HTML標簽，都和樣式無關的，只能表達語義。
面試的時候，人家問h1什么意思?。?br>
錯誤的答案：讓字變得大、黑、粗。
正確的答案：讓文字加上1級標題的語義。
Sublime安裝和使用方法
1.安裝
再次強調，做網(wǎng)頁和用什么軟件無關。任何的純文本編輯器，都能夠制作網(wǎng)頁；相反的，任何的能夠制作網(wǎng)頁的軟件，吹破天了，本質上都是純文本編輯器。
現(xiàn)在比較有名的制作網(wǎng)頁的軟件：sublime、WebStorm、Atom、DreamWeaver、NotePad++、Editplus、frontpage。
sublime是英語宏大的、壯麗的意思，冷門詞匯。
sublime這個編輯器近些年非常流行，能夠編輯多種語言，Java、PHP、C語言都能編寫。
官網(wǎng)：http://www.sublimetext.com/
2.使用
sublime能夠編輯很多很多語言！所以，在新建了一個文件之后，一定要記得先保存，保存的時候，要刻意地加上.html后綴。
Sublime的常見快捷鍵：
Ctrl+N 新建文件
Ctrl+S 保存功能。這里提一嘴，Sublime不怕突然掉電。它不是實時保存，而是實時緩存。
- Ctrl+F 查找
- Ctrl+Z 撤銷。Sublime提供無限次的撤銷。
- Ctrl+C 復制
- Ctrl+V 粘貼
輸入標簽名，然后按tab鍵，能自動生成標簽對兒。
- Ctrl+Shift+D 復制當前行
- Ctrl+X 刪除當前行（和剪切是一個快捷鍵）
- Ctrl+鼠標滾輪
按住鼠標滾輪，拖拽，就可以產(chǎn)生多行光標。
支持快速輸入法，比如
p*10 然后按tab鍵，就能生成10個p標簽。
HTML的基本骨架
直接在sublime中，輸入：
然后按tab鍵，如果tab鍵不管用，那么就按ctrl+E鍵，就會自動展開為：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
抽象一下：
<!DTD >
<html>
<head>
</head>
<body>
</body>
</html>
接下來我們就要一行一行的講解HTML基本骨架的含義。
1.文檔聲明頭DTD
就是HTML第一行語句：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
所謂的DTD就是DocType Definition 文檔類型定義, 也有人翻譯為DocType
Declartion 文檔類型聲明。
HTML文件的第一行，都是這個DTD，干什么用的？這一行語句，告訴瀏覽器我是什么版本的HTML文件。
HTML、CSS這兩個語言，官網(wǎng)維護者就是總部位于美國的W3C組織，簡稱W3。全稱World
Wide Web Consortium國際萬維網(wǎng)聯(lián)盟。官網(wǎng)：https://www.w3.org/
中文的網(wǎng)站就是w3scholl.com.cn，
里面的各種DTD手冊：http://www.w3school.com.cn/tags/tag_doctype.asp
HTML從誕生到現(xiàn)在，最新的版本HTML5。不是所有的瀏覽器都兼容哦，現(xiàn)在還有一部分人使用的瀏覽器過舊，所以現(xiàn)在很多公司還在使用HTML的上一個版本，HTML4.01。
HTML4.01又有三個小版本：
HTML4.01 Strict 嚴格版：不能使用font、b、u、i等等的廢棄標簽，不能使用框架集，結構和樣式分離。
HTML4.01 Transitional 過渡版（通用版）：沒有那么多限制，可以使用font等廢棄標簽，不能使用框架集
HTML4.01 Frameset：框架集版：可以使用框架集
講一下歷史，在2007、08年之前，人們制作一個紅色的標題：
<h1><font color="red">我是一個主標題</font></h1>
現(xiàn)在font標簽已經(jīng)被廢棄了，改用CSS來描述頁面的樣式。W3C事兒多，發(fā)現(xiàn)HTML還不夠嚴格。比如，標簽到底是大寫字母還是小寫字母呀？
<H1></H1>
是對的么？
再比如，屬性可不可以用單引號？
<a href=’2.html’></a>
所以，W3C為了解決這個問題，推出了XHTML版本。X表示extensional“拓展的”HTML。
在XHTML1.0中，嚴格規(guī)定了標簽必須是小寫，所有的屬性都必須用雙引號封閉啊，必須有結尾反斜杠……
XHTML1.0版本中，延續(xù)了HTML4.01的3個小版本：
- XHTML1.0 Strict 嚴格版：不能使用font等等的廢棄標簽，不能使用框架集，結構和樣式分離。
- XHTML1.0 Transitional 過渡版（通用版）：沒有那么多限制，可以使用font等廢棄標簽，不能使用框架集
- XHTML1.0 Frameset：框架集版：可以使用框架集
總結一下，一共有6種DTD。HTML4.01有3種，XHTML1.0有3種。6種版本，就有6種DTD。
按嚴格程度：
XHTML1.0 Strict > HTML4.01 Strict > XHTML1.0 transitionl > HTML4.01
transitionl
Sublime生成DTD，只需要更改冒號后面的詞語，xs就能生成XHTML1.0 Strict版本。
嚴格版本中，font、b、u、i標簽都是廢棄的。而這些標簽我們將來要使用它做一些“小心思”、“小創(chuàng)意”，所以不能一棒子打死。
如果沒聽懂，別廢話，老老實實用html:xt就行了。只要記住，一共有6種。
HTML5是新的版本，不在設立strict、transitional、frameset等版本了。XHTML1.0隨著HTML5的誕生，也沒有了。這就是W3C，在啪啪啪自己打臉。
2.命名空間
在DTD下面一行，就是html標簽對兒：
<html
xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
</html>
html是一個標簽，xmlns是它的一個屬性， xml:lang也是它的一個屬性
<html 屬性1=”值” 屬性2=”值”>
</html>
鍵值對兒，鍵就是屬性的名字，值就是屬性的值。簡稱K-V對兒， k就是key鍵， v就是value值的意思。
xmlns這個屬性是干嘛的呢？xmlns的全稱，叫做XML NameSpace， HTML是XML中的一種，但是我們現(xiàn)在不準備展開說這事兒。Ajax課上會詳細介紹XML這個東西。NameSpace叫做命名空間。很簡單，就是你的文章里面的h1表示的是1級標題的，別人的是不是也是1級標題？所以就需要有人統(tǒng)一一下標準，使用的就是一個固定的網(wǎng)址http://www.w3.org/1999/xhtml
xml:lang="en" 表示所有的標簽的語言都是英語，language
這里都是固定寫法，沒有別的值。
3.字符集
簡體中文可以使用的字符集就兩個，分別叫做GBK、UTF-8。
GBK是國標的一個意思，也稱為“gb2312”，中國人制定的。
UTF-8是國際的一個字符集標準。
我們做了一個實驗，都是同一個漢字，但是：
- GBK 每一個漢字2字節(jié)
- UTF-8 每一個漢字3字節(jié)
字符集就相當于活字印刷術里面的字的模型。
老王家的字多，所以描述“哈”字，可能是“第3個柜子里面第2層第4行第8列”
老李家的字少，所以描述“哈”字，可能是“第9層第3行第1列”
GBK中只有漢字簡體（不包括少數(shù)民族文字）、絕大部分繁體字、少量片甲名、少量符號
UTF-8中有世界上所有國家中的所有文字和符號。
我們在HTML網(wǎng)頁中，用meta來設置字符集，meta是“元”、“初始”的意思，表示元設置、初始設置。
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
這個meta是一個單標簽，沒有成對兒。一會兒在img標簽中，我們細講這事兒。
Sublime將默認保存utf-8字符集。
所以，HTML頁面中，有兩種字符集設置：
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
和
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
工作的時候用哪種？
- 如果公司的網(wǎng)頁中，沒有出現(xiàn)怪異符號、沒有出現(xiàn)其他國家文字（除了英語），那么要使用gb2312。因為文件尺寸小，每一個字就少1個字節(jié)。1000字就是1kb，5000字就是5kb。
- 如果公司的網(wǎng)頁中，有少數(shù)民族文字、韓語、阿拉伯語，那么要使用UTF-8。因為文字全。
4.關鍵字和頁面描述
瀏覽器抓取我們的頁面，會在旁邊顯示一小段頁面描述。
<meta name="description" content="保持饑餓 保持愚蠢">
抽象出來語法：
<meta name=”description” content=”頁面描述” >
description 描述的意思， content內容。
這個東西顯著提升SEO， SEO就是Search Engine Optimization，搜索引擎優(yōu)化。就是少花錢，讓搜索引擎能帶來更多的流量，讓更多人點擊。
可以設置頁面關鍵字，搜索引擎會抓取這些關鍵字：
<meta name="keywords" content="手機,電腦,冰箱,彩電">
搜索引擎就知道我們的網(wǎng)站是干什么的了，就能相應的排名提升。
5.title
<title>頁面描述和關鍵詞</title>
HTML頁面的特點
1.HTML對換行、TAB縮進、空格不敏感
<body>
<h1>我是一個主標題</h1>
<p>我是一個段落</p>
</body>
等價于：
<body>
<h1>我是一個主標題</h1>
<p>我是一個段落</p>
</body>
等價于：
<body><h1>我是一個主標題</h1><p>我是一個段落</p></body>
也就是說，HTML現(xiàn)在你就感覺到了，不僅僅負責描述語義，還描述了頁面的層次。
層次是什么，就是看標簽誰包裹誰，和縮不縮進無關！
“如何提升頁面加載速度？” “壓縮代碼，將HTML壓縮為1行”。
2.空白折騰現(xiàn)象
HTML中的文字，不管有多少個空格，多少個換行，多少個縮進，都會被壓縮為一個空格。
文字，現(xiàn)在有很多的換行、空格、縮進：
<p>
我是一個段落
</p>
h和p
1.h系列標簽
h表示header，標題的意思。一共有六個，有不同的語義。
h1 1級標題
h2 2級標題
h3 3級標題
h4 4級標題
h5 5級標題
h6 6級標題
一般來說，頁面上只能有一個h1標簽，其他標簽個數(shù)不定。實際上這個不是W3C的規(guī)則，而是搜索引擎的規(guī)則。
h1標簽中的內容，權重非常高，搜索引擎會特別注意抓取里面的文字。搜索引擎如果看見頁面有多個h1，視為作弊，降低你的權重。
h標簽是個文本級標簽。
2.p標簽
p表示paragraph，段落。
<p>文字</p>
這個就是一個段落。
p標簽你一定要注意一件事兒，p里面只能放文字、圖片、表單元素。不能放其他東西。p是一個文本級標簽。
這里實際上揭示了一個事情，就是標簽的級別。我們HTML將所有的標簽都進行了分類，只有兩類：
- 容器級標簽 ： 里面誰都可以裝，甚至可以包裹和自己一樣的標簽。
- 文本級標簽 ： 里面只能放文字、圖片、表單元素，和其他的文本級標簽。
