HTML的學習（3）
備註：今天是學習html的第三天，對於以前掌握的不好的知識點能夠更加清晰，但是，因為不熟練的關係只能完成簡單的框架，在學習中重複性的東西太多難免有所疏忽大意，會忘記加上應該有的標籤，在後面的學習中希望可以改進。
列表裡面的清單
現在已經學會了如何建立一個有序列表和一個無序列表了，但是新的問題來了——如何在一個有序列表之中建立一個無序列表，這就要用到巢狀的知識。
當你使用巢狀標籤的時候，開啟的最後一個標籤總是要第一個關閉。
舉個栗子：
<ul><li>玉米餅!</li></ul>說明
- 在21行建立一個無序列表；
- 在這個無序列表再增加兩組item，一組是喜歡的男孩名稱，另外一組是喜歡的女孩名稱；
- 在每組item裡面建立一個有序列表，每個有序列表裡面建立三個item，並把喜歡的男孩名稱和喜歡的女孩名稱分別寫進列表。
練習題：
<!DOCTYPE html> <html> <head> <title>巢狀列表</title> </head> <body> <ol> <li>爸爸喜歡的東西 <ul> <li>足球</li> <li>籃球</li> </ul> </li> <li>媽媽喜歡的東西 <ul> <li>花草</li> <li>旅行</li> </ul> </li> </ol> <ul> <li>喜歡的男孩 <ol> <li>胡歌</li> <li>白敬亭</li> <li>易烊千璽</li> </ol> </li> <li>四季 <ol> <li>春</li> <li>夏</li> <li>秋</li> <li>冬</li> </ol> </li> </ul> </body> </html>
結果：
註釋
我們已經介紹了很多關於列表的內容，下面我們學習改變一下樣式。如果你還記得，假如HTML是網頁的框架，那麼CSS可讓您為框架增加一些美觀度，使網頁更加漂亮。
雖然我們可以寫一些內聯的CSS樣式，但是這只是意味著，我們可以在HTML檔案中寫一些樣式，而不必擔心去建立一個單獨的CSS檔案！我們學習這個首先是因為學會它會使以後學習CSS輕鬆了許多。在我們深入探討字型之前，首先來了解下注釋的功能。瀏覽器不會顯示你的HTML程式碼的內容，但它會在程式碼中，以幫助你記住做了某些事情，為什麼那樣做。
說明
註釋開始就是這樣： <!-- 開始 結束 -->
練習題：
<!DOCTYPE HTML>
<html>
<head><title>我是一個標題</title></head>
<!--把我放進去註釋-->
<body>
<p>使用者現在應該只能看見這條資料</p>
<!-- 看不見這段話-->
</body>
</html>結果：
字型大小
回想一下之前講的<p>和</p>標籤。
我們可以通過標籤的屬性給予標籤一些詳細說明。一個屬性是簡單地對元素中的內容的特徵或一些描述，你可以看見 src屬性在<img>和href在<a>標籤裡。
我們下面要改變這些文字的大小，那麼怎麼去改變呢？我們會使用style屬性。我們用它設定字型大小，後面跟一個你想要的大小 最後結束用px結束。
<p style="font-size: 12px">
說明
- 在7行設定文字大小為10px；
- 在8行設定文字大小為20px；
- 在9行設定文字大小為40px。
練習題：
<!DOCTYPE html>
<html>
<head>
<title>第一次改變字型的大小</title>
</head>
<body>
<p style="font-size: 10px"> 一些文字是小字型的 </p>
<p style="font-size: 20px"> 現在是正常的字型</p>
<p style="font-size: 40px">現在是一些大字型</p>
</body>
</html>結果：
字型顏色
我們現在知道了style屬性，以後我們也會常用到這些屬性。
我們可以用它來定義很多不同的標籤，不僅僅是<p>標籤。下面我們改變標題內容的顏色。
改變文字的顏色，只需宣告style屬性，然後設定“顏色：藍色”（或任何你喜歡的顏色）。例如：
<h2 style="color:red">
如果你想改變文字的大小和顏色？很簡單！只需新增每個屬性之間以分號。例如：
<h2 style="color: green; font-size:12px">
所有的顏色列表可以點選這裡進行查詢
不能寫成下面這樣:
<h2 <h2 style="color: green; font-size:12px">
- 改變標題顏色為綠色，並且改變大小為16px；
- 改變第一個段落顏色為藍色。
- 改變第二個段落的顏色為紅色，把它的字型大小設定為10px。
練習題：
<!DOCTYPE html>
<html>
<head>
<title style="color:green;font-size:16px">改變顏色</title>
</head>
<body>
<h1>最大的標題</h1>
<p style="color:blue">一個巨大的熊和小鴨子是好朋友。</p>
<p style="font-size:10px;color:red">但熊肚子餓，吃了鴨子。</p>
</body>
</html>結果：
