1. Link to External Pages with Anchor Elements

a元素，也叫anchor（錨點）元素，既可以用來連結到外部地址實現頁面跳轉功能，也可以連結到當前頁面的某部分實現內部導航功能。

下面是一張a元素的圖示。a元素位於段落元素的中間，這意味著連結會出現在段落的中間。

這有一個例子：

<p>Here's a <a href="http://freecodecamp.cn"> link to FreeCodeCamp中文社群 </a> for you to follow.</p>

2.Nest an Anchor Element within a Paragraph

例如：

<p>Here's a <a href="https://freecodecamp.cn"> link to FreeCodeCamp中文社群</a> for you to follow.</p>

Nesting（巢狀）就是把一個元素放在另一個元素裡面。

3. Make Dead Links using the Hash Symbol

有時你想為你的網站新增一個a元素，但此時你還不知道要將它們連結到哪兒，此時可以使用固定連結。

把你的a元素的href屬性的值替換為一個#，別名hash(雜湊)符號，將其變為一個固定連結。

4. Turn an Image into a Link

你可以通過把某元素巢狀進a元素使其變成一個連結。

把你的圖片巢狀進a元素。舉例如下：

<a href="#"><img src="/images/relaxing-cat.jpg"></a>

5. Add Alt Text to an Image for Accessibility

alt屬性，也被稱為alt text, 是當圖片無法載入時顯示的替代文字。alt屬性對於盲人或視覺損傷的使用者理解一幅圖片中所描繪的內容非常重要，搜尋引擎也會搜尋alt屬性。

簡而言之，每一張圖片都應該有一個alt屬性！

你可以像下面例子中一樣為img元素新增一個alt屬性：

<img src="www.your-image-source.com/your-image.jpg" alt="your alt text">

6. Create a Bulleted Unordered List

HTML有一個特殊元素，用於建立unordered lists（無序列表）, 或帶專案符號的列表。

無序列表以<ul>元素開始，幷包含一個或多個<li>元素。

例如：

<ul>
  <li>milk</li>
  <li>cheese</li>
</ul>

7. Create an Ordered List

HTML有一個特殊元素，用於建立ordered lists（有序列表）, 或數字編號列表。

有序列表以<ol>元素開始，幷包含一個或多個<li>元素。

例如：

<ol>
  <li>Garfield</li>
  <li>Sylvester</li>
</ol>

8. Create a Text Field

現在讓我們來建立一個form(表單)。

Text input(文字輸入框)是用來獲得使用者輸入的絕佳方式。

你可以用如下方法建立：

<input type="text">

注意，input元素是自關閉的。

9. Add Placeholder Text to a Text Field

佔位符(placeholder text)是使用者在input(輸入)框輸入任何東西之前放置在input(輸入)框中的預定義文字。

你可以用如下方式建立佔位符：

<input type="text" placeholder="this is placeholder text">

10. Create a Form Element

使用HTML來構建可以跟伺服器互動的Web表單(form)，通過給你的form元素新增一個action屬性來達到此目的。

action屬性的值指定了表單提交到伺服器的地址。

例如：

<form action="/url-where-you-want-to-submit-form-data"></form>

11. Add a Submit Button to a Form

讓我們來為你的form新增一個submit(提交)按鈕，點選這個按鈕，表單中的資料將會被髮送到你通過action屬性指定的地址上。

下面是submit按鈕的例子：

<button type="submit">this button submits the form</button>

12. Use HTML5 to Require a Field

當你設計表單時，你可以指定某些選項為必填項(required)，只有當用戶填寫了該選項後，使用者才能夠提交表單。

例如，如果你想把一個文字輸入欄位設定為必填項，在你的input元素中加上required屬性就可以了，你可以使用：

<input type="text" required>

13. Create a Set of Radio Buttons

類比是最好的學習方式，當你搞不清一個概念時，最好在生活中找到對應的案例。

單選就是你只能在多個選項中選擇一個，就好比你有很多追求者，但卻只能選擇一個結婚。

多選一的場景就用radio button(單選按鈕)

單選按鈕只是input輸入框的一種型別。

每一個單選按鈕都應該巢狀在它自己的label(標籤)元素中。

注意：所有關聯的單選按鈕應該使用相同的name屬性。

下面是一個單選按鈕的例子：

<label><input type="radio" name="indoor-outdoor"> Indoor</label>

14. Create a Set of Checkboxes

當你在大學選課時，面對幾百門課程，而因為時間和精力，你只能從中選擇十幾門。

這樣的場景就用checkboxes（複選按鈕）。

複選按鈕是input的輸入框的另一種型別。

每一個複選按鈕都應該巢狀進label元素中。

所有關聯的複選按鈕應該具有相同的name屬性。

下面是複選按鈕的例子：

<label><input type="checkbox" name="personality"> Loving</label>

15.Check Radio Buttons and Checkboxes by Default

使用checked屬性，你可以設定複選按鈕和單選按鈕預設被選中。

為此，只需在input元素中新增屬性checked

<input type="radio" name="test-name" checked>