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=""> `