深入 HTML

開始之前，要請大家先在VSCode安裝一些好用套件：

1. HTML Snippets

提供一些常用的HTML片段程式碼。

2. Auto Close Tag

自動添加上閉合tag。

安裝好上述套件後，在VSCode新增一html檔案，輸入html5並按下Enter

可以發現 HTML Snippets 套件自動幫我們完成了html5的template，是不是超級方便^_^

head 頁面資訊

我們可以由剛剛產生的html5 template看到head區塊：

<title></title>

此標籤中的就是此網頁的標題，也就是您瀏覽器最左上面的標題，若沒設定則會顯示成此網頁的檔名。

<meta charset="UTF-8">

定義文件編碼。

<meta name="viewport" content="width=device-width, initial-scale=1">

W3C 在 HTML 制定了給手機網頁 Mobile Web 使用的 Viewport 螢幕解析度設定的語法。

viewport的作用是告訴瀏覽器，目前裝置有多寬(或多高)。

可以透過viewport來設定：

屬性 Attribute	描述 Description
width	viewport寬度，通常設為device-width，用意是適應各家裝置的大小。
initial-scale	預設以多少倍的viewport來顯示。
maximum-scale	定義頁面縮放的最高倍率。
user-scalable	只有0與1兩個值，定義是否讓使用者自己調整viewport倍率。

更多html <meta> Tag用法：https://www.w3schools.com/tags/tag_meta.asp

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

引入CSS樣式表。

認識 html Tags

div：用來標示一個網頁區塊，可以說是一個能夠將其他元素包起來的"容器"。

<div id="" class="">...</div>

h1~h6：代表不同大小的標題

<h1>這是 h1 標題的大小</h1>
<h2>這是 h2 標題的大小</h2>
<h3>這是 h3 標題的大小</h3>
<h4>這是 h4 標題的大小</h4>
<h5>這是 h5 標題的大小</h5>
<h6>這是 h6 標題的大小</h6>

p：段落

<p>你好嘛?</p>

span：文字的區域

<span>你好嘛?</span>

a：超連結

<a href="連結網址" target="連結目標" title="替代文字">...</a>

• target="_blank" 在新視窗開啟

• target="_self" 在原本的視窗開啟

img：圖片

<img src="插入的圖片網址" alt="圖片替代文字" title="圖片提示文字">

input：輸入欄位

屬性Attribute	描述 Description
type	設定類型，可用的類型有: text、textarea、button、checkbox、date、email、file、password、number、color、submit ......
value	指定值給input標籤。
placeholder	提示文字。
max	最大字數。
min	最小字數。
disabled	禁止使用。

更多屬性請參考：https://www.w3schools.com/tags/tag_input.asp

ul、li：列表

<ul>
  <li>第一個項目</li>
  <li>第二個項目</li>
  <li>第三個項目</li>
</ul>

table、caption、th、tr、td：表格

• th 為表頭

• tr 為一列

• td 為儲存格

  <table>
      <caption>表格標題</caption>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th> 
        <th>Age</th>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td> 
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td> 
        <td>94</td>
      </tr>
  </table>

button：按鈕

<button>我是按鈕</button>

這是產生按鈕的第二種方法，第一種為<input type="button" value="我是按鈕">。

hr：分隔線

<hr />

br：換行

<br />

form：表單

<form>
  <label for="boy">男</label>
  <input name="gender" type="radio" id="boy">
  <label for="girl">女</label>
  <input name="gender" type="radio" id="girl">
  <input type="submit" value="送出">
</form>

id與class的區別

id是唯一性的、不可重複的。

class與id正好相反，class是可被拿來被重複使用的。

而二者的使用時機又是為何呢?

簡單的來說，若只要設定樣式的，則採用class來作設定(如此可讓多個物件都使用同一種樣式)，

若要透過Javascript或其它的程式語言，找尋物件時，就建議使用id來進行相互對應的動作。