---
# System prepended metadata

title: 使用 HTML、CSS 開發一個網站-Udemy
tags: [HTML&CSS]

---

---
tags: HTML&CSS
---
# 使用 HTML、CSS 開發一個網站-Udemy
## 六角學院前端

### 編輯器和IDE到底有什麼區別呢？



### [Udemy-使用 HTML、CSS 開發一個網站](https://www.udemy.com/share/102cN22@FG1KV1NaSVQJdkdEEktNVD0=/)

### F2E-wk2-HTML5CSS3

https://www.dropbox.com/s/335sd9l8tdndcmn/F2E-wk2-HTML5CSS3.pdf?dl=0F2E-wk2-HTML5CSS3

![](https://i.imgur.com/EOvbNUH.png)


### 安裝 VS Code 套件 - 讓介面變成中文化

![](https://i.imgur.com/iH3s6jt.png)


### CodePen 教學 -將你的程式碼分享給別人

![](https://i.imgur.com/ZuV7y2s.png)


### Emmet 載入環境語法

Emmet : 快速撰寫輔助工具，能加快並縮短開發者在編寫HTML及CSS的時間

>:下層
+:同層
( ):分組
*:重複

Emmet Documentation : [Emmet Documentation](https://docs.emmet.io/)

### 插入圖片，了解圖片路徑規則

![](https://i.imgur.com/GwelUjV.png)

* 相對路徑
* 絕對路徑


????


### 語意化命名

![](https://i.imgur.com/84klP4Q.png)


### 點圖片開啟超連結

![](https://i.imgur.com/8AR5O91.png)

### img的屬性 titlte與alt差別


![](https://i.imgur.com/ClMG5nC.png)


### 插入 CSS 檔案

![](https://i.imgur.com/j57A9xD.png)


