HTML的學習（2）
備註：學習這條路很漫長，沒有知識儲備的情況之下對於工作很難開展，可能是孤獨的，但是確實是值得的，努力去做就好。
你能做出來什麼
在這之前，我們要求寫一堆程式碼，這是對有幫助的，可以讓你知道這個專案到底是怎麼一步一步做出來的。
檢查index.html檔案並寫一個例子 - 要確保我們自己的網頁正常顯示。
練習題：
<!DOCTYPE html> <html> <head> <title>我的世界</title> </head> <body><h1>愛吃三明治嗎</h1> <img src="http://fenby.b0.upaiyun.com/Courses/HTML/1013211.png"/> <p>我喜歡雞蛋和火腿!</p> <p>但是其實大多數是喜歡三明治</p> </body> </html>
結果：
每個房子都需要一個框架
一個HTML檔案有點像房子：它需要一定的數量的必須的結構才能保證正常發揮房子的作用和功能。
一個HTML檔案需要框架，在這裡的框架就由<!DOCTYPE>、<html>、<head>和<body>這些標籤組成。
說明：
你的頁面現在是完全的空白狀態，我們現在一起來做五件事情：
1.新增<!DOCTYPE>標籤；
2.新增<html>標籤；
3.新增<head>標籤；
4.在<head>標籤中新增你喜歡的任何標題；
5.新增body標籤。
練習題 ：
<!DOCTYPE HTML>
<html>
<head>
<title>only web</title>
</head>
<body>
<a href="http://www.baidu.com">
<img src="http://pic1.nipic.com/2008-12-25/2008122510134038_2.jpg"></a>
</body>
</html>
結果：
寫一個好的標題
你的網頁可以使用body標籤之間的<h1>
建立一個<h1>標籤在你的body裡面，在<h1>標籤之間寫下你的名字，這樣大家都可以看見。
練習題：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body><h1>一隻灑鹿的網站</h1></body>
</html>
題外話：
課程有些許的重複，但是其實學習就是一個重複記憶的過程，完全不能輕易急於求成 。
做一下自我介紹
你可以使用一個或兩個段落，告訴讀者你的興趣是什麼，你做什麼行業，你有多愛學習HTML等等。
新增第三個<p>標籤在<h1>標籤後（但是在</body>之前）,在第三個<p>標籤裡寫一點點關於你的願望，比如你可以說你想要什麼。
練習題：
<!DOCTYPE html>
<html>
<head>
<title>簡單的介紹</title>
</head>
<body>
<h1>人生的願望</h1>
<p>行至水窮處</p>
<p>坐看雲起時</p>
</body>
</html>
結果：
一張照片勝過千言萬語
雖然你的頁面添加了影象並且美化了一點，但是你的頁面仍然看起來有點空白。
請記住，當你新增一個圖片的時候，可以用右鍵選擇複製圖片連結，這樣就可以新增到<img>標籤。
說明
新增一個<img>標籤在你的body裡面，可以把它放任何地方。（我們認為它放在<h1>標籤後面，<p>標籤之前會很好）你可以設定src屬性為你喜歡的圖片。
練習題：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>哈哈哈哈哈</h1>
<img src="http://p1.so.qhimgs1.com/t0106398579eead9c6d.jpg">
<p>一張照片勝過千言萬語</p>
</body>
</html>結果：
連結
現在僅僅只有一個問題：你的網頁看起來像一個沒有門的房子，它沒有任何進去或者出去的路！我們會通過新增幾個連結來解決這個問題。
一旦你成功地新增你的連結和點選執行後，你就已經全部搞定了！陶醉在新建立的網頁的自豪中。
如果你看起來它不美觀，不漂亮。 那是因為它還是很基本的，別擔心，我們會教給大家CSS，這樣你的頁面會看起來更加敏銳，更加漂亮。
在你的頁面最少新增兩個連結。您可以開啟影象或為文字連結，你甚至可以在<P>標籤內插入一個連結！
練習題：
<!DOCTYPE html>
<html>
<head>
<title>這是一個普通的網頁</title>
</head>
<body>
<a href="http://www.baidu.com">這是我常用的搜尋引擎哦</a>
<p><a href="http://www.fenby.com">這是一個不錯的學習網站，點選試試</a></p>
<p><a href="https://blog.csdn.net/weixin_34727238">我是在段落裡面的連結</a>哈哈哈這是一個段落</p>
</body>
</html>結果：
回顧與介紹
接下來我們繼續學習更多的HTML知識。你已經知道了如何設定<head>和<body>標籤，如何設定標題和段落，以及如何新增圖片和連結。
在這個課程裡，我將學習下一個級別的內容：
- a. 有序和無序列表
- b. 改變字型大小，顏色和型別
- c. 改變背景顏色
- d. 對齊文字
說明
- 讓我們先熱身下，建立一個
title在head裡面。 - 在
body裡面建立一個段落，你可以隨便寫你喜歡的內容在段落裡面。
練習題：
<!DOCTYPE html>
<html>
<head>
<title>
網頁必須花時間製作
</title>
</head>
<body>
<p>夏代有工的玉，後海有樹的房子，此時此刻的雲，二十來歲的你，都是世間可遇不可求的事情。</p>
</body>
</html>結果：
程式碼格式
現在是一個規範程式碼格式的好時機，也就是說，每一行程式碼的縮排要有一定的比例。你會發現，如果我們把標籤巢狀在標籤裡面，並且保持程式碼的縮排，這樣做確實有助於使你的程式碼更加易讀！
嘗試按照練習的縮排風格，這樣當你編寫HTML的時候，你就不會感到很難去理順程式碼，這樣可以很清晰的去理解程式碼。
練習題：
<!DOCTYPE html>
<html>
<head>
<title>我實在不知道練習這麼多的意義</title>
</head>
<body>
<h1>我想寫一些很大的字
<p>這是專屬大字的段落
</p>
</h1>
<p>感覺我還停留在最開始的階段，真的好尷尬
</p>
</body>
</html>結果：
有序列表
現在我們學習怎麼去建立有序的列表。一個有序的列表不僅僅是一個編號的開始，如下面所示：
- 在8行 我們開始寫
<ol>標籤。 - 在9-11行 我們把
<li>和</li>標籤寫進去。 - 因為每個產品都佔一行，所以把它們放在每個不同的元素裡面。
- 在12行，我們要新增結束
</ol>標籤。
現在可以在HTML正文中使用有序標題和段落。
說明
- 在14行，建立一個名字叫美食的標題，然後用
<h2>修飾； - 在15行，建立一個有序列表的
<ol>； - 你的有序列表應該有3個不同的標籤。
練習題：
<!DOCTYPE html>
<html>
<head>
<title>Lists</title>
</head>
<body>
<h1>我喜歡的東西列表</h1>
<ol>
<li>玫瑰上的雨滴</li>
<li>加菲貓</li>
<li>亮閃閃的鑽石</li>
<li>溫暖的羊毛手套</li>
</ol>
<h2>我喜歡的美食</h2>
<ol>
<li>涼皮</li>
<li>紅薯</li>
<li>板栗</li>
<li>酸奶</li>
<li>旺仔</li>
</ol>
</body>
</html>結果：
更多的有序列表
我們覺得有序列表很優秀。因此，我們可以做更多的練習。如果你忘了有序列表的例子，可以回頭看看前面的章節！
說明
- 在body標籤裡面，建立一個h3的標題“最討厭的事情”。
- 建立一個有序列表在
<ol>標籤裡面，請記住那些最討厭的事情應該在<li>標籤裡。 - 請記住要關閉你的有序列表的標籤。
- 在這列表下面建立一個“在母親節我可以做的事情”的
<h2>標籤。 - 最後再建立一個列表，補充裡面的內容。
練習題：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h3>最討厭的事情</h3>
<ol>
<li>吃香菇</li>
<li>必須去上班的雨天</li>
<li>薄荷味的東西</li>
</ol>
<h2>在母親節可以做的事情</h2>
<ol>
<li>給媽媽買禮物</li>
<li>陪媽媽吃飯</li>
<li>給媽媽洗腳</li>
<li>帶媽媽出去玩</li>
</ol>
</body>
</html>結果：
無序列表
我們只是學會了如何建立有序列表，但是如果列表順序不重要，我們只是想要一個點呢？
<h2>冰淇淋的主要成分</h2>
<ul>
<li>冰</li>
<li>奶油</li>
</ul>
- 首先我們寫一個
<ul>標籤；- 因為我們要新增到列表中的每個專案，我們使用一個
<li>標籤；- 別忘記結束標籤。
說明
- 在
<body>標籤裡面，建立一個<h1>標籤，標籤內容為：“一些隨想”； - 在
<h1>標籤下面建立一個用<p>標籤的段落，介紹一下你的一些想法； - 最後建立一個無序的列表用
<ul>標籤，其中包含你的想法列表。每一個想法都應該單獨放在每個<li>裡面。
練習題：
<!DOCTYPE html>
<html>
<head>
<title>無序列表</title>
</head>
<body>
<h1>一些隨想</h1>
<p>應該做到的事情</p>
<ul>
<li>早睡</li>
<li>早起</li>
<li>多多鍛鍊</li>
</ul>
</body>
</html>
結果：
