tags: `HTML` `CSS` `JavaStript` `code`

HTML、CSS、JavaScript

HTML(基本功能)

參考資料 W3C_HTML

html基本型










<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8"></meta>  編碼方式 
        <title>標題</title>
    </head>
    <body>
        內文
    </body>
</html>

標題

h1

h2

h3

h4

h5

h6






<h1>標題</h1>
<h2>標題</h2>
<h3>標題</h3>
<h4>標題</h4>
<h5>標題</h5>
<h6>標題</h6>

內文






<p>內文</p>
<br/>  換行 
<span>內文</span>
<b>粗體</b>
<i>斜體</i>
<hr/>  分隔線

內文

內文粗體斜體

程式



<code>
    程式內內容
</code>


    程式內內容

特殊功能_插入內容



<a herf="https://google.com">Google</a> 超連結 
<img src="圖片位置" width="寬度" heigh="高度"> 插入圖片 
<vidio src="影片位置" controls width="寬度" heigh="高度">無法載入時顯示的文字</vidio>

列表






 前面是點 
<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>






 前面是順位 
<ol>
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ol>










 前面是英文順位 
 A是英文大寫 
 a是英文小寫 
 I是羅馬大寫 
 i是羅馬小寫 
<ol type="A">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ol>

表格













<table>
    <tr> 行 
        <td>11</td> 列 
        <td>12</td>
        <td>13</td>
    </tr>
    <tr>
        <td>21</td>
        <td>22</td>
        <td>23</td>
    </tr>
</table>

11	12	13
21	22	23

容器


<span>小容器</span>
<div>大容器</div>

輸入標籤














<input type="text" placeholder="輸入框預設文字"/> 文字輸入 
<input type="password" placeholder="輸入框預設文字"/> 密碼輸入 

<input type="dete"/> 日期輸入 

<input type="range"/> 拉桿輸入 

<input type="file"/> 檔案輸入 

<input type="checkbox"/> 審核方塊 

<input type="radio" name="這組單選格的名子"/> 單選方塊 

<textarea>預設文字</textarea> 大型文字輸入格

meta標籤

用於優化搜尋引擎搜尋








<meta name="description" content="網頁簡介"/>

<meta name="author" content="網頁作者"/>

<meta name="keywords" content="關鍵字用,間隔"/>

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 預設大小為裝置100%size 寫RWD必備

CSS(基本功能)

參考資料 W3C_CSS

基本寫法



















(不同屬性要用;分割)
丟在head

<head>
    <style>
        所有p標籤預設
        p{
            css內容
        }
    </style>
</head>

單個標籤CSS 
 <div style="css"></div> 
 
寫在.css檔案裡
 <head>
    <link rel="stylesheet" href="檔名.css"/>
</head>

css基礎選擇器



















*{
    所有物件的CSS
}
body{
    作用整面網頁的CSS
}

h1, h2{
    h1和h2的CSS(逗點進行分割)
}
ul li{
    只要在ul內部有<li>此<li>的CSS(li也可以換成其他標籤例如a標籤)
}
[type] {
    作用在所有有type屬性的標籤上面(可換其他)
}
標籤名:hover{
    滑鼠觸及此標籤時的CSS
}

基本樣式及效果

全物件



 border:大小px顏色 樣式 顏色;
 邊框樣式(solid實線)(dashed虛線)
 background-color:顏色;  背景顏色

文字











 color:顏色;  文字顏色 
 font-size:大小px;  文字大小
 font-family: 字形; 字體樣式
 line-height: 單位; 行高
 text-align: 位置; 文字位置
 center致中 left 左 right 右
 font-weight:樣式; 字體粗細
 normal 預設 bold 粗體 bolder更粗的粗體 lighter 細體?
 也可用100~900定義粗細
 font-style:樣式; 字體斜體
 normal 預設 italic斜角字

div















 background-image: url(圖片位置); 背景圖片
 預設背景圖片重複直到邊界
 background-repeat: no-repeat; 關閉重複
 background-position: 圖片位置;
 位置可使用 top botton right left center(後面我簡寫TBRLC)
 TBRLC 後面加單位則是距離TBRLC距離

 透明度 
 style="opacity:0~1"
 1不透明0全透明 
 
 圓角 
 style="border-radius:導角像素;"
 分別不同圓角(單位像素 順時鐘) 
 style="border-radius:左上 右上 右下 左下;"

空間

寬高


width:單位; 寬
height:單位; 高

文字邊框為基準區分內外

padding

內間距








 上間距
 padding-top:單位; 
 下間距
 padding-botton:單位;
 左間距
 padding-left:單位;
 右間距
 padding-right:單位;

padding使用時會將物件本身稱撐大


box-sizing: border-box; 重新計算空間大小

margin

外間距








 上間距
 margin-top:單位; 
 下間距
 margin-botton:單位;
 左間距
 margin-left:單位;
 右間距
 margin-right:單位;

margin問題

margin上下會穿透父層解決方法

父層用padding
子層有float就不會有這問題
父層有border就不會有這問題

理想

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

實際

padding及margin 均可選擇輸入1~4項數值以下以(padding)為例









1項
padding:四邊間距;
2項
padding:上 下;
3項
padding:上 左右 下;
4項
padding:上 右 下 左;

常用水平至中margin:0 tuto;

顯示效果

flost

CSS2主流排版



 漂浮 
 flost:right;  浮在右邊 
 flost:left;   浮在左邊

display

只占用所需空間無法設定高自動換行


 強制切換成行內元素
 display:inline;

預設寬為100%/auto 可設定寬高不會自動換行


 強制切換成區塊元素
 display:block

只占用所需空間可設定寬高自動換行


 強制切換成行內區塊元素
 display:inline-block

flex

CSS3主流排版 flex(預設順序主:由左到右次:由上而下)


 欲使flex首先須要將須排版物件的父層設定為
 display:flex

grid

CSS3的新型排版

定位




















 固定定位(螢幕開始算) 
 固定在最上面(蓋在最上面獨立塗層)
 style="position:fixed"
    固定上面 
 style="position:fixed"; top:上往下算的像素
    固定下面 
 style="position:fixed"; botton:下往上算的像素
    固定左面 
 style="position:fixed"; laft:左往右算的像素
    固定右面 
 style="position:fixed"; right:右往左算的像素
     以上可複合 

 相對定位(預設位置開始算 原本位置會空出來) 
 style="position:relation"
 一樣可以用 top botton laft right 

 絕對定位(網頁大小開始算ro外層) 
 style="position:fixed"
 一樣可以用 top botton laft right

分類

class分類(可重複)

.html








<p class="A">A1</p>
<p class="A">A2</p>
<p class="A">A3</p>
<p class="B">B1</p>
<p class="B">B2</p>
<p class="B">B3</p>
<p class="A B">AB10</p>
多個分類空白建分隔

.css






.A{
    A類的CSS內容
}
.B{
    B類的CSS內容
}

id分類(不可重複)

.html



<p id="A1">A1</p>
<p id="A2">A2</p>
<p id="A3">A3</p>

.css









#A1{
    id:A1 的CSS內容
}
#A2{
    id:A2 的CSS內容
}
#A3{
    id:A3 的CSS內容
}

動畫















@keyframes 動畫名稱{
    from{動畫播放時初始CSS}
    to{動畫結束時CSS}
}
也可以用%
@keyframes 動畫名稱{
    0%{動畫播放時初始CSS}
    50%{50%時間時的CSS}
    100%{動畫結束時的CSS}
}

animation-name:動畫名稱
animation-duration:動畫持續時間(例如:5s)
animation-iteration-count:重複次數(輸入infinite則為無限次)
animation-delay:網頁載入後等待播放時間

JavaScript(基本功能)

參考資料: W3C_JavaScript

JavaScript基本寫法

直接寫在body












<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8"></meta>
        <title>標題</title>
    </head>
    <body>
        <script>
            JavaScript內容
        </script>
    </body>
</html>

引入檔案










<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8"></meta>
        <title>標題</title>
    </head>
    <body>
        <script src="Javascript檔名.js"></script>
    </body>
</html>

基本功能

在html裡面寫東西


document.write("內容");

註解



//註解
/*註解
註解*/

基本資料型態&變數

字串(string)


"字串"

數值(Number)

布林值(Boolean)


true
false

變數宣告

只能用英文數字 & _ 開頭不能用數字



var 變數名="字串";
var 變數名=520;
var 變數名=true;

字串

字串連接


document.write("AB"+"CD"+"EF");

輸出結果: ABCDEF

跳脫


document.write(" \" ");

輸出: "

字串長度


var TXT="Hello"
document.write(TXT.length);

輸出: 5 全轉大寫


document.write(TXT.toUpperCase());

輸出: HELLO

全轉小寫


document.write(TXT.toLowerCase());

輸出: hello

只回傳第N個的字元(第一個為0)


document.write(TXT.charAt(1));

輸出: e

回傳所搜尋字元的位置代號(沒有會回復-1)(重複則是回傳最靠前)


document.write(TXT.indexOf(o));

輸出: 4

回傳所指定區間的字串(尾數為最後一個字號碼+1)


document.write(TXT.substring(1,4));

輸出: ell

數字

加


document.write(1+2);

輸出: 3

減


document.write(5-3);

輸出: 2

乘


document.write(4*5);

輸出: 20

除


document.write(8/2);

輸出: 4

餘數


document.write(5%3);

輸出: 2

絕對值


document.write(Math.abs(-10));

輸出: 10

取最大數


document.write(Math.max(2,-3,0,7,1));

輸出: 7

取最小數


document.write(Math.min(2,-3,0,7,1));

輸出: -3

四捨五入


document.write(Math.round(2.5));

輸出: 3

次方



document.write(Math.pow(2,3));
//也可以
document.write(2**3);

輸出:8

開根號



document.write(Math.sqrt(9));
//也可以
document.write(9**0.5);

輸出: 3

隨機數(1~10)


document.write(Math.random());

輸出: 0.5536575061960332

加一


var num=5
num++

減一


var num=5
num--

強轉格式為整數(int)


num = parseInt(num);

強轉格式為浮點數(float)


num = parseFloat(num);

彈窗


alert("你好");

畫面彈出:你好

\n可以換行


alert("A\nB\nC");

畫面彈出: A 畫面彈出: B 畫面彈出: C

彈窗輸入


var str1 = prompt("輸入一串文字");
document.write("你剛剛輸入"+str1);

輸入: WOW

輸出: 你剛剛輸入WOW

if(判斷式)

判斷正負













var num=prompt("輸入一個數字");
if(num>0)
{
    document.write("你輸入的是正數");
}
else if(num<0)
{
    document.write("你輸入的是負數");
}
else
{
    document.write("你輸入的是0");
}

輸入: 9

輸出: 你輸入的是正數

輸入: -3

輸出: 你輸入的是負數

輸入: 0

輸出: 你輸入的是0

且(AND)






var n1=prompt("輸入一個數字");
var n2=prompt("輸入一個數字");
if(n1>0 && n2>0)
{
    document.write("你輸入的都是正數");
}

輸入: 5 輸入: 4

輸出: 你輸入的都是正數

或(OR)






var n1=prompt("輸入一個數字");
var n2=prompt("輸入一個數字");
if(n1>0 || n2>0)
{
    document.write("你輸入的至少一個是正數");
}

輸入: -6 輸入: 7

輸出: 你輸入的至少一個是正數

不是(NOT)





var b1=false;
if(!b1)
{
    document.write("b1不是true");
}

輸入: b1不是true

迴圈

for(先判斷後執行)





for(i=1;i<=3;i++)
{
    document.write(i);
    document.write(<br/>);
}

while(先判斷後執行)










var i=1;
while(i<=3){
    document.write(i);
    document.write(<br/>);
    i++;
}
```javascript=
>輸出:1
>輸出:2
>輸出:3

do while(先執行後判斷)






var i=4;
do{
    document.write(i);
    document.write(<br/>);
    i++;
}while(i<=3)

輸出: 4

陣列(array)

宣告陣列



var array1 = [4,6,7,1];
document.write(array1);
document.write(array1[2]);

輸出: 4, 6, 7, 1 輸出: 7

修改陣列


array[0] = 0;
document.write(array);

輸出: 0, 6, 7, 1

陣列長度


document.write(array.length);

輸出: 4

函式(function)

印出傳入內容的函式






function pr(content)
{
    document.write(content);
}
//content為變數名
pr("測試123")

輸出: 測試123

加法函式






function add(num1,num2)
{
    return num1+num2;
}
//content為變數名
document.write(add(13,24));

輸出: 37

物件(object)










var obj={
    str:"字串",
    int:10,
    bool:true
};
document.write(obj.str);
document.write(obj.int);
document.write(obj.bool);

輸出: 字串輸出: 10 輸出: true

裡面也可以塞函式











var obj={
    add:function(n1,n2){
        return n1+n2;
    },
    cut:function(n1,n2){
        return n3-n4;
    },
    pr:function(n){
        document.write(n);
    }
};

obj.pr(obj.add(5,6));

輸出: 11


obj.pr(obj.cut(7,2));

輸出: 2

也可以物件裡面放物件套娃(不示範了自己玩) 順帶一提陣列裡免也可以塞物件

class(建立物件模板)













class Cl{
    //constructor用於賦予數值
    constructor(num1,num2,bool,str){
        this.num1=num1;
        this.num2=num2;
        this.bool=bool;
        this.str=str;
    }
    add(){
        return this.num1+this.num1;
    }

}

可按照模板建立物件







var c1=new Cl(5,8,true,"WOW");

document.write(c1.unm1);
document.write(c1.unm2);
document.write(c1.bool);
document.write(c1.str);
document.write(c1.add);

輸出: 5 輸出: 8 輸出: true 輸出: WOW 輸出: 13

讀取HTML物件

HTML














<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8"></meta>
        <title>標題</title>
    </head>
    <body>
        <h6 id="A">AA</h6>
        <h6 id="B">BB</h6>
        <a href="https://duckduckgo.com/" id="C">CC</a>
        <script src="JS.js"></script>
        <!-- <script>要放在後面否則讀不到前面的物件 -->
    </body>
</html>

原本樣式:

AA

BB
CC

javascript







var h6_a=document.getElementById("A");
//讀取ID"A"的內容
var h6_b=document.getElementById("B");
var h6_c=document.getElementById("C");
h6_a.innerText="A1";
h6_b.style.backgroundColor="red";
a_1.href="https://google.com";

打完JS樣式:

A1

BB
CC

事件監聽器

方法1 HTML













<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8"></meta>
        <title>標題</title>
    </head>
    <body>
        <button id="BB" onclick="BB1(this)">0</button>
        <!-- 為按鈕按下時觸發BB1函式同時傳入按鈕指標(this)-->
        <!-- click寫在HTML時要加on變成onclick -->
        <script src="JS.js"></script>
    </body>
</html>

JavaScript








var i=0;
function BB1(B1)
{
    i++;
    B1.innerText=(i);
}
//i+1
//修改按鈕文字成i

方法2 HTML











<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8"></meta>
        <title>標題</title>
    </head>
    <body>
        <button id="BB">0</button>
        <script src="JS.js"></script>
    </body>
</html>

JavaScript










var BB=document.getElementById("BB");
var i=0;
BB.addEventListener("click",function()
{
    i++;
    BB.innerText=(i);
})
//click為按鈕按下時觸發
//i+1
//修改按鈕文字成i

效果為做出一個按一下+1數字的按鈕

HTML











<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8"></meta>
        <title>標題</title>
    </head>
    <body>
        <img id="II" src="P1.png" width="300">
        <script src="JS.js"></script>
    </body>
</html>

JavaScript











var II=document.getElementById("II");
II.addEventListener("mouseover",function(){
    this.src="P2.PNG"
})
//mouseover為滑鼠碰到時觸發
//圖片換成P2.PNG
II.addEventListener("mouseout",function(){
    this.src="P1.PNG"
})
//mouseout為滑鼠離開時觸發
//圖片換成P1.PNG

效果為碰到圖時換成P2.PNG沒泡到時換回P1.PNG

HTML

















<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8"></meta>
        <title>標題</title>
    </head>
    <body>
        <input type="text" id="EE"/>
        <button id="BB">往下放</button>
        <div id="NN">
            <div class="MM">
                <p>測試1</p>
            </div>
        </div>
        <script src="JS.js"></script>
    </body>
</html>

JavaScript




















var EE=document.getElementById("EE");
//讀取輸入框
var BB=document.getElementById("BB");
//讀取案紐
var NN=document.getElementById("NN");
//讀取放置文字的<div>
BB.addEventListener("click",function(){
    //按鈕按下時(觸發click)
    
    NN.innerHTML=NN.innerHTML+`
        <div class="MM">
            <p>${EE.value}</p>
        </div>
    `;
    //NN原本字串加上下方格式內容

EE.value="";
    //清除輸入框
})
//要用``才能使用${EE.value}此類JavaScript語法""無法

將文字放置到下方

Emmet

Emmet是一個加速撰寫HTML與CSS的工具 Sublime Text、Eclipse、Notepad++、VS code、Atom、Dreamweaver等等文字編輯器均可使用。

HTML

HTML基本型

下列結構只需要一個!(或 html:5)然後按TAB即可出現












<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

id class

div#test


<div id="test"></div>

div.test


<div class="test"></div>

節點

>子節點

+兄弟節點

^父節點

子節點範例: div>ul>li>p







<div>
   <ul>
     <li>
       <p></p>
     </li>
   </ul>
</div>

兄弟節點範例: div+ul+p



<div></div>
<ul></ul>
<p></p>

父節點範例: div>ul>li^div






<div>
   <ul>
     <li></li>
   </ul>
   <div></div>
</div>

重複

標籤名*數量 div*5





<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

分組

用()進行分組()內為獨立模塊內外互不干擾

div>(ul>li>a)+div>p








<div>
   <ul>
     <li><a href=""></a></li>
   </ul>
   <div>
     <p></p>
   </div>
</div>

屬性

[]內為屬性不停屬性用空格區分即可 a[href='###' name='nA']


<a href="###" name="nA"></a>

編號指令$

會 根 據 數 量 遞 增 ‘ u l > l i . t e s t

*3`





<ul>
   <li class="test1"></li>
   <li class="test2"></li>
   <li class="test3"></li>
</ul>

一個$代表一個位數

若想要自定義遞增初始數則使用

@ 初 始 值 * 數 量 ‘ u l > l i . t e s t

@5*3`





<ul>
   <li class="test5"></li>
   <li class="test6"></li>
   <li class="test7"></li>
</ul>

內文

{}內為內文 div>p.test${內文$}*3





<div>
    <p class="test1">內文1</p>
    <p class="test2">內文2</p>
    <p class="test3">內文3</p>
</div>

預設指令

預設直接輸入 #test .test


<div id="test"></div>
<div class="test"></div>

在ul和ol中使用.test ul>.test$*3





<ul>
   <li class="test1"></li>
   <li class="test2"></li>
   <li class="test3"></li>
</ul>

在select中使用.test select>.test$*3





<select name="" id="">
  <option class="test1"></option>
  <option class="test2"></option>
  <option class="test3"></option>
</select>

諸如此類 tr：可在 table、tbody、thead 和 tfoot 中使用 td：可在 tr 中使用

tags: HTML CSS JavaStript code

HTML、CSS、JavaScript

HTML(基本功能)

html基本型

標題

h1

h2

h3

h4

h5

h6

內文

特殊功能_插入內容

列表

表格

容器

輸入標籤

meta標籤

CSS(基本功能)

基本寫法

css基礎選擇器

基本樣式及效果

全物件

文字

div

空間

padding

margin

margin問題

顯示效果

flost

display

flex

grid

定位

分類

動畫

JavaScript(基本功能)

JavaScript基本寫法

基本功能

基本資料型態&變數

字串

數字

彈窗

if(判斷式)

迴圈

陣列(array)

函式(function)

物件(object)

讀取HTML物件

AA

BB

A1

BB

事件監聽器

Emmet

HTML

HTML基本型

id class

節點

重複

分組

屬性

內文

預設指令

Read more

Markdown

C

Python

Java

tags: `HTML` `CSS` `JavaStript` `code`