--- 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 進階版的感覺]