---
# System prepended metadata

title: '**網頁筆記**'

---

# **網頁筆記**
## 改變視窗名稱
1. < head >為網頁設定，裡面放如title、style等等網頁設定有關的東東。
2. < title >為視窗名稱，放在< head >裡面。
3. < style >為定義網頁樣式，放在< head >裡面。

**範例：**
```html=
<html>
    <head>
        <title>21137陳芷芸</title>
    </head>
</html>
```
**範例輸出結果：網頁視窗名稱改變。**
![](https://i.imgur.com/6Y7A4oo.png)


## 文字相關
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>
```

**範例輸出結果：**
    
![](https://i.imgur.com/U9HfcOV.png)

## 列表相關：
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則將右邊的格子併吞了。**


![](https://i.imgur.com/1MCDTP6.png)

## 圖片相關：
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)(紅色)**

色相圖：
![](https://i.imgur.com/H3JQyKn.png)
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參考圖
![](https://i.imgur.com/3f2pnTI.png)


## 變形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。








