HTML、CSS、Javascript(js)語法入門學習筆記 - 遊戲式學習

網頁設計css、javascript、html語法教學重點，課程隨堂筆記大公開！製作網頁常用語法介紹與範例。

(王啟榮老師網頁設計教學課程) 遊戲是學習 www.GameIsLearning.url.tw 討論區>多媒體學習 HTML、CSS、Javascript(js)語法入門學習筆記 王啟榮 發表於2018/09/21_17:31　(最後修改2021/11/30_22:09) HTML●表格(以下範例會建立2列2欄的表格)　　　　 html教學 tr中的td為同一列不同欄 　　　 這是第2列第1欄 test 　　//橫跨3欄　//直跨4列　//內容對齊左上　//設定高度●超連結　文字超連結　//要在新視窗開啟超連結就加target="_blank"　　//圖片超連結　顯示文字　//點擊文字呼叫js函數●頁面中加入錨點(同一頁內超連結)　點擊這裡　跳到這裡●按鈕◎　//添加一個按鈕，點擊時會呼叫js函數。

◎　//添加一個圖片按鈕，點擊時會呼叫js函數。

◎◎
換一行、

換兩行、

段落

、

---

水平分隔線◎　//添加文字輸入欄◎　//插入圖片CSS●使用CSS樣式常用方法1.使用class和id對應CSS樣式　　在網頁的head標籤中加入以下敘述定義樣式：　　　　　.redTxt　{　color:#F00;　}　/*這是css的註解*/　　　#blueTxt{　color:#03F;　}　/*樣式名稱{　屬性:值　}*/　　　　hello

//class對應.開頭的樣式　　world//id對應#開頭的樣式　　//在一個頁面中，同一個class可多處使用，但同一個id只能使用一次。

2.使用外部CSS樣式　　新增一個副檔名為css的檔案(例如：test.css)，然後寫入需要的　樣式名稱{屬性:值}　　在網頁的head標籤中加入以下其中一種敘述。

　　【方法1】連結外部CSS樣式　　【方法2】從外部匯入CSS樣式　@importurl("test.css");　3.直接套用CSS樣式(不需事先定義)　　hello　//例如把

中的文字設為綠色4.行內局部套用CSS樣式(使用)　　

這裡是紅色

，這裡不變色。

　　結果-->這裡是紅色，這裡不變色。

●設定內距(例如用來調整div或表格中文字與邊緣的距離)　padding:15px20px8px5px;　//上、右、下、左的間距　padding:15px20px;　//上下、左右的間距　padding:15px20px8px;　//上、左右、下的間距　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:0pxauto;◎文字水平方向對齊◎顯示display:block;　　隱藏display:none;◎避免元素(例如div)造成換行：display:inline;◎去除iOS按鈕預設的圓角與漸層　-webkit-appearance:none;JavaScript●函數　functionabc(){}　//宣告一個名為abc的函數　abc();　//呼叫函數abc●if判斷式　if(n==100){　}　elseif(n<60){　}　else{　}　//以上條件都不符合，就執行else　關係運算子:　等於==　不等於!=　大於>　大於等於>=　小於5||b<3){　}代表a大於5或b<3都符合條件●for迴圈　for(vari=0;i<5;i++){　console.log(i);　}　說明：i的啟始值為0，i小於5就繼續跑迴圈，i每次加1　結果會依序輸出0、1、2、3、4●設定元素的CSSstyle(例如設定圖片的方向和位置)　　varmypic=document.getElementById("dog");　//取得id為dog的元素　mypic.style.transform="rotate(45deg)";　//設定旋轉角度　mypic.style.left="200px";　//要先用position定位　※若只要取得位置座標的整數，就用parseInt(mypic.style.left);●抓取元素的CSS屬性(屬性不用寫在style=""裡)　.....　varmyDIV=document.getElementById("myDIV");　window.getComputedStyle(myDIV);　//抓出元素所有的屬性　window.getComputedStyle(myDIV).getPropertyValue("height");　//抓取元素的高度屬性●按鍵觸發事件　functionabc(){　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則是會重複呼叫。

　◎停止(取消)定時呼叫　　varmyTimer=setTimeout("myTest()",3000);　　clearTimeout(myTimer);　//改成clearInterval即取消重複呼叫●字串相關　varstr="hello_kitty";　varary=str.split("_");　//分割字串(結果ary[0]為hello)　str.length;　//抓取字串長度(結果:11)　str.substr(4,3);　//從第5個字開始，連續抓取3個字。

(結果:o_k)●數學、數字　Math.random();　//隨機產生0(包含)~1(不含)的小數亂數　Math.floor(n);　//無條件捨去n的小數　vara=Number("205");　//字串轉數字　Math.round(數值*100)/100　//四捨五入到小數第2位●陣列(Array)　vararr=[];　//宣告陣列　arr.push("book");　//在陣列最後增加資料　arr.splice(1,2);　//刪除array中的資料(例如從index1開始,連續刪除2筆)　arr=[];　//清空array　arr.length;　//取得陣列長度●取得圖片寬度和高度　varmyImg=newImage();　myImg.src="http://xxx.jpg";　varw=myImg.width;　　varh=myImg.height;　window.alert("圖片尺寸："+w+"x"+h);◎//單行註解　、　/*可多行註解*/◎JavaScript要寫在之間，可放在head或body標籤中。

◎console.log("helloworld");　//可在Chrome瀏覽器的Console面板(按F12鍵)輸出訊息◎vark=5;　//宣告變數(不需要加型態)◎document.getElementById("id名稱").value;　//取得元素的值◎document.getElementById("id名稱").innerHTML;　//取得html標籤之間的內容◎window.alert("hellojavascript");　//彈出視窗(可顯示文字訊息，換行為\n)◎location.href="http://www.js.com";　//頁面跳轉(超連結到別的網頁)◎window.open("http://www.js.com");　//在新視窗開啟超連結◎history.back();　//回到上一頁jQuery◎$(".foo")　//取得class為foo的元素◎$("#abc").hide();　//隱藏id為abc的元素(顯示就用show)◎$("#abc").css("top",120);　//設定css屬性●設定屬性(例如變更img的圖片)　　$("#myPic").attr("src","bbb.jpg");PHP●陣列(Array)　$ary=array(5,69,7);　//宣告陣列　array_push($ary,"foo","php");　//在陣列最後加入資料(可多筆)　count($ary);　//抓取陣列長度　$ary=array();　//清空陣列　echoprint_r($ary,true);　//輸出陣列內容(含索引號)　foreach($aryas$value){　echo$value."
";　}　//跑迴圈輸出陣列中所有值●字串相關　strrev("HelloWorld");　//反轉字串(結果:dlroWolleH)　strlen("helloworld");　//抓取字串長度(結果:11)　$ary=explode("-","this-is-a-book");　//分割字串(結果$ary[1]為is)　substr("dreamweaver",2,5);　//從第3個字開始，連續抓取5個字(結果:eamwe)　substr("Helloworld",-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...等。

打破影音課程售後不理的情況，線上真人助教群等著你~從基礎到進階，深入淺出講解前端必備技能，帶你實作學到會！