# 網頁設計筆記

HTML

● 表格
　<table border="1">
　　　<tr> <td>html教學</td><td>tr中的td為同一列不同欄</td> </tr>
　　　<tr> <td>這是第2列第1欄</td><td>test</td> </tr>
　</table>

　<td colspan="3"></td> // 橫跨 3 欄
　<td rowspan="4"></td> // 直跨 4 列
　<td valign="top" align="left"></td> // 內容對齊左上
　<td style="height:25px;"></td> // 設定高度

● 超連結
　<a href="http://www.youtube.com">文字超連結</a>　// 要在新視窗開啟超連結就加 target="_blank"
　<a href="http://www.youtune.com"><img src="myPic.jpg"/></a>　// 圖片超連結
　<a href="#" onclick="abc()">顯示文字</a>　// 點擊文字呼叫js函數

● 頁面中加入錨點(同一頁內超連結)
　<a href="#abc">點擊這裡</a>
　<h2 id="abc">跳到這裡</h2>

● 按鈕
◎ <input type="button" value="按鈕上的字" onclick="函數名稱()"/>
　// 添加一個按鈕，點擊時會呼叫js函數。
◎ <input type="image" src="my-button.png" onClick="函數名稱()"/>
　// 添加一個圖片按鈕，點擊時會呼叫js函數。

◎ <!-- 這是 html 的註解 -->
◎ <br>換一行、<p>換兩行、<p>段落</p>、<hr>水平分隔線
◎ <input type="text"/>　// 添加文字輸入欄
◎ <img src="myPic.jpg" width="120" height="60"/>

#CSS

● 使用 CSS 樣式常用方法

1. 使用 class 和 id 對應 CSS 樣式
　　在網頁的 head 標籤中加入以下敘述 定義樣式：
　　<style type="text/css">
　　　.redTxt　{　color: #F00;　}　/* 這是 css 的註解 */
　　　#blueTxt {　color: #03F;　}　/* 樣式名稱 {　屬性: 值　} */
　　</style>

　　<p class="redTxt">hello</p> // class 對應 . 開頭的樣式
　　<p id="blueTxt">world</p> // id 對應 # 開頭的樣式
　　// 在一個頁面中，同一個 class 可多處使用，但同一個 id 只能使用一次。

2. 使用外部 CSS 樣式
　　新增一個副檔名為 css 的檔案(例如：test.css)，然後寫入需要的　樣式名稱 { 屬性:值 }
　　在網頁的 head 標籤中加入以下其中一種敘述。
　　【方法1】連結外部 CSS 樣式 <link rel="stylesheet" type="text/css" href="test.css">
　　【方法2】從外部匯入 CSS 樣式 <style type="text/css">　@import url("test.css");　</style>

3. 直接套用 CSS 樣式 (不需事先定義)
　　<p style="color:#0C0;">hello</p>　// 例如把<p>中的文字設為綠色

4. 行內局部套用 CSS 樣式 (使用<span>)
　　<p>這裡是<span style="color:#F00;">紅色</span>，這裡不變色。</p>
　　結果 --> 這裡是紅色，這裡不變色。

● 設定內距(例如用來調整 div 或表格中 文字與邊緣的距離)
　padding: 15px 20px 8px 5px;　// 上、右、下、左 的間距
　padding: 15px 20px;　// 上下、左右 的間距
　padding: 15px 20px 8px;　// 上、左右、下 的間距
　padding: 15px;　// 上下左右 都留同樣的間距

● 設定外距
　屬性名稱為 margin，語法格式和設定內距一樣，也可以單獨設定。
　// 例如 margin-top: 0px; 為設定上間距

● 移動、旋轉、縮放
　transform: translate(50px,20px); // 朝 x、y 軸分別位移 50、20 像素
　transform: rotate(45deg);　// 旋轉 45 度
　transform: scale(3);　// 放大 3 倍
　transform: scaleX(-1);　// 水平翻轉(鏡射)
　transform: translateX(80px) rotate(30deg);　// 移動+旋轉，在 transform 中加空格即可

◎ 設定相對位置(以目前位置為基準)： position: relative;　left: 100px;　// 向右移 100 像素
◎ 設定絕對位置(以所在結構為基準)： position: absolute;　top: 80px;　// 向下移 80 像素
　(所在結構必需有定位，否則無效)
◎ 設定不透明度： opacity: 0.5;　// 數值愈小愈透明
◎ 設定重疊順序： z-index: 5;　// 數字大的覆蓋小的(只作用在定位的元素上)
◎ 設定行距： line-height: 1.5em;　// 以 14px 的文字來說，1.5em 就相當於行高 21px。
◎ div置中： margin:0px auto;
◎ <p style="text-align:center;">文字水平方向對齊</p>
◎ 顯示 display: block;　　隱藏 display: none;
◎ 避免元素(例如 div)造成換行： display: inline;
◎ 去除 iOS 按鈕預設的圓角與漸層　-webkit-appearance:none;

#JavaScript

● 函數
　 function abc(){ }　// 宣告一個名為 abc 的函數
　 abc();　// 呼叫函數 abc

● if 判斷式
　if ( n == 100 ){　}
　else if ( n < 60 ){　}
　else {　}　// 以上條件都不符合，就執行 else

　關係運算子:　等於==　不等於!=　大於>　大於等於>=　小於<　小於等於<=
　邏輯運算子:　且&&　或||
　例如 if( a>5 || b<3 ){　} 代表 a大於5 或 b<3 都符合條件

● for 迴圈
　for (var i=0; i<5; i++) {　console.log( i );　}
　說明：i 的啟始值為 0， i 小於 5 就繼續跑迴圈， i 每次加 1
　結果會依序輸出 0、1、2、3、4

● 設定元素的 CSS style (例如設定圖片的方向和位置)
　<img id="dog" style="position:absolute; left:50px;" src="puppy.png"/>
　var mypic = document.getElementById("dog");　// 取得 id 為 dog 的元素
　mypic.style.transform = "rotate(45deg)";　// 設定旋轉角度
　mypic.style.left = "200px";　// 要先用 position 定位
　※ 若只要取得位置座標的整數，就用 parseInt( mypic.style.left );

● 抓取元素的 CSS 屬性 (屬性不用寫在 style="" 裡)
　<div id="myDIV">.....</div>
　var myDIV = document.getElementById("myDIV");
　window.getComputedStyle(myDIV);　// 抓出元素所有的屬性
　window.getComputedStyle(myDIV).getPropertyValue("height");　// 抓取元素的高度屬性

● 按鍵觸發事件
　function abc(){　if ( event.keyCode == 65 ){ console.log("A鍵被按下"); }　}
　document.onkeydown = abc;　// 按下按鍵就呼叫函數abc

● 計時器
　setTimeout( "myTest()", 3000 );　// 在 3 秒(3000毫秒)後呼叫函數 myTest
　setInterval( "myTest()", 3000 );　// 每間隔 3 秒(3000毫秒)呼叫函數 myTest
　以上兩者的差異，在於 setTimeout 只會呼叫一次，setInterval 則是會重複呼叫。
　◎ 停止(取消)定時呼叫
　　var myTimer = setTimeout( "myTest()", 3000 );
　　clearTimeout( myTimer );　// 改成 clearInterval 即取消重複呼叫

● 字串相關
　var str = "hello_kitty";
　var ary = str.split("_");　// 分割字串(結果 ary[0] 為 hello)
　str.length;　// 抓取字串長度(結果: 11)
　str.substr(4,3);　// 從第 5 個字開始，連續抓取 3 個字。(結果: o_k)

● 數學、數字
　Math.random();　// 隨機產生 0(包含) ~ 1(不含) 的小數亂數
　Math.floor( n );　// 無條件捨去 n 的小數
　var a = Number("205");　// 字串轉數字
　Math.round( 數值*100 ) / 100　// 四捨五入到小數第 2 位

● 陣列(Array)
　var arr = [];　// 宣告陣列
　arr.push("book");　// 在陣列最後增加資料
　arr.splice( 1, 2 );　// 刪除 array 中的資料(例如從 index 1 開始,連續刪除 2 筆 )
　arr = [];　// 清空 array
　arr.length;　// 取得陣列長度

● 取得圖片寬度和高度
　var myImg = new Image();
　myImg.src = "http://xxx.jpg";
　var w = myImg.width;　　var h = myImg.height;
　window.alert( "圖片尺寸： " + w + " x " + h );

◎ // 單行註解　、　/* 可多行註解 */
◎ JavaScript 要寫在 <script> 和 </script> 之間，可放在 head 或 body 標籤中。
◎ console.log("hello world");　// 可在 Chrome 瀏覽器的 Console 面板(按F12鍵)輸出訊息
◎ var k = 5;　// 宣告變數(不需要加型態)
◎ document.getElementById("id名稱").value;　// 取得元素的值
◎ document.getElementById("id名稱").innerHTML;　// 取得 html 標籤之間的內容
◎ window.alert("hello javascript");　// 彈出視窗(可顯示文字訊息，換行為 \n )
◎ location.href="http://www.youtube.com";　// 頁面跳轉(超連結到別的網頁)
◎ window.open( "http://www.youtube.com" );　// 在新視窗開啟超連結
◎ history.back();　// 回到上一頁