# 筆記
[toc]
### HTML
* 表格
| tr1,th1 | tr1,th2 | tr1,th3 |
| ------- | ------- | ------- |
| tr2,td1 | tr2,td2 | tr2,td3 |
| tr3,td1 | tr3,td2 | tr3,td3 |
```
<table border="1">
<tr>
<th>
tr1,th1
</th>
<th>
tr1,th2
</th>
<th>
tr1,th3
</th>
</tr>
<tr>
<td>
tr2,td1
</td>
<td>
tr2,td2
</td>
<td>
tr2,td3
</td>
</tr>
<tr>
<td>
tr3,td1
</td>
<td>
tr3,td2
</td>
<td>
tr3,td3
</td>
</tr>
</table>
```
* 超連結
[YouTube](https://www.youtube.com/)
```
//href指定連結所指向的網頁的URL
<a href="http://www.youtube.com">超連結</a> //顯示文字
// 要在新視窗開啟超連結就加 target="_blank"
<a href="http://www.youtune.com"><img src="front1.png"/></a> //顯示圖片
<a href="#" onclick="abc()">文字</a> //點擊文字呼叫js函式
```
* 同一頁內超連結
<a href="#HTML">HTML</a>
```
<a href="#abc">HTML</a> //點擊這裡
<h3 id="abc">HTML</h3> //跳到這裡
```
* 按鈕
```
<input type="button" value="buttonname" onclick="function()"/>
// 添加一個按鈕，點擊呼叫js函式
<input type="image" src="button.png" onClick="functionfunction()"/>
// 添加一個圖片按鈕，點擊呼叫js函式
```
* 註解
```
<!-- 註解 -->
```
* 換行
```
<br> //換一行
<p> //換兩行
```
* 段落
```
<p>
段落
</p>
```
* 格線
```
<hr>
```
* 添加
```
<input type="blank"/>
//blank代換成要添加的格式
//比如blank → text 表示添加一個文字輸入欄
```
* 插入圖片
```
//src指定了要顯示的圖像路徑
//width和height指定了圖片的寬和長
//alt為圖像提供了一个備用文本
<img src="myPic.jpg" width="120" height="60"/>
//width和height都不寫 → 原圖大小
//只寫width → 依原圖比例和width數值調整height
//只寫height → 依原圖比例和height數值調整width
//都寫 → 依width和height的數值調整圖片大小及比例
```
---
### CSS
* CSS樣式使用方法
1. 使用 class 和 id 對應 CSS 樣式
在網頁的<head>標籤中添加以下敘述以定義樣式：
```
<style type="text/css">
redtext {color: red;}
bluetext {color: blue;} //樣式名稱 {屬性: 值}
</style>
<p class="redtext">hello</p> //對應redtext開頭的樣式
<p id="bluetext">world</p> //對應bluetext開頭的樣式
//在一個頁面中，同一個class可多次使用，但同一個id只能使用一次
2. 使用外部 CSS 樣式
新增一個"text.css"
連結外部CSS樣式在head中
`<link rel="stylesheet" type="text/css" href="test.css">`
3. 直接套用 CSS 樣式 (不需事先定義)
`<p style="color: blue;">hello</p>`
* 設定填充
```
padding-top:25px; //上內邊距
padding-bottom:25px; //下內邊距
padding-right:50px; //右內邊距
padding-left:50px; //左內邊距
```
```
padding:25px 50px 75px 100px; //上 右 下 左
padding:25px 50px 75px; //上 左右 下
padding:25px 50px; //上下 左右
padding:25px; //上下左右
```
* 設定外邊距
```
margin-top:100px; //上外邊距
margin-bottom:100px; //下外邊距
margin-right:50px; //右外邊距
margin-left:50px; //左外邊距
```
```
margin:25px 50px 75px 100px; //上 右 下 左
margin:25px 50px 75px; //上 左右 下
margin:25px 50px; //上下 左右
margin:25px; //上下左右
```
---
### JavaScript
* 函式
```
function f()
{
// 執行程式碼
}
```
* 判斷
```
if (condition1)
{
//當condition1為true時執行的程式碼
}
else if (condition2)
{
//當condition2為true時執行的程式碼
}
else
{
//當condition1和condition2皆為false時執行的程式碼
}
```
* 迴圈
```
for (statement1; statement2; statement3)
{
當statement2為true時執行的程式碼
}
//statement1 程式碼開始前執行
//statement2 定義執行循環程式碼的條件
//statement3 在循環程式碼執行後執行
```
* 字串
```
//儲存字串可用單引或雙引號
var carname = "character ";
var carname = 'character ';
//可使用索引位置來訪問字串中的每個字元
var character = carname[7]; //字串的索引從0開始，故7為e
//你可以在字串中使用引號，字串中的引號不要與字串的引號相同
var answer = "It's alright";
var answer = "He is called 'Johnny'";
var answer = 'He is called "Johnny"';
//可在字串添加轉義字元來使用引號
var x = 'It\' s alright';
var y = "He is called \"Johnny\" ";
//可使用length計算字串的長度
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var a = txt.length; //a == 26
```
* 陣列
```
var a=[1, 2, 3, 4, 5]; //宣告陣列a
a.push(6) //把6推入陣列尾端
a.concat([6,7,8]) //將兩陣列連接起來後傳回，但必須注意這並不會改變a的內容
b=a.concat([6,7,8]) //如果想把連接的結果記住，可以塞給某變數，例如b
a.reverse() //將陣列反轉
a.shift() //從陣列頭部取出一個元素
b.slice(2,4) //用slice取出其中第2個到第4個之間的子陣列(這只會傳回 b[2], b[3], 不包含 b[4])(從b[0]開始算)
a.sort() //將a排序(預設為由小到大排列)
```
---
### 資料
[w3schools](https://www.w3schools.com/html/default.asp)
[RUNOOB](https://www.runoob.com/html/html-tutorial.html)
[老師的書籍](https://kinmen6.com/root/%E9%99%B3%E9%8D%BE%E8%AA%A0/%E6%9B%B8%E7%B1%8D/JavaScript/)
###### tags: `網頁設計` `大一下課程`
Google Drive
Gist
Clipboard
Sign in with Wallet
