# 網頁設計基礎概念
•基本的網頁是由HTML、CSS與JavaScript所組成

==HTML負責建構網頁的內容及基本架構==

==CSS專門負責美化網頁的任務==

==JavaScript 負責控制網頁動態內容及使用者的操作行為==

::: danger

## html

HTML (HyperText Markup Language) 超文本標記語言：是一種用於建立網頁的標準標記語言。HTML是一種基礎技術，常與CSS、JavaScript一起被眾多網站用於設計賞心悅目的網頁。

HTML5是HTML最新的修訂版本，由全球資訊網協會於2014年10月完成標準制定。

:::warning
### html常用標籤

段落：p

標題：h1、h2、h3、h4、h5、h6

強調：strong、b、i

表格：table、tr、td

影像：img < img src="...">

超連結：a 連結目標：_blank,_top...

檔案內連結、電子郵件連結

特殊文字：© ©　空格 　強制分行 < br / >

:::info

## css

CSS(Cascading Style Sheets)的中文稱為「串接樣式表」，
CSS的特色:

(1)能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化。

(2)能只修正一個 CSS 文件，便可同時更新眾多的網頁版面外觀及格式。

(3)可以使 html 的文件內碼更精簡，縮小檔案下載的速度。

(4)適用於各種作業平台。

### 常見CSS選取器種類簡介

標籤：Type selectors（型態選擇器，Dreamweaver稱為標籤選擇器，因為套用於HTML標籤。 設定於HTML的標籤上，網頁上所有的標籤都會套用。

ID：ID selectors（ID選擇器）。 「#」開頭，名稱可自訂，一頁網頁同一個ID屬性值只能套用一個地方，屬於獨一無二的屬性值。

### CSS單位

px 大多數網站在文字的單位都是使用px，尤其在台灣多數使用者都是用windows系統，不管是什麼瀏覽器，在windows下都是以單數px是較為清楚的，如13xp．15px等，而px在建立網站時也是較為方便及準確的。

em 1em 等於元素單位的字體尺寸。2em等於當前字體尺寸的兩倍。如某元素以12px顯示，那麼2em 是24px。在CSS 中，它可以自動適應用戶所使用的字體。

:::success

## javascript

JavaScript 屬於直譯語言 (interpreted language)，不需事先編譯 (compile)，直接在瀏覽器 (browser) 上執行 ， 最常見於 web 客戶端瀏覽器

### JS基礎語法認識

JS 結尾符號 - 分號 ;

JavaScript 的每一個語句以分號 ; 來做結束

有區分大小寫
不像 HTML，JavaScript 語句是有區分大小寫的，無論是對於變數、函數或物件名稱，如 alert() 寫成 Alert() 是會產生錯誤的

空白

空白 (space), tab 或換行符號 (newline characters) 在 JavaScript 都稱為空白 (whitespace)，JavaScript 程式碼在解析時，會忽略所有的空白

註解 (Comment)

JavaScript 的註解有分單行註解 (雙斜線 //) 和多行註解 (/* 用 "/*" 和 "*/" 符號，被包住在中間的所有字都是註解 */)。

### 資料型態 (Data Types)
資料型態是一個變數裡面儲存的是什麼類型的資料 (value)

JavaScript ，可分為兩大類資料型態：

一種是基本資料型態 ：

布林值 (Boolean): 只包含兩種值 true(是) / false(否)

null: null 是一個特殊值 ，表示這變數裡面沒有東西

undefined: undefined 也是一個特殊值 (keyword)，表示值還沒有定義或還未指定

數值 (Number): 數值類型的值，像是 123 / 3.14159 / 0 包含了整數與浮點數

字串 (String): 像是 'hello world' / 由字母、數字、文字、符號等組成，指定時 前後要加上 " 或 ' 符號

Symbol (符號)，用來表示獨一無二 (unique) 的值。
另一種是複合資料型態 ：

陣列 (Array): 陣列用來儲存多個資料，陣列中的資料數量，就是這個陣列的長度 (length)

物件 (Object): 基本上，基本資料型態以外的都是物件型態

#### JavaScript 是動態型別的語言 (Dynamically Typed Language)