**網頁設計筆記**

# **網頁設計筆記** ## 前置作業 **設置github與vscode連接** :::spoiler SSH key 去github帳號設定 -> SSH KEY -> vscode打終端機ssh-keygen(產生金鑰)->輸入相關資料 -><br/>複製.pub的金鑰路徑 ->打 type+金鑰路徑(mac是打cat+金鑰路徑)->複製KEY到github->完成 ::: :::spoiler 如何在github clone 專案? ![](https://i.imgur.com/LbHkkBE.png) 複製到vscode開終端機打: ``` git clone +連結 ``` :::danger 注意:要在資料夾的終端機設定才成功，複製ssh才能成功推送至github。 ::: ## HTML基本介紹所有html程式碼開頭`<!DOCTYPE html>` ### 元素 `<html>`:文檔本身 `<head>`:放屬性 `<body>`:內文可見部分 `<a>`:超連結 `<img>`:圖片 `<p>`:段落 `<br>`:換行 `<hr>`:分隔 `<pre>`:定義預先格式化的文本 `<h1-6>`:標題(1-6為大到小) :::danger 注意: 有開始就有結束，例子:`<html> </html>` 而空元素不需用結束標記 ::: ### 屬性 1. href:定義網址 2. src:定義圖像路徑 3. alt:替代圖像的文本 4. style:樣式(顏色大小字體等等) 5. title:工具提示(停留在文字上會有提示框) ### 樣式 `background-color:`背景顏色<br>![](https://i.imgur.com/jA0tutG.png) `color:`文字顏色 `font-family`字體 `font-size`字體大小 `text-align`對齊 ### 文本格式 `<b>`- 加粗字體 `<strong>`- 重要文本 `<i>`- 斜體文字 `<em>`- 強調文字 `<mark>`- 標記文字 `<small>`- 較小的文字 `<del>`- 刪除的文本 `<ins>`- 插入的文字 `<sub>`- 下標文本 `<sup>`- 上標文字 <br>![](https://i.imgur.com/Lfxal0s.png) **註解**不會出現在頁面上![](https://i.imgur.com/7mpvHwI.png) :::success CSS 註解是 `/*文字 */` ::: ### 顏色 **RGB**:`(0~ 255，0~ 255，0~ 255)` **RGBA**:後面的A為透明度(0.0~1.0) **十六進制**:`#rrggbb` (ff~ 00，ff~ 00，ff~ 00) **HSL**(色調，飽和度，亮度):以%表示 **HSLA**:A為透明度 ### 連結設定**連結顏色**:放在`<style>`裡面，`a:`表示虛擬屬性 ![](https://i.imgur.com/lvk8rxA.png) <br> :::danger link:連結本身，visited:拜訪過的，hover:鼠標移到上面時，active:運作中的 ::: 書籤:使用`id`創建書籤(放在那個章節前)，再用`<a href>`指向連接 ![](https://i.imgur.com/gxiZRtB.png) ### 圖標 :::spoiler 形像地圖在`img`標籤後添加`usemap`屬性，添加map元素(裡面放地圖領域跟連結)<br><mark>area</mark>:可點擊區塊(shape形狀 coords:座標 href:連結) <br>形狀:<br> rect- 定義一個矩形區域 circle- 定義一個圓形區域 poly- 定義一個多邊形區域 default- 定義整個區域 ::: :::spoiler 背景圖片 ::: :::spoiler 網頁圖標 ::: ## HTML表格 `<table>`:表格`<tr>`:表格裡面的一個列`<th>`:表格裡面的標題`<td>`:表格欄<br>`padding`:字跟邊框距離`spacing`:邊框間距 `colspan`:該表格佔好幾欄<br>`rowspan`:該表格佔好幾列(皆放在th裡) ### 添加邊框在table,th,td後加上`border`屬性。預設為雙邊框 ### 邊框樣式單邊框:`border-collapse:collapse` 圓弧邊框:`border-radius:像素`省略table可以把表格周圍邊框去掉虛線邊框:用`border-style:`設置 ![](https://i.imgur.com/PltMoD4.png) ### 設置邊框背景顏色在th,td裡添加 ### 表格樣式 1. 分隔線:`border-bottom/top/left/right` 2. 斑馬條紋:使用`nth-child(even/odd)`even為雙數 3. hover:鼠標移到哪會出現顏色 ## HTML列表 `<li>` ### 無序列表用`<ul>`表示，樣式設置:`list-style-type:` (disc/circle/square/none) ### 有序列表用`<ol>`表示，樣式設置:`type:` (1/A/a/I/i) I跟i為羅馬數字 ### 其他 `<dl>`:表示列表，`<dt>`:描述詞，`<dd>`:解釋 ## HTML表單`<form>` ### 元素 * **input** type屬性定義了很多方式: 1. 文本字段:text 2. 單選按鈕:radio 3. 複選:checkbox 4. 提交鍵:submit 5. 按鈕:buttom 6. 密碼:password 7. 重設:reset 8. 日期:date ![](https://i.imgur.com/HQduhmI.png) * **label** 裡面的for屬性要跟id屬性相同 * **select元素** 為下拉列表，搭配option使用 `<multiple>`屬性允許用戶選擇多個值<br>`<textarea>`定義了一個多行輸入字段（文本區域） `<datalist>`:在更多選項時可以用 ## CSS選擇器用於定義網頁的樣式通常語法:`元素 {屬性:值}`如果有多個CSS樣式要用;分隔在HTML`<style>`裡呈現 ### 元素選擇器根據元素名稱選擇HTML元素 ### id選擇器設定id以套用到唯一一個元素 (不得重複) ``` #自訂名稱 { text-align: center; color: red; } ``` 呼叫該CSS樣式要在該片段前面+ `id="名稱"` ### class選擇器 ``` .+類名(不能以數字開頭) ``` 如果.前面有元素:那個元素裡有提到class的就要套用CSS 如果沒有指定元素:只要有提到class就要套用 ### 通用選擇器通用選擇器 () 選擇頁面上的所有 HTML 元素。 ### 分組選擇器以元素選擇器的原理來延伸當多組元素想要套用同個設定時以逗號分隔。 ## 添加CSS ### 外部樣式在HTML頁面的 `<head>` 部分的 `<link>` 元素中定義，引用外部文件。 ``` <head> <link rel="stylesheet" href=“資料夾名稱/檔案名稱.css”> </head> ``` CSS文件則會在這: ![](https://i.imgur.com/zxwmMJb.png) ### 內部內部樣式在 `<style>` 元素內定義，在`head`部分內。 ### 內聯單個元素應用獨特的樣式 :::warning 如果重複定義的話，選擇順序為:內聯外部內部瀏覽器 ::: ## CSS背景 background-color background-image background-repeat:背景重複如果要水平重複:`background-repeat: repeat-x;` 垂直為y，不重複:`background-repeat: no-repeat;` background-attachment:決定捲動頁面時圖片要不要變動(fixed/scroll) background-position:指定位置 background（速記屬性):可以全部併在一起不用寫太多行關於背景的設定以空格表示。 ## CSS布局 ![](https://i.imgur.com/AbUYP2J.png) ### border `border-color`屬性可以具有一到四個值（用於上邊框、右邊框、下邊框和左邊框）邊框圓角:`border-radius` 值為px ### padding 可以指定單邊屬性，如沒特別表示四個值順序為:上右下左，三個值為:上兩側下，兩個為上下+左右。 ### outline 繪製在元素的border之外，並且可能與其他內容重疊，元素的總寬度和高度不受輪廓寬度的影響。 `outline-offset`:元素的輪廓和邊緣/邊框之間添加空間。元素與其輪廓之間的空間是透明的。 ![](https://i.imgur.com/kBgca1i.png) :::danger height和width屬性不包括填充、邊框或邊距！他們設置元素的填充、邊框和邊距內區域的高度/寬度！全部套用的話在`<div>`裡 ::: ##