Visual Studio Code建議安裝外掛

live server
prettier-code formatter，存檔時會自動重新排版
- Manage(齒輪）→Settings→search “format”→在Editor: Format On Save打勾→search “default”→在Editor: Default Formatter選prettier-code formatter
Material Theme
- Manage(齒輪）→Themes→Color Theme→選擇喜歡的主題
Material Theme Icons→Set File Icon Theme
Auto Rename Tag，會自動改Tag名字，例如原本是<p></p>，想改成<h1></h1>，把<p>改為<h1>後，後面會自動改為</h1>

HTML

https://htmlhead.dev/
H1, H2…H6的標籤目的不是告訴網頁字體要多大，而是決定標題的重要性，因為字體多大，也就是它的樣式，可以透過CSS修改，正確的使用HTML標籤，可以做到SEO
<a>可以用<base>標籤重新設定
- 如果<a>標籤裡，要把target=”blank”一口氣改為target=”_self”，要使用<base>
- <base>是描述整個網頁裡的連結設定，要放在<head>裡
```
<head>
	<base target="blank">
</head>
```

image

<img src="./img/故宮圖片1.jpeg" alt="故宮圖片" width="80%" height="80%" />
<!--
./ 代表本層
../ 代表上層
/ 代表最上層
-->

ol and ul

<ul type="square">
      <li>北部院區</li>
      <li>南部院區</li>
    </ul>
    <ol type="A">
      <li>北部院區</li>
      <li>南部院區</li>
    </ol>
<!--
盡量用CSS替代
-->

block and inline elements
- block elements會在頁面上單獨佔據一行，前後的內容以一個換行區隔，如<p>、<div>
- inline elements放在block elements裡面的內容，例如<a>、<img>
table
- <tr> table row
- <th> table heading
- <td> table data
form
- 在<form>標籤內所有內容，有設定name屬性的資料財會被送到後端伺服器
- <form>標籤的method屬性會告訴瀏覽器如何把表單數據發送到伺服器，預設值是GET。如果使用GET，則資料不會隱藏起來。但是如果是用POST，則會隱藏起來
input裡的radio按鈕是為了單一選項設計的，用name來判斷。下面的例子，如果other選項的name打錯字，則在網頁上，你可以同時選擇Male（或Female）與Other。

<input type="radio" name="gender" value="male"> Male

<input type="radio" name="gender" value="female"> Female

<input type="radio" name="gender" value="other"> Other

select

<select name="gender" id="gender" required>
        <option value=""></option>
        <option value="male">Male</option>
        <option value="female">Female</option>
        <option value="other">Other</option>
      </select>