Case 1：打開web世界的大門——了解html和瀏覽器
簡介
瀏覽器是你接觸web世界最為重要的窗口渴杆，這節(jié)課將使你明白你通過瀏覽器所看到的華麗的網(wǎng)頁欲鹏，究竟是如何被渲染出來的。
目標
- 了解HTML是什么彰导，以及其基本結(jié)構(gòu)
- 掌握一些常用的HTML標簽
- 了解CSS，以及一些基本的布局
- 學習使用瀏覽器的調(diào)試工具
任務
- 嘗試使用HTML編寫一個簡單的頁面
預期用時
- 1 - 2 天
HTML
HTML（HyperTextMarkupLanguage）-- 超文本標記語言，是一種用于構(gòu)建網(wǎng)頁的世界通用的標準標記語言苛白，它并不是一門編程語言，你可以理解為焚虱，這是一種特殊格式的文本文件（就像word文件一樣）购裙，使用瀏覽器打開它，就能看到網(wǎng)頁了（我們也稱html為“網(wǎng)頁源碼”）鹃栽。
版本問題
HTML從指定至今已經(jīng)擁有多個版本躏率，目前最為流行和通用的版本為HTML5，接下來的教程全部基于這個版本谍咆。
0.實踐：動手創(chuàng)建屬于你的第一個網(wǎng)頁
請跟隨下面的步驟創(chuàng)建一個最為簡單的頁面禾锤，注意理解頁面渲染的概念，以及html的結(jié)構(gòu)化
新建一個文本文檔（demo.txt）摹察，然后使用一個文本編輯器打開它（如果你沒有合適的文本編輯器恩掷，就使用記事本吧）
-
將下面的內(nèi)容復制粘貼到新建的文本文檔中
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我的網(wǎng)頁</title> </head> <body> <h1>我的第一個標題</h1> <p>我的第一個段落。</p> </body> </html> 按下
CTRL + S快捷鍵保存內(nèi)容（請在腦海中自動生成時刻保存的概念）修改這個文本文檔的后綴為html（demo.html）供嚎，如果你不知道怎么修改文件的后綴黄娘，請點擊我百度
在
demo.html文件上右鍵峭状，選擇打開方式為任意一個瀏覽器，然后觀察
如果一切順利你將會在瀏覽器中看到以下畫面：
沒錯逼争，剛才你所寫下的html代碼优床，被瀏覽器渲染（轉(zhuǎn)換）成為了可視化的網(wǎng)頁。
1.基礎：了解HTML的結(jié)構(gòu)
基本骨架
在上面的代碼中誓焦，可以看到最終實際被渲染成網(wǎng)頁內(nèi)容的部分只有“我的第一個標題”和“我的第一個段落”兩句話胆敞，剩下的部分都是html代碼的結(jié)構(gòu)化標記，如果你仔細觀察杂伟，你可以發(fā)現(xiàn)html是一個層層包裹的結(jié)構(gòu)移层，最外面的很大一部分是html的基本骨架，也就是下面這部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的網(wǎng)頁</title>
</head>
<body>
....
</body>
</html>
基本上所有的html都擁有同樣的結(jié)構(gòu)赫粥，我們一般要做的事情只是在中間省略號的部分書寫自己想要的代碼观话，順帶一題，<title></title>兩個標記中間所包含的文字越平，最終將被渲染成瀏覽器選項卡上的文字（稱之為網(wǎng)頁標題）频蛔。
你不用急于理解上面這個骨架的內(nèi)容，先把它們復制在你的剪貼板上秦叛，然后隨時準備復制它晦溪。
標簽和元素
你一定注意到了html中處處可見的尖括號<>，這被稱為標簽书闸，絕大多數(shù)的標簽都是成對出現(xiàn)的：分為起始標簽和結(jié)束標簽尼变，夾在兩個標簽中的內(nèi)容被稱為元素。
舉一個最簡單的實例
<p>這是一個段落</p>
上面的內(nèi)容聲明了一個段落（p標簽）元素浆劲，內(nèi)容是“這是一個段落”嫌术。
接下來你將會意識到，編寫一個網(wǎng)頁基本上就是通過不斷的增加各種標簽牌借，給頁面添加各種元素的過程度气。
2.入門：了解并使用標簽
四個基本實例
下面的教程將會帶你了解4個最為基礎的html元素：
- 標題
- 段落
- 鏈接
- 圖片
你可以嘗試在剛才創(chuàng)建的html文件中應用它們，或者在下面的網(wǎng)頁中使用“嘗試一下”來查看效果
（因為html原生不支持回車換行膨报，所以br標簽還是很常用的）
屬性
每個標簽都可以擁有屬性磷籍，屬性是一些用于更好的描述元素的附加信息。下面用一個易于理解的形容來描述屬性和標簽以及元素的關(guān)系:
請看我臆造的這段“html”代碼：
<蘋果 顏色 = "紅色" 口感 = "還不錯">A</蘋果>
它的語義是：A是一個紅色的现柠，口感還不錯的蘋果
標簽描述了A是個蘋果院领，屬性描述了A是個什么樣的蘋果
點擊下面的鏈接來深入學習a標簽和img標簽，并嘗試使用它們的屬性：
(!)實踐任務
編寫一個a標簽够吩，跳轉(zhuǎn)到http://cn.bing.com/比然，并且設置為點擊后在新窗口打開 （href + target 屬性）
編寫一個img標簽，src設置為http://of1deuret.bkt.clouddn.com/17-6-18/75443832.jpg,(你也可以引入本地的圖片周循，這可能需要你了解一下相對路徑和絕對路徑)强法，嘗試調(diào)整width和height屬性來修改它的顯示效果万俗。
3.進階：區(qū)塊和模塊化
div標簽
接下來我們來認識html中最最最常用的一個標簽：<div>
被包裹在<div></div>中間的內(nèi)容被稱為一個區(qū)塊，區(qū)塊和區(qū)塊之間互相獨立饮怯，一個區(qū)塊內(nèi)的所有其他元素可以擁有相同的樣式和某些屬性闰歪。區(qū)塊也可以進行嵌套。
因為擁有獨立性和繼承性蓖墅，因此我們可以利用div對網(wǎng)頁進行模塊化库倘，模塊化是一個重要的編程思想，在這里论矾，你可以想像一個網(wǎng)頁是由許許多多的小矩形(div)拼湊在一起成為一個整體的于樟，我們先寫好一個個小矩形，最終再把他們合理的布局在一起拇囊，這樣就形成了一個結(jié)構(gòu)清晰樣式美觀的網(wǎng)頁了。
看看下面這個網(wǎng)頁靶橱，我用紅框標記出了里面主要的div元素寥袭，試著體會一下模塊化的思想
布局*
通過現(xiàn)在已經(jīng)把網(wǎng)頁分層了若干個矩形，這些矩形需要合理的排列才能變得美觀关霸，因此需要進行布局传黄，
布局是一道比較復雜和繁瑣的工序，牽扯到了一些更為深入的知識队寇，也需要一些CSS的相關(guān)知識膘掰。
查看下面的鏈接了解布局（請無視使用表格的布局方式）：
對布局有興趣的同學可以自行搜索和了解下面的相關(guān)話題：
- 盒子模型
- 絕對定位和相對定位
布局在傳統(tǒng)的web頁面開發(fā)中是一項比較繁瑣的工作，不過現(xiàn)在已經(jīng)涌現(xiàn)出一大批優(yōu)秀的解決方案（比如響應式布局佳遣，柵格系統(tǒng)识埋，彈性布局），這些話題將會在進階篇的前端路徑部分進行討論零渐，因此你現(xiàn)在可以不必過分追究布局問題窒舟。
4.繼續(xù)學習
上面的內(nèi)容為你揭示了html的基本結(jié)構(gòu)和元素，如果你想要更多的了解html的相關(guān)知識诵盼，下面為你提供一些可以進階學習的網(wǎng)站和教程
本套課程的后續(xù)部分不會對html相關(guān)知識有太多的要求惠豺，當前階段你只需要明白html的基本結(jié)構(gòu)，知道網(wǎng)頁是用html寫的风宁，并且能嘗試自己寫一些簡單的頁面元素就OK了洁墙。
瀏覽器
簡介
瀏覽器是啥我覺得不必過多贅述了，畢竟大家天天都在用嘛戒财。不過在你了解了html之后應該對瀏覽器有一些新的認知热监，至少應該明白頁面其實是由html源碼加工渲染而來的，在這個階段固翰，你可以把瀏覽器簡單的理解成為一個html的渲染器狼纬。
調(diào)試工具
瀏覽器的調(diào)試工具對于開發(fā)者來說實在是不可多得的利器羹呵，我個人十分推薦chrome瀏覽器的開發(fā)調(diào)試工具（火狐也還湊合），下面的教學將會基于chrome瀏覽器進行疗琉。
打開
在頁面空白處點擊右鍵選擇“檢查”或者按下F12快鍵鍵（OSX下不可用）就可以進入調(diào)試工具界面了冈欢，如下圖所示：
查看元素（源碼）
在頁面元素的顯示部分可以快速查看整個網(wǎng)頁的源碼，并且選中某一部分的源代碼后還會在左側(cè)的視圖中加亮顯示盈简，看到有趣的網(wǎng)站不妨就利用這個查看一下源代碼凑耻，說不定還能拷貝其中的一部分元素為己所用（扒源碼）
審查元素
點擊審查元素按鈕后再將鼠標移動到頁面上，將會動態(tài)高亮顯示頁面上的元素柠贤，并在頁面元素欄中顯示它的源碼（有點不好描述香浩，自己使用一下應該會比較好理解），大概是下面這樣的
這個功能在調(diào)試頁面時相當有用臼勉！
其他
調(diào)試工具擁有許多更加有用和高級的功能邻吭，我們將會在以后的課程中陸續(xù)講述
小結(jié)
第一小節(jié)的內(nèi)容到此就告一段落了，也許你還不是太理解網(wǎng)頁究竟如何運作宴霸，也許你覺得這一堆鋪面而來的新知識有些突兀囱晴，不必擔心，嘗試慢慢地理解和接受吧瓢谢。
你可以訪問之前給出的進階學習教程鏈接去進一步了解html的相關(guān)知識畸写。
當然不要忘記進行一定量的實踐，始終記得：實踐是編程的基礎氓扛。
任務與實踐
綜合利用之前講到的所有標簽寫一個簡單的頁面
