# **網頁筆記**
## 改變視窗名稱
1. < head >為網頁設定，裡面放如title、style等等網頁設定有關的東東。
2. < title >為視窗名稱，放在< head >裡面。
3. < style >為定義網頁樣式，放在< head >裡面。
**範例：**
```html=
<html>
<head>
<title>21137陳芷芸</title>
</head>
</html>
```
**範例輸出結果：網頁視窗名稱改變。**
## 文字相關
1. < b >為粗體字。
2. < i >為斜體字。
3. < u >為字加底線。
4. < sup >為上標。
5. < sub >為下標。
**範例：**
```html=
<html>
<body>
<b>粗體字</b>
<i>斜體字</i>
<u></u>
x<sup>2</sup>y<sup>3</sup>
CO<sub>2</sub>
</body>
<html>
```
**範例輸出結果：**
## 列表相關：
1. 無序列表為< ul >，內包著< li >，< li >內寫內容。
2. 有序列表為< ol >，內包著< li >，< li >內寫內容。
**範例：**
```html=
<html>
<body>
<ul>
<li>內容1</li>
<li>內容2</li>
<li>內容3</li>
</ul>
<ol>
<li>內容4</li>
<li>內容5</li>
<li>內容6</li>
</ol>
</body>
</html>
```
**範例輸出結果：**
<html>
<body>
<ul>
<li>內容1</li>
<li>內容2</li>
<li>內容3</li>
</ul>
<ol>
<li>內容4</li>
<li>內容5</li>
<li>內容6</li>
</ol>
</body>
</html>
## 表格相關：
1. < table >為表格
2. border 為表格框線粗細，例如寫< table border=1>就是設定框線粗細為1。
3. cellspacing 為表格之間間距，例如寫< table cellspacing=0>就是設定表格間間距為0。
4. cellpadding 為表格空間，例如寫< table cellpadding=4>就是設定表格空間為4。
5. < tr >為一行，寫在< table >內。
6. < td >為一列，寫在< table >內。
7. rowspan 可將一列中的多個表格變為一個。
8. colspan 可將一行中的多個表格變為一個。
9.
**範例：**
```html=
<html>
<body>
<table border=1 cellspacing=0 cellpadding=4>
<tr><td>內容1</td><td>內容2</td></tr>
<tr><td rowspan=2>內容3</td><td>內容4</td></tr>
<tr><td>內容5</td></tr>
<tr><td colspan=2>內容6</td></tr>
</table>
</body>
</html>
```
**範例輸出結果：內容3將下面一格併吞了，而內容6則將右邊的格子併吞了。**
## 圖片相關：
1. < img >為圖片，不須成對。
2. src為圖片來源，用法為< img src="圖片檔名or網址">。
3. onmouseover跟onmouseout為當滑鼠游標放在圖上和移離圖上，圖片會變你設定的那張，寫法看範例。
**範例1：**
```html=
<html>
<body>
<img src="圖片檔名or網址">
</body>
</html>
```
**範例2：注意onmouseover跟onmouseout要記得分號。**
```html=
<html>
<body>
<img src="滑鼠未放上時圖片檔名or網址" onmouseover="src='滑鼠放上圖後顯示之圖片檔名or網址';" onmouseout="src='滑鼠未放上時圖片檔名or網址';">
</body>
</html>
```
**不知道為什麼輸出不出來，但我試過可以用，注意圖片網址一定要是有效網址不然圖會跑不出來，可惜不能RICKROLL你們QAQ**
## 色塊相關：
1. div為區塊標籤
2. background為背景，寫法為 background:顏色。
3. color為顏色，color寫法有：
**英文單字，例：skyblue、yellow...
色碼#000000，每個數字可填0~f，例：#ffff00(黃色)
rgb(0,0,0)，每個數字可填0~255，例：rgb(255,0,0)(紅色)
hsl(色相,彩度,亮度)，色相填0 ~ 360，可參考色相圖，彩度和亮度填0 ~ 100%，例：hsl(0,100%,60%)(紅色)
rgba(0,0,0,可見度)，可見度填0.0~1.0，例：rgba(255,0,0,1.0)(紅色)
hsla(色相,彩度,亮度,可見度)，可見度同上，例：hsla(0,100%,60%,1.0)(紅色)**
色相圖：
4. id為命名，簡單說就是給這個物件一個專屬的名稱，而這個名稱是獨一無二的，用法為id="名稱"，名稱開頭一定為英文。
5. class同上，但比較像是在給物件分門別類。
**範例：**
```html=
<html>
<head>
<style>
div{
width:300px;
height:100px;
}
#d1{
background:hsl(0,100%,60%);
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
```
**範例輸出結果：寬300px，高100px的色塊**
<html>
<head>
<style>
#d1{
background:hsl(0,100%,60%);
width:300px;
height:100px;
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
## 超連結
1. 超連結用法為：< a href="網址" target="加target參數">< img src="圖片網址" style="圖片大小">名稱< / a >
**target參數：**
* "_self" 原網頁開啟
* "_blank" 新分頁開啟
* "_parent" 不常用我也不知道是啥
* "_top" 同上
**範例：**
```html=
<html>
<body>
<a href="網址" target="_self">原網頁開啟範例</a>
<a href="網址" target="_blank">新分頁開啟範例</a>
<a href="網址" target="_blank"><img src="圖片網址" style="圖片大小"></a>
</body>
</html>
```
**輸出：**
<html>
<body>
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_self">原網頁開啟範例</a>
<br>
<a href="https://www.youtube.com/watch?v=C-sAGnIxTWc" target="_blank">新分頁開啟範例</a>
<br>
<a href="https://www.youtube.com/watch?v=PbOJVeq2dcw" target="_blank"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRfCimjtARIzZSAu9bmhnUGM7KoLANuVXDtoQ&usqp=CAU"></a>
</body>
</html>
## 邊框border
**border為邊框，可以設定邊框的寬度、樣式、顏色，寫法為：border: 粗細 樣式 顏色**
邊框樣式有：
1. solid 實線
2. dashed 虛線
3. dotted 圓點虛線
4. double 雙線
**範例一：**
```html=
<html>
<body>
<div style="border:6px solid gold">測試'w'</div>
</body>
</html>
```
**輸出：**
<html>
<body>
<div style="border:6px solid gold">測試'w'</div>
</body>
</html>
<br>
**範例二：**
```html=
<html>
<head>
<style>
#d2{
width:200px;
height:100px;
border:5px double gold;
border-style:solid dashed dotted double;
/*實線 虛線 圓形虛線 雙線 位置分別為上左下右*/
border-color:red yellow green blue;
/*紅 黃 綠 藍 位置分別為上左下右*/
}
</style>
</head>
<body>
<div id="d2">測試'w'</div>
</body>
</html>
```
**輸出：**
<html>
<head>
<style>
#d2{
width:200px;
height:100px;
border:5px double gold;
border-style:solid dashed dotted double;
border-color:red yellow green blue;
}
</style>
</head>
<body>
<div id="d2">測試'w'</div>
</body>
</html>
<br>
**範例三：transparent是無色**
```html=
<html>
<head>
<style>
#d3{
width:200px;
height:100px;
border:50px solid red;
border-left-color:transparent;
border-right-color:transparent;
border-top-color:transparent;
}
</style>
</head>
<body>
<div id="d3"></div>
</body>
</html>
```
**輸出：**
<html>
<head>
<style>
#d3{
width:200px;
height:100px;
border:50px solid red;
border-left-color:transparent;
border-right-color:transparent;
border-top-color:transparent;
}
</style>
</head>
<body>
<div id="d3"></div>
</body>
</html>
<br>
## 邊距padding
**padding為邊距，寫法為：padding: 寬度**
**範例：**
```html=
<html>
<head>
<style>
#d4{
width:200px;
height:100px;
border:10px solid black;
padding:30px;
}
</style>
</head>
<body>
<div id="d4">測試'w'</div>
</body>
</html>
```
**輸出：**
<html>
<head>
<style>
#d4{
width:200px;
height:100px;
border:10px solid black;
padding:30px;
}
</style>
</head>
<body>
<div id="d4">測試'w'</div>
</body>
</html>
<br>
## 邊界margin
**margin為邊界，寫法為：margin: 寬度**
**範例：**
```html=
<html>
<head>
<style>
#d5{
width:200px;
height:100px;
border:10px solid black;
margin:100px;
}
</style>
</head>
<body>
<div id="d5">測試'w'</div>
</body>
</html>
```
**輸出：**
<html>
<head>
<style>
#d5{
width:200px;
height:100px;
border:10px solid black;
margin:100px;
}
</style>
</head>
<body>
<div id="d5">測試'w'</div>
</body>
</html>
## border、padding、margin參考圖
## 變形transform
**transform為變形，寫法為：transform:transform-function;**
transform-function有:
1. translate(X軸,Y軸) 位移
2. rotate(角度) 旋轉
3. scale(X軸倍率,Y軸倍率) 放大縮小
**範例一：用色塊為例，將色塊X軸向右移200px,Y軸向下50px，注意在網頁中XY軸原點在左上，Y軸向下為正值這點須注意**
```html=
<html>
<head>
<style>
#h1{
width:100px;
height:100px;
background:gold;
transform: translate(200px,50px);
}
</style>
</head>
<body>
<div id="h1"></div>
</body>
</html>
```
**輸出：**
<html>
<head>
<style>
#h1{
width:100px;
height:100px;
background:gold;
transform: translate(200px,50px);
}
</style>
</head>
<body>
<div id="h1"></div>
</body>
</html>
<br><br>
<br><br>
**範例2：順時針旋轉50度。**
```html=
<html>
<head>
<style>
#h2{
width:100px;
height:100px;
background:gold;
border-radius:50% 50% 0 0 ;
/*這邊可設定四個角的弧度 %數越高越圓*/
transform: rotate(50deg);
}
</style>
</head>
<body>
<div id="h2"></div>
</body>
</html>
```
**輸出：**
<html>
<head>
<style>
#h2{
width:100px;
height:100px;
background:gold;
border-radius:50% 50% 0 0 ;
transform: rotate(50deg);
}
</style>
</head>
<body>
<div id="h2"></div>
</body>
</html>
<br>
<br><br><br>
**範例3：縮小成0.5倍。**
```html=
<html>
<head>
<style>
#h3{
width:200px;
height:200px;
background:gold;
transform: scale(0.5,0.5);
}
</style>
</head>
<body>
<div id="h3"></div>
</body>
</html>
```
**輸出：這邊我放了一個未縮小的做比較**
<html>
<head>
<style>
#h3{
width:200px;
height:200px;
background:gold;
transform: scale(0.5,0.5);
}
</style>
</head>
<body>
<div id="h3">縮小的</div>
</body>
</html>
<html>
<head>
<style>
#h4{
width:200px;
height:200px;
background:gold;
}
</style>
</head>
<body>
<div id="h4">未縮小的</div>
</body>
</html>
## 轉場transition
因為這個我也不是很會，我就直接丟別人寫好的[點擊這裡](https://selflearningsuccess.com/css-transition/)
**範例：**
```html=
<html>
<head>
<style>
#h4{
width:300px;
transition:transform 20s;/*這邊我先將圖片轉的時間設定為20秒*/
}
#h4:hover{
transform:rotate(3600deg);/*這邊設定轉幾度。EX.90deg就是1/4圈*/
}
</style>
</head>
<body>
<img id="h4" src="https://i.imgur.com/drFzeql.png">
</body>
</html>
```
**輸出：**
<html>
<head>
<style>
#h5{
width:300px;
transition:transform 20s;
}
#h5:hover{
transform:rotate(3600deg);
}
</style>
</head>
<body>
<img id="h5" src="https://i.imgur.com/drFzeql.png">
</body>
</html>
## 按鈕button
button為按鈕
button 寫法看範例1
**範例1：**
```html=
<html>
<body>
<button>按我</button>
</body>
</html>
```
然後你就成功叫出一個按鈕了，但你會發現按鈕按下去沒反應，這是因為我們沒有寫出按鈕按下去後要做什麼，所以必須運用JavaScript來撰寫一個函式讓按鈕產生反應，下面我們看範例2。
Sign in with Wallet
Connect another wallet