學會 HTML & CSS （關於 HTML 的部份）

會花兩邊文章來介紹 HTML 和 CSS 基礎，內容比較細，初學者可以參考，但不要看著筆記死記，靠實作切版才能夠真的記住和活用～

HTML 結構

<html>
    <head>
        <meta charset="utf-8"/>
        <title>
    </head> I am title </title>
    <body>
    </body>
</html>
<--!這是註解-->

HTML 標籤基礎

<div></div> // 占據一整行的容器
<span></span> // 用在文字裡面的
<h1><h1> // 標題，有 h1 ~ h6
<p> // 段落

<img> // 圖片
＜img title="hihi" src="img/logo.png" alt="Lazybonez" />
title 是滑鼠移上去的時候顯示
src 是圖片位置
alt 是圖片替代文字
圖片的標籤包法：

<figure>
    <img src="abc.png">
    <figcaption>圖書
    </figcaption
</figure>

pre // preformatte text 原封不動地包含空格顯示出來
<br/> // 空行

表格

<table>
    <tr>
        <th>姓名</th>
        <th>國文分數</th>
    </tr>
    <tr>
        <td>小明</td>
        <td>國文分數</td>
    </tr>
<table>

連結
<a href="[http://www.google.com](http://www.google.com/)" target="_blank">content</a>
target="_self" 直接開起來
target="_blank" 新開分頁
aria-role="button" 無障礙設計

列表
<ul> 無序列表 <ol> 有序列表 <li> 列表項目

<ul>
  <li>Food</li>
  <li>Haha</li>
</ul>

FORM 相關 tag

<form action="送去哪裡" method="API方法">
    //文字輸入框
    姓名：<input type="text" placeholder="提示文字"/>
    密碼：<input type="password""  min="5"> 

    // Email輸入框
    Email: <input type="email" required/> 設成必填

    //日期輸入框
    日期: <input type="date"/>

    //單選輸入框
    性別: 
    <input name="gender" type="radio" id="male"/><label for="male">男<lable/>
    <input name="gender" type="radio"/>女;
    // 用 name 來分組
    // checked 可以預先選好

    //核取
    <input name="interest" type="checkbox" id="baseball"/><label for="baseball">棒球<lable/>

    //選單
    <select>
        <option value="volvo">Volvo</option>
        <option value="honda">Honda</option>
    </select>

    //送出表單
    <input type="submit" value="送出表單"/>

    //重設
    <input type="reset"/>
</form>

下拉式選單 select

<div class="container">
  <select name="year" id="">
    <option value="1901">A</option>
    <option value="1902">AA</option>
    <option value="1903">SS</option>
    <option value="1904">DD</option>
    <option value="1905">EE</option>
    <option value="1906" selected>T_T</option>
  </select>
</div>

textarea
<textarea name="" id="" cols="30" rows="10"></textarea>

button

<div class="container">
  <form action="register.php">
    <input type="text">
    <button type="submit">submit</button>
    <button type="reset">reset</button>
    <button type="button">no action</button>
  </form>
</div>

搭配 label 的 for 功能

<div class="container">
  <label for="email">Email</label>
  <input type="text" id="email"><br>
  <label for="password">Password</label>
  <input type="password" id="password">
</div>

用 name 和 value 可以跟後端互動