Web 第十週社課

張皓凱、林德恩 April Fools ,2022

tags: `Web` `HTML` `CSS` `前端` `tcirc39th` `社課` `臺中一中電研社`

Web 第十週社課
- 電研社
- 本次社課實作
- web
- HTML
- HTML tags
- <body>
  - <h1~h6>
  - <p>
  - <br>
  - <hr>
  - <pre>
  - <b>
  - <em>
  - <mark>
  - <small>
  - <sub>、<sup>
  - <ins>
  - <del>
  - <ruby>
  - 特殊字元
  - <ol>
  - <ul>
  - <a>
  - <img>
  - <map>
  - <area>
  - <audio>
  - <video>
  - <sourse>
  - <embed>
  - <iframe>
  - <div>
  - <table>
  - <th>
  - <button>
  - <select>
- <section>
- <footer>
HTML實作
CSS
HTML+CSS實作
- 參考資料

麻煩請各位認真聽課，我們段考趕上週講義，段考後又在三天內爆肝出這份講義，希望各位不要一直看手機。

電研社

社網:tcirc.tw
online judge:judge.tcirc.tw
IG:TCIRC_39th
社課點名表單:google 表單

本次社課實作

到這裡 -> 右邊的Releases -> 2022/4/1 -> Source code (zip)
vscode -> 右邊的extention -> 下載live sever、Auto Close Tag、Auto Rename Tag

web

(圖片來源：angularminds)

開發一個網頁可以包含前端(front-end)、後端(back-end)、資料庫(database)及伺服器(server)

前端-處理網站的長相
後端-處理資料運算
資料庫-處存資料
伺服器-存放網路伺服器軟體及檔案的電腦，並可以透過URL將內容傳到用戶

本學期社課主題為網頁前端，包含HTML、CSS、JavaScript

HTML

簡介

HTML（Hypertext Markup Language），中文全名為「超文字標示語言」，是一種用來組織架構並呈現網頁內容的程式語言。網頁內容的組成，可能包含了段落、清單、圖片或表格…等。
來源

HTML是一種標記語言（markup language），不是程式語言

語法

HTML是由多個元素所組成，每個元素包含起始標籤(opening tag)、結束標籤(closing tag)、內容(content)

(圖片來源:mozilla)

巢狀元素

巢狀元素指在元素的內容中含有另一個元素，可以有無限層





<標籤名稱1 屬性名稱1=屬性內容1>
    <標籤名稱2 屬性名稱2=屬性內容2>
        內容會同時具有屬性1, 2
    </標籤名稱2>
</標籤名稱1>

部分標籤允許格式不同

只有起始標籤沒有結束標籤和內容，仍可以有屬性，後面/斜線可加可不加


<img src="image.png" alt="My image">
<hr/> <hr> <hr/>

Hello world
















<!DOCTYPE HTML>
<html>
<!--This is a hello world webpage-->
    <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⌋ ，在搜尋引擎中出現的即是標題。


<title>Your Webpage Title</title>

<meta>

非常重要的tag，<meta>會決定這個網站在搜尋引擎中的排序。












<meta charset="utf-8"> 
<!--設定字集，不同字集有不同的編碼，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>

產生一個水平分隔線

<pre>

套用內部的排版(TAB, Space, enter etc.)

<b>

設為粗體字

<em>

設為斜體

<mark>

像這樣

<small>

將字縮小

<sub>、<sup>

^上標<sup>、_下標<sup>

<ins>

加底線

<del>

加上~~刪除線~~

<ruby>

和<rt>並用加上發ㄈㄚ音ㄧㄣ，用<ruby>包住要加上發音的部分

<rt>

用在<ruby>內，在要標記的文字後用<rt>包住發音
像臺中第一高級中學臺中第一高級公園兼臺中第一高級考場

<rp>

在瀏覽器不支援<ruby>的情況下會顯示<rp>包住的東西

特殊字元

&#代碼使用

<ol>

用編號排序

`start`

設定數字從多少開始

`reversed`

倒數

`type`

有1、A、a、I、i可選

<li>

在<ol>內包住每一項




<ol start='10' type="I" reversed>
  <li>one</li>
  <li>two</li>
</ol>

<ul>

列出每一點，也用<li>來包住每一項
如：

<a>

超連結

`herf`



herf="指向位置"
herf="mailto:電子郵件"
herf="tel:+號碼"

超連結用法





網頁="網址"
同資料夾：="檔案名稱"
子資料夾：="子資料夾名/檔案名稱"
父資料夾：="../檔案名稱"
絕對路徑：="在電腦上的絕對路徑"

`download`

可以使點下去會下在其指向的內容物

`target`

_self：此為預設，在自己的頁面開啟
_blank：在新分頁開啟
_parent：在父層級的畫面打開連結(像在該分頁iframe中的連結設定target="_parent"那就會在該分頁開啟連結，而非在iframe內部開啟)
_top：在整個畫面開啟連結
frame名稱：在指定iframe開啟

<img>

嵌入圖片

`src`

放入指定的圖片檔的連結，檔名可以是圖片的網頁超連結或在本機的位址

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

`height`、`width`

設定長寬，如果只設定其中一個的話，會自動等比例調整

`alt`

設定無法顯示時顯示的文字，預設是

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

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

設定超連結

範例




<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類型，讓瀏覽器先判斷是否可執行

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

每一格內容欄，由左至右














<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仍在開發中。維基百科

基本語法

(圖片來源：alphacamp)

選擇器（selector）：決定要套用格式的標的
屬性（propety）：決定要更改的樣式種類
值（propety value）：要設定屬性的值

選擇器後以大括號刮每一行，一行代表一個屬性+值，每一行結尾都必須有分號，css會將大括號內的每一行都套用在選擇器所選擇的目標上。

選擇器（selector）

基本選擇器
1. 通用：*，選擇所有元素
2. 標籤（type）：標籤名稱，選擇所有相同標籤名稱的元素
3. 類別（class）：.類別名稱，選擇所有該類別名稱的元素（類別可在html標籤中用class="類別名稱1 類別名稱2"屬性設定）
4. ID(id)：#ID名稱，選擇該ID名稱的元素（類別可在html標籤中用id="ID名稱"屬性設定）
5. 屬性：[屬性名稱]，選擇所有具有該屬性的元素
分組選擇器
1.可用同時使用多個選擇器，以逗號（,）隔開

組合選擇器

（圖片來源：csssolid）

偽選擇器
1. Pseudo classes：非自行設定的類別而是預設符合某些條件的類別，用:隔開，例如a：visited
2. Pseudo elements：非自行設定的ID而是預設符合某些條件的元素，用::隔開，例如p:：first-line

屬性和值

因為很多所以後面再慢慢列

設定CSS

tag內



<tag style="css-declaration">content</tag>

<p style="color: red">This text will be red</p>

head內

習慣在<head>內用<style>包起來，用法如同.css檔







<head>
    <style>
        h1{
            color: #ff0000;
        }
    </style>
</head>

外部引入



<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

註解

/* comment*/

屬性和值（統稱：declaration）

從這裡開始以下全部都是屬性和值

文字編輯

`font-family`

字型，如瀏覽器找不到會往後搜尋

CSS Web Safe Fonts

`font-size`

字型大小

`font-style`

設定為普通/傾斜體/斜體

`font-weight`

設定粗體粗度

數字
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900

大小
- normal (400)
- bold (700)
- bolder
- lighter

`font`

直接設定前面幾個的值每個值用空白隔開
詳見



div{
    font:10px "Times New Roman";
}

`color`

設定文字顏色

排版

`text-align`

center 置中
left 置左
right 置右
justify

`text-indent`

首行縮排大小

`line-height`

行距大小

`letter-spacing`

字元間距大小

`word-spacing`

文字間距大小，是根據空白而定
如:

一二三四五六

`text-shadow`

文字加上陰影
詳見

`text-decoration`

加上線條，可以是在

overline:上方

line-through:中間

underline下方

詳見

`text-decoration-color`

設定text-decoration的顏色

background

`background-color`

設定背景顏色

最基礎的用法

`background-image`

設定背景圖片


background-image: url(圖檔超連結)

最基礎的用法

`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

content box：中間藍色那塊，顯示內容的位置(如:文字、圖片、標題…)
padding：內邊距，在內容和邊框間的空間，預設是0，加大可以使背景範圍加大
border：邊框，可以設定一些邊框圖案
margin：外邊距，邊框外的部分，預設是透明，如果父Tag有背景，在這裡會顯示

`margin`

設定邊距大小可以用:

margin-top:
margin-right:
margin-bottom:
margin-left:

margin: 上 右 下 左
margin: 上 右和左 下
margin: 上下 左右
margin: 上下左右
※順序不能改

合併

當兩個外邊距相遇時，會採用較大的一方

border

`border-style`

用法類似margin
如:border-left-style:none、boder-style:dotted
詳見

`border-color`

用法類似margin
如:border-left-color:red、boder-color:#ff0000

`border-width`

用法類似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

各方向單獨設定

如:border-left:，用法類似margin

`padding`

用法類似margin

`resize`

設定是否可以調整長寬

none：不可調整
both：長寬皆可
vertical：可調整長
horizontal：可調整寬

display

block 會換行
inline 不換行
list-item 會以list呈現，不過預設的符號會在外側，需要用list-style-position來設定
詳細

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

改變動畫的速度曲線
詳細

transition-delay

設定動畫延遲時間(單位為s或ms)

:hover

在游標停在上面時使用的值

transition-delay:1s

cursor

設定游標圖示(如要上傳自訂圖示，記得用.cur檔)

CSS framework

CSS框架是預先準備好的軟體框架，讓css的撰寫更容易，且可以有標準化的頁面。框架主要包含至少一種的柵格設計（grid），且配備了更多及基於JavaScript的功能。最常見的例如：Bootstrap

HTML+CSS實作

https://unichk.github.io/tcircWebClass/login.html

參考資料

https://www.w3schools.com/tags
https://www.w3schools.com/cssref/default.asp

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`	在筆記中貼入程式碼
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.

Web 第十週社課

tags: Web HTML CSS 前端 tcirc39th 社課 臺中一中電研社

電研社

本次社課實作

web

HTML

簡介

語法

標籤

巢狀元素

部分標籤允許格式不同

Hello world

HTML tags

<!DOCTYPE html>

<html>

<head>

<title>

<meta>

<body>

<h1~h6>

<p>

<br>

<hr>

<pre>

<b>

<em>

<mark>

<small>

<sub>、<sup>

<ins>

<del>

<ruby>

<rt>

<rp>

特殊字元

<ol>

start

reversed

type

<li>

<ul>

<a>

herf

超連結用法

download

target

<img>

src

height、width

alt

<map>

usemap

name

<area>

shape

coords

herf

<audio>

preload

mediagroup

loop

muted

autoplay

controls

<video>

poster

<sourse>

src

type

media

<embed>

<iframe>

srcdoc

name

<div>

<table>

<tr>

<th>

<td>

<button>

tags: `Web` `HTML` `CSS` `前端` `tcirc39th` `社課` `臺中一中電研社`

`start`

`reversed`

`type`

`herf`

`download`

`target`

`src`

`height`、`width`

`alt`

`usemap`

`name`

`shape`

`coords`

`herf`

`preload`

`mediagroup`

`loop`

`muted`

`autoplay`

`controls`

`poster`

`src`

`type`

`media`

`srcdoc`

`font-family`

`font-size`

`font-style`

`font-weight`

`font`

`color`

`text-align`

`text-indent`

`line-height`

`letter-spacing`

`word-spacing`

`text-shadow`

`text-decoration`

`text-decoration-color`

`background-color`

`background-image`

`background-repeat`

`background-position`

`background-size`

`background-attachment`

`background`

`width`

`hight`

`margin`

`border-style`

`border-color`

`border-width`

`border-radius`

`border`

`padding`

`resize`