Case 1：打開web世界的大門——了解html和瀏覽器
簡介
瀏覽器是你接觸web世界最為重要的窗口，這節課將使你明白你通過瀏覽器所看到的華麗的網頁，究竟是如何被渲染出來的。
目標
- 了解HTML是什么，以及其基本結構
- 掌握一些常用的HTML標簽
- 了解CSS，以及一些基本的布局
- 學習使用瀏覽器的調試工具
任務
- 嘗試使用HTML編寫一個簡單的頁面
預期用時
- 1 - 2 天
HTML
HTML（HyperTextMarkupLanguage）-- 超文本標記語言，是一種用于構建網頁的世界通用的標準標記語言，它并不是一門編程語言，你可以理解為，這是一種特殊格式的文本文件（就像word文件一樣），使用瀏覽器打開它，就能看到網頁了（我們也稱html為“網頁源碼”）。
版本問題
HTML從指定至今已經擁有多個版本，目前最為流行和通用的版本為HTML5，接下來的教程全部基于這個版本。
0.實踐：動手創建屬于你的第一個網頁
請跟隨下面的步驟創建一個最為簡單的頁面，注意理解頁面渲染的概念，以及html的結構化
新建一個文本文檔（demo.txt），然后使用一個文本編輯器打開它（如果你沒有合適的文本編輯器，就使用記事本吧）
-
將下面的內容復制粘貼到新建的文本文檔中
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我的網頁</title> </head> <body> <h1>我的第一個標題</h1> <p>我的第一個段落。</p> </body> </html> 按下
CTRL + S快捷鍵保存內容（請在腦海中自動生成時刻保存的概念）修改這個文本文檔的后綴為html（demo.html），如果你不知道怎么修改文件的后綴，請點擊我百度
在
demo.html文件上右鍵，選擇打開方式為任意一個瀏覽器，然后觀察
如果一切順利你將會在瀏覽器中看到以下畫面：
沒錯，剛才你所寫下的html代碼，被瀏覽器渲染（轉換）成為了可視化的網頁。
1.基礎：了解HTML的結構
基本骨架
在上面的代碼中，可以看到最終實際被渲染成網頁內容的部分只有“我的第一個標題”和“我的第一個段落”兩句話，剩下的部分都是html代碼的結構化標記，如果你仔細觀察，你可以發現html是一個層層包裹的結構，最外面的很大一部分是html的基本骨架，也就是下面這部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的網頁</title>
</head>
<body>
....
</body>
</html>
基本上所有的html都擁有同樣的結構，我們一般要做的事情只是在中間省略號的部分書寫自己想要的代碼，順帶一題，<title></title>兩個標記中間所包含的文字，最終將被渲染成瀏覽器選項卡上的文字（稱之為網頁標題）。
你不用急于理解上面這個骨架的內容，先把它們復制在你的剪貼板上，然后隨時準備復制它。
標簽和元素
你一定注意到了html中處處可見的尖括號<>，這被稱為標簽，絕大多數的標簽都是成對出現的：分為起始標簽和結束標簽，夾在兩個標簽中的內容被稱為元素。
舉一個最簡單的實例
<p>這是一個段落</p>
上面的內容聲明了一個段落（p標簽）元素，內容是“這是一個段落”。
接下來你將會意識到，編寫一個網頁基本上就是通過不斷的增加各種標簽，給頁面添加各種元素的過程。
2.入門：了解并使用標簽
四個基本實例
下面的教程將會帶你了解4個最為基礎的html元素：
- 標題
- 段落
- 鏈接
- 圖片
你可以嘗試在剛才創建的html文件中應用它們，或者在下面的網頁中使用“嘗試一下”來查看效果
（因為html原生不支持回車換行，所以br標簽還是很常用的）
屬性
每個標簽都可以擁有屬性，屬性是一些用于更好的描述元素的附加信息。下面用一個易于理解的形容來描述屬性和標簽以及元素的關系:
請看我臆造的這段“html”代碼：
<蘋果 顏色 = "紅色" 口感 = "還不錯">A</蘋果>
它的語義是：A是一個紅色的，口感還不錯的蘋果
標簽描述了A是個蘋果，屬性描述了A是個什么樣的蘋果
點擊下面的鏈接來深入學習a標簽和img標簽，并嘗試使用它們的屬性：
(!)實踐任務
編寫一個a標簽，跳轉到http://cn.bing.com/，并且設置為點擊后在新窗口打開 （href + target 屬性）
編寫一個img標簽，src設置為http://of1deuret.bkt.clouddn.com/17-6-18/75443832.jpg,(你也可以引入本地的圖片，這可能需要你了解一下相對路徑和絕對路徑)，嘗試調整width和height屬性來修改它的顯示效果。
3.進階：區塊和模塊化
div標簽
接下來我們來認識html中最最最常用的一個標簽：<div>
被包裹在<div></div>中間的內容被稱為一個區塊，區塊和區塊之間互相獨立，一個區塊內的所有其他元素可以擁有相同的樣式和某些屬性。區塊也可以進行嵌套。
因為擁有獨立性和繼承性，因此我們可以利用div對網頁進行模塊化，模塊化是一個重要的編程思想，在這里，你可以想像一個網頁是由許許多多的小矩形(div)拼湊在一起成為一個整體的，我們先寫好一個個小矩形，最終再把他們合理的布局在一起，這樣就形成了一個結構清晰樣式美觀的網頁了。
看看下面這個網頁，我用紅框標記出了里面主要的div元素，試著體會一下模塊化的思想
布局*
通過現在已經把網頁分層了若干個矩形，這些矩形需要合理的排列才能變得美觀，因此需要進行布局，
布局是一道比較復雜和繁瑣的工序，牽扯到了一些更為深入的知識，也需要一些CSS的相關知識。
查看下面的鏈接了解布局（請無視使用表格的布局方式）：
對布局有興趣的同學可以自行搜索和了解下面的相關話題：
- 盒子模型
- 絕對定位和相對定位
布局在傳統的web頁面開發中是一項比較繁瑣的工作，不過現在已經涌現出一大批優秀的解決方案（比如響應式布局，柵格系統，彈性布局），這些話題將會在進階篇的前端路徑部分進行討論，因此你現在可以不必過分追究布局問題。
4.繼續學習
上面的內容為你揭示了html的基本結構和元素，如果你想要更多的了解html的相關知識，下面為你提供一些可以進階學習的網站和教程
本套課程的后續部分不會對html相關知識有太多的要求，當前階段你只需要明白html的基本結構，知道網頁是用html寫的，并且能嘗試自己寫一些簡單的頁面元素就OK了。
瀏覽器
簡介
瀏覽器是啥我覺得不必過多贅述了，畢竟大家天天都在用嘛。不過在你了解了html之后應該對瀏覽器有一些新的認知，至少應該明白頁面其實是由html源碼加工渲染而來的，在這個階段，你可以把瀏覽器簡單的理解成為一個html的渲染器。
調試工具
瀏覽器的調試工具對于開發者來說實在是不可多得的利器，我個人十分推薦chrome瀏覽器的開發調試工具（火狐也還湊合），下面的教學將會基于chrome瀏覽器進行。
打開
在頁面空白處點擊右鍵選擇“檢查”或者按下F12快鍵鍵（OSX下不可用）就可以進入調試工具界面了，如下圖所示：
查看元素（源碼）
在頁面元素的顯示部分可以快速查看整個網頁的源碼，并且選中某一部分的源代碼后還會在左側的視圖中加亮顯示，看到有趣的網站不妨就利用這個查看一下源代碼，說不定還能拷貝其中的一部分元素為己所用（扒源碼）
審查元素
點擊審查元素按鈕后再將鼠標移動到頁面上，將會動態高亮顯示頁面上的元素，并在頁面元素欄中顯示它的源碼（有點不好描述，自己使用一下應該會比較好理解），大概是下面這樣的
這個功能在調試頁面時相當有用！
其他
調試工具擁有許多更加有用和高級的功能，我們將會在以后的課程中陸續講述
小結
第一小節的內容到此就告一段落了，也許你還不是太理解網頁究竟如何運作，也許你覺得這一堆鋪面而來的新知識有些突兀，不必擔心，嘗試慢慢地理解和接受吧。
你可以訪問之前給出的進階學習教程鏈接去進一步了解html的相關知識。
當然不要忘記進行一定量的實踐，始終記得：實踐是編程的基礎。
任務與實踐
綜合利用之前講到的所有標簽寫一個簡單的頁面
