HTML的學習（1）
為什麼要學習html？
你看到的每一個網頁都是由HTML來寫的，HTML是網頁的框架。在這門課程中，我們將使用HTML的段落，標題，圖片和連結等元素來建立一個網頁。
練習題：
<!DOCTYPE HTML>
<html>
<head></head>
<body>
<strong>一隻灑鹿，歡迎學習html！</strong>
</body>
</html>結果：
html和css的關係
HTML代表超文字標記語言。超文字是指“在裡面有文字和它的連結”。任何時候你點選一個標記，字母或漢字等，如果你點選的是超文字連結，那麼它會帶你到一個新的網頁！
HTML不是一種程式語言，而是一種標記語言，是用來做文字標記的語言：
它可以把文字轉換成影象、連結、表格、列表等等。
是什麼使網頁變的更漂亮些呢？那就是CSS - Cascading Style Sheets。翻譯過來就是層疊樣式表。你可以把它想象成面板和化妝品，會覆蓋到HTML上。我們先學習HTML，大家擔心的CSS會在HTML後面的課程裡面介紹到。
我們要做的第一件事情就是設定頁面的框架結構。
a. 通常我們把<!DOCTYPE html>是在第一行，它會告訴瀏覽器它是什麼語言，以什麼語言方式去讀取它，在這裡是HTML。
b. 我們也經常把<html>
c. 我們經常把</html>閉合標籤放在最後一行，它表示一個HTML文件的結束。
d. 我們經常把<head></head>放在<html>與</html>中間，而<head></head>的中間會放一些頭部資訊(以後會詳細講述)
e. 我們還經常把<body></body>放在<head></head>這組標籤的下面，當然也還是在<html></html>標籤的裡面，我們會把想要在網頁上表達的內容寫在<body></body>
練習要求：
- 現在測試檔案是一片空白的，把剛才上面講訴的三行程式碼寫入檔案。
- 在
<html>和</html>標籤之間，你可以隨便寫下你自己喜歡的任何資訊。
練習題：
<!DOCTYPE html>
<html>
<head></head>
<body>你所浪費的今天是昨日逝去之人永遠到不了的明天</body>
</html>結果：
待解決問題：
放入頭部的文字也會在網頁上有所顯示，沒有寫標題，對head的定義清晰。
基本術語
在學習更多的HTML知識之前，我們必須要學習HTML一些基本術語，學習完成後，我們將會用到很多的<>標籤。
- 在
<>裡面的元素，我們稱之為標籤。 - 標籤會跟最近的一個閉合標籤互相構成一對。
<html>就是一個開啟的標籤。</html>就是一個關閉的標籤。
像下面的例子，最近的標籤應該是第一個進行關閉的。
<first tag><second tag>一些文字內容!</second tag></first tag>
最後的練習教我們如何建立我們的HTML檔案。我們現在所需要寫的一切都在<html>和</html>之間。
說明：
- 把
<!DOCTYPE HTML>放進去第一行。 - 把
<html>和</html>寫進去。 - 在
<html>之間，你可以寫任何喜歡的資訊。 - 執行程式碼後，你會看見你寫的資訊出現在頁面。
練習題：
<!DOCTYPE HTML>
<html>
<head></head>
<body>
hhhhh
</body>
</html>結果：
編寫頭部資訊
在我們的HTML檔案中，一切內容都會出現在<html>和</html> 這一對標籤中間。
在HTML檔案中，會有兩個部分組成：頭部和身體部分。我們下面開始學習頭部。
頭部包含你的HTML檔案的資訊，像它的標題，這個標題就是我們在瀏覽器的標籤欄看見的。
下面我們將新增頭資訊和標題到我們的頁面。
- 新增
<head>和閉合的</head>標籤在頁面。 - 在
<head>標籤中間新增<title></title>標籤。 - 在你的網頁裡的
<title>標籤中寫上一個標題，例如“我的第一個網頁”。
練習題：
<!DOCTYPE html>
<html>
<head><title>好好學習，天天上班</title></head>
<body>hello html
</body>
</html>結果：
在body裡面的段落
一個HTML檔案包含頭<head>和身體<body>。頭部就相當於你的HTML的介紹，就像它的標題一樣。
身體部分就是你的內容，就像是文字，圖片，和連結。在body裡面寫什麼內容，那麼就會顯示你所寫的內容在實際的頁面。
Body在<html>標籤裡面，<head>標籤之後。例如：
<html>
<head>
<title>我的網頁</title>
</head>
<body>
</body>
</html>說明
- 在
</head>標籤之後，寫下<body></body>標籤，就像上面例子裡面寫的。 - 在body裡面，建立兩個段落。一個段落以
<p>開頭，並且以</p>結束。我們可以在<p>標籤裡面寫點內容。
<body>
<p>Hello world!</p>
</body>練習題：
<!DOCTYPE html>
<html>
<head>
<title>
這是一個網頁
</title>
</head>
<body>
<p>不知道應該說點什麼</p>
<p>大家好 我是第二行 我也不知道應該說什麼</p>
</body>
</html>結果：
段落與標題
到現在為止，我們確實已經取得了很好的進步。我們瞭解何時以及為什麼要使用HTML。我們還學習了其他內容：
- a. 設定了標籤的HTML檔案
- b. 頁面標題（
<head>標籤裡面） - c. 增加兩個標籤段落（
<body><p>）
現在我們先學習<h1>標籤。它會使標籤裡面的內容變得很大。下一步我們將使用標題標籤。
說明：
- 首先在body中建立一個
<h1>標籤。 - 新增內容。
- 把
<h1>標籤關閉掉（你的內容必須在<h1></h1>中）。 - 在標題標籤後，建立兩個段落並使用
<p>標籤，你可以隨便填寫你喜歡的內容。
練習題：
<!DOCTYPE html>
<html>
<head>
<title>
標題和段落
</title>
</head>
<body>
<h1>大家好，我是大標題標籤<h1>
<p>第一段前來報道</p>
<p>第二段前來報道</p>
</body>
</html>結果：
待解決問題：
第二行第三行的字型大小和h1的大標題標籤一樣大
更多關於標題的資訊
HTML實際上可以設定標題很多種大小。它有6種標題的大小，<h1>是最大的老闆，而<h6>是最最弱小的。
· <h1> - 首席執行長官
· <h2> - 副總裁
· <h3> - 董事
· <h4> - 中層管理人員
· <h5> - 卑微的助理
· <h6> - 給大家倒咖啡下面的練習我們會要求你新增不同大小的標題。你可以隨意寫任何你喜歡的標題！
練習題：
<!DOCTYPE html>
<html>
<head>
<title>這是一個標題</title>
</head>
<body>
<h1>執行長</h1>
<h2>副總裁</h2>
<h3>董事</h3>
<h4>中層管理人員</h4>
<h5>助理</h5>
<h6>給大家倒咖啡</h6>
</body>
</html>結果：
使用每一個標題
鑑於有6個大小不同的標題，那我們索性一次性把它們都使用在頁面上。
說明
- 新增更多的標題程式碼，建立
<h2><h4>和<h6>，必須確保所有的標籤都正常關閉。 - 在每個標題下面新增一個簡短的小段落 。別忘記段落標籤需要
<p></p>標籤，必須是閉合的一對標籤。
練習題1：
<!DOCTYPE html>
<html>
<head>
<title>這是一個新的頁面</title>
</head>
<body>
<h2>你看出來了沒，我是誰？？？ </h2>
<p>我是一個h2大小的段落</p>
<h4>現在猜一下我</h4>
<p>我是h4</p>
<h6>最後一位突然出現</h6>
<p>大家好，我是h6</p>
</body>
</html>結果1：
練習題2：
<!DOCTYPE html>
<html>
<head>
<title>這是一個新的頁面</title>
</head>
<body>
<h2>你看出來了沒，我是誰？？？ <p>我是一個h2大小的段落</p></h2>
<h4>現在猜一下我 <p>我是h4</p></h4>
<h6>最後一位突然出現<p>大家好，我是h6</p></h6>
</body>
</html>
結果2：
中間休息
對前面學習的內容進行幾點總結：
- HTML是網頁的框架。
- 我們用瀏覽器開啟HTML，瀏覽器經過渲染後告訴我們結果。
- HTML檔案由一個
<head>和一個<body>組成， 就像人類一樣。 - 在
<head>標籤裡面，我們擁有<title>標籤，並且我們還使用它來定義了頁面的標題名稱。 - 怎麼去建立標題和段落元素。
說明
- 在
<title>標籤裡面新增一個標題。 - 在body裡面建立一個
<h3>的標籤， 你可以寫任意你想寫的東西（只是別忘記關閉它）。 - 建立3個段落並完善它們(關於汽車，寵物，以及你喜歡去那個城市旅行等任何你喜歡的都可以填寫)。
練習題：
<!DOCTYPE html>
<html>
<head>
<title>沒有標題的網頁</title>
</head>
<body>
<h3>不知道應該說點什麼</h3>
<p>這個是第一段，第一段不知道要說點什麼啊,關於汽車</p>
<p>這個是第二段，很想養一隻貓咪啊</p>
<p>這個是第三段，想去嘉興市</p>
</body>
</html>結果：
你想要去的地方
如果你想給使用者傳送另一部分的網站資訊，或者跳轉到其他網站，你可以使用超連結，或者短連結。
<a href="http://www.fenby.com">我喜歡的程式設計網站!</a>- 首先有一個
<a>標籤，它有一個屬性叫href你可以把你想跳轉的頁面或者網址填寫到這裡 http://www.fenby.com。 - 現在好了，你已經有一對
<a>標籤，這個標籤待會要去點選它。 - 最後關閉
<a>標籤。
說明：
- 在
<body>裡，建立一個連結。要做到這一點，你必須建立一個<a>標籤。通過設定它的href屬性來指向另一個網站。 - 新增你的連結描述。
- 最後把
<a>標籤關閉。
練習題：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href="http://www.baidu.com">我喜歡的搜尋網站</a>
</body>
</html>結果：
點選文字可以進入百度。
新增圖片
你可以將圖片放入你的網站中，這樣看起來會美觀一些。
我們使用一個影象標記，如：< img >。這個標籤跟別的標籤之間的內容不太相同，你得告訴圖片標籤使用src屬性。因為它沒有結束標籤，這也是跟其他標籤不同的地方，關閉標籤時是這樣的：< img src = " url "/>。看src後面的網址或者連結，它就是圖片地址。它告訴<img>標籤，將會從哪裡獲取圖片。
在網上的任何圖片都有它的地址。只需在影象上單擊滑鼠右鍵，選擇“複製圖片地址”，然後貼上在你的<img>標籤裡面。
練習題：
<!DOCTYPE html>
<html>
<head>
<title>這是一個新的介面</title>
</head>
<body>
<img src="http://cdnq.duitang.com/uploads/item/201503/28/20150328185339_LESyJ.thumb.700_0.jpeg"/>
<img src="http://i1.img.969g.com/pcgame/imgx2014/12/05/289_113844_b10ea_lit.jpg"/>
</body>
</html>結果：
點選圖片（做一個圖片連結）
現在你已經知道怎麼去新增連結和圖片在頁面裡。為什麼不做一個圖片連結呢？看例子：
<a href="http://www.fenby.com/">
<img src=""/>
</a>現在當你點選圖片的時候會跳轉到連結， 放置一個HTML標籤在另一個內部被稱為巢狀。
說明:
- 在body部分，新增
<a>標籤。 - 選擇一個網站指向你的連結。
- 現在建立
<img>標籤在<a>標籤裡面 別忘記src屬性。 - 最後關閉
<a>和<img>標籤。
練習題：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href="http://www.baidu.com">
<img src="http://cdn.duitang.com/uploads/item/201402/12/20140212152507_RMJAA.jpeg"/>
</a>
</body>
</html>結果：
點選小鹿的照片就會進行跳轉到百度的操作
圖片和連結
說明：
- 在<body>標籤裡面，新增兩個<img>標籤。一個必須是連結，另外一個是普通圖片。有連結的那個可以跳轉到任何你想去的地方。
- 在這兩個標籤後，建立一個文字連結，它可以連結到任何你想去的網站。
練習題：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href="http://www.baidu.com">
<img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2463580678,2466416375&fm=173&app=25&f=JPEG?w=218&h=146&s=20E045A6027A0F98183124A903008013"/>
</a>
<img src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=4273035335,1054539847&fm=173&app=25&f=JPEG?w=218&h=146&s=2561F004E6262707AC6C59910300C098"/>
</body>
</html>結果：
第一個圖片點選之後就可以跳轉到百度。