從“上網”說開去

1.上網就是請求數(shù)據

老師現(xiàn)在進行一個互聯(lián)網原理的整體感知的教學忘蟹，你注意，整體感知中雾鬼，一些具體的細節(jié)，可能令你沒有安全感（很多的知識盲點）宴树。沒有關系策菜，老師進行的是“整體感知”，就是為了讓你宏觀地學習一些東西酒贬，先不要在意細節(jié)又憨。

網頁是真實的物理存在，我們現(xiàn)在來看一下老師購買的一個服務器的操作锭吨。

服務器

所以我們就能通過網址www.shaoshanhuan.com/aaa.html來查看這個頁面蠢莺。

頁面

我們來看看文件夾的情況：

文件夾

www.shaoshanhuan.com/ccc/ddd.html

小問題：我們想訪問www.shaoshanhuan.com/haha/xixi/hehe.html

那么請問，我們的網頁應該放在哪里零如？

答案：放在haha文件夾中的xixi文件夾中里面躏将。

更深入的問題：我們平時輸入網址，都是www.shaoshanhuan.com 埠况， 沒有后綴

實際上等價于訪問了www.shaoshanhuan.com/index.html文件耸携。

index是英語目錄、列表的意思辕翰，這是默認的首頁文件夺衍。

文件夾的默認文件，也是index.html

www.shaoshanhuan.com/aaa

等價于
www.shaoshanhuan.com/aaa/index.html

總結一下喜命，一會兒我們馬上展開研究：

也就是說沟沙，上網就是一個請求數(shù)據的過程河劝。當我們輸入一個網址www.shaoshanhuan.com/aaa/1.html的時候，我們的計算機將對遠程服務器發(fā)出一個HTTP請求矛紫。我要請求你的aaa文件夾中的1.html文件祭犯。服務器響應了這個請求，將1.html這個網頁文件辆雾，通過HTTP請求趋距，傳輸?shù)接脩舻挠嬎銠C中。用戶的瀏覽器喳篇，對這個文件進行渲染敞临。

上網就是一個請求文件、回饋文件的過程麸澜，沒有持久連接挺尿。

2.HTTP協(xié)議

HTTP大家肯定不陌生，一說網址炊邦，裝X的人就愛說：

http://www.shaoshanhuan.com

HTTP的全稱叫做Hypertext Transfer Protocal编矾，超文本傳輸協(xié)議。干嘛用的馁害？就是瀏覽器和服務器之間傳輸文件用的窄俏。（建議大家背誦簡稱的全名，面試的時候嚇死面試官Ｎ舷浮）

HTTP是有兩部分裆操，請求request、響應response炉媒。當你輸入網址的時候踪区，此時瀏覽器會發(fā)出一個HTTP請求，請求服務器上的響應頁面吊骤。服務器收到請求之后缎岗，會再次通過HTTP將頁面?zhèn)鬏敾貋怼?/p>

注意：

• 訪問一個網頁的時候，并不一定只有一次HTTP請求發(fā)出白粉！如果頁面上有圖片传泊、視頻、音頻鸭巴，那么將產生更多的HTTP請求眷细。

• 不光輸入網址能夠產生HTTP請求，我們點擊超級鏈接的時候鹃祖，也能夠產生HTTP請求溪椎。

Ajax課程上我們拓展學習HTTP，現(xiàn)在先學這么多。

服務器

3.服務器

服務器server就是計算機校读，也有CPU沼侣、硬盤、內存歉秫，也安裝軟件蛾洛。可能沒有顯示器雁芙、鼠標轧膘、鍵盤（用普通計算機遠程管理它）。

服務器

服務器上存放文件的兔甘，服務器要24小時開機扶供，不能斷點，一旦斷點裂明，就無法訪問網站了。

我們可以通過管理軟件太援，來遠程管理服務器闽晦，比如老師演示的8U-FTP。

4.瀏覽器

瀏覽器browser提岔，就是渲染網頁的一個軟件仙蛉，安裝在客戶的電腦里面。

HTTP請求的發(fā)起碱蒙、接收荠瘪，都是由瀏覽器來完成的。

瀏覽器都有臨時文件夾赛惩，比如IE的臨時文件夾就是：

C:\Users\Danny\AppData\Local\Microsoft\Windows\Temporary Internet Files

你請求的所有網頁文件哀墓，都是存放在這個臨時文件夾中的。所有的網頁都是在計算機本地進行渲染的喷兼。所以篮绰，有些時候，第一次打開網頁速度慢季惯，第二次打開網頁速度快吠各，這是因為第一次已經把文件傳輸過來了，就不用傳輸了勉抓。

HTML初步

HTML的全稱叫做Hypertext Markup Language贾漏，超文本標記語言，是網頁的文件格式藕筋。網頁的格式纵散，還有PHP、JSP、ASP等等困食，那么HTML是最最基本的網頁文件格式边翁。

1.純文本

我們現(xiàn)在先來學習什么是“純文本”。

拓展名的含義：

拓展名

不同的拓展名： .mp3音樂文件硕盹， .jpg 圖片文件 符匾， .docx 文檔

要讓我們的操作系統(tǒng)，顯示出文件的拓展名瘩例。

顯示文件拓展名

顯示文件拓展名

我們來看一個實驗：
1.doc和1.txt中啊胶， 都是只有“哈哈”兩個字。但是doc文件垛贤，尺寸很大焰坪；而txt文件，尺寸只有4字節(jié)聘惦。
這是因為txt文件是純文本文件某饰，里面只有文字，沒有其他的任何東西善绎，沒有樣式黔漂、沒有字號、沒有顏色禀酱。
而doc文件炬守，里面存放著頁邊距、行高剂跟、顏色减途、字號、字體這些信息曹洽。

文件對比

HTML文件是純文本文件鳍置。

我們這么創(chuàng)建一個網頁：

創(chuàng)建網頁

創(chuàng)建出來一個txt文件：

創(chuàng)建txt

強行更改txt這個拓展名為html：

更改拓展名為html

這個html文件就是一個網頁文件了。

網頁文件

不要給我提什么DreamWeaver了衣洁！因為HTML文件是純文本文件墓捻，所以任何的純文本編輯器，都能夠編寫網頁坊夫！

HTML的制作砖第，不依賴于任何編輯器。

網頁的制作和瀏覽环凿，分別使用記事本和瀏覽器：

我的第一個html

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什么意思八谋簟换况？
錯誤的答案：讓字變得大职辨、黑、粗戈二。

正確的答案：讓文字加上1級標題的語義舒裤。

Sublime安裝和使用方法

1.安裝

再次強調，做網頁和用什么軟件無關觉吭。任何的純文本編輯器腾供，都能夠制作網頁；相反的亏栈，任何的能夠制作網頁的軟件台腥，吹破天了，本質上都是純文本編輯器绒北。

現(xiàn)在比較有名的制作網頁的軟件：sublime黎侈、WebStorm、Atom闷游、DreamWeaver峻汉、NotePad++、Editplus脐往、frontpage休吠。

sublime是英語宏大的、壯麗的意思业簿，冷門詞匯瘤礁。

sublime這個編輯器近些年非常流行，能夠編輯多種語言梅尤，Java柜思、PHP、C語言都能編寫巷燥。

官網：http://www.sublimetext.com/

2.使用

sublime能夠編輯很多很多語言赡盘！所以，在新建了一個文件之后缰揪，一定要記得先保存陨享，保存的時候，要刻意地加上.html后綴钝腺。

sublime

Sublime的常見快捷鍵：

Ctrl+N 新建文件
Ctrl+S 保存功能抛姑。這里提一嘴，Sublime不怕突然掉電艳狐。它不是實時保存途戒，而是實時緩存。

Sublime

• Ctrl+F 查找
• Ctrl+Z 撤銷僵驰。Sublime提供無限次的撤銷喷斋。
• Ctrl+C 復制
• Ctrl+V 粘貼

輸入標簽名唁毒，然后按tab鍵，能自動生成標簽對兒星爪。

• Ctrl+Shift+D 復制當前行
• Ctrl+X 刪除當前行（和剪切是一個快捷鍵）
• Ctrl+鼠標滾輪

按住鼠標滾輪浆西，拖拽，就可以產生多行光標顽腾。

支持快速輸入法近零，比如

p*10 然后按tab鍵，就能生成10個p標簽抄肖。

HTML的基本骨架

直接在sublime中久信，輸入：

html:xt

然后按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這兩個語言南用，官網維護者就是總部位于美國的W3C組織，簡稱W3掏湾。全稱World
Wide Web Consortium國際萬維網聯(lián)盟训枢。官網：https://www.w3.org/

中文的網站就是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標簽已經被廢棄了，改用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版本。

Sublime生成DTD

嚴格版本中环壤，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)一一下標準扮惦，使用的就是一個固定的網址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網頁中各拷，用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">

工作的時候用哪種？

• 如果公司的網頁中关顷，沒有出現(xiàn)怪異符號糊秆、沒有出現(xiàn)其他國家文字（除了英語），那么要使用gb2312议双。因為文件尺寸小痘番，每一個字就少1個字節(jié)。1000字就是1kb，5000字就是5kb汞舱。
• 如果公司的網頁中伍纫，有少數(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="手機,電腦,冰箱,彩電">

搜索引擎就知道我們的網站是干什么的了括荡，就能相應的排名提升高镐。

5.title

<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將所有的標簽都進行了分類痘儡，只有兩類：

• 容器級標簽 ： 里面誰都可以裝，甚至可以包裹和自己一樣的標簽枢步。
• 文本級標簽 ： 里面只能放文字沉删、圖片、表單元素醉途，和其他的文本級標簽矾瑰。