# 20230204 Html

### html tag
#### b、strong
>  ->
> b tag像是我向瀏覽器宣告我文字要加粗喔
>
>  ->
> storng tag 則有我這些文字很重要的意思

#### i、em
>  ->
> i tag像是我向瀏覽器宣告我文字要斜斜的喔
>
>  ->
> storng tag 則有我這些文字要強調喔的意思

#### small
>  ->
>
#### mark
>  ->

#### del
>  ->

#### ins
>  ->

#### sub、sup
>  ->
>  ->

### Hyperlink
**`<a></a>`**

| Attribute | value | ex |說明|
| -------- | -------- | -------- |-------- |
|href|url||連結路徑
||bookmark||跳到網頁中相應標籤處
||url||連結路徑
||mailto||開啟郵件軟體，並帶入收件者郵件地址
|target|_self||是預設值，同頁導轉
||_blank||以新分頁方式開啟
||_parent||父層導轉
||_top||最上層導轉(=整頁導轉)

### pseudo_class
:link 尚未被訪問過 (blue)
:visited 已被訪問過 (purple)
:hover 滑鼠滑過
:focus 使用鍵盤的tab，在網站上瀏覽的時候
:active 滑鼠點擊到放開前 (red)

**`<iframe></iframe>`**

| value | ex |說明|
| -------- | -------- |-------- |
| src |  |在網站裡面鑲入別的網站的資源(影片、地圖...)|

---
**註解**
可用在
1.共同協作
2.提醒自己
3.debug

單行
<!-->我是註解啊<-->

多行
<!-->
我
是
註
解
啊
<-->

也可寫在文字內
<p>我是郭<!-->小<-->嘉</p>

**`<img>`** -> 跟瀏覽器說，我宣告一個img的洞，並且設置src在這邊去載入
| Attribute |value|ex| 備註 |
| -------- | -------- |--------|--------|
| src |url|| 路徑|
| width/height |pixel||可以選一個宣告即可/或兩個都宣告(不能不宣告，會影響瀏覽器判斷，有時候會一閃一閃)|
| alt |文字|| 找不到這張圖的時候會顯示的文字|
| usemap| #map名||使用map使圖片特定內容可點擊 |

**Imagemap**
<img>的usemap屬性搭配<map>、<area>使用，usemap宣告的map名必須與map中的name屬性值相同
使用<area>宣告圖片內的可點擊區域

| Attribute | value | 說明 |
| -------- | -------- | -------- |
|shape、coords| shape=”default"無coords |範圍為整張圖片|
|| shape=”rect” coords=”(左上角X軸,左上角Y軸,右下角X軸,右下角Y軸)” |範圍為長方形|
|| shape=”circle” coords=”(圓心X軸,圓心Y軸,半徑)”|範圍為圓形|
|| shape=”poly” coords=”(A1x,A1y,A2x,A2y,A3x,A3y,A4x,A4y…..)”|需宣告所有要繞著物品的座標(兩個一對)|
|| shape=”rect”coords=”(左上角X軸,左上角Y軸,右下角X軸,右下角Y軸)” |範圍為長方形|
| href | url、圖片位置 | 連結至url |
| alt | 文字 | 找不到圖片時顯示之文字 |

ex:

**`<picture></picture>`**
比較彈性的圖片
使用<source>定義顯示圖片的條件，此element具順序性

| Attribute | value | 常見值 |
| -------- | -------- | -------- |
|media|設備|運算符|all(default)/screen …|
||條件|and/not/,(or)||srcset|min-width/min-height/device-width/device-height …
||url、圖片位置||

media可參考[W3C](https://www.w3schools.com/html/default.asp)
最後必須使用<img>宣告default值
[Can I Use]( https://caniuse.com/)
Can I See

<picture>
<source media="(min-width:800px)" srcset="big.jpg"> ->裝置符合800px的
<source media="(min-width:465px)" srcset="medium.jpg"> ->裝置介於465px~800px的
<img src="small.jpg"> ->都不是就跑這行
</picture>

具順序問題
<picture>
<img src="small.jpg"> ->這樣永遠都是跑這一行
<source media="(min-width:800px)" srcset="big.jpg">
<source media="(min-width:465px)" srcset="medium.jpg">
</picture>

**`<div></div> & <span></span>`**

<div>
1.當容器使用，Group著elements
2.易於修個樣式
3.Block level(自動產生外匡，換行)

<span>
1.當容器使用，Group著elements
2.易於修個樣式
3.inline level(不換行)

---
2023.02.04 課後作業
1. 安裝軟體
Visual Studio Code
Git
2. VS Code 好用套件
Auto Close Tag (自動關閉標籤)
HTML Snippets (html提示)
HTML Preview (html即時預覽)
Power mode 😆 (放煙火)
3. 新增一個html檔案
4. 設計一個favicon，顯示在header上 

5. 網頁中顯示一個google圖片，點擊可以在新頁籤開啟google首頁
6. 網頁中顯示Youtube影片
7. 找一個喜歡的圖片/海報，加入Image map，並至少要包含圓形、方形、多邊形的area
(找座標: https://www.mobilefish.com/services/record_mouse_coordinates/record_mouse_coordinates.php)
其中一個area要可以點擊後開啟信件軟體，並且收件者自動填入妳本人
8. 根據裝置的不同高度，顯示不同的圖片(至少要有三張不同的圖)