---
# System prepended metadata

title: 5xRuby網頁前端設計 HTML 課堂筆記
tags: [5xRuby, css, html]

---


5xRuby網頁前端設計 HTML 課堂筆記
===
###### tags: `5xRuby` `html`
(上課時間：20191124)
☆ [CSScode-Amos 老師YT頻道](https://www.youtube.com/channel/UCQfjTYYrqxPg5LJmDBUesbQ)
:::info
:bulb: **課後線上學習資源：** 
- [2019年IT鐵人賽-冠軍影片](https://www.youtube.com/playlist?list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre)
- [HTML網頁入門](https://www.youtube.com/playlist?list=PLqivELodHt3gCLT-qGufEO1IIuGwRE8xd)
:::
![](https://i.imgur.com/0PPnrw3.png)

(心智圖使用：Xmind)

HTML 基本觀念
---
- HTML (HyperText  **Markup**  Language)：是一種用於建立網頁的標記語言(非程式語言)，常與CSS、JavaScript一起被眾多網站用於設計網頁。運用**標記**的方式將資訊結構化。 
  - 標記原則：
  1. < > 以角括號作為標籤Tag (Start)  
  2. </ > 斜線作為結束 (End)  
  3. `<p> `為paragraph 段落的縮寫
  4. 標題(Heading)以六個等級做區分 `<h1> ~ <h6>` 

- 一個網頁就是一個純文字的檔案。
- 一個網頁大小會隨著螢幕解析度而改變(比較不會做橫向卷軸)。 
- 標籤：
  A. 單對(又可稱「獨立」、「自閉」) 
  B. 成對 (Ex: <head> </head>) [一個標籤可以擁有多個屬性]
  ※ 以 `<p>`標籤為例，可以用「p 標籤」、「p Tag」或是「p Element」來稱之。
  
☆  <!DOCTYPE> 是一個宣告而非一個標籤。你可以把它想作文件類型宣告(DTD)。 用來告知瀏覽器這個文件要用甚麼標準來解讀。 
- 網頁的開始會使用<html> </html>告知一個網頁的開始（視為一份文件），而被文件所包裹的就是內容<head> </head>，稱為網頁的頁首，頁首的內容多數為附加的標記，用於提供給瀏覽器或社群網站看；主要內容(我們看得到的內容)則會使用<body> </body>。



HTML內容物概要
---
中心主題 (Ex:網頁畫面)
- 文字
  * 標題 (以六個等級做區分`<h1>~<h6>`)
  * 內文 (`<p>`) 
  * 清單：
  *項目(符號)：無序清單 unordered list `<ul>`
  *編號(數字)：有序清單ordered list `<ol>`
  *清單項目：list item `<li>`
  *定義清單：清單-definition list `<dl>` 、項目標題-definition term`<dt>`、項目描述-definition description`<dd>`
  * 引用`<blockquote>` (`<cite>`：出自哪裡or誰)  
  * 粗體 ( 當該段文字上很重要時，建議使用`<strong>`來做強調，用於搜尋引擎的最佳化[描述含意]，`<b>`則用於視覺上的表現[外觀描述]) 
  * 斜體(`<em>`[描述含意] `<i>` [外觀描述]) 
  * 超連結 `<a>` [屬性：target="_blank" 另開視窗]
- 區塊
  - 頁首`<header>` 頁尾`<footer>` 
  - 導覽`<nav>` (選單 `<menu>`)
  - 主要的`<main>` 
  - 主文章`<article> `
  - 章節`<section> `
  - 區域`<div> `
  - 區段`<span> `
- 圖片：
  - `<img>` [屬性：src 來源、出處 / alt 替代文字] 
    - 相對路徑： 
    1. src="檔名"  (同一層的狀況)
    2. src="[資料夾名稱]/檔名" (不同層的狀況)
    3. src="/檔名"
    4. src="../[資料夾名稱]/檔名" (..→代表上一層) 
    - 絕對路徑： 
    1. src=" / 檔名 " / →代表從檔案的跟目錄找起
    2. https:// [網址、連結] 
  - *補充*-`<figure>`可放置多張圖片
  - *補充*-`<figcaption>`元素代表了figure元素的一個標題或者說是其相關解釋。 
- 影/音：
  - *補充*-`<video> `：影片格式
  - *補充*-`<audio>`：音訊格式
  - *補充*-`<source>` ：希望`<audio>`和`<video>`指定多個媒體來源時就可使用`<source>`來實現，這樣就能讓瀏覽器找到適合自己的音訊檔了。
- 表單：(多數以input方式填寫資料) 
  - 留言 `<textarea>` 用屬性cols / rows來控制寬高
  - 下拉選單 `<select> / <option>`
  - input：
    - 姓名、驗證碼、帳號、地址 [type="text"(文字欄位)]
    - 密碼 [type="password"]
    - 電話 [type="tel"]
    - 信箱 [type="email"]
    - 上傳檔案 [type="file"]
    - 日期 [type="date"]
    - 時間 [type="time"]
    - 顏色 [type="color"]
    - 按鈕 [type="button"]
    - 送出 [type="submit"]
    - 重新設定 [type="reset"]
    - 搜尋 [type="search"]
    - 區間 [type="range"]
    其他屬性：[min="最小值"] [max="最大值"] [step="1每隔間距"] [value="預設數值"]
    - 方形打勾 checkbox [type="checkbox"]
    - 圓形 radio button [type="radio"]

*屬性[for="OOXX"] 和 [id="OOXX"] 搭配使用：點選文字[label]時可對應到該填選框[input box]。 
*label包input時不可以寫for屬性；但當label 和 input拆開寫時，必須給屬性for和id值。 
*type的屬性差異會顯示在虛擬鍵盤上。 
- 表格  (分成三段   ─ 表頭、表身、表尾)： 
    - `<table>`：屬性[width寬度]、[border邊框]  
(基本的html可以讓表格顯示基本的外觀，但通常會使用CSS來解決) 
    - `<caption>` 表格的標題(通常會出現在整個表格的最上方) 
    - `<tr>`：表格規則：先行(row)在列(column) [table row] 
    - `<th>`：表頭 [table head] 
* 加上[scope]是用來告訴瀏覽器該標籤的範圍是欄的標題還是列的標題 
    - `<td>`：存放資料 [table data] 
    - `<thead>` 表頭 
    - `<tbody>` 表身：一個表格只有一個<tbody> 
    - `<tfoot>` 表尾 

*預設值為瀏覽器本身預設的視覺外觀設定。 
*合併儲存格：colspan (column span) / rowspan (row span) 要跨幾欄or列 數字(值)就寫多少 
*在表頭`<th>`中加入屬性 [scope="col"] or [scope="row"]  會讓瀏覽器較容易辨識，有助於 SEO。 

- 功能(與程式相關 賦予網頁的功能)
- SEO [S(搜尋)E(引擎)O(最佳化)
  → 只要搜尋結果排到第二頁被搜尋的次數微乎其微 
  
網頁流程
---
- 視覺設計師(設計網頁畫面)  → 切版(將視覺設計師設計的圖片轉成可以看的網頁[需要使用的工具HTML & CSS→SEO]) → 工程師 

 
網頁編輯器-VSCode
---
[編輯器下載](https://code.visualstudio.com/)
☆ 建議安裝套件及設定： 
1. Live server 
2. Auto Rename Tag：修改HTML/XML tag時，會自動修改相對應的標籤。
3. Fake Image Snippet Collection
4. Chinese  Lorem
5. 設定→輸入emmet tab→勾選 Emmet: Trigger Expansion On Tab 
※ 若要看已安裝那些套件：Extensions→...→Show Installed Extensions 

VSCode 快捷鍵
---
Alt + Z ：切換自動換行
Ctrl + S：自動存檔
Ctrl + N：新增檔案
Ctrl + / ：註解 (網頁前端看不到)
Ctrl + K, M：更改文件類型 (點選視窗右下角"Plain Text"進行切換) 
Ctrl + Shift + P 輸入 Theme ：更換顏色 (Extension 搜尋Theme也可以找到各式主題) 
Ctrl + Shift + P 輸入 Wrap ：
 1.選取"wrap with abbreviation" → 用來包裹選取的範圍
 2.選取"wrap  individual line with abbreviation" → 用來包裹每一行(加上*則可方別包裹每一行)
Shift + Tab：縮排往左 (Tab 縮排往右)
home鍵+左右鍵 / fn + 左右鍵→ 跳到最前面
點選A位置+Shift+B位置：多行選取
! + Tab ：快速建立網頁原始碼 
input:c：可以快速產出 `<input type="checkbox" name="" id=""> `