# 20230607 html草稿
##### tags:`HTML` `html草稿`
## 補充資料

金魚都能懂的 CSS 選取器
https://ithelp.ithome.com.tw/users/20112550/ironman/2799

金魚都能懂的CSS必學屬性
https://ithelp.ithome.com.tw/users/20112550/ironman/3803?sc=iThelpR

金魚都懂得網頁教學(影片集)
https://www.youtube.com/playlist?list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre

mdn https://developer.mozilla.org/zh-CN/

---

## 套件下載
* Chinese Lorem
* Auto Rename Tag
* IntelliSense for CSS class names in HTML
* live server
* Path Intellisense
* Material Icon Theme(選用)

---

## AMOS~10堂課 學習大綱
1. HTML -基礎、概念、原理
1. HTML -SEO(搜尋引擎最佳化)
1. CSS -作用、撰寫位置、撰寫方式(語法)
1. CSS -優先權、選取器、CSS reset
1. CSS -定位、盒模型、inline & block
1. CSS -flex
1. CSS -grid
1. RWD -手刻
1. RWD -手刻
1. RWD -bootstrap

學習重點：切版: 模組化、class命名的觀念、原始碼觀念

---

<div></div>沒有含意，不是真的群組

SEO優化
無障礙需求
無障礙等級 A+,AA，AAA
語音
色盲 -對比等級

使用語義先撇除外觀

## 清單

Q&A

<dl>
    <dt>Q</dt>
    <dd>A</dd>
</dl>

# vscode組合鍵
打開檔案
1. ctrl + k
2. M

產生英文假文
p>lorem

產生中文假文 (需要下載套件"Chinese Lorem")
ctlorem

ctlorem50產生中文假文五十個字

p+p會出現兩個p

<p></p>
<p></p>

div>div會出現div裡面包著div

<div>
    <div></div>
</div>

快捷鍵相關文章
https://ithelp.ithome.com.tw/articles/10237385

ip位置
127.0.0.1 指自己的電腦 = localhost

相對位置從自己的位置找起

內容流vs資料流

## HTML 標籤

<標籤 屬性="值">呈現資料</結束標籤>

<h1><h2><h3><h4><h5><h6> 大至小標題

<P> 段落
<br> 強迫換行

<img src="圖片途徑" alt="圖片(掛掉)代替文字">圖片

<div> 區塊標籤

<ul> 無序清單
<ol> 有序清單

<dl> 清單
<dt> 項目 Q
<dd> 描述 A

<a href="網址">呈現資料 超連結

圖片與描述
<figure>
    <img src="圖片途徑"
         alt="圖片(掛掉)代替文字">
    <figcaption>圖解說明</figcaption>
</figure>

裝置圖片版本控制
<picture>
    <source srcset="圖片途徑1"
            media="(min-width:1200px)"> 電腦版本
    <source srcset="圖片途徑2"
            media="(min-width:720px)"> 平板版本
    <img src="圖片途徑3" alt=""> 手機版本
</picture>

表格
<table>
    <thead> 表格頭
        <tr> 表格列
            <th></th> 欄位標題
            <td></td> 表格行
        </tr>
    </thead>
    <tbody colspan="合併行數"></tbody> 表格體
    <tfoot rowspan="合併列數"></tfoot> 表格尾
</table>