昨天講到基礎的HTML用法，那今天就是要來介紹，和元素經常搭配的屬性囉～～

1 超連結：<a>

• href 屬性，可以轉跳到指定的目標網址

<a href="http://google.com/">Google網站</a>

• target 屬性，可以指定網頁在瀏覽器打開的方式，包括以下：
  _self：在目前的視窗中開啟連結 （預設值，不用特別設定）
  _blank：在新視窗或新分頁中開啟連結
  parent：在父視窗中開啟連結
  _top：在整個視窗中開啟連結

<a href="http://google.com/" target="_parent">Google網站</a>

• title 屬性，一個文字提示，當使用者將滑鼠懸停在連結上時，顯示的文字內容

<a href="http://google.com/" title="前往google">Google網站</a>

• download 屬性，用於下載連結。而這個屬性的值為要下載的檔案名

<a href="file.pdf" download>下載PDF檔案</a>

• rel 屬性，用於定義連結與目前文件之間的關係

<a href="https://www.file.com" rel="nofollow">連結文字</a>

2 圖片：<img>

• src 屬性，顯示在網站上的圖片路徑或URL

<img src="image.jpg" alt="圖片">。

• alt 屬性，當圖片無法顯示時，圖片會有替代的文字，用來提示使用者

<img src="image.jpg" alt="一間舒適的餐廳">

• width 屬性，用來指定圖片的寬度，可以使用像素（px）或百分比（%）來設定

<img src="image.jpg" alt="一間舒適的餐廳" width="500px">

• height 屬性，用來指定圖片的高度，同樣可以使用像素（px）或百分比（%）來設定

<img src="image.jpg" alt="一間舒適的餐廳" width="500px" height="400px">

• title 屬性，一個文字提示，當使用者將滑鼠懸停在連結上時，顯示的文字內容

<img src="image.jpg" alt="一間舒適的餐廳" title="舒適的風景">

3 列表：<ul> 和 <ol> 都搭配 <li> 來使用

• ul：列點式的內容
• li：有順序的內容，例如：1, 2, 3

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

4 輸入框：<input>

• type 屬性，指定輸入框內的類型。而常見的類型包括：
  • text：用於文字
  • password：用於密碼
  • email：用於電子郵件
  • checkbox：用於勾選框，允許選擇多個選項
  • radio：用於單選框
  • submit：用於提交表單
  • button：用於普通按鈕

<label for="">您的名字</label>
<input type="text"/>

• name 屬性，指定輸入元素的名稱，讓使用者在提交表單時易於識別

<label for="">您的名字</label>
<input type="text" name="yourName" />

• value 屬性，設定輸入元素的初始值。當輸入框是單選框和勾選框時，可以指定該選項的值

<label for="">您喜歡的運動</label>
<input type="checkbox" value="籃球" />籃球
<input type="checkbox" value="棒球" />棒球
<input type="checkbox" value="排球" />排球
<input type="checkbox" value="網球" />網球

• placeholder 屬性，在輸入框中提示文字

<label for="">您的名字</label>
<input type="text" name="yourName" placeholder="請輸入您的名字" />

• required 屬性，指定使用者輸入框為必填。使用者必須填寫設定的輸入框才能提交表單

<label for="">您的名字</label>
<input type="text" name="yourName" placeholder="請輸入您的名字" required />

• disabled 屬性，禁用輸入框，它無法被編輯或選擇

<label for="">您的名字</label>
<input type="text" name="yourName" placeholder="請輸入您的名字" disabled />

• readonly 屬性，設定為唯讀的模式，使用者可以看到輸入框，但無法編輯該輸入框

<label for="">您的名字</label>
<input type="text" name="yourName" placeholder="請輸入您的名字" readonly />

• minlength 和 maxlength 屬性，分別指定輸入字元的最少字元長度，和最多字元長度

<label for="">您的名字</label>
<input type="text" minlength="2" maxlength="15" />

• min 和 max 屬性，指定數值輸入元素，分別指定最小值和最大值

<label for="">您的專屬數字</label>
<input type="number" min="1" max="10" />

• step 屬性，用於數值輸入元素，指定增加或減少數值的長

<label for="">您的專屬數字</label>
<input type="number" min="1" max="10" step="1" />

• autofocus 屬性，當進入網頁時，將會自動聚焦在設定的輸入框上

<label for="">您的專屬數字</label>
<input type="number" min="1" max="10" step="1" autofocus />

5 表單：<form>

• action 屬性，指定表單提交的目標URL

• method 屬性，指定表單提交的方法

  • get：比較不安全，通常用於簡單的操作
  • post：比較安全，通常用於敏感數據和較大數據

<form action="form.php" method="post">

6 按鈕：<button>

• type 屬性，指定按鈕的類型
• name 屬性，指定按鈕的名稱
• value 屬性，設定按鈕的值

<button type="button" name="button" value="submit">點擊按鈕</button>

7 連結：<link>

• rel 屬性，指定與目前文件的關聯，像是用於連結外部樣式的 CSS
• href 屬性，指定連結的目標URL

<link rel="stylesheet" href="style.css">

8 腳本：<script>

• src 屬性，外部引用，和 CSS 連結外部類似，這能讓 JavaScript 可以重複使用，並且相對較容易維護

<script src="myscript.js"></script>

• async 屬性，非同步載入，這能讓 JavaScript 非同步操作，這樣網頁就不會等待 JavaScript 載入完成才繼續解析

<script src="myscript.js" async></script>

• defer 屬性，延遲載入，這能讓 JavaScript 非同步操作，會在文件解析完畢後按順序執行

<script src="myscript.js" defer></script>