### 架構分析
主要架構標籤用
> header 標頭
>
> 內容
> > nav
section
main
article
div
>
>footer 尾部

***
### HTML 語義標籤

>header
頁首:文章or整體頁首
>
>footer
頁尾:文章or整體頁尾
>
>nav
導覽列:根據設計擺放的位置也不同
麵包屑:用ul做 外層要包nav
>
>main
主欄:不重複的主要內容
>
>aside
側邊欄:與內文沒有直接關係
但有間接相關 不一定在側邊
>
>article
文章區塊:包含頁面中的獨立部分
可包含aside也可以互相包覆
當頁面獨立在頁面時
使用者也可以理解
結構需完整
>
>section
章節區塊:頁面中的獨立區塊
如果沒有其他語意就可以使用
但無法單獨出現在頁面中
>
>div
容器:無語意的空標籤
通常都是純切版用的
>
>span
詞組內容:也是無語意的空標籤
但會顯示在同一排
>
>figure
跟內容有相關 有可能會是圖片
>
>figcaption
解釋figure的內容

***
### 排版估時

可以透過 [codepen](https://codepen.io/) 網站
練習前端 Coding 內容有

- 時間掌握
- 標記運用
- 函式運用
- 精簡代碼
- 增加作品集

***
### CSS介紹

**選擇器優先度**
!important > html inline > id > class > tag

**在CSS檔呈現方式**

@import "h1style.css"; /* 匯入別的CSS檔 */

h1{
    color: red;
    background-color: black;
} /* 標記語言 */
.green{
    color: green;
} /* class屬性 */

#blue{
    color: blue;
} /* ID屬性 */

/* 我是註解 */

***

Windows 快捷鍵

<!-- 註解 --> Ctral + /
<!-- 調整文字行段 --> Alt + Z
<!-- 文字游標頭尾移動 -->  FN + 左右鍵
<!-- 文字選取 -->  Shift + 左右鍵
<!-- 同文處理 -->  Ctral + D
<!-- 不同地方同時輸出文字 --> Alt + 鼠標點選
<!-- 上下穿梭游標行文 -->  Alt + 上下鍵
<!-- 向下複製游標行文 -->  Alt +  Shift +上下鍵

***
HTML填寫

 <!-- HTML 區塊 -->
  <!-- ---------------- -->
  <!-- 頁首(header) -->
   <header>
    <img src="" alt="" class="logo">
    <nav>主選單</nav>
   </header>
  <!-- 頁尾(footer) -->
   <footer>
    <nav>site map</nav>
   </footer>
  <!-- 導覽列(nav) -->
   <nav>麵包削 1>2>4</nav>
  <!-- 主要內容(main) -->
  <main>不重複/獨特/有亮點/</main>
  <!-- 側邊欄區塊(aside) -->
   <aside>廣告欄/跟主內容有間接關係</aside>
  <!-- 文章區塊(article) -->
   <article>頁面獨立區塊/結構要完整</article>
  <!-- 章節區塊(section) -->
   <section>不需完整獨立/沒有更具體的語意標籤</section>
  <!-- 內容相關的獨立區塊（figure / figcaption） -->
  <!-- figure -->
   <figure>內文微關連圖
    <img width="50" src="貓.jpg" alt="">
    <figcaption>圖片解釋文字</figcaption>
   </figure>
  <!-- figure 與 figcaption -->
  <!-- 內容分區區塊(div / span) -->
   <div>空標籤/沒語意/樣式分組的外容器</div>
   <span>空標籤/小東西</span>

  <!-- HTML 表單 -->
  <!-- ---------------- -->
  <!-- 表單元素(form) -->
   <form action="表單位置" method="get">
     <!-- 表單輸入元素(input) -->
     <!-- 一般文字 -->
      <p>
        帳號:
        <input type="text" placeholder="輸入帳號" required>
      </p>
     <!-- 密碼 -->
      <p>
        密碼:
        <input type="password" minlength="10">
      </p>
     <!-- 數字 -->
      <p>
        數字:
        <input type="number">
      </p>
     <!-- 電話號碼 -->
      <p>
        電話:
        <input type="tel">
      </p>
     <!-- mail -->
      <p>
        Email:
        <input type="email">
      </p>
     <!-- url -->
      <p>
        URL:
        <input type="url">
      </p>
     <!-- 日期 -->
      <p>
        日期:
        <input type="date">
      </p>
     <!-- 時間 -->
      <p>
        時間:
        <input type="time">
      </p>
     <!-- 顏色 -->
      <p>
        顏色:
        <input type="color">
      </p>
     <!-- 範圍 -->
      <p>
        範圍:
        <input type="range" min="" max="" step="10">
      </p>
     <!-- 上傳文件 -->
      <p>
        上傳檔案:
        <input type="file">
      </p>
     <!-- 多選 -->
      <p>
        多選項目
        <input type="checkbox" name="checkboxName" value="1" checked> 麵
        <input type="checkbox" name="checkboxName" value="2"> 飯
      </p>
     <!-- 單選 -->
      <p>
        單選選項:
        <input type="radio" name="radioName" value="1" checked>土豆
        <input type="radio" name="radioName" value="2">地瓜
      </p>
     <!-- 搜尋 -->
      <p>
        搜尋:
        <input type="search">
      </p>
      <!-- 下拉選單 -->
       <select name="">
         <option value="1">飯</option>
         <option value="2">麵</option>
         <option value="3">土豆</option>
       </select>

     <!-- 送出按鈕 -->
      <input type="submit" value="點擊送出表單">
     <!-- 清空按鈕 -->
      <input type="reset" value="清空表單">
     <!-- 普通按鈕 -->
      <input type="button" value="點我">
      <button>點我點我</button>


   </form>


    <!-- label 用法 -->
     <p>
      多選項目:
      <label>
        <input type="checkbox" name="checkboxName" value="1">選項一
      </label>
      <label>
        <input type="checkbox" name="checkboxName" value="2">選項二
      </label>
     </p>
    <!-- label for 用法 -->
    <p>
      多選項目:
      <input id="check" type="checkbox" name="checkboxName" value="1">
        <input id="checka" type="checkbox" name="checkboxName" value="2">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus iure dignissimos rem, vero deserunt corporis quam quis, commodi porro reprehenderit in possimus eos, impedit ut eius vitae nam dolor! Nostrum?</p>
      <label for="check">選項一</label>
      <label for="checka">選項二</label>
     </p>
    
    <!-- Emmet 快速輸入語法介紹 part 3 -->
    <!-- ---------------- -->
    <!-- 創造一個 id 為 idName 且 class 為 className 的 p 標籤 -->
     <!-- p.className#idName -->
     <p class="className" id="idName"></p>
     <p class="className"></p>
     <p id="idName"></p>
    <!-- 產生 4 個 class 為 className1 到 className4 的 p 標籤 -->
     <!-- p #idName$*4 -->
     <p id="idName1"></p>
     <p id="idName2"></p>
     <p id="idName3"></p>
     <p id="idName4"></p>