壹、導論

前端網頁設計主要分為 HTML、CSS、Javascript。

關聯

以下是這三者之間的關係：

HTML
- 網頁的主架構，類似於樹木的樹幹。
CSS
- 網頁的外觀設計，類似於樹枝的排列方式、樹枝上的花草。
JavaScript
- 控制各種事件，例如樹枝被折斷時該發生什麼事情、什麼時候該開花結果。

貳、基礎認知

路徑

路徑可以理解為檔案儲存的位置，以下面的🌰栗子說明：

路徑可分為絕對路徑與相對路徑，其中 "../" 代表上一層。

絕對路徑

絕對路徑比較難解釋，也先避免使用。

相對路徑

以index.html來說，如果要指向best_wife.png這張圖片，需要輸入../assets/images/best_wife.png。其中的意義如下：

**"../" **: 回到上一層，即根目錄。

"assets/" : 在根目錄中，進入assets的資料夾。

"images/" : 在assets/中，進入images的資料夾。

"best_wife.png" : 在images中，選取 best_wife.png。

參、淺談語法

HTML

當前現行版本為HTML 5，HTML 5 的撰寫原則為以標籤的意義為主，而不是樣式，樣式的部分交由CSS處理。這個部分先記得即可，稍後會做說明。

典型的HTML文件代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>網頁標題，在上面會顯示的那個</title>
    </head>
    
    <body>
        <!--會顯示的內容-->
    </body>
</html>

讓我們逐行來說明：

第一行的<!DOCTYPE html>表示這是份HTML 5的文件。

從上面的結構中，應該不難發現，幾乎所有的標記，都是由起始標記<tag>與結尾標記</tag>所組成。

有些例外的(例如#4)稱之為無元素標籤，因為這種標籤中間不會包含內容，寫法為<tag />，即在本身後面加上斜線結尾。

標籤的結構

HTML標籤的結構由標籤名稱及屬性構成，具體的內容如下：

<標籤名稱 屬性="屬性值" 屬性></標籤名稱>
<標籤名稱 屬性="屬性值" 屬性 />

基本上所有的標籤名稱及屬性都使用小寫有些屬性沒有屬性值，例如<input>中的 disabled

在繼續之前

先來了解一些基本的東西

多個連續空格只會顯示為一個，且在display: block元素前的空格會被忽略。如果需要連續輸入空格，請使用&ensp;，這個反人類的東西稱為HTML實體參照，可以自己谷歌。

註解

<!--註解內容(就是寫給自己看，不會造成看得到的影響)-->
<!--好的程序猿/攻城屍都會在該註解的地方註解，方便夥伴看懂自己在寫什麼-->

沒什麼意義，單純把字包起來的標籤(後面css會用)

文字文字文字 <span> 被包起來的文字 </span> 文字文字文字

常見的HTML標籤

純容器類

這個部分為基本的容器。

div
- 沒有特別的意義，可用在任何地方。
header
- 通常用在網頁banner之類的地方。
nav
- 用於網頁導覽列。
article
- 用於主要內容區域。

aside section

用於側邊欄，具體的用法如下

<aside id="sidebar">
    <section>小工具</section>
    <section>小工具</section>
    <section>小工具</section>
</aside>

footer
- 常用於網頁底端，寫©copyright那些的。

清單

具體的寫法如下

無排序清單(unordered lists)

<ul>
    <li>內容</li>
    <li>內容</li>
    <li>內容</li>
</ul>

看起來的樣子會是這樣

內容
內容
內容

**排序清單(ordered lists)**

<ol>
    <li>內容</li>
    <li>內容</li>
    <li>內容</li>
</ol>

看起來的樣子會是這樣

內容
內容
內容

要注意的是這裡我們並沒有自己打上1.2.3等數字，而是他自己幫我們加上去的。

清單可以使用巢狀結構，具體的用法如下：

<ul>
    <li>第一層</li>    
    <ul>
        <li>第二層</li>
        <li>第二層</li>
        <li>第二層</li>
    </ul>
    <li>第一層</li>
    <ol>
        <li>第二層</li>
        <li>第二層</li>
        <li>第二層</li>
    </ol>
</ul>

看起來的樣子會是這樣

第一層

第二層
第二層
第二層

第一層

第二層
第二層
第二層

表格

表格是由行與列所組成的，在編寫HTML時先寫橫的，在寫直的。

以下是一個2*3的表格範例:

<table><!--表格所有內容由<table>包含-->
    <tr>
        <td>1-1</td>
        <td>1-2</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
    </tr>
</table>

這是他看起來的樣子： (顏色跟框是檢視器自己加上的，實際上應該沒有。樣式可以通過後續的css實現)

1-1	1-2
2-1	2-2
3-1	3-2

表單

表單分為表單以及標單元素，表單元素可以單獨存在(即不必位於form內)，但若要作為可以送出的表單，則必須位於表單內。

具體的範例如下：

完整表單

<form action="form.php" method="POST">
    文字輸入方塊：<input type="text" placeholder="請拍打餵食" /> <br />
    單選方塊：
    <label>
        <input type="radio" name="my_radio" value="val_1" />選項1
    </label>
    
    <label>
        <input type="radio" name="my_radio" value="val_2" />選項2
    </label>
    
    <label>
        <input type="radio" name="my_radio" value="val_3" />選項3
    </label>
    <br />
    
    多選方塊：
    <label>
        <input type="checkbox" name="my_ckb" value="val_1" />選項1
    </label>
    <label>
        <input type="checkbox" name="my_ckb" value="val_2" />選項2
    </label>
    <label>
        <input type="checkbox" name="my_ckb" value="val_3" />選項3
    </label>    
    <br />   
    
    下拉清單：
    <select name="my_select">
        <option value="val_1">選項1</option>
        <option value="val_2">選項2</option>
        <option value="val_3">選項3</option>
    </select>
    
    選擇顏色：<input name="color" type="color" /> <br/>
    
    <input type="submit" value="送出~" /> <br/>
</form>

實際看起來是這個樣子：

文字輸入方塊：
單選方塊：選項1 選項2 選項3
多選方塊：選項1 選項2 選項3
下拉清單：選項1 選項2 選項3
選擇顏色：

這個部分比較複雜，讓我們逐行的說明：

首先第一行的<form>說明了這是個表單，只有要送出的表單才需要加上。 action為送出的位置(後端比較複雜，先不管她)，method為送出的方法，這部分也比較複雜，先記在心裡就好。

表單元素基本上由<input type="TYPE" name="NAME" value="VALUE" />組成，有幾個要點：

name屬性為送出至伺服器端的索引(index)
radio、checkbox ，name相同會被分在同一個群組。
value若在屬性為text類型的欄位是預設值的意思，可填也可不填。若在radio、checkbox為必填(否則送出去伺服器不知道你到底選了哪個)。
文字輸入框有個屬性為placeholder，意義就跟他的名字一樣，作用是顯示提示文字。
HTML 5後，文字輸入框多了自動驗證功能，例如 type="email"，詳細的內容因為常常在變動，請自己**Google**即可。

## CSS

CSS選擇器

CSS的意義在於為HTML元素加上樣式，因此如何對應到html元素是個重要的議題。接下來介紹一些常用的選擇器。

基礎

CSS格式

一般來說，css的格式是這樣的

選擇器 {
    屬性: 屬性值;
    屬性: 屬性值 屬性值 屬性值 屬性值;
    屬性: 數值 單位;	/*(ex 20em)*/
}

單位

css很多屬性值是帶單位的，以下是些常見的單位：

長度單位

長度單位可分為絕對以及相對。

px
- 像素，絕對單位，大小就是一個點。
pt
- 絕對單位，很少用，別用就好(#。
em、rem
- 這兩個有著類似的性質，都是相對大小，預設大小為16px，相當於一般文字的大小。 em參考父元素的大小，而rem參考最外層(即<html>)的相對大小。舉個例子
```

<html>
	<body>
        <div id="box1">
            <div id="box2">
                文字文字文字文字文字
            </div>
        </div>
    </body>
</html>
```
- 使用em:
```
html {
    font-size: 16px; /*字體大小*/
}
#box1 {
    font-size: 1.1em;
}
#box2 {
    font-size: 1.1em;
}
```
- 使用em時，字體大小會參考父元素(即上一層元素)的字體大小，所以box2的字體大小會是 16px * 1.1 * 1.1 (px) 若使用rem，則會參考最外層的(即<html>)，因此大小為1.1 * 16px。
vw、vh
- 這兩個單位都是相對於當前視窗的寬、長。視窗的寬度為100vw，同理vh。
- 這兩個單位在某些時候特別好用。
%
- 對於父目錄的百分比。

時間單位

s為秒，ms為毫秒(1/1000s)

顏色

顏色的表示方式有rgba()、rgb()、#16進位表示法。

rgba就是rgb多了個透明度(alpha)

基本上想要什麼顏色直接找產生器，或是使用chrome內建的工具即可。

反正理解有單位這個概念即可，實際使用碰到問題在Google即可。

選擇器

Tag Name

對於標籤名稱的選擇器，直接打出來就好了。

例如下面的🌰栗子會對應到所有的<div>元素：

div {
	color: red;
}

ID、Class

一般來說，我們會在html不可重複的區塊使用ID，重複的地方使用class。

每個ID在整份文件中只能出現一次，這也是ID的定義(唯一識別名稱)。

另外，一個元素可以有很多class，以空格隔開(即class="class1 class2")

像是以下這個🌰栗子：

...略

<body>
    <div id="wrapper"><!--在網頁最外層使用div方便後續排版-->
        <header id="page_header">
            header
        </header>
        <article id="content">
            
        </article>
        <aside id="sidebar_right">
            <section class="widget">
                <!--因為可以有很多的小工具，他們的容器外觀應該長的一樣的-->
                小工具區塊~~
            </section>
            <section class="widget">
                小工具區塊~~
            </section>
            <section class="widget">
                小工具區塊~~
            </section>
        </aside>
    </div>
</body>

在css中，使用#ID來指向ID，使用.class_name來指向class。

像是對於上方的html:

#wrapper {
    /*.......*/
}

#content {
    /******/
}

/*****以此類推*****/

.widget {
    /*所有具有 class="widget" 的容器都會被應用*/
}

ID跟class的選擇器是基礎中的基礎，一定要牢記在心。

具有..屬性、屬性值

這個方法常會被使用在表單元素。

以下寫法會對應到所有具有name="rmt"的元素(例如<input name="rmt" type="...">)

[name="rmt"]{
    color: blue;
}

交集

交集直接連著寫即可。

以下寫法會對應到所有<div>並且具有rmt的class

div.rmt {
    color: #0000ff;
}

聯集

聯集以逗號隔開。

以下寫法會對應到所有<div>或具有rmt的class

div, .rmt { /*逗號後面加空白只是慣例，不會影響功能。基本上逗點後面都應該加上空白方便閱讀*/
    color: #0000ff;
}

容器大小

設定容器大小的屬性有width、height以及box-sizing 其中width與height應該很好理解，直接設定即可。

box-sizing

box-sizing算是個比較新的屬性。在過去容器長寬的計算，只計算容器內部，不包含框線、padding，如此一來在寬度的計算上就會變得特別麻煩。

如上圖，在未設定box-sizing時，寬度為400時，整體寬度為400 加上 2 * 2(框線) 這麼一來當使用相對大小，如%、vw時將會出現問題。

而設定box-sizing: border-box後，width即為設定整體寬度，及最外層的寬度(不包含margin)。

偵測瀏覽器寬度

我們可以使用以下特殊的語法，來偵測使用者瀏覽器的寬度，以判定用戶是否使用行動裝置。

@media (max-width:720px){ //用戶瀏覽器小於720px時觸發
    #div_1 {
        /*.............*/
    }
    #div_2 {
        /*.............*/
    }
}

@media (min-width:720px){ //用戶瀏覽器大於720px時觸發
    #div_1 {
        /*.............*/
    }
    #div_2 {
        /*.............*/
    }
}

一般來說寫在下面的css會覆蓋上面的，所以一般的做法是先在外面定義通用的css，然後在底下定義行動裝置的樣式。

排版

高度、寬度

在css中，寬度使用width 高度使用height

#my_div {
	height: 20em;
	width: 10%;
}

padding、margin

大致的概念可以參考上圖

padding可以理解為往內推，margin則是往外跟別人的距離。

margin可以為負數，而padding則不行。

要自動居中可以用margin: (任意值) auto

position、display

這部份很複雜，這裡先說常用的

一般來說，display:block 就是像是div那樣，把元素當作一個大框框，而display: inline 則是把元素當作文字。

常見預設display為inline的有<img> <input> <button> <a>

進階排版(選讀)

進階的排版牽涉到橫向及自適應。

先說position:

position有幾個值，這裡依序說明：

position: absolute

當position被設定為absolute時，使用絕對座標，需要搭配top及left屬性(或是left及right)。

以下的飯粒🍚，會令此容器的左上對齊x:10px，y:5px處。(但實際使用請多用vw、vh這種單位，避免行動裝置出現問題)。

#my_div {
    position: absolute;
    left: 10px;
    top: 5px;
}

position: relative

這個屬性不是用在設定的元素本身，而是其子元素。

若一元素設定position: relative，齊子元素設定position: absolute及left、top等屬性時，會以此元素作為參考點，相對地顯示位置。

position: fixed

這個屬性類似於absolute，但當畫面捲動時不會跟著捲動，而是固定在某個高度。常用於上方工具條、返回最上方按鈕等。

display

display在html 5或的了一系列的大更新，使得橫向的排版更為的簡單。但因為真的太多了，這裡就先列出真的會用到的，以及相容現今主流瀏覽器的語法。

display: inline-block

這個屬性類似於inline，但是inline的元素不能設定margin-top、margin-bottom，也不能直接設定長寬，而使用display:inline-block就可以。

display: none

這個屬性會讓元素從畫面上消失。基本上是搭配js在做使用的，或是要在嵌入、或是額外的樣式表硬把別人的東西隱藏時會使用到。

display: flex

這裡就真的比較複雜了，常用於橫向排版。初期理解比較複雜，但是熟練之後爆凎好用，而且用起來很潮(O 。

大家可以參考連結

基本的效果類項目

背景

底色

要設定底色直接使用background:顏色即可。

底圖

底圖的部份比較複雜，會搭配到一些排版的觀念。

完整的底圖設定如下：

background: [color] [image] [repeat] [attachment(固定)] [position] / [size] [origin] [clip];

要注意那個斜線必須留著，不然會壞掉。

中括號（含）換成對應的值就可以了，中間用空白隔開。

以下是幾個範例：

background: #aaa （只設定顏色）

background:#aaa url('img.png') (設定顏色及底圖，在底圖尚未載入時會顯示底色)

background: #aaa url('img.png') no-repeat center / cover 這個比較難說明，大致上就是讓圖片顯示滿版（放大不改變比例）不重複顯示，定位在圖片的中心。

有些屬性比較複雜，同學們可以自己google自己試試看。

漸層

漸層雖然看似為顏色，但實際上是被理解為圖片的形式。

具體的寫法如下：

background: linear-gradient(angle, color 1, color 2, ...)

angle的部分為角度，需要加上單位deg 或是使用 to bottom, to right這種東西

如果還是看不懂可以參考這個連結

Javascript

基礎中的基礎

變量

變量可以用來存放一個數值，可以是數字、字串、object等。

區段 scope

在定義變量的時候，要注意變量影響的範圍，下面是個例子：

var a = 0;

function foo(){
    var a = 2;
    //在這裡a 會是2;
}
//在這裡a還是0;

流程控制

if (CONDUCTION) {
    //do something
} else if (CONDUCTION_2) {
	//do something
} else {
	//do something
}

函數

function foo(){
    //do something;
    return RETURN VAL;
}

function f1(a) {
    return a * 2;
}
var x = f1(2);
console.log(x);  // would print 4

匿名函數

js中時常需要將函數作為變量在另一個函數傳遞，這時候匿名函數便非常的好用，下面是個例子：

function a(foo, b) {
    //foo是一個函數，我們將函數的內容作為變量傳遞進來，並且在下面執行。
    console.log(foo(b))
}

a(function(b){
    return b * 2;
}, 3)
// would print 6

DOM

DOM是什麼？

DOM全名為document object model ，在這裡可以理解可以為html元素的結構。

jQuery

由於javascript原生的指令較長，我也記不得，所以在這裡我們使用萬能的套件庫jQuery來輔助我們使用javascript。

元素選擇器

$("CSS_SELECTOR")

沒錯，就是css的元素選擇器！

下面是幾個例子：

$("#my_id") // 選中id="my_id" 的物件
$(".my_class") // 選中class="my_class" 的物件

沒錯，就是如此的直接，一切就是那麼的愜意！

對元素進行操作

introduction

現在我們的網頁文件中有下列一段DOM元素：

<div id="my_box">
    WWWWWWWWWWWWWWWWWW
</div>

現在我們想讓盒子中的文字變成綠色，底色變成黑色，並且內容變成yeeeee：

$(document).ready(function(){  //等待DOM完全載入在執行
    $("#my_box").css('color', 'green');
    $("#my_box").css('background', 'black');
    $("#my_box").html("yeeeee");
});

或是你也可以這麼寫

$(document).ready(function(){
  $("#my_box").css('color', 'green').css('background', 'black').html("yeeeee");
});

這是因為jQuery的setter會在設定後回傳selector本身，所以可以一直接下去。

基礎介紹

設定css

$(SELECTOR).css('NAME', 'VALUE');
// 或是一次設定多個css
$(SELECTOR).css({
  name : 'VALUE', //注意這裡是逗號
  name2: 'VALUE2'
})

設定html的標籤
```
$(SELECTOR).arrt('name', 'value')
```
取得html標籤內容

var myName = $(SELECTOR).arrt('name')

setter, getter

從以上的例子應該不難發現，主要的功能不外乎設定與取得，而且共用相同的方法(method)名稱。下面是更多的例子：

表單

// 普通文字內容 (text, password, number, date... etc.)
$("input").val('test')       // 設定表單的值
var myVal = $("input").val() // 取得表單的值

// 核取方塊 (checkbox)
$("input[type='checkbox']").attr('checked', true) // 打勾
$("input[type='checkbox']").attr('checked', '')   // 取消打勾
$("input[type='checkbox']").removeAttr('checked') // 也是取消打勾
var isChecked = $("input[type='checkbox']").attr('checked') //如果已經被勾了回傳true，沒有則回傳false

// 下拉清單 (select)
$("select").find(":selected").val(); //取得被選中的值
$("option").attr("selected", true);

事件監聽器

$(SELECTOR).click(function(){
    // do something.
});

$(SELECTOR).dbclick(function(){
    // do something.
})

[TOC]

Files

淺談前端網頁設計.md

Latest commit

History

淺談前端網頁設計.md

File metadata and controls

壹、導論

關聯

貳、基礎認知

路徑

絕對路徑

相對路徑

參、淺談語法

HTML

標籤的結構

在繼續之前

註解

沒什麼意義，單純把字包起來的標籤(後面css會用)

常見的HTML標籤

純容器類

清單

表格

表單

CSS選擇器

基礎

CSS格式

單位

長度單位

時間單位

顏色

選擇器

Tag Name

ID、Class

具有..屬性、屬性值

交集

聯集

容器大小

box-sizing

偵測瀏覽器寬度

排版

高度、寬度

padding、margin

position、display

進階排版(選讀)

position: absolute

position: relative

position: fixed

display

display: inline-block

display: none

display: flex

基本的效果類項目

背景

底色

底圖

漸層

Javascript

基礎中的基礎

變量

區段 scope

流程控制

函數

匿名函數

DOM

DOM是什麼？

jQuery

元素選擇器

對元素進行操作

introduction

基礎介紹

setter, getter

事件監聽器