---
# System prepended metadata

title: 20220114 html基礎概念
tags: [前端課程筆記]

---

# 20220114 html基礎概念

### <!DOCTYPE html> 
跟瀏覽器說我要以這個語言說話
![](https://i.imgur.com/IzADCJQ.png)

### 基本架構
![](https://i.imgur.com/DnNwM8g.png)

### head
裡面通常有這幾個東西：
#### Title 網頁的標題
![](https://i.imgur.com/Yx4XWtO.png)

#### meta 元資料 
![](https://i.imgur.com/E9EMb4R.png)

#### style CSS樣式
![](https://i.imgur.com/868vcEy.png)

#### link 載入或定義資源 
![](https://i.imgur.com/YYMf6x9.png)

#### script JS語法
![](https://i.imgur.com/hmfox7C.png)

### body
#### paragraph 一段簡單的字
1.會換行
2.會有margin
![](https://i.imgur.com/QfZqrLp.png)

#### hr 水平線(empty tag)
![](https://i.imgur.com/LKVlGRn.png)

#### paragraph
不管空幾行、斷幾行，都會被解讀為一個空白鍵的間隔
![](https://i.imgur.com/OKtLVKw.png)

#### br 斷行(empty tag)
![](https://i.imgur.com/R9SJku0.png)

#### pre
![](https://i.imgur.com/Ibl9UQl.png)

---
HW：
1.[Printerest](https://www.pinterest.com/)
找自己喜歡的樣版，先想一個自己的網頁的樣式，當未來的作品集
2.課程大綱
* 基本介紹：CSSㆍHTML 、 JavaScript
* HTML基本介紹：架構、TAGS、HEAD、BODY
* HTML 語法：實戰演練
* CSS架構介紹
* CSS語法：排版、區塊、內容、屬性介紹與撰寫
* RWD：進階用法:SCSS與Mixin
* Bootstrap
* Angular
* 進階內容：rxjs、自訂pipe與directive
