# HTML CSS Javascript網頁三兄弟 ![](https://i.imgur.com/9ZHYgAl.png) - [圖片來源](https://www.facebook.com/101448115094164/posts/website-structure-html-css-javascript/122512212987754/) ## HTML === - HyperText Markup Language的縮寫 - 中文：超文本標記語言 - 標記式語言是什麼？ -> 由很多個<標籤>所組成， 用大小於`< >`包住你想要的HTML元素，結尾再用大小於包住斜線/+元素 ``` <xxx></xxx> ``` - 構成網頁的組織架構並呈現網頁的內容（就像最上面的圖的骨頭一樣） - 網頁內容包括文字、圖片、段落、表格、清單...很多標籤可以使用 - 範例寫法： ```.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>first</title> </head> <body> <h1>fiest</h1> <p>this is my first html</p> </body> </html> ``` 瀏覽器呈現結果： ![](https://i.imgur.com/BsyRHN0.png) ### 寫法 1. 一定要有`<!DOCTYPE html>`這行，因為這是告訴瀏覽器這是一個html檔 2. `<html></html>`裡面包覆著`<head>`跟`<body>`這個標籤用來包覆整個html 的程式碼 3. 在<head> 與 <body> 標籤裡面的內容詳述，請詳 - [HTML tag標籤介紹](/J-Jln49eRZKIyfahYW2IPw) ## CSS - Cascading Style Sheets的縮寫 - 中文：層疊樣式表 - 決定網頁的**外觀**長的怎樣。 可以決定文字表格顏色、字體、編筐設定排版...等(就像最上面的圖他代表人的皮膚及外在的裝飾衣物) - ==不可單獨使用==需搭配html一同使用 - 可以寫在html裡，也可以以link做連結，連到檔案外以.css做結尾的檔案 - 內容：CSS由多組「規則」組成。每個規則由「選擇器」（selector）、 「屬性」（property）和「值」（value）組成： - 選擇器（Selector）：多個選擇器可以半形逗號（,）隔開。 - 屬性（property）：CSS1、CSS2、CSS3規定了許多的屬性，目的在控制選擇器的樣式。 - 值（value）：指屬性接受的設定值，多個關鍵字時大都以空格隔開。 屬性和值之間用半形冒號 **:** 隔開，屬性和值合稱為「特性」。 多個特性間用 **;** 隔開，最后用 **{ }** 括起來。 Javascipt === - 簡稱JS，跟Java是不同的語言不要搞混 - 是一種腳本語言，協助我們建立動態網頁，使我們能動態的更新內容、控制多媒體、動畫……等等等。 - 可以寫在html 裡，也可以另外用一個css以link做連結 ###### tags: `html`、`css`、`javascript`