一、網頁設計的三大技術

HTML – 網頁的骨架
CSS – 網頁的美觀及排版
JS – 網頁的功能

二、HTML基本架構

用一個一個標籤來做表示: 開始標籤< >、關閉標籤< / >，兩兩成對，且標籤裡面的內容須做”縮排”的動作。

1.< !DOCTYPE html >

告訴瀏覽器這個檔案的類型。

2.< head >

表示網頁的資訊。

3.< title >

表示網頁的標題。

4.< body >

表示網頁主要看到的內容。

5.< !-- -- >

為HTML註解，是寫給人類看的筆記，因此當程式碼在執行時會自動跳過此行不去執行，註解內容亦不會對程式結果造成影響。

三、基本標籤

1.標題< h >

< h1 >到< h6 >代表標題，數字越大字體越小，依序從最重要到最不重要。

這是< h1 >的大小

這是< h2 >的大小

這是< h3 >的大小

這是< h4 >的大小

這是< h5 >的大小

這是< h6 >的大小

2.內文< p >

表達一般的內容或段落

我是標題一

我是內容一

我是標題二

我是內容二

3.粗體字< b >

為粗體字，將想變成粗體的文字放在標籤中即可。

我是正常字

我是粗體字

4.斜體字< i >

< i >為斜體字，將想變成斜體的文字放在標籤中即可。

我是正常字

我是斜體字

5.換行< br >

< br >、< /br >表示換行，因中間不會插入文字，所以可以直接以< br/ >表示。

我們中間沒換行

我們中間有換行

6.水平線< hr >

< hr >、< /hr >表示水平線，因中間不會插入文字，因此可以直接以< hr/ >表示。

四、連結

加入< a >可放入連結，且在開始標籤後面加入屬性href=" "
並在雙引號中加入想要連結到的網站網址
將想要顯示在畫面中的連結文字寫在開始關閉標籤中間即可完成此連結

HTML教學影片

五、圖片

插入圖片的標籤< img >因中間不會插入文字，所以可以直接以< img/ >表示。
在img後面加入圖片屬性src=" "，並在引號中加入外部圖片連結或內部圖片檔名即可。

如果想改變照片的大小，可加入width跟height屬性

width=" "定義圖片寬度
height=" "定義圖片高度
若想等比例縮放，只需定義width或height其中一項即可

六、嵌入影片

在youtube中開啟選擇的影片，並按「分享」，之後點選「嵌入」
複製該網址即可

七、列表

加入< ul >標籤即可產生列表
加入< li >標籤即可產生列表裡的內容

HTML
CSS
JS

若將< ul >改成< ol >，即可將「●」變成「數字」

HTML
CSS
JS

若想將「數字」改為「字母」，可在< ol >標籤後加入type=" "屬性
引號內若輸入大寫"A"，則會是大寫字母列點

HTML
CSS
JS

引號內若輸入小寫"a"，則會是小寫字母列點

HTML
CSS
JS

引號內若輸入小寫"i"，則會是小寫羅馬數字母列點

HTML
CSS
JS

引號內若輸入大寫"I"，則會是大寫羅馬數字母列點

HTML
CSS
JS

八、表格

加入< table >標籤即可產生表格
< tr >代表一列
一列裡面的內容用< td >表示

年齡	身高	體重
18y	160cm	50kg
20y	180cm	80kg

若想改變表格內間距，可用width=" "或height=" "屬性調整

年齡	身高	體重
18y	160cm	50kg
20y	180cm	80kg

九、容器< div >和< span >

使加入CSS美化畫面時更加方便
< div >和< span >的差異

< span >:寬度是多少，佔的空間就是多少

< div >:不管寬度多少，佔的空間就是一整行

十、輸入欄位< input >和< textarea >

輸入< input >可在畫面中增加輸入欄位
在< input >後面增加屬性type=" "來表達輸入內容的類型
引號內輸入"text"代表輸入純文字
不須關閉標籤，以< input/ >表示

將屬性類型改為"password"，可隱藏輸入的內容

在type=" "屬性後面增加屬性placeholder=" "來表達輸入欄位的提醒

將type=" "屬性類型改為"date"，可產生日期欄位

將type=" "屬性類型改為"range"，可產生拖拉軸

將type=" "屬性類型改為"file"，可產生檔案選擇欄位

將type=" "屬性類型改為"checkbox"，可產生勾選欄位

輸入< textarea >可在畫面中增加文章欄位

在< textarea >開啟關閉標籤中輸入文字，將會成為文章欄位預設文字

十一、meta標籤

告訴這個搜尋引擎有關這個網頁的資訊

description: 網頁的詳細資訊
author: 網頁的作者
keywords: 網頁的關鍵字