遊戲是學習 www.GameIsLearning.url.tw ar vr教育遊戲式學習 王啟榮 unity教學網站 行動遊戲學習平台

討論區 > 多媒體學習

HTML、CSS、Javascript(js)語法入門學習筆記

王啟榮 發表於 2018/09/21_17:31  ( 最後修改 2024/07/17_21:15 )

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"/> // 插入圖片並設定寬高

arshare 擴增實境 app

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 位

google雲端硬碟共用轉址

● 陣列(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(); // 清空、建立陣列
 $ary[] = "bear"; // 加入一筆資料
 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...等。打破影音課程售後不理的情況,線上真人助教群等著你~ 從基礎到進階,深入淺出講解前端必備技能,帶你實作學到會!