### HTML介紹
HTML **不是程式語言**
他是超文本**標記語言**
不像其他程式語言有 if函式,for迴圈等等的邏輯運算!
主要架設網頁骨架
>網頁骨架會像一篇文章，每一段要安排什麼功能文字
架構出完整流暢好理解的網站


軟體(前端)工程師會先學習
HTML > CSS > JS 的順序

>形容程式工具
HTML 骨骼(網頁骨架)
CSS 皮膚(美化網頁)
Javascrip 神經(網頁互動)
***

### 專案開發-資料夾結構示意圖:

- Project料夾下
- HTML01
- HTML資料夾
- CSS資料夾
- JS資料夾
- IMG資料夾
- HTML02
- Style
- Js

***
### Emmet 插鍵
Emmet 是文本編輯器的外掛程式
可以協助編寫 Html 或 CSS 語法的有力工具
它讓開發者減少重複性工作
並確保他們可以專注於真正的問題

***

### 無障礙網站
無障礙網站是提高使用者閱讀和操作的舒適度
而提出的一個準則，而他是需要申請才能獲得的稱號

**無障礙網站審查內容**
感知
操作
理解
文件性

無障礙網站等級越高
能提高SEO排名(SEO:搜尋引擎最佳化)

等級分成:

| A等級準則(低) | AA等級準則(中) | AAA等級準則(高) |
|:----------------- | -------------------- | ----------- |
| 指引2.1鍵盤可操作 | 指引1.3可調適 | 指引1.3可調適 |
| 2.1.4快捷鍵 | 1.3.4螢幕方向 | 1.3.6識別目的 |
| 指引2.5輸入方式 | 1.3.5識別輸入目的 | 指引2.2充足時間 |
| 2.5.1指標手勢 | 指引1.4可辨識 | 2.2.6逾時 |
| 2.5.2指標取消 | 1.4.10流動排版 | 指引2.3預防痙鑾和身體不適 |
| 2.5.3標籤名稱 | 1.4.11非文字對比 | 2.3.3來自互動的動畫 |
| 2.5.4動作啟動 | 1.4.12文字間距 | 指引2.5輸入方式 |
| | 1.4.13浮動或焦點內容 | 2.5.5目標尺寸 |
| | 指引4.1相容性 | 2.5.6並行輸入機制 |
| | 4.1.3狀態訊息 | |

***
### 圖檔格式
jpg 檔小 品質差 支援較高
png24 256_R*256_G*256_B 透明
apng png+gif 有png色的動畫圖 透明
gif 256色 檔小 動畫圖
svg 向量 文字檔 檔比圖小 動畫圖 透明
webp 檔小 顏色穩定 動畫圖 透明
AVIF 檔小 顏色穩定 透明

***

### 快捷鍵 Windows
註解
`Ctrl + / `

快速移動
`Fn + 方向鍵 `

替換
`Alt + 上下方向鍵`

複製到下一行
`Alt + shift + 上下方向鍵`

***
HTML語標

<!-- HTML 寫法 -->
  <!-- ---------------- -->
  <!-- 單行寫法 -->
  <!-- 多行寫法 -->
  <!-- 註解寫法 -->

  
  <!-- HTML 常用標籤 -->
  <!-- ---------------- -->
  <!-- 標題標籤 (h1~h6) -->
  <!-- 段落標籤 (p) -->
  <!-- 換行標籤 (br) -->
  <!-- 強調標籤 (strong / em / b / i) -->
  <!-- 引用區塊（blockquote）/ 內引文（q） -->
  <!-- 影片(video) / 音樂 (audio) -->
  <!-- Source 與 Video -->
  <!-- 圖片標籤 (img) -->
  <!-- picture 與 img -->


  <!-- Emmet 快速輸入語法介紹 part 1 -->
  <!-- ---------------- -->
  <!-- 產有內文的段落 -->
  <!-- 產一個帶有 alt 屬性的 img 標籤 -->
  <!-- 跟大標題同一層段落 -->
  <!-- 一次產出三個段落 -->


  <!-- 有序清單 (ol)、無序清單 (ul)、描述清單(dl / dt / dd) -->
  <!-- ---------------- -->
  <!-- 有序清單 ol、li -->
  <!-- 無序清單 ul、li-->
  <!-- 描述清單 dl、dt、dd -->


  <!-- Emmet 快速輸入語法介紹 part 2 -->
  <!-- ---------------- -->
  <!-- ul 下有一個 li -->
  <!-- ul 下有三個 li -->
  <!-- 產出兩個同層的 ul -->
  <!-- 產出不同內容的兩個同層 ul 分組寫法 -->
  <!-- 產出不同內容的兩個同層 ul 回上層寫法 -->

  <!-- 表格標籤 (table / thead / tbody / tfoot / tr / th / td) -->
  <!-- ---------------- -->


  <!-- 超連結(a) -->
  <!-- ---------------- -->
  <!-- 連到同一頁上的某個 id 錨點 -->
  <!-- 連到相對路徑上的其他 html 頁面 -->
  <!-- 連到相對路徑上的其他 html 頁面的某個 id 錨點 -->
  <!-- 連結到網址 -->
  <!-- 點擊後撥電話 -->
  <!-- 點擊後開啟電子郵件並帶入信箱 -->
  <!-- 圖片連結 -->


  <!-- HTML 區塊 -->
  <!-- ---------------- -->
  <!-- 頁首(header) -->
  <!-- 頁尾(footer) -->
  <!-- 導覽列(nav) -->
  <!-- 主要內容(main) -->
  <!-- 側邊欄區塊(aside) -->
  <!-- 文章區塊(article) -->
  <!-- 章節區塊(section) -->
  <!-- 內容相關的獨立區塊（figure / figcaption） -->
  <!-- figure -->
  <!-- figure 與 figcaption -->
  <!-- 內容分區區塊(div / span) -->

  <!-- HTML 表單 -->
  <!-- ---------------- -->
  <!-- 表單元素(form) -->
    <!-- 表單輸入元素(input) -->
    <!-- 一般文字 -->
    <!-- 密碼 -->
    <!-- 數字 -->
    <!-- 電話號碼 -->
    <!-- mail -->
    <!-- url -->
    <!-- 日期 -->
    <!-- 時間 -->
    <!-- 顏色 -->
    <!-- 範圍 -->
    <!-- 上傳文件 -->
    <!-- 多選 -->
    <!-- 單選 -->
    <!-- 搜尋 -->
    <!-- 送出按鈕 -->
    <!-- 清空按鈕 -->
    <!-- 普通按鈕 -->

    <!-- 下拉選單 -->

    <!-- label 用法 -->
    <!-- label for 用法 -->
    
    <!-- Emmet 快速輸入語法介紹 part 3 -->
    <!-- ---------------- -->
    <!-- 創造一個 id 為 idName 且 class 為 className 的 p 標籤 -->
    <!-- 產生 4 個 class 為 className1 到 className4 的 p 標籤 -->

***

HTML (6/25填寫)

     <!-- HTML 寫法 -->
  <!-- ---------------- -->
  <!-- 單行寫法 -->
   <h1>這是標題</h1>
   <img src="" alt="">
  <!-- 多行寫法 -->
   <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
   </ul>
  <!-- 註解寫法 -->
   <!-- 我是註解 -->

  
  <!-- HTML 常用標籤 -->
  <!-- ---------------- -->
  <!-- 標題標籤 (h1~h6) -->
   <h1 id="topic">標題標籤</h1>
   <h2>H2</h2>
   <h3>H3</h3>
   <h4>H4</h4>
   <h5>H5</h5>

  <!-- 段落標籤 (p) -->
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, illo!</p>

  <!-- 換行標籤 (br) -->
   <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe nemo similique molestias officia velit eius repudiandae quos tenetur temporibus consequuntur explicabo omnis beatae optio, commodi, suscipit nulla est sequi. Culpa maxime ducimus quis corporis excepturi expedita itaque magni cumque quidem accusamus in beatae eligendi blanditiis deleniti reiciendis neque, suscipit commodi impedit laboriosam. <br>Nihil nam cumque, omnis a, nesciunt saepe doloremque, culpa nobis sequi dolorum quisquam totam dolor iusto et similique iure earum voluptatum harum nulla. Rem reiciendis consequuntur non amet natus temporibus perferendis similique, maiores saepe, illo eaque ipsum aspernatur nostrum eum, vero iure nesciunt commodi harum optio nobis! Ducimus.</br></p>

   <!-- 強調標籤 (strong / em / b / i) -->
   <p><strong>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</strong> Optio exercitationem ratione architecto voluptatem molestias cum expedita, <em>odio quae eaque itaque nesciunt voluptate sequi.</em> <b>Eius consequuntur quisquam</b>, <i>perferendis natus tempore illo!</i></p>

   <!-- 引用區塊（blockquote）/ 內引文（q） -->
   <blockquote cite="#">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem dolore dolorum, amet commodi illo ratione tempore totam harum soluta quos dolor a ipsa, delectus mollitia magnam fugiat illum cum quas.<q cite="#">引文</q></blockquote>
   
  <!-- 影片(video) / 音樂 (audio) -->
   <video  controls width="250" src="" muted autoplay>不支援影片文字</video>
  <!-- Source 與 Video -->
   <video controls width="250">
       <source src="" type="video/webm">
       <source src="" type="video/mp4">
       不支援影片文字
   </video>
  <!-- 圖片標籤 (img) -->
   <!-- 絕對路徑 -->
   <img width="100" src="https://i.pinimg.com/originals/69/4c/87/694c87aa15932d652967bf0fbe5073c7.jpg" alt="跟蹤女">
   <!-- 相對路徑 -->
    <img width="100" src="貓.jpg" alt="貓">
    <img width="100" src="/img/spy.jpg" alt=spy>
    <img width="100" src="../6.24demo/img/阿娜.jpg" alt="阿娜">
  <!-- picture 與 img -->
<picture>
    <source srcset="/img/小女孩.jpg" media="(max-width: 500px)">
    <source srcset="/img/幽靈.jpg" media="(max-width: 800px)">
    <img width="300" src="/img/spy.jpg" alt="spy">
</picture>

<!-- Emmet 快速輸入語法介紹 part 1 -->
<!-- ---------------- -->
  <!-- 產有內文的段落 -->
   <!-- p{content} -->
    <p>content</p>
  <!-- 產一個帶有 alt 屬性的 img 標籤 -->
   <!-- img[alt="替代文字"] -->
   <img src="#" alt="替代文字">
  <!-- 跟大標題同一層段落 -->
   <!-- h1{標題}+p{內文} -->
   <h1>標題</h1>
   <p>內文</p>
  <!-- 一次產出三個段落 -->
  <!-- p{三段內文一樣}*3 -->
  <p>三段內文一樣</p>
  <p>三段內文一樣</p>
  <p>三段內文一樣</p>
  <!-- 有序清單 (ol)、無序清單 (ul)、描述清單(dl / dt / dd) -->
  <!-- ---------------- -->
  <!-- 有序清單 ol、li -->
   <ol>
    <li>item</li>
    <li>item</li>
    <li>item</li>
   </ol>
  <!-- 無序清單 ul、li-->
   <ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
   </ul>
  <!-- 描述清單 dl、dt、dd -->
   <dl>
    <dt>狗</dt>
    <dd>動物</dd>
    <dt>貓</dt>
    <dd>動物</dd>
   </dl>


  <!-- Emmet 快速輸入語法介紹 part 2 -->
  <!-- ---------------- -->
  <!-- ul 下有一個 li -->
   <!-- ul>li{item} -->
    <ul>
      <li>item</li>
    </ul>
  <!-- ul 下有三個 li -->
   <!-- ul>li*3 -->
   <ul>
    <li></li>
    <li></li>
    <li></li>
   </ul>
  <!-- 產出兩個同層的 ul -->
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <!-- 產出不同內容的兩個同層 ul 分組寫法 -->
   <!-- (ul>li{111}*3)+(ul>li{222}*3) -->
   <ul>
    <li>111</li>
    <li>111</li>
    <li>111</li>
   </ul>
   <ul>
    <li>222</li>
    <li>222</li>
    <li>222</li>
   </ul>
  <!-- 產出不同內容的兩個同層 ul 回上層寫法 -->
  <ul>
    <li>111</li>
    <li>111</li>
    <li>111</li>
  </ul>
  <ul>
    <li>222</li>
    <li>222</li>
    <li>222</li>
  </ul>

  <!-- 表格標籤 (table / thead / tbody / tfoot / tr / th / td) -->
  <!-- ---------------- -->
  <table border="1" id="tableVeiw">
    <caption>表格標題</caption>
    <thead>
      <tr>
        <th scope="col">姓名</th>
        <th scope="col">國文</th>
        <th scope="col">英文</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Cat</th>
        <td colspan="2">222</td>
      </tr>
      <tr>
        <th scope="row">Dog</th>
        <td>222</td>
        <td>333</td>
      </tr>
      <tr>
        <th scope="row">Bee</th>
        <td rowspan="2">222</td>
        <td>333</td>
      </tr>
      <tr>
        <th scope="row">Sun</th>
        <td>333</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th colspan="3">subtotle</td>
      </tr>
    </tfoot>
    
  </table>

  <!-- 超連結(a) -->
  <!-- ---------------- -->
  <!-- 連到同一頁上的某個 id 錨點 -->
   <a href="#topic">連到標題標籤</a>
  <!-- 連到相對路徑上的其他 html 頁面 -->
  <a href="linkTest.html">測試連結</a>
  <!-- 連到相對路徑上的其他 html 頁面的某個 id 錨點 -->
  <a href="linkTest.html#middle">測試連結中段</a>
  <!-- 連結到網址 -->
   <a href="https://www.google.com">連到Google</a>
  <!-- 點擊後撥電話 -->
   <a href="tel:[phone]">點擊聯絡我們</a>
  <!-- 點擊後開啟電子郵件並帶入信箱 -->
   <a href="mailto:[e-mail]">點擊寄信</a>
  <!-- 圖片連結 -->
   <a href="linkTest.html">
    <img width="100" src="貓.jpg" alt="點擊測試連結">
   </a>
   <a href="https://www.google.com" target="_blank">開新分頁Google</a>