###### tags: `HTML` `CSS` `JavaStript` `code`
# HTML、CSS、JavaScript
<style>
table,
thead,
tbody {
width: 100%;
word-break: normal;
}
table th:nth-child(1),
table td:nth-child(1) {
width: 25%;
}
table th:nth-child(3),
table td:nth-child(3) {
width: 20%;
}
.table + table th,
.table + table td {
width: initial;
}
.table + table td:not(:nth-child(1)) {
font-size: .875em;
}
.table + table th,
.table + table td:nth-child(1) {
text-align: center;
}
/* h2 {
background: linear-gradient(to bottom, transparent 0%,transparent 50%,#fff000 50%,#fff000 100%);
width: fit-content;
font-weight: 700 !important;
border: none !important;
} */
/* .summary h2 {
background: transparent !important;
width: 100%;
border-top: 2px solid black !important;
border-bottom: 1px solid #ccc !important;
} */
</style>
# HTML(基本功能)
參考資料
[W3C_HTML](https://www.w3schools.com/html/)
## html基本型
```HTML=
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"></meta> 編碼方式
<title>標題</title>
</head>
<body>
內文
</body>
</html>
```
---
## 標題
># h1
><h2 style="linear-gradient(to bottom,transparent 0%,transparent 50%,#000000 50%,#000000 100%)">h2</h2>
>
>### h3
>#### h4
>##### h5
>###### h6
```HTML=
<h1>標題</h1>
<h2>標題</h2>
<h3>標題</h3>
<h4>標題</h4>
<h5>標題</h5>
<h6>標題</h6>
```
---
## 內文
```HTML=
<p>內文</p>
<br/> 換行
<span>內文</span>
<b>粗體</b>
<i>斜體</i>
<hr/> 分隔線
```
<p>內文</p>
<br/> 換行
<span>內文</span>
<b>粗體</b>
<i>斜體</i>
<hr/> 分隔線
程式
```HTML=
<code>
程式內內容
</code>
```
<code>
程式內內容
</code>
## 特殊功能_插入內容
```HTML=
<a herf="https://google.com">Google</a> 超連結
<img src="圖片位置" width="寬度" heigh="高度"> 插入圖片
<vidio src="影片位置" controls width="寬度" heigh="高度">無法載入時顯示的文字</vidio>
```
---
## 列表
```HTML=
前面是點
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
```
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
```HTML=
前面是順位
<ol>
<li>A</li>
<li>B</li>
<li>C</li>
</ol>
```
<ol>
<li>A</li>
<li>B</li>
<li>C</li>
</ol>
```HTML=
前面是英文順位
A是英文大寫
a是英文小寫
I是羅馬大寫
i是羅馬小寫
<ol type="A">
<li>A</li>
<li>B</li>
<li>C</li>
</ol>
```
---
## 表格
```HTML=
<table>
<tr> 行
<td>11</td> 列
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
</table>
```
<table>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
</table>
---
## 容器
```HTML=
<span>小容器</span>
<div>大容器</div>
```
---
## 輸入標籤
```HTML=
<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標籤
用於優化搜尋引擎搜尋
```HTML=
<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](https://www.w3schools.com/css/)
## 基本寫法
```HTML=
(不同屬性要用;分割)
丟在head
<head>
<style>
所有p標籤預設
p{
css內容
}
</style>
</head>
單個標籤CSS
<div style="css"></div>
寫在.css檔案裡
<head>
<link rel="stylesheet" href="檔名.css"/>
</head>
```
---
## css基礎選擇器
```CSS=
*{
所有物件的CSS
}
body{
作用整面網頁的CSS
}
h1, h2{
h1和h2的CSS(逗點進行分割)
}
ul li{
只要在ul內部有<li>此<li>的CSS(li也可以換成其他標籤例如a標籤)
}
[type] {
作用在所有有type屬性的標籤上面(可換其他)
}
標籤名:hover{
滑鼠觸及此標籤時的CSS
}
```
---
## 基本樣式及效果
### 全物件
```CSS=
border:大小px顏色 樣式 顏色;
邊框樣式(solid實線)(dashed虛線)
background-color:顏色; 背景顏色
```
### 文字
```CSS=
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
```CSS=
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:左上 右上 右下 左下;"
```
---
## 空間
#####
寬高
```CSS=
width:單位; 寬
height:單位; 高
```
文字邊框為基準區分內外
##### padding
內間距
```CSS=
上間距
padding-top:單位;
下間距
padding-botton:單位;
左間距
padding-left:單位;
右間距
padding-right:單位;
```
padding使用時會將物件本身稱撐大
```CSS=
box-sizing: border-box; 重新計算空間大小
```
##### margin
外間距
```CSS=
上間距
margin-top:單位;
下間距
margin-botton:單位;
左間距
margin-left:單位;
右間距
margin-right:單位;
```
##### margin問題
margin上下會穿透父層
解決方法
- 父層用padding
- 子層有float就不會有這問題
- 父層有border就不會有這問題
理想
<img src="https://i.imgur.com/HdT8HFY.png" height=300px>
實際
<img src="https://i.imgur.com/8d5CMas.png" height=300px>
padding及margin 均可選擇輸入1~4項數值以下以(padding)為例
```CSS=
1項
padding:四邊間距;
2項
padding:上 下;
3項
padding:上 左右 下;
4項
padding:上 右 下 左;
```
常用水平至中`margin:0 tuto;`
---
## 顯示效果
### flost
CSS2主流排版
```CSS=
漂浮
flost:right; 浮在右邊
flost:left; 浮在左邊
```
### display
只占用所需空間
無法設定高
自動換行
```CSS=
強制切換成行內元素
display:inline;
```
預設寬為100%/auto
可設定寬高
不會自動換行
```CSS=
強制切換成區塊元素
display:block
```
只占用所需空間
可設定寬高
自動換行
```CSS=
強制切換成行內區塊元素
display:inline-block
```
### flex
CSS3主流排版
flex(預設順序 主:由左到右 次:由上而下)
```CSS=
欲使flex首先須要將須排版物件的父層設定為
display:flex
```
### grid
CSS3的新型排版
---
## 定位
```CSS=
固定定位(螢幕開始算)
固定在最上面(蓋在最上面獨立塗層)
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
```CSS=
<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
```CSS=
.A{
A類的CSS內容
}
.B{
B類的CSS內容
}
```
id分類(不可重複)
.html
```CSS=
<p id="A1">A1</p>
<p id="A2">A2</p>
<p id="A3">A3</p>
```
.css
```CSS=
#A1{
id:A1 的CSS內容
}
#A2{
id:A2 的CSS內容
}
#A3{
id:A3 的CSS內容
}
```
---
## 動畫
```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](https://www.w3schools.com/js/)
## JavaScript基本寫法
直接寫在body
```HTML=
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"></meta>
<title>標題</title>
</head>
<body>
<script>
JavaScript內容
</script>
</body>
</html>
```
引入檔案
```HTML=
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"></meta>
<title>標題</title>
</head>
<body>
<script src="Javascript檔名.js"></script>
</body>
</html>
```
---
## 基本功能
在html裡面寫東西
```javascript=
document.write("內容");
```
註解
```javascript=
//註解
/*註解
註解*/
```
---
## 基本資料型態&變數
字串(string)
```javascript=
"字串"
```
數值(Number)
```javascript=
520
```
布林值(Boolean)
```javascript=
true
false
```
變數宣告
>只能用 英文 數字 & _
>開頭不能用數字
```javascript=
var 變數名="字串";
var 變數名=520;
var 變數名=true;
```
---
## ==字串==
字串連接
```javascript=
document.write("AB"+"CD"+"EF");
```
>輸出結果: ABCDEF
跳脫
```javascript=
document.write(" \" ");
```
>輸出: "
字串長度
```javascript=
var TXT="Hello"
document.write(TXT.length);
```
>輸出: 5
全轉大寫
```javascript=
document.write(TXT.toUpperCase());
```
>輸出: HELLO
全轉小寫
```javascript=
document.write(TXT.toLowerCase());
```
>輸出: hello
只回傳第N個的字元(第一個為0)
```javascript=
document.write(TXT.charAt(1));
```
>輸出: e
回傳所搜尋字元的位置代號(沒有會回復-1)(重複則是回傳最靠前)
```javascript=
document.write(TXT.indexOf(o));
```
>輸出: 4
回傳所指定區間的字串(尾數為最後一個字號碼+1)
```javascript=
document.write(TXT.substring(1,4));
```
>輸出: ell
---
## 數字
加
```javascript=
document.write(1+2);
```
>輸出: 3
減
```javascript=
document.write(5-3);
```
>輸出: 2
乘
```javascript=
document.write(4*5);
```
>輸出: 20
除
```javascript=
document.write(8/2);
```
>輸出: 4
餘數
```javascript=
document.write(5%3);
```
>輸出: 2
絕對值
```javascript=
document.write(Math.abs(-10));
```
>輸出: 10
取最大數
```javascript=
document.write(Math.max(2,-3,0,7,1));
```
>輸出: 7
取最小數
```javascript=
document.write(Math.min(2,-3,0,7,1));
```
>輸出: -3
四捨五入
```javascript=
document.write(Math.round(2.5));
```
>輸出: 3
次方
```javascript=
document.write(Math.pow(2,3));
//也可以
document.write(2**3);
```
>輸出:8
開根號
```javascript=
document.write(Math.sqrt(9));
//也可以
document.write(9**0.5);
```
>輸出: 3
隨機數(1~10)
```javascript=
document.write(Math.random());
```
>輸出: 0.5536575061960332
加一
```javascript=
var num=5
num++
```
減一
```javascript=
var num=5
num--
```
強轉格式為整數(int)
```javascript=
num = parseInt(num);
```
強轉格式為浮點數(float)
```javascript=
num = parseFloat(num);
```
---
## 彈窗
彈窗
```javascript=
alert("你好");
```
>畫面彈出:你好
\n可以換行
```javascript=
alert("A\nB\nC");
```
>畫面彈出: A
>畫面彈出: B
>畫面彈出: C
彈窗輸入
```javascript=
var str1 = prompt("輸入一串文字");
document.write("你剛剛輸入"+str1);
```
>輸入: WOW
>>輸出: 你剛剛輸入WOW
## if(判斷式)
判斷正負
```javascript=
var num=prompt("輸入一個數字");
if(num>0)
{
document.write("你輸入的是正數");
}
else if(num<0)
{
document.write("你輸入的是負數");
}
else
{
document.write("你輸入的是0");
}
```
>輸入: 9
>>輸出: 你輸入的是正數
>輸入: -3
>>輸出: 你輸入的是負數
>輸入: 0
>>輸出: 你輸入的是0
且(AND)
```javascript=
var n1=prompt("輸入一個數字");
var n2=prompt("輸入一個數字");
if(n1>0 && n2>0)
{
document.write("你輸入的都是正數");
}
```
>輸入: 5
>輸入: 4
>>輸出: 你輸入的都是正數
或(OR)
```javascript=
var n1=prompt("輸入一個數字");
var n2=prompt("輸入一個數字");
if(n1>0 || n2>0)
{
document.write("你輸入的至少一個是正數");
}
```
>輸入: -6
>輸入: 7
>>輸出: 你輸入的至少一個是正數
不是(NOT)
```javascript=
var b1=false;
if(!b1)
{
document.write("b1不是true");
}
```
>輸入: b1不是true
---
## 迴圈
for(先判斷後執行)
```javascript=
for(i=1;i<=3;i++)
{
document.write(i);
document.write(<br/>);
}
```
while(先判斷後執行)
```javascript=
var i=1;
while(i<=3){
document.write(i);
document.write(<br/>);
i++;
}
```javascript=
>輸出:1
>輸出:2
>輸出:3
```
do while(先執行後判斷)
```javascript=
var i=4;
do{
document.write(i);
document.write(<br/>);
i++;
}while(i<=3)
```
>輸出: 4
---
## 陣列(array)
宣告陣列
```javascript=
var array1 = [4,6,7,1];
document.write(array1);
document.write(array1[2]);
```
>輸出: 4, 6, 7, 1
>輸出: 7
修改陣列
```javascript=
array[0] = 0;
document.write(array);
```
>輸出: 0, 6, 7, 1
陣列長度
```javascript=
document.write(array.length);
```
>輸出: 4
---
## 函式(function)
印出傳入內容的函式
```javascript=
function pr(content)
{
document.write(content);
}
//content為變數名
pr("測試123")
```
>輸出: 測試123
加法函式
```javascript=
function add(num1,num2)
{
return num1+num2;
}
//content為變數名
document.write(add(13,24));
```
>輸出: 37
---
## 物件(object)
```javascript=
var obj={
str:"字串",
int:10,
bool:true
};
document.write(obj.str);
document.write(obj.int);
document.write(obj.bool);
```
>輸出: 字串
>輸出: 10
>輸出: true
裡面也可以塞函式
```javascript=
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
```javascript=
obj.pr(obj.cut(7,2));
```
>輸出: 2
也可以物件裡面放物件套娃(不示範了自己玩)
順帶一提陣列裡免也可以塞物件
class(建立物件模板)
```javascript=
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;
}
}
```
可按照模板建立物件
```javascript=
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
```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>
```
原本樣式:
><h6>AA</h6>
><h6>BB</h6>
><a href="https://duckduckgo.com/" id="C">CC</a>
javascript
```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樣式:
><h6>A1</h6>
><h6 style="background-color:red">BB</h6>
><a href="https://google.com/" id="C">CC</a>
## 事件監聽器
方法1
HTML
```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
```javascript=
var i=0;
function BB1(B1)
{
i++;
B1.innerText=(i);
}
//i+1
//修改按鈕文字成i
```
方法2
HTML
```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
```javascript=
var BB=document.getElementById("BB");
var i=0;
BB.addEventListener("click",function()
{
i++;
BB.innerText=(i);
})
//click為按鈕按下時觸發
//i+1
//修改按鈕文字成i
```
>效果為做出一個按一下+1數字的按鈕
HTML
```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
```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
```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
```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即可出現
```html=
<!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`
```html=
<div id="test"></div>
```
`div.test`
```html=
<div class="test"></div>
```
### 節點
`>`子節點
`+`兄弟節點
`^`父節點
子節點範例:
`div>ul>li>p`
```html=
<div>
<ul>
<li>
<p></p>
</li>
</ul>
</div>
```
兄弟節點範例:
`div+ul+p`
```html=
<div></div>
<ul></ul>
<p></p>
```
父節點範例:
`div>ul>li^div`
```html=
<div>
<ul>
<li></li>
</ul>
<div></div>
</div>
```
### 重複
標籤名*數量
`div*5`
```html=
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
```
### 分組
用()進行分組()內為獨立模塊 內外互不干擾
`div>(ul>li>a)+div>p`
```html=
<div>
<ul>
<li><a href=""></a></li>
</ul>
<div>
<p></p>
</div>
</div>
```
### 屬性
[]內為屬性不停屬性用空格區分即可
`a[href='###' name='nA']`
```html=
<a href="###" name="nA"></a>
```
編號指令`$`
$會根據數量遞增
`ul>li.test$*3`
```html=
<ul>
<li class="test1"></li>
<li class="test2"></li>
<li class="test3"></li>
</ul>
```
>一個$代表一個位數
若想要自定義遞增初始數則使用$@初始值*數量
`ul>li.test$@5*3`
```html=
<ul>
<li class="test5"></li>
<li class="test6"></li>
<li class="test7"></li>
</ul>
```
### 內文
{}內為內文
`div>p.test${內文$}*3`
```html=
<div>
<p class="test1">內文1</p>
<p class="test2">內文2</p>
<p class="test3">內文3</p>
</div>
```
### 預設指令
預設直接輸入
`#test`
`.test`
```html=
<div id="test"></div>
<div class="test"></div>
```
在`ul`和`ol`中使用`.test`
`ul>.test$*3`
```html=
<ul>
<li class="test1"></li>
<li class="test2"></li>
<li class="test3"></li>
</ul>
```
在`select`中使用`.test`
`select>.test$*3`
```html=
<select name="" id="">
<option class="test1"></option>
<option class="test2"></option>
<option class="test3"></option>
</select>
```
諸如此類
tr：可在 table、tbody、thead 和 tfoot 中使用
td：可在 tr 中使用
Sign in with Wallet
Connect another wallet