HTML ● 網頁基本框架
<!DOCTYPE html>
// 聲明使用html5 <html>
<head>
<meta charset="UTF-8">
<title>
網頁標題 </title>
</head>
<body>
網頁內容 </body>
</html>
● 表格
(以下範例會建立 2 列 2 欄的表格) <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="width:25px;"></td>
// 設定欄寬度 ● 超連結
<a href="http://www.yahoo.com">文字超連結</a>
// 要在新視窗開啟超連結就加 target="_blank" <a href="http://www.yahoo.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>、<hr>水平分隔線
◎ <input type="text"/>
// 添加文字輸入欄 ◎ <img src="myPic.jpg" width="120" height="60"/>
// 插入圖片並設定寬高 CSS ● 使用 CSS 樣式常用方法 1. 使用 class 和 id 對應 CSS 樣式 在網頁的 head 標籤中加入以下敘述 定義樣式：
<style>
.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>
結果 --> 這裡是
紅色 ，這裡不變色。
● 對特定 html 元素套用 css
p { color: #f00; }
// 把<p>標籤中的文字都設為紅色 table, td { border: 1px solid; border-collapse: collapse; }
// 把表格框線設為1像素的細線 ● 設定內距
(例如用來調整 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 中加空格即可 ● 切換圖片按鈕
#bt{ cursor: pointer; }
#bt:hover{ content:url(pic2.png); }
/* 游標移入 */ 搭配 html <img id="bt" src="pic1.png" onclick="函式名稱();">
◎ 設定相對位置(以目前位置為基準)： 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;
// div要設寬度 ◎ <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 ※ 查詢 keyCode 請至 https://keycode.info ● 計時器
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 );
● 替換圖片、點擊圖片呼叫函數
var pic = document.getElementById("thePic");
pic.src = "another.jpg";
pic.onmousedown = function(){ }
● 動態改變 css 屬性
var ooxx = document.querySelectorAll('.ooxx');
ooxx.forEach( (item) => { item.style = "height:100px"; } );
// 把 class 為 ooxx 的高度設為 100 pixels ◎ // 單行註解 、 /* 可多行註解 */
◎ 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.js.com ";
// 頁面跳轉(超連結到別的網頁) ◎ window.open( "
http://www.js.com " );
// 在新視窗開啟超連結 ◎ window.location.hash = "#hello";
// 把頁面捲動到 id 為 hello 的地方 ◎ history.back();
// 回到上一頁 jQuery ◎ $(".foo")
// 取得 class 為 foo 的元素 ◎ $("#abc").hide();
// 隱藏 id 為 abc 的元素(顯示就用 show) ◎ $("#abc").css( "top", 120 );
// 設定 css 屬性 ● 設定屬性
(例如變更 img 的圖片) <img id="myPic" src="aaa.jpg" />
$("#myPic").attr( "src", "bbb.jpg" );
PHP ● 陣列(Array)
$ary = array( 5, 69, 7 );
// 宣告陣列 array_push( $ary, "foo", "php" );
// 在陣列最後加入資料(可多筆) count( $ary );
// 抓取陣列長度 $ary = array();
// 清空陣列 echo print_r( $ary, true );
// 輸出陣列內容(含索引號) foreach( $ary as $value ){ echo $value."<br>"; }
// 跑迴圈輸出陣列中所有值 ● 字串相關
strrev( "HelloWorld" );
// 反轉字串(結果: dlroWolleH) strlen( "hello world" );
// 抓取字串長度(結果: 11) $ary = explode( "-", "this-is-a-book" );
// 分割字串(結果 $ary[1] 為 is) substr( "dreamweaver", 2, 5 );
// 從第 3 個字開始，連續抓取 5 個字(結果: eamwe) substr( "Hello world", -4 );
// 抓取後面 4 個字(結果: orld) $ss="049"; echo (int)$ss;
// 字串轉數字(結果: 49) $a="-2.6"; is_numeric($a);
// 判斷是否為數字或內容為數字的字串(結果:true) $b="63"; is_int($b);
// 判斷資料類型是否為整數(結果:false) ◎ for( $i=1; $i<10; $i++ ){ } //
for 迴圈 ◎ rand( 0, 5 );
// 隨機產生 0 ~ 5 的整數亂數 ◎ round( 23.4782, 2 );
// 四捨五入到小數第 2 位(結果: 23.48)
Web前端技術線上課程，專為無背景新手設計，邁向前端工程師 / 設計師之路！
【六角學院】透過線上教育的方式，開設符合使用者需求的課程，學習 HTML + CSS 網頁排版、jQuery 設計網頁互動效果、響應式網站開發、Bootstrap、JavaScript 基礎、AJAX/JSON、Git/Github、掌握主流框架 Vue.js/React/Angular...等。打破影音課程售後不理的情況，線上真人助教群等著你~ 從基礎到進階，深入淺出講解前端必備技能，帶你實作學到會！
