Web 第十週社課臺中一中電研社 - HackMD

<style> .blue{ color:#4A919E } </style> <h1 style="color: #4A919E">Web 第十週社課</h1> >[name= 張皓凱、林德恩][time= April Fools ,2022 ] ###### tags: `Web` `HTML` `CSS` `前端` `tcirc39th` `社課` `臺中一中電研社` [TOC] <div style="font-size: 30px;color: maroon">麻煩請各位認真聽課，我們段考趕上週講義，段考後又在三天內爆肝出這份講義，希望各位不要一直看手機。</div> --- ## <div class="blue">電研社</div> 社網:[tcirc.tw](https://tcirc.tw) online judge:[judge.tcirc.tw](https://judge.tcirc.tw) IG:[TCIRC_39th](https://www.instagram.com/tcirc_39th) 社課點名表單:[google 表單]() ## 本次社課實作 1. 到[這裡](https://github.com/unichk/tcircWebClass) -> 右邊的Releases -> 2022/4/1 -> Source code (zip) 2. vscode -> 右邊的extention -> 下載live sever、Auto Close Tag、Auto Rename Tag --- ## web ---- ![](https://i.imgur.com/tF79UB4.png) (圖片來源：[angularminds](https://www.angularminds.com/blog/article/top-web-development-stack-for-developers.html)) ---- 開發一個網頁可以包含前端(front-end)、後端(back-end)、資料庫(database)及伺服器(server) * 前端-處理網站的長相 * 後端-處理資料運算 * 資料庫-處存資料 * 伺服器-存放網路伺服器軟體及檔案的電腦，並可以透過URL將內容傳到用戶本學期社課主題為網頁前端，包含HTML、CSS、JavaScript --- ## HTML ---- ### 簡介 > HTML（Hypertext Markup Language），中文全名為「超文字標示語言」，是一種用來組織架構並呈現網頁內容的程式語言。網頁內容的組成，可能包含了段落、清單、圖片或表格...等。 > [來源](https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/HTML_basics) HTML是一種標記語言（markup language），<span style="color:red">不是程式語言</span> ---- ### 語法 HTML是由多個元素所組成，每個元素包含起始標籤(opening tag)、結束標籤(closing tag)、內容(content) ![](https://i.imgur.com/q5aRozu.png) (圖片來源:[mozilla](https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/HTML_basics)) ---- ### 標籤標前決定元素的範圍及種類，範圍為起始標籤到結束標籤，起始標籤寫法為`<標籤名稱>`，結束標籤寫法為`</標籤名稱>`，標籤名稱決定了標籤的種類。起始標籤中可以加入屬性，屬性可以提供更多的資訊常搭配css使用。 ```html= <標籤名稱屬性名稱=屬性內容>內容</標籤名稱> ``` ---- ### 巢狀元素巢狀元素指在元素的內容中含有另一個元素，可以有無限層 ```html= <標籤名稱1 屬性名稱1=屬性內容1> <標籤名稱2 屬性名稱2=屬性內容2> 內容會同時具有屬性1, 2 </標籤名稱2> </標籤名稱1> ``` ----  ### 部分標籤允許格式不同只有起始標籤沒有結束標籤和內容，仍可以有屬性，後面/斜線可加可不加 ```html= <img src="image.png" alt="My image"> <hr/> <hr> <hr/> ``` ---- ### Hello world ```html= <!DOCTYPE HTML> <html>  <head> <meta charset="utf-8"> <title>Hello World</title> </head> <body> <h1>Hello World</h1> <p> Hello world Hello world Hello world </p> </body> </html> ``` --- ## HTML tags --- ### \<!DOCTYPE html> 宣告 DOCTYPE 是用來告訴瀏覽器文件類型 (Document Type Declaration, DTD)，DOCTYPE大小寫都可以，`<!DOCTYPE html>`代表這是一個HTML5文件 --- ### \<html> `<html>`的範圍即為整個HTML檔案的範圍 --- ### \<head> `<head>`是HTML檔案中的第一個tag，在檔案中必存在且只有一個，其中放置的元素為有關網頁的基本資訊，例如：`<title>`, `<meta>`, `<style>`, `<link>` ---- #### \<title> 設定標題，如本次社課講義標題是 ⌈Web 第九堂社課臺中一中電研社 - HackMD⌋ ，在搜尋引擎中出現的即是標題。 ```html= <title>Your Webpage Title</title> ``` ---- #### \<meta> 非常重要的tag，`<meta>`會決定這個網站在搜尋引擎中的排序。 ```html= <meta charset="utf-8">  <meta name="description" content="Some content about your page">  <meta name="keywords" content="keyword1, keyword2, keyword3">  <meta name="author" content="your name"> <meta name="copyright" content="版權歸屬">  ``` --- ## \<body> 內文都放在這邊 ---- ### \<h1~h6> 標題屬性 ---- ### \<p> 段落tag ---- ### \<br> 換行 ---- ### \<hr> 產生一個水平分隔線 <hr> ---- ### \<pre> 套用內部的排版(TAB, Space, enter etc.) ---- ### \<b> 設為<b>粗體字</b> ---- ### \<em> 設為<em>斜體</em> ---- ### \<mark> <mark>像這樣</mark> ---- ### \<small> 將字<small>縮小</small> ---- ### \<sub>、\<sup> <sup>上標</sup>`<sup>`、<sub>下標</sub>`<sup>` ---- ### \<ins> 加<ins>底線</ins> ---- ### \<del> 加上<del>刪除線</del> ---- ### \<ruby> 和`<rt>`並用加上<ruby>發<rt>ㄈㄚ</rt>音<rt>ㄧㄣ</rt></ruby>，用`<ruby>`包住要加上發音的部分 ---- #### \<rt> 用在`<ruby>`內，在要標記的文字後用`<rt>`包住發音像<ruby>臺中第一高級中學<rt>臺中第一高級公園兼臺中第一高級考場</rt></ruby> ---- #### \<rp> 在瀏覽器不支援`<ruby>`的情況下會顯示`<rp>`包住的東西 ---- ### 特殊字元 &#[代碼](https://www.w3schools.com/tags/ref_charactersets.asp)使用 --- ### \<ol> 用編號排序 ---- #### `start` 設定數字從多少開始 ---- #### `reversed` 倒數 ---- #### `type` 有`1`、`A`、`a`、`I`、`i`可選 ---- #### \<li> 在`<ol>`內包住每一項 ```html= <ol start='10' type="I" reversed> <li>one</li> <li>two</li> </ol> ``` ---- ### \<ul> 列出每一點，也用`<li>`來包住每一項如： <ul> <li>98</li> <li>XP</li> <li>7</li> </ul> --- ### \<a> 超連結 ---- #### `herf` ```html= herf="指向位置" herf="mailto:電子郵件" herf="tel:+號碼" ``` ---- #### 超連結用法 ```html= 網頁="網址" 同資料夾：="檔案名稱" 子資料夾：="子資料夾名/檔案名稱" 父資料夾：="../檔案名稱" 絕對路徑：="在電腦上的絕對路徑" ``` ---- #### `download` 可以使點下去會下在其指向的內容物 ---- #### `target` `_self`：此為預設，在自己的頁面開啟 `_blank`：在新分頁開啟 `_parent`：在父層級的畫面打開連結(像在該分頁iframe中的連結設定`target="_parent"`那就會在該分頁開啟連結，而非在iframe內部開啟) `_top`：在整個畫面開啟連結 `frame名稱`：在指定iframe開啟 ---- ### \<img> 嵌入圖片 ---- #### `src` 放入指定的圖片檔的連結，檔名可以是圖片的網頁超連結或在本機的位址<img src="https://i.imgur.com/xoNIKwK.jpg" width=100> ---- #### `height`、`width` 設定長寬，如果只設定其中一個的話，會自動等比例調整 ---- #### `alt` 設定無法顯示時顯示的文字，預設是<img src="https://"> ---- ### \<map> 在使用前要先在`<img>`用`usemap`來為要成為影像地圖的圖片命名 ---- #### `usemap` 用`#`定義map的名字 ---- #### `name` 選定指定的圖片 ---- ### \<area> map的子tag，設定連結的區域 ---- #### `shape` 設定連結區域形狀，有`rect`、`circle`、`poly`、`default` ---- #### `coords` 根據`shape`的值會須設定不同數量的座標，單位是px，左上是(0,0)，x座標向右為正，y座標向下為正 `circle`：圓心x座標,圓心y座標,半徑 `rect`：左上x座標,左上y座標,右下x座標,右下y座標 `poly`：順時針列出多邊形所有點的x,y座標 ---- #### `herf` 設定超連結範例 ```html= <img src="https://i.imgur.com/xoNIKwK.jpg" usemap="#Map"> <map name="Map"> <area shape="circle" coords="200,200,100" href="https://tcirc.tw"> </map> ``` ---- ### \<audio> 支援MP3、OGG、AAC 一樣用`src` ---- #### `preload` 設定是否預先下載 ---- #### `mediagroup` 在同一個URL同時撥放多個聲音 ---- #### `loop` 循環播放 ---- #### `muted` 靜音 ---- #### `autoplay` 自動撥放 ---- #### `controls` 增加按鈕 ---- ### \<video> 一樣用`src`、`controls`、`width`、`height`、`loop`、`muted`、`autoplay`、`preload` ---- #### `poster` 設定播放前顯示畫面 ---- ### \<sourse> `<video>`和`<audio>`的子tag，應付瀏覽器不支援的情況 ---- #### `src` 用法相同 ---- #### `type` 設定檔案的[MIME類型](https://zh.wikipedia.org/wiki/多用途互聯網郵件擴展#內容類型)，讓瀏覽器先判斷是否可執行 ---- #### `media` 設定在哪一種媒體撥放如：`all`、`tv`、`screen`、`handheld`  ---- ### \<embed> 單獨存在，有多項功能用`type`、`src`來設定顯示的東西，並且可以用`width`、`hight`來調整大小 ---- ### \<iframe> 使用`src`來連結顯示畫面，也可以用`width`、`hight`來調整大小 ---- #### `srcdoc` 如果瀏覽器支援`srcdoc`屬性，會覆蓋`src`的內容，內部放HTML code ---- #### name 定義此`iframe`名稱來呼叫用 --- ### \<div> 無意義的Tag，但因為可以放屬性所以常用於排版 ---- ### \<table> 表格屬性 ---- #### \<tr> 每一橫行都要用這個標籤包住，要在`<table>`內 ---- ### \<th> 每一格標題欄，由左至右 ---- #### \<td> 每一格內容欄，由左至右 ----  ```html= <table> <tr> <th>標題一</th> <th>標題二</th> </tr> <tr> <td>一之一</td> <td>二之一</td> </tr> <tr> <td>一之二</td> <td>二之二</td> </tr> </table> ``` ---- <table> <tr> <th>標題一</th> <th>標題二</th> </tr> <tr> <td>一之一</td> <td>二之一</td> </tr> <tr> <td>一之二</td> <td>二之二</td> </tr> </table> --- ### \<button> ``` <button type="button"> button </button> ``` ### \<select> 建立一個可用於選擇的區域 #### \<option> 增加一個選項 `value`可以設定要傳出的值 #### \<optgroup> 增加一個選項的群組(會顯示但不能選) --- ## \<section> 標註文件區域，在內部標題會降一級輸出 --- ## \<footer> 頁尾區，通常放公司聯絡訊息、版權資訊、相關連結 --- # HTML實作  https://unichk.github.io/tcircWebClass/ --- # CSS  ---- ## 介紹 > 階層式樣式表（英語：Cascading Style Sheets，縮寫：CSS；又稱串樣式列表、級聯樣式表、串接樣式表、階層式樣式表）是一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言，由W3C定義和維護。CSS3現在已被大部分現代瀏覽器支援，而下一版的CSS4仍在開發中。[維基百科](https://zh.wikipedia.org/wiki/%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8) ---- ## 基本語法 ![](https://i.imgur.com/K7Vq31C.png) (圖片來源：[alphacamp](https://tw.alphacamp.co/blog/css-guide-box-model)) ---- * 選擇器（selector）：決定要套用格式的標的 * 屬性（propety）：決定要更改的樣式種類 * 值（propety value）：要設定屬性的值選擇器後以大括號刮每一行，一行代表一個屬性+值，每一行結尾都必須有分號，css會將大括號內的每一行都套用在選擇器所選擇的目標上。 ---- ### 選擇器（selector） 1. 基本選擇器 1. 通用：`*`，選擇所有元素 2. 標籤（type）：`標籤名稱`，選擇所有相同標籤名稱的元素 3. 類別（class）：`.類別名稱`，選擇所有該類別名稱的元素（類別可在html標籤中用`class="類別名稱1 類別名稱2"`屬性設定） 4. ID(id)：`#ID名稱`，選擇該ID名稱的元素（類別可在html標籤中用`id="ID名稱"`屬性設定） 5. 屬性：`[屬性名稱]`，選擇所有具有該屬性的元素 2. 分組選擇器 1.可用同時使用多個選擇器，以逗號（`,`）隔開 ---- 3. 組合選擇器 ![](https://i.imgur.com/PFfnNwZ.png =x600) （圖片來源：[csssolid](https://www.csssolid.com/35-css-selectors-to-remember.html)） ---- 4. 偽選擇器 1. Pseudo classes：非自行設定的類別而是預設符合某些條件的類別，用`:`隔開，例如`a：visited` 2. [Pseudo elements](https://www.w3schools.com/css/css_pseudo_elements.asp)：非自行設定的ID而是預設符合某些條件的元素，用`::`隔開，例如`p:：first-line` ---- ### 屬性和值因為很多所以後面再慢慢列 ---- ### 設定CSS #### tag內 ```html= <tag style="css-declaration">content</tag> <p style="color: red">This text will be red</p> ``` ---- #### head內習慣在`<head>`內用`<style>`包起來，用法如同.css檔 ```html= <head> <style> h1{ color: #ff0000; } </style> </head> ``` ---- #### 外部引入 ```html= <head> <link rel="stylesheet" href=".css檔的路徑"> </head> ``` ---- ### 單位 css中常用到的單位有 * 絕對單位 1. `px`：像素 * 相對單位 1. `em`：子元素透過「倍數」乘以父元素的 px 值 2. `rem`：每個元素透過「倍數」乘以根元素（html）的 px 值 3. `vw`：viewpoint width，1vw = 視窗寬度的1％ 4. `vh`：viewpoint height，1vh = 視窗高度的1％ 5. `%`：子元素透過「百分比」乘以父元素的 px 值 ---- ### 顏色表示方法 * 顏色英文名 * `#rrggbb` 由三個十六進位的十六位數字組成，由前至後分別為紅、綠、藍 * `rgb(0~255,0~255,0~255)`紅、綠、藍 * `rgba(0~255,0~255,0~255,0.0~1.0)`紅、綠、藍、不透明度 * `hsl(0~360,0%~100%,0%~100%)`角度,飽和度,明度 * `hsla(0~360,0%~100%,0%~100%,0.0~1.0)`角度,飽和度,明度,不透明度 [HSL](https://www.w3schools.com/html/html_colors_hsl.asp) ---- ### 註解 `/* comment*/` --- ## 屬性和值（統稱：declaration）從這裡開始以下全部都是屬性和值 --- ## 文字編輯 ---- ### `font-family` 字型，如瀏覽器找不到會往後搜尋 [CSS Web Safe Fonts](https://www.w3schools.com/cssref/css_websafe_fonts.asp) ---- ### `font-size` 字型大小 ---- ### `font-style` 設定為普通/傾斜體/斜體 ---- ### `font-weight` 設定粗體粗度 ---- * 數字 * 100 * 200 * 300 * 400 * 500 * 600 * 700 * 800 * 900 ---- * 大小 * normal (400) * bold (700) * bolder * lighter ---- ### `font` 直接設定前面幾個的值每個值用空白隔開 [詳見](https://www.w3schools.com/cssref/pr_font_font.asp) ```css= div{ font:10px "Times New Roman"; } ``` ---- ### `color` 設定文字[顏色](#顏色設定) --- ## 排版 ---- ### `text-align` * center 置中 * left 置左 * right 置右 * justify ---- ### `text-indent` 首行縮排大小 ---- ### `line-height` 行距大小 ---- ### `letter-spacing` 字元間距大小 ---- ### `word-spacing` 文字間距大小，是根據空白而定如: <div style="word-spacing:20px"> 一二三四五六 </div> ---- ### `text-shadow` 文字加上陰影 [詳見](https://www.w3schools.com/cssref/css3_pr_text-shadow.asp) ---- ### `text-decoration` 加上線條，可以是在 <div style="text-decoration:overline">overline:上方</div>: <div style="text-decoration:line-through">line-through:中間</div> <div style="text-decoration:underline">underline下方</div> [詳見](https://www.w3schools.com/cssref/pr_text_text-decoration.asp) ---- ### `text-decoration-color` <div style="text-decoration:overline;text-decoration-color:#5577ff"> 設定text-decoration的顏色 </div>  --- ## background ---- ### `background-color` 設定背景[顏色](#顏色設定) <div style="background-color:lightblue">最基礎的用法</div> ---- ### `background-image` 設定背景圖片 ```css= background-image: url(圖檔超連結) ``` <div style="background-image:url(https://bbs.tcirc.tw/pictrs/image/0xCc05cb5j.jpg)">最基礎的用法 </div> ---- ### `background-repeat` 設定背景圖片是否重複出現 * repeat (預設) 在x方向和y方向重複出現 * repeat-x 在x方向重複出現 * repeat-y 在y方向重複出現 * no-repeat 不重複出現 * space 調整圖片間的間距，讓圖片完整呈現 * sound 調整圖片大小，讓圖片完整呈現 ---- ### `background-position` 設定背景圖片位置 * 由`center`/`left`/`right`和`center`/`top`/`bottom`組成兩個值，如:`right top`；如果只有一個值，另一個沒寫的值會是`center` * `x% y%` 用x座標、y座標比例去抓位置 * `x y` 用x座標、y座標去抓位置 * `x% y` / `x y%` 比例、座標混用 ---- ### `background-size` * `auto` 依原本的寬跟高顯示 * `x% y%` 可以只設一個，另一個會等比例縮放 * `x y` 可以只設一個，另一個會等比例縮放 * `cover` 等比例調整為一個圖片覆蓋整個背景 * `contain` 等比例調整為一個圖片完全顯示 ---- ### `background-attachment` 設定是否隨頁面捲動 * `scroll` (預設) 隨頁面捲動 * `fixed` 不隨頁面捲動 * `local` 除了在iframe外都會隨著頁面捲動 ---- ### `background` 將以上含background字眼的功能全部寫在同一個屬性上 --- ## 長寬 ---- ### `width` 設定物件的寬 ---- ### `hight` 設定物件的長 --- ## Box midel ---- ![](https://i.imgur.com/5oAPRfD.png) * `content box`：中間藍色那塊，顯示內容的位置(如:文字、圖片、標題…) * `padding`：內邊距，在內容和邊框間的空間，預設是0，加大可以使背景範圍加大 * `border`：邊框，可以設定一些邊框圖案 * `margin`：外邊距，邊框外的部分，預設是透明，如果父Tag有背景，在這裡會顯示 ---- ### `margin` 設定邊距大小可以用: * `margin-top:` * `margin-right:` * `margin-bottom:` * `margin-left:` ---- * `margin:` `上` `右` `下` `左` * `margin:` `上` `右和左` `下` * `margin:` `上下` `左右` * `margin:` `上下左右` ※順序不能改 ---- #### 合併當兩個外邊距相遇時，會採用較大的一方 ---- ### border ---- #### `border-style` 用法類似[margin](#margin) 如:`border-left-style:none`、`boder-style:dotted` [詳見](https://www.w3schools.com/cssref/pr_border-style.asp) ---- #### `border-color` 用法類似[margin](#margin) 如:`border-left-color:red`、`boder-color:#ff0000` ---- #### `border-width` 用法類似[margin](#margin) 如:`border-left-width:5px`、`boder-width:thin` ---- #### `border-radius` * `border-top-left-radius:` * `border-top-right-radius:` * `border-bottom-leftradius:` * `border-bottom-right-radius:` 或是 * `border-radius:`左上右上左下右下 * `border-radius:`左上右上左下右下 * `border-radius:`左上右下右上左下 * `border-radius:`四角  ---- #### `border` `border:大小樣式(必填) 顏色`，用法類似[margin](#margin) ---- #### 各方向單獨設定如:`border-left:`，用法類似[margin](#margin) ---- ### `padding` 用法類似[margin](#margin) ---- ### `resize` 設定是否可以調整長寬 * `none`：不可調整 * `both`：長寬皆可 * `vertical`：可調整長 * `horizontal`：可調整寬 ---- ### display * block 會換行 * inline 不換行 * list-item 會以list呈現，不過預設的符號會在外側，需要用`list-style-position`來設定 [詳細](https://www.w3schools.com/cssref/pr_class_display.asp) ---- ### flex-basis 設定長度或用預設的`auto` ---- ### flex-direction 設定排列方向 * row (預設) 以水平方向由左至右 * row-reverse 以水平方向由右至左 * column 以垂直方向由上至下 * column-reverse 以垂直方向由下至上 ---- ### flex-wrap * nowrap (預設) 同行輸出 * wrap 多行輸出 * wrap-reverse 多行輸出，不過行數順序是右下到上 ---- ### flex-flow 綜合`flex-direction`和`flex-wrap`的功能。第一像是`flex-direction`的值，第二項是`flex-wrap`的值 ---- ### flex-grow 設定有留白產生時，對留白的分配占比，設定是純數字，會依同一區塊的左數來進行分配 ---- ### flex-shrink 設定有溢出版面的情況時，對溢出進行要減少的部分的分配占比，設定是純數字，會依同一區塊的左數來進行分配 ---- ### align-items 排版處理 * stretch (預設) 如未設定width和hight，會填滿區塊 * flex-start 會將物件往上貼齊，不會自動填滿 * flex-end 會將物件向下貼齊，不會自動填滿 * center 將物件置中 * baseline 會依基準線對齊 ---- ### align-content 用於多行時排版 * stretch (預設) 如未設定width和hight，會填滿區塊 * flex-start 會將物件往上貼齊，不會自動填滿 * flex-end 會將物件向下貼齊，不會自動填滿 * center 將物件置中 * space-between 將一個放最上面，令一個放最下面，剩下平均分配 * space-around 類似`space-between`，但最上方和最下方有其他部分空白的${1\over2}$ ---- ### align-self 個別設定的排版，可以單個單個設定排版方式 ---- ### justify-content * flex-start 放最前 * flex-end 放最後 * center 置中 * space-between 首項在最前，末項在最後、其他均勻分配間隔 * space-around 每個元素**周圍**分配相同空間 * space-evenly 每個元素**間隔**相等 --- ## `position` * `static`：(預設) * `absolute`：以畫面左上角為(0,0)，會隨畫面捲動 * `fixed`：以畫面左上角為(0,0)，不隨畫面捲動 * `relative`：以元素正常方式定位  --- ## `visibility` 設定是否顯示 * `visible` (預設) 顯示 * `hidden` 隱藏，但原本的位置會空著 * `collapse` 在\<tr>、\<tbody>、\<col>、\<colgroup>使用是消去該項，其他則與`hidden` --- ## `object-fit` 調整`img`或`video`在指定框架內呈現方式 * `none`：(預設) 保持原尺寸 * `cover`：等比例調整為一個圖片覆蓋整個背景 * `contain`：等比例調整為一個圖片完全顯示 * `fill`：無視比例填滿 --- ## transition ---- ### transition-property 設定游標停在上面時的動畫效果(css屬性) ---- ### transition-duration 設定動畫總時間(單位為s或ms) ---- ### transition-timing-function 改變動畫的速度曲線 [詳細](https://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp) ---- ### transition-delay 設定動畫延遲時間(單位為s或ms) ---- ### :hover 在游標停在上面時使用的值 ``` transition-delay:1s ``` --- ## cursor 設定游標圖示(如要上傳自訂圖示，記得用.cur檔)  --- ## CSS framework CSS框架是預先準備好的軟體框架，讓css的撰寫更容易，且可以有標準化的頁面。框架主要包含至少一種的柵格設計（grid），且配備了更多及基於JavaScript的功能。最常見的例如：[Bootstrap](https://getbootstrap.com/) --- # HTML+CSS實作 https://unichk.github.io/tcircWebClass/login.html --- ## 參考資料 https://www.w3schools.com/tags https://www.w3schools.com/cssref/default.asp