# 基礎網頁設計
## HTML
### 寫網頁之前的準備
1. 啟動xampp
2. 開啟網頁→開發人員工具(Ctrl + Shift + I) → Network → ✔ Disable Cache
3. 安裝jQuery Code Snippets
4. 在<head>標籤中新增
```html
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
```
---
### 段落(Paragraph)
<p>這是第一個段落</p>
<p>這是第二個段落</p>
```html=+
<p>這是第一個段落</p>
<p>這是第二個段落</p>
```
---
### 清單(List)
<table>
<tr>
<td>
<p>ol</p>
<ol>
<li>line1</li>
<li>line2</li>
<li>line3</li>
</ol>
</td>
<td>
<p>ul</p>
<ul>
<li>line4</li>
<li>line5</li>
<li>line6</li>
</ul>
</td>
</tr>
</table>
```html=+
<ol>
<li>line1</li>
<li>line2</li>
<li>line3</li>
</ol>
<ul>
<li>line4</li>
<li>line5</li>
<li>line6</li>
</ul>
```
---
### 超連結(Link)
> <a href="http://www.google.com">連到Google連結</a>
```html=+
<a href="http://www.google.com">連到Google連結</a>
```
---
### 多媒體(Multimedia)
#### 圖片
<table>
<tr><td>:D</td></tr>
</table>
```html=+
//<img src="檔案路徑或網址(URL)">
<img src="folder/fileName.png" width="80px" height="80px">
```
#### 音樂
<table>
<tr><td>:D</td></tr>
</table>
```html=+
<audio src="folder/fileName.mp3"></audio>
```
#### 影片
<table>
<tr><td>:D</td></tr>
</table>
```html=+
<video src="folder/fileName.mp4"></video>
```
---
### 表格(Table)
#### 建立表格
<table border="0"> //border是設定邊框粗度, 預設為0
<caption>這是一個表格</caption> //設定表格標題
<tr>
<td>r1, c1</td><td>r1, c2</td><td>r1, c3</td>
</tr>
<tr>
<td>r2, c1</td><td>r2, c2</td><td>r2, c3</td>
</tr>
</table>
```html=+
<table border="0"> //border是設定邊框粗度, 預設為0
<caption>這是一個表格</caption>
<tr>
<td>r1, c1</td><td>r1, c2</td><td>r1, c3</td>
</tr>
<tr>
<td>r2, c1</td><td>r2, c2</td><td>r2, c3</td>
</tr>
</table>
```
#### 多欄合併
<table>
<tr>
<td colspan="2">r1, c1</td><td>r1, c3</td>
</tr>
<tr>
<td>r2, c1</td><td>r2, c2</td><td>r2, c3</td>
</tr>
</table>
```html=+
<table>
<tr>
<td colspan="2">r1, c1</td><td>r1, c3</td>
</tr>
<tr>
<td>r2, c1</td><td>r2, c2</td><td>r2, c3</td>
</tr>
</table>
```
#### 多列合併
<table>
<tr>
<td rowspan="2">r1, c1</td><td>r1, c2</td><td>r1, c3</td>
</tr>
<tr>
<td>r2, c2</td><td>r2, c3</td>
</tr>
</table>
```html=+
<table>
<tr>
<td rowspan="2">r1, c1</td><td>r1, c2</td><td>r1, c3</td>
</tr>
<tr>
<td>r2, c2</td><td>r2, c3</td>
</tr>
</table>
```
---
## CSS
### 文字樣式
#### 文字顏色
```=+
color: red; //顏色名稱
color: #FF0000; //十六進位碼
color: RGB(255, 0, 0); //RGB
```
#### 字型
```=+
font-family: "標楷體";
font-size: 20px; //單位: cm, mm, px, pt, em, %
font-style: normal/italic/oblique;
font-weight: normal/bold/bolder/lighter;
... :O
```
### 選擇器
### 行內宣告
### 內嵌宣告
### 外部樣式檔
## JavaScript
延伸閱讀：[JavaScript教學，給新手的入門指南](https://javascript.alphacamp.co/js-introductory-core-concepts.html?_ga=2.143247293.986243487.1607224484-1881511971.1606309233)
```python=
city = {"台北市": 1, "新北市": 2, "桃園市": 3, "新竹市": 4, "台南市": 5, "高雄市": 6}
print()
print("========== 1.空氣品質(dict) ==========")
inVal = input()
if inVal in city:
print(inVal, "PM2.5 空氣品質為", city[inVal])
else:
print(inVal, "查無資料")
print()
print("========== 2.空氣品質(list) ==========")
cityList = list(city.items())
inVal = input()
check = False
for i in cityList:
if inVal == i[0]:
print(inVal,"PM2.5 空氣品質為", i[1])
check = True
if check == False: print(inVal, "查無資料")
print()
print("========== 3.生肖個性 ==========")
animal = {"鼠": "123", "牛": "456", "虎": "789"}
for key, value in animal.items():
print(key,"性格是", value)
print()
print("========== 1.輸入英文句子 ==========")
english = input()
english = english.strip() #去除前後空白
english = english.strip(".") #去除前後句點
english = english.split() #分割句子
english.reverse() #反轉句子
print(english)
print()
print("========== 2.及格的人 ==========")
students = {"a", "b", "c", "d", "e"}
englishPass = {"c", "d", "e"}
mathPass = {"a", "b", "c"}
print("All Pass:", englishPass & mathPass)
print("Math Fail:", students - mathPass)
print("English Pass and Math Fail:", (students - mathPass) & englishPass)
import re
print()
print("========== 3.不重複的字 ==========")
poem = "春眠不覺曉，處處聞啼鳥。夜來風雨聲，花落知多少。"
poem = re.findall("[\u4e00-\u9fa5]", poem) #正則表達式, 只保留中文
print(set(poem))
print()
print("========== 4.共同的字 ==========")
poem1 = "紅豆生南國，春來發幾枝？願君多采擷，此物最相思。"
poem1 = re.findall("[\u4e00-\u9fa5]", poem1) #正則表達式, 只保留中文
poem2 = "春眠不覺曉，處處聞啼鳥。夜來風雨聲，花落知多少。"
poem2 = re.findall("[\u4e00-\u9fa5]", poem2) #正則表達式, 只保留中文
print(set(poem1) & set(poem2))
print()
print("========== 5.電子郵件 ==========")
email = dict()
for i in range(3):
email.setdefault(input("輸入姓名："), input("輸入電子郵件："))
print(email.get(input("查詢："), "找不到"))
```
Sign in with Wallet
Connect another wallet