# 北科大專題課程-1 前後端概述 ＆ HTML+CSS 概述
##### 2020/08/23
###### 黃豊凱KevinHuang
---
### 基礎觀念
---
### 網頁系統基本知識
- 網頁系統架構：前端、後端、資料庫
- 程式語言（C#、HTML、CSS、JavaScript）
- 程式開發架構（MVC）
- 框架（.Net Framework、.Net Core）
- 什麼是前後端分離？API又是什麼？
---
### 網頁系統架構
> 前端、後端、資料庫
---
### 前端後端=前台後台？
---
### 前端後端=前台後台？
### *錯！*
- 前台：使用者操作的介面
- 後台：管理者操作的介面
- 前端：系統架構中負責畫面、使用者操作
- 後端：系統架構中負責邏輯運算、存取資料
---
### 前端、後端、資料庫
###### 流程與各自的語言與框架
---
### 前端、後端、資料庫
###### 更簡單的理解方法
---
### 程式語言
> （C#、HTML、CSS、JavaScript）
---
### 程式語言
- C#：後端程式語言
- HTML：前端元素
- CSS：前端樣式
- JavaScript：前端動畫效果、進行動作
---
### 今日目的
- [學會HTML](https://www.w3school.com.cn/html/index.asp)
- [學會CSS](https://www.w3school.com.cn/css/index.asp)
---
### 課後延伸
- [什麼是DOM](https://www.w3school.com.cn/htmldom/index.asp)
---
### 前端推薦工具
- VSCode
- JSBin
- WebStorm(付費，學生可免費一年)
---
## 瞭解HTML
---
### 第一步 - 常用的HTML標籤
---
#### 常見 BLOCK 區塊標籤
```htmlmixed=
<div>
</div>
```
這東西很常出現!
這東西很常出現!
這東西很常出現!
(因為很重要所以說3次)
---
#### 常見 BLOCK 區塊標籤
特點：獨占一行，對高度、寬度、行高以及頂和底邊距都可設置的屬性值生效；如果不給寬度，塊級元素就默認為瀏覽器的寬度，即就是100%寬；
| | | |
| -------- | -------- | -------- |
| form | h1 | h2 |
| h3 | h4 | h5 |
| h6 | p | table |
| ul | | |
| | | |
---
#### 常見 INLINE行內標籤
特點：可以多個標籤存在一行，不能直接設置行內標籤的高度、寬度、行高以及頂和底邊距，完全靠內容撐開寬高！
| | | |
| -------- | -------- | -------- |
| a | br | label |
|select | span | textarea |
| | | |
---
#### 常見INLINE BLOCK行內區塊標籤
特點：結合的行內和區塊的優點，不僅可以對寬高屬性值生效，還可以多個標籤存在一行顯示；
| | |
| -------- | -------- |
| input | img |
| | |
---
#### 注意事項
切忌使用 行內標籤 去包 區塊標籤
會造成 HTML 解析錯誤
---
### 第二步 - HTML屬性值
使用HTML 標籤 就會用到 專屬標籤的 “屬性值”
---
### HTML屬性值
```htmlmixed=
<img src="路徑" alt="圖片描述"/>
<input type="">
```
---
### 其他常用到屬性值的標籤
| | | |
| -------- | -------- | -------- |
| button | checkbox | date |
| file | hidden | number |
| password | radio | search |
| submit | text | time |
| url | | |
---
### 第三步 - 瞭解ID CLASS NAME 屬性值
---
### ID屬性值
```htmlmixed=
<input id="list_box">
```
ID 是唯一值，在一份HTML 只能有一個唯一的ID 不然HTML 會解析錯誤
---
### Class屬性值
```htmlmixed=
<input class="list_box">
<div class="list_box">
```
CLASS 可多重宣告
---
### name屬性值
```htmlmixed=
<form>
<input name="list_box">
</form>
```
NAME 值 包在 form 裡面， 許多的程式語言都會用來當成取值的屬性
EX: PHP ASP
---
這些屬性值都是未來在CSS 、JS 或 其他各式各樣的語言所不可或缺的。
接下來的CSS JS 課程，將會教如何搭配使用這些屬性值。
---
### 第四步 - 常用的基礎HTML架構
```htmlmixed=
<html>
<head>
<title> </title>
<link rel="stylesheet" type="text/css" href="style.css">
<style></style>
<script></script>
</head>
<body>
網頁內容
</body>
</html>
```
---
### 語意式HTML5架構
HTML5使用語意標籤取代掉了不具意義的`<div>`所構成的HTML文件
以下介紹六個最主要架構出HTML5的語意標籤：
---
### 六個最主要的語意標籤
```htmlmixed=
<header>
```
位於HTML5頁面頂部，通常放置網站的Logo、大標題或是主要資訊
```htmlmixed=
<nav>
```
通常放置代表網站的連結或選單
---
### 六個最主要的語意標籤
```htmlmixed=
<article>
```
HTML5頁面內可以有多個，可以作為區分內容之用
```htmlmixed=
<section>
```
article中可以有很多個`<section>`，通常用於章節或標題的段落區分
---
### 六個最主要的語意標籤
```htmlmixed=
<aside>
```
定義文章區塊以外的內容，通常使用於內容相關的邊欄
```htmlmixed=
<footer>
```
位於頁面底部，大多顯示著作權、作者等
---
### 用語意標籤製作HTML5文件的好處：
(1)看標籤就可以知道哪個部份是標題、哪裡是選單
(2)搜尋引擎在搜尋網頁內容時，可以搜尋到準確的資料與資訊
(3)因為標籤都具有意義了，這樣在維護文件時，就會變得更簡單與容易，在團隊的工作中尤其重要
---
### 語意標籤範例
```htmlmixed=
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
```
---
## 瞭解CSS
---
### 第一步 - 如何把CSS套用到網頁上
---
## 如何把CSS套用在網頁上
### 1.行內套用
直接將CSS寫在HTML上
```htmlmixed=
<p style="color:#000">123</p>
```
---
## 如何把CSS套用在網頁上
### 2.嵌入套用
樣式可以嵌入於HTML中(通常在`<head>`內)
```htmlmixed=
<head>
<style>
li{color:#000}
</style>
</head>
```
---
## 如何把CSS套用在網頁上
### 3.外部連接套用
```htmlmixed=
<link rel="stylesheet" type="text/css" href="路徑">
```
將CSS載入
假如有多個外部連結，越後面套入的CSS 優先權越高
---
### 第二步 - 使用選擇器（Selector）
越嚴謹的選擇器 權限越高
ID、CLASS、標籤、後代選擇器
---
### ID選擇器
ID選擇器 => #
```htmlmixed=
<p id="good">123</p>
```
要將ID為 good 的內容字顏色改成白色
```css=
#good{color:#FFF}
```
---
### Class選擇器
CLASS選擇器 => .
```htmlmixed=
<p class="good">123</p>
```
要將CLASS為 good 的內容字顏色改成白色
```css=
.good{color:#FFF}
```
---
### 標籤選擇器
直接選擇標籤
```htmlmixed=
<p>123</p>
```
要將p標籤的內容字顏色改成白色
```css=
p{color:#FFF}
```
---
### 後代選擇器
```htmlmixed=
<li>000</li>
<ul>
<li>123</li>
</ul>
```
要將 ul li 的內容字123顏色改成白色 ,內容字000不改變
```css=
ul li{color:#FFF}
```
---
### Grouping
數個選擇器共同有同樣樣式
```htmlmixed=
<p>123</p>
<div>456</div>
<li>789</li>
```
將p, div, li 內容字顏色都改為白色
```css=
p, div, li{color:#FFF}
```
---
### 第三步 - 了解margin、padding、border
調整版面可能會有許多種需求
Ex:圖片外要有留白空間，最外面還要有外框，圖片與圖片之間要有間隔
就需要使用到margin padding border
---
### 了解margin、padding、border
- padding :為留白，區塊與區塊裡內容的距離，增加空間
- border :為邊框，整體大小最外面的邊框
- margin :為邊界，區塊與其他區塊的距離
---
### 了解margin、padding、border
```htmlmixed=
<img src="123.jpg"/>
<img src="456.jpg"/>
```
將兩張圖片的內容
- 向外增加2px的灰色
- 邊框為1px黑色 實線
- 邊界設定上1px右2px下3px左4px (順時針)
```css=
img{
background:#666;
padding:2px;
border:1px solid #000;
margin:1px 2px 3px 4px;
}
```
---
- padding是區塊內增大
- border是區塊的邊框
- margin是區塊外的邊界
---
### 第四步 - 寬度width與float
想要調整區塊的排列就需要用到float
使用float又必定需要用到width
(不然內部元素大小突然很大的時候版面會崩壞)
float屬性有分為left, right, none
float 是依照區塊寬度來進行排列
---
```htmlmixed=
<div class="a">
<div class="nav b">b</div>
<div class="nav c">c</div>
<div class="nav d">d</div>
</div>
```
```css=
.a{width:300px;}
.nav{width:150px;background-color:red;float:left;}
```
畫面會為
---
如果區塊寬度超過該外框的寬度，就會往下一行排列
```css=
.a{width:300px;}
.nav{width:160px;background:red;float:left;}
```
畫面會為 (因為寬度不夠放下兩個區塊)
---
如果為
```css=
.a{width:300px;}
.nav{width:150px;background:#666; float:left;}
.b{float:right;}
```
畫面會為
---
### 第五步 - position
相對位置、絕對位置、固定位置
---
### position
接下來要了解的是 區塊的位置定義
- 相對位置 relative : 依照區塊與區塊之間來設定的位置
- 絕對位置 absolute : 依照瀏覽器來設定的位置
- 鎖定位置 fixed : 依照瀏覽器框框來設定的位置，不管使用者如何拉動瀏覽器的scrollbar，位置永遠固定在瀏覽器框框
---
### position
```css=
top: 以上方為基礎算位置，top:10px 上方間隔 10px
left: 以左邊為基礎算位置，left:10px 左邊間隔 10px
right: 以左邊為基礎算位置，right:10px 右邊間隔 10px
bottom: 以左邊為基礎算位置，bottom:10px下方間隔 10px
```
Facebook 最上方的 #blueBar 就是用了
```css=
#blueBar{position:fixed;top:0;} /*鎖在瀏覽器上方*/
```
---
### position
子元素會繼承父元素的位置設定(很重要)
在正常的思考
絕對位置 absolute: 依照瀏覽器來設定的位置
但是當你的父元素設定了 absolute 之後，子元素也設定 absolute
子元素會依照父元素的位置當作起始位置去作定位
---
## Todolist 切版練習
---
### Todolist 切版練習
- 開啟一個HTML與CSS檔案
- 設計待辦清單的畫面排版與顏色
- 還不用加入任何的操作動作唷！
---
### Todolist 切版練習
---
##### 學程式不只是學習某個語言或框架，
##### 更重要是學習怎麼自學更多
{"metaMigratedAt":"2023-06-15T11:58:14.142Z","metaMigratedFrom":"YAML","title":"北科大專題課程-1 前後端概述 ＆ HTML+CSS 概述","breaks":true,"contributors":"[{\"id\":\"51ff12a4-2c72-4ebf-8d92-b365963be44a\",\"add\":7269,\"del\":22}]"}