Say Hello to HTML Element Incomplete
1 <h1>Hello</h1>
1就是一個HTML元素，h1是header1的簡寫，意思是一級標題。
大部分元素都有一個開始標記和一個結束標記。
開始標記像這樣：< h1>
結束標記像這樣：< /h1>
Headline with the h2 Element Incomplete
h是英文header標題的縮寫，標題無處不在，它的應用範圍十分廣泛：網站結構、寫作文、PPT等。h1是主標題，h2是副標題，h3、h4、h5、h6依次遞減字體的大小。
在主標題下面創建一個副標題，標題內容是：CatPhotoApp
<h1>Hello World</h1>
<h2>CatPhotoApp</h2>Inform with the Paragraph Element Incomplete
p是英文paragraph段落的縮寫，經常被用來創建一個段落，就和你寫作文一樣。
任務：在副標題下面新增一個段落，段落內容是：Hello Paragraph。
<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
<p>Hello Paragraph</p>Uncomment HTML Incomplete
註釋有兩個功能：
1、想讓某一段代碼不起作用，但你又不想刪除這一段代碼。
2、就是給代碼添加一些說明，方便團隊合作或日後自己查看，但又不想影響代碼本身。
我們先學習如何刪除註釋，再學習如何添加註釋。
提示：可以通過刪除< !–和–>來刪除註釋。
任務：試着先把一級標題、二級標題、段落的註釋都刪除掉。
<!--
<h1>Hello World</h1>
<h2>我家的貓咪</h2>
<p>Hello Paragraph</p>
-->Comment out HTML Incomplete
註釋的開始標記是< !–
結束標記是–>
任務：把主標題和段落都註釋掉，但把副標題留着。
<!--h1>Hello World</h1-->
<h2>我家的貓咪</h2>
<!--p>Hello Paragraph</p-->Fill in the Blank with Placeholder Text Incomplete
Web開發者通常用lorem ipsum text來做佔位符，佔位符就是佔着位置的一些文字，沒有實際意義。
爲什麼叫lorem ipsum text呢?
是因爲lorem ipsum是古羅馬西塞羅諺語的前兩個單詞。
從公元16世紀開始lorem ipsum text就被當做佔位符了，這種傳統延續到了互聯網時代。
於此同時，孫悟空也在五指山下壓了500年，然後就進化成程序猿了，是不是很巧合，哈哈。
任務：把段落中的文本替換爲：Monkey code 猴哥猴哥，你真了不得，金箍棒在手，問世間誰是英雄。
<h1>西遊記</h1>
<h2>齊天大聖</h2>
<h2>孫悟空</h2>
<p>Monkey code 猴哥猴哥，你真了不得，金箍棒在手，問世間誰是英雄</p>Delete HTML Elements Incomplete
手機的屏幕空間是有限的。
讓我們刪除不必要的元素，開始設計我們的CatPhotoApp。
任務：刪除你的h1元素以簡化視圖。
<h1>Hello cat!</h1>
<h2>我家的貓咪</h2>
<p>在大家心目中，貓是慵懶的可愛的化身，它可以睡飽了再起來吃飯，可以逗趣小耗子，可以賣得了萌，使得了壞，這樣百變的小怪獸就集結在一隻寵物上，怎能不惹人憐愛。</p>Change the Color of Text Incomplete
現在讓我們來改變某些文本的顏色。
我們可以通過修改h2元素的style(樣式)來達到目的。
樣式的屬性有很多，其中color用來指定顏色。
以下是將你的h2元素的文本顏色設置爲藍色的示例代碼：
< h2 style=”color: blue”>CatPhotoApp< /h2>
任務：修改你的h2元素的style，讓文本的顏色變爲紅色。
<h2 style="color:red">我家的貓咪</h2>
<p>在大家心目中，貓是慵懶的可愛的化身，它可以睡飽了再起來吃飯，可以逗趣小耗子，可以賣得了萌，使得了壞，這樣百變的小怪獸就集結在一隻寵物上，怎能不惹人憐愛。</p>Use CSS Selectors to Style Elements Incomplete
樣式的屬性多達幾千個，但別擔心，按照80-20原則，常用的也就幾十個，你完全可以掌握它。
當你鍵入<h2 style="color: red">CatPhotoApp</h2>，你就給h2元素添加了inline style(內聯樣式)。
內聯樣式是爲元素添加樣式的最簡單有效的方式，但是更易於維護的方式是使用層疊樣式表CSS（Cascading Style Sheets）。
在代碼的最頂端，創建一個如下的style元素：
<style>
</style>在這個style元素內, 你可以爲所有的h2元素創建一個元素選擇器。比如，如果你想要將所有的h2元素設置爲紅色, 你的代碼應該看起來像這樣：
<style>
選擇器 {屬性名稱: 屬性值;}
h2 {color: red;}
</style>注意：一定要在屬性值的後面加上分號;。
任務：刪除你的h2元素的內聯樣式，然後創建一個style元素。添加必要的CSS，使所有h2元素變爲藍色。
<style>
h2{color:blue}
</style>
<h2 >我家的貓咪</h2>
<p>在大家心目中，貓是慵懶的可愛的化身，它可以睡飽了再起來吃飯，可以逗趣小耗子，可以賣得了萌，使得了壞，這樣百變的小怪獸就集結在一隻寵物上，怎能不惹人憐愛。</p>Use a CSS Class to Style an Element Incomplete
上節課我們學習了元素選擇器，這節課我們學習類選擇器。
我們先聲明一個類選擇器：
<style>
.blue-text {
color: blue;
}
</style>上面的代碼在 <style> 標記中聲明瞭一個叫做 blue-text 的類樣式。
然後在h2元素上應用我們聲明的類選擇器：
<h2 class="blue-text">CatPhotoApp</h2>注意：在CSS中，類選擇器應該添加.爲前綴。
而在HTML中，class屬性不能添加.爲前綴。
這是因爲在CSS中如果類選擇器前不添加. 瀏覽器就會誤認爲類選擇器是一個元素選擇器。
任務：在你的style元素中，修改h2選擇器爲.red-text選擇器，並把顏色值從blue修改爲red。
最後在h2元素上應用我們聲明的.red-text選擇器。
<style>
.red-text {
color: red;
}
</style>
<h2 class="red-text">我家的貓咪</h2>
<p>在大家心目中，貓是慵懶的可愛的化身，它可以睡飽了再起來吃飯，可以逗趣小耗子，可以賣得了萌，使得了壞，這樣百變的小怪獸就集結在一隻寵物上，怎能不惹人憐愛。</p>Style Multiple Elements with a CSS Class Incomplete
你可以在 HTML 元素的開始標記中通過使用class=”your-class-here”來將 class 附加到相關元素中。
CSS 類選擇器必須添加.爲前綴，如下：
.blue-text {
color: blue;
}但在HTML中class屬性的值不需要添加.爲前綴，如下：
<h2 class="blue-text">CatPhotoApp</h2>將red-text類應用到h2和p元素中。
<style>
.red-text {
color: red;
}
</style>
<h2 class="red-text">我家的貓咪</h2>
<p class="red-text">在大家心目中，貓是慵懶的可愛的化身，它可以睡飽了再起來吃飯，可以逗趣小耗子，可以賣得了萌，使得了壞，這樣百變的小怪獸就集結在一隻寵物上，怎能不惹人憐愛。</p>Change the Font Size of an Element Incomplete
字號是由樣式屬性font-size來控制的, 如下：
h1 {
font-size: 30px;
}用下面的文本來創建第二個p元素：
養動物有的時候，就是介於愛與恨之間，當你欽羨別人萌寵這麼可愛的時候，你一定沒有想過，狗狗和貓貓會到處拉屎，甚至會屯老鼠，啃鞋子，用爪子爬門，你不理它，它就撓你，你要對它發脾氣，它會比你更來勁。所以，狗貓慎入，沒有一定的準備，切勿隨便去侍養動物。它們一旦認定你了，你就是它們的主人，如果你拋棄它們，它們必定心中重創。
任務：讓第一個段落和第二個段落的font-size都爲16px。
請不要爲第二個段落添加 class 屬性
<style>
.red-text {
color: red;
}
P{
font-size:16px;
}
</style>
<h2 class="red-text">我家的貓咪</h2>
<p class="red-text">在大家心目中，貓是慵懶的可愛的化身，它可以睡飽了再起來吃飯，可以逗趣小耗子，可以賣得了萌，使得了壞，這樣百變的小怪獸就集結在一隻寵物上，怎能不惹人憐愛。</p>
<p>養動物有的時候，就是介於愛與恨之間，當你欽羨別人萌寵這麼可愛的時候，你一定沒有想過，狗狗和貓貓會到處拉屎，甚至會屯老鼠，啃鞋子，用爪子爬門，你不理它，它就撓你，你要對它發脾氣，它會比你更來勁。所以，狗貓慎入，沒有一定的準備，切勿隨便去侍養動物。它們一旦認定你了，你就是它們的主人，如果你拋棄它們，它們必定心中重創</p>Set the Font Family of an Element Incomplete
Import a Google Font Incomplete
Specify How Fonts Should Degrade Incomplete
Add Images to your Website
Size your Images
CSS包含一個控制元素寬度的width屬性。像控制字體一樣，我們使用px（像素）來指定圖片的寬度。
例如，如果我們想要創建一個名爲larger-image的類選擇器，把HTML元素的寬度設定爲500像素，我們使用：
<style>
.larger-image {
width: 500px;
}
</style>
任務：創建一個名爲smaller-image的類選擇器，然後用它來改變圖片尺寸，使圖片僅有100像素寬。
<style>
.smaller-image{
width: 100px;
</style>
<img class="smaller-image" src="/images/relaxing-cat.jpg">