# 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