---
# System prepended metadata

title: DAY 2-2 HTML
tags: [HTML]

---

---
tags: HTML
---
# DAY 2-2 HTML
## HTML 解釋
- Hypertext(超文字)
- Markup(標記)
- Language(語言)
## 第一個HTML網頁製作
- 
  **`<p>`** → paragraph 段落的意思
(維持字體大小&粗細)
  **`<h>`** → heading 標題
(字體自動放大變粗)
- **Object 物件**
  1.屬性(Attributes)
  2.行為(Methods)
#### **- 在HTML裡的標籤都是物件 -**

### 屬性
**EX :**
```
<h1 
     class="heading" 
     style="color: rgb(0, 255, 55);">
```
     
在`<h></h>>`裡加入`class="heading" style="color:選擇顏色"` 就將標題顏色更改
### 行為
**EX :** 
```
<h1 
     class="heading" 
     style="color: rgb(0, 255, 55);" 
     onclick="alert('HI~我是貓熊')">
```

在`<h></h>`裡加入`class="heading" style="color:選擇顏色"` ，再加入`onclick="alert('文字')"` 到網頁點一下標題就會跳出視窗顯示('文字')內所輸入的文字

## HTML skeleton 骨架
- 一定要包含 
1. 頭(head) - 網頁背後設定&編碼
2. 身體(body) - 網頁呈現內容
- `<html lang="zh-Hans">` 意思是此網站語言是繁體中文(zh-Hans)
→ 語言代碼可至**https://www.w3schools.com/tags/ref_language_codes.asp** 查詢

### head內可放的 
[head內可放的內容 參考網站](https://htmlhead.dev)
其中Recommended Minimum是推薦最少要放的東西

#### meta
 定義HTML文件的屬性
##### meta 屬性標籤
**1. charest(character set)**
字的集合 
`<meta charset="UTF-8">`
- utf-8 是一個字的編碼
有輸入utf-8的網頁所有語言都可以顯示出來，因為utf-8包含世界上幾乎所有存在的字，只要輸入utf-8網頁就不會出現亂碼

**2. name=viewport**
```<meta name="viewport" content="width=device-width, initial-scale=1">```
- viewport(視窗)
  意思是網頁的視窗
- content(屬性)
  width(寬度) 
  device-width(裝置寬度)
- 為什麼寬度要設定成裝置寬度？
 A : 因為現在越來越多人在行動裝置上看網頁，網頁的使用者使用的裝置不同，可能會需要依據不同的裝置對網頁做一些調整，所以才要設定成裝置的寬度，這樣不管在什麼裝置上都可以清楚顯示所有內容
- initial(最一開始的)
  scale(有無需要放大或縮小)
  ~ 設定1的話就是不變 ~

**3. name=robots**
`<meta name="robots" content="index, follow">`

輸入此指令可以讓google的收尋引擎可以找到我的網站

**4. name=description**
```
<meta name="description" content="教導大家熊貓基本知識與保護熊貓工作，歡迎捐款">
```
這是給我的網頁一個基本的描述，在網頁中不會顯示出來，但這會在網頁的瀏覽器中用到
→ 在收尋的頁面中顯示的網頁說明

**5. name=auchor**
`<meta name="auchor" content="One one Tsao" />`
此網頁的作者名稱

**meta最上面必需是**
1. `<meta charset="UTF-8">`
2. `<meta name="viewport" content="width=device-width, initial-scale=1">` 
**越早被瀏覽其讀到越好**

### base(基本)
如果想將連結用另一個視窗開啟的話必須在head裡加入base tag 
base內必須要有href或是target
[找資料可參考](https://developer.mozilla.org/zh-CN/)
1. herf
2. target(目標)
   - _self
   在head中加入
   `<base target="_self">`之後在網頁中的超連結會以<font color="#f00">同一頁面覆蓋</font>開啟
   - _blank
   在head中加入
   `<base target="_blank">`之後在網頁中的超連結會以<font color="#f00">另一個新的頁面</font>開啟
   - 假如想將其中幾個連結設為在同一頁面開啟就在連結前加入target="_self"
   EX : 
`<a target="_self" href="https://zh.wikipedia.org/wiki/%E5%A4%A7%E7%86%8A%E7%8C%AB">`


#### title 標題
輸入在 `<title></title>` 之間的文字會出現在網頁最上面
### body內可以放的

- `<h1> ~ <h6>`
越重要的字要放在h1裡面
- `<p>`
- anchor tag (定錨)
建立超連結所使用
  - a href 
  (hypertext referencetl 超文字參考)
  href 是a的一個屬性
## HTML Code 實用工具
- 按下 ! 可快速做出HTML skeleton
- DeskPins 圖釘 把所需的資訊釘在最上層就不用跳來跳去了
- shift + alt + ↓ 可以快速複製到下一行
**EX :** 
abcdefg (按下shift + alt + ↓ )
abcdefg 
abcdefg 
abcdefg 
[有種ctrl C → ctrl V 進階版的感覺]
 


