---
# System prepended metadata

title: 20230204 Html
tags: [前端課程筆記]

---

# 20230204 Html

### html tag
#### b、strong
> ![](https://i.imgur.com/LiCtynk.png) ->![](https://i.imgur.com/dmJOOKG.png) 
> b tag像是我向瀏覽器宣告我文字要加粗喔
> 
> ![](https://i.imgur.com/4jnXjMN.png) ->![](https://i.imgur.com/jCmwMUS.png) 
> storng tag 則有我這些文字很重要的意思

#### i、em
> ![](https://i.imgur.com/rVN3RTI.png)  ->![](https://i.imgur.com/iPnvipy.png)
> i tag像是我向瀏覽器宣告我文字要斜斜的喔
> 
> ![](https://i.imgur.com/V3iYmNl.png) ->![](https://i.imgur.com/b9n3r00.png) 
> storng tag 則有我這些文字要強調喔的意思

#### small
> ![](https://i.imgur.com/cDTBFZg.png) ->![](https://i.imgur.com/0tvpkrO.png)
> 
#### mark
> ![](https://i.imgur.com/BsoDJ8f.png) ->![](https://i.imgur.com/A3Y1Agy.png)

#### del
> ![](https://i.imgur.com/m5J0eEB.png) ->![](https://i.imgur.com/8bEU9Cc.png)

#### ins
> ![](https://i.imgur.com/w2iMHA8.png) ->![](https://i.imgur.com/XzOXVOW.png)

#### sub、sup
> ![](https://i.imgur.com/YI6kcDs.png) ->![](https://i.imgur.com/3mrSGXo.png)
> ![](https://i.imgur.com/pip9LRl.png) ->![](https://i.imgur.com/vI4Vku2.png)

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

| Attribute | value | ex |說明|
| -------- | -------- | -------- |-------- |
|href|url|![](https://i.imgur.com/YC0MBkw.png)|連結路徑
||bookmark|![](https://i.imgur.com/FcYjLLx.png)|跳到網頁中相應標籤處
||url|![](https://i.imgur.com/YC0MBkw.png)|連結路徑
||mailto|![](https://i.imgur.com/yUZ0cGs.png)|開啟郵件軟體，並帶入收件者郵件地址
|target|_self|![](https://i.imgur.com/Qu8a92C.png)|是預設值，同頁導轉
||_blank|![](https://i.imgur.com/GY3xUGf.png)|以新分頁方式開啟
||_parent|![](https://i.imgur.com/5o6GaYQ.png)|父層導轉
||_top|![](https://i.imgur.com/aYuBfnz.png)|最上層導轉(=整頁導轉)

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

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

| value | ex |說明|
| -------- | -------- |-------- |
| src | ![](https://i.imgur.com/sJHKNE4.png) |在網站裡面鑲入別的網站的資源(影片、地圖...)|



---
**註解**
可用在
1.共同協作
2.提醒自己
3.debug
```
單行
<!-->我是註解啊<-->

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

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

**`<img>`** -> 跟瀏覽器說，我宣告一個img的洞，並且設置src在這邊去載入
| Attribute |value|ex| 備註 | 
| -------- | -------- |--------|--------|
| src |url|![](https://i.imgur.com/j15ABJY.png)| 路徑|
| width/height |pixel|![](https://i.imgur.com/8gb572J.png)|可以選一個宣告即可/或兩個都宣告(不能不宣告，會影響瀏覽器判斷，有時候會一閃一閃)| 
| alt |文字|![](https://i.imgur.com/fbAYubM.png)| 找不到這張圖的時候會顯示的文字| 
| usemap| #map名|![](https://i.imgur.com/UpEAqwq.png)|使用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. 根據裝置的不同高度，顯示不同的圖片(至少要有三張不同的圖)