---
# System prepended metadata

title: 前端程式設計

---

# 前端程式設計

## 概論
網頁的架構分為前端+後端
前端負責版面，後端負責資料庫儲存

前端常用的三種語言 : html  骨架 、 css  美編 、 js  動作

## html
**標記性語言(marking language)**
感覺就是hackmd的左邊這裡，透過一些規範好的關鍵詞，製造出某些特殊效果
例如換行，**加粗**，*斜體*

HTML在這塊是既定的，通用的也算被人寫死的，相對來說，有人說XML是類似ㄉ，但它就可以做自定義標籤，於是你可以寫自己常用的
它說穿了就是文字，滿滿的文字，但像我們看到句點會截斷一句話一樣，某些特定字元或字詞，對電腦來說有特殊意義，僅此

```htmlmixed=
<html>
  <head>
    <meta charset="utf-8"> // 指定UTF-8作為字元編碼，是最常用的之一
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image"> 
      //這樣的<img>只需要標籤即可，不需內文
  </body>
</html>
```
(好像大部分都是html (head + body))

### head
![](https://i.imgur.com/SzZKJoe.png)
https://www.fooish.com/html/
- **style** : 用word時要選字型大小、字體、顏色...但現在用style一個就解決了，不過大部分的作法是寫在css然後透過link的方式接上
```htmlembedded=
<style>
        .p{
            color:aquamarine
        }
        .shadowbox {
               width: 15em;
               border: 1px solid #333;
               box-shadow: 8px 8px 5px #444;
               padding: 8px 12px;
               background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
        }
        </style>
```
- **meta** : 放網站的資訊，比如網頁說明，關鍵字，指定網站編碼，作者資訊，自動跳轉網頁，搜尋引擎標記(感覺這個不太需要學，因為我沒那麼厲害，笑死)
```htmlmixed=
<head>
  <meta charset="utf-8">
  <meta name="description" content="Free Web Tutorial">
  <meta name="keywords" content="HTML,CSS,JavaScript">
  <meta name="author" content="Mike">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
```
- **link** : 載入會用到的資源，具體而言有CSS樣式表(最常用的)、設定favicon(網頁左上的小圖示)、載入預設資源(蠻多東西的)、標記標準網址
簡單來說link的格式是固定的，rel接動作，herf接對象
```htmlembedded=
<head>
    <link rel='stylesheet' herf='網址or本機檔案位置名稱' > CSS樣式
    <link rel="icon" href="網址or本機檔案位置名稱">
    <link rel='preload' href='網址or本機檔案位置名稱' as=''>
    as後面可以接很多，audio,image,video
    <link rel="canonical" href="https://example.com/post/id">標準網址
</head>
```
- **script** : 連結java script用的

### body
- 文件標題 : 跟hackmd超像，有六層，標記方式\<h1><\/h1>
```html 
<h5>ex</h5> 
```

- 段落 : \<p><p\/>

```html 
<p>ex</p> 
````
- 清單 : 分為有序\<ul>和無序排列\<ol>，每條前面還要再加
```html
\<li>
<ol>
<li> 牛奶
<li> 麵包
</ol>
```
- 連結 :\<a herf = "網址"> 提示字\<a>
```html
<a href="http://www.youtube.com/" target="_blank">Youtube</a>
```
- 圖片 : \<img src = "網址or本機檔案位置/名稱">
```html
<img src="image.jpg">
<img src="images/firefox-icon.png">
```
- div : 「本質上不特別代表任何東西的通用内容流容器,樣式化用途（使用 class 或 id 屬性）、或是共享 同一個屬性的元素集合」，我覺得很像**群組**的概念
```html
<div class=x>
    <p>nothing</p>
    <p>nothing</p>
</div>

.x{
   color: blue
}
```
- span : 同樣的概念，只是div是多行的群組，span是單行的
```html
<p>
    hi<span calss=x> mom</span>
</p>
.x{
    color = blue
}
```
- em : 重點，瀏覽器通常預設為斜體

```html
<em> you</em>
```
------------------------
## CSS


為一種風格頁面語言，如上述所說，在html裡的head可以link到CSS檔，便可使用CSS檔中寫好的美化效果

基本架構:
![](https://i.imgur.com/zzCynEa.png)

整體架構被稱作規則集(rule set)
- 選擇器(selector) ，位於大括號前面，種類眾多，很自由
     - 元素選擇器 : 涵蓋最廣，直接修改該元素的呈現方式 
     - id選擇器 : 跟class比較，id只能用一次
     - class選擇器 : 有點像用呼叫的，可重複使用，所以很棒
     - 屬性選擇器 : 特定屬性元素
     - 
- 宣告(declaration) ，制定該元素的呈現樣貌
- 屬性(property) ，每一元素都有其可以設定的屬性，比如p有color這樣的屬性，改變屬性即影響該元素的呈現
- 屬性值(property value) ，屬性有其對應的值

code
* 可以同時使用多個元素
```css=
p ,li{
    color:red;
}
```
* 選擇器的各種命名
```css=
p{
    元素選擇器
}
#x{
    id選擇器
}
.x{
    class選擇器
}
img[src]{
    屬性選擇器
    控制img裡的src
}
```
- 之前講過html中有em這個標籤，往往瀏覽器以斜體呈現，但如果我想要不同效果，可以修改
```css=
p em{
    color: red;
}
```
### 架構

剛剛發現一件事，比起整齊的html，css因為是一個個類似函數的東西，所以沒什麼排版，就很亂，想到甚麼就寫什麼的樣子

CSS布局基於box的概念:
在每個box都分為，padding(內容周圍的空白)，border(矩形外部的實線)，margin(元素外部的空間)



### 通用
![](https://i.imgur.com/6UlBr6V.png)
code
```css=
body {
  width: 600px;
  margin: 0 auto; /*前者影響頂部和底部，後者影響左右寬距*/
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}
```

```css=
html /*文字*/
    font-size: 10px; /*px「畫素」，算是控制字體大小的尺寸    字體大小*/  
    font-size: bold; /*加粗*/
    text-align: center;/*置中*/
    line-height: 2 ;/*行高*/
    letter-spacing: 1px; /*間距*/
    text-decoration: none/*無線*/
    text-decoration: underline/*無線*/
    text-decoration: overline/*無線*/
    text-decoration: line-through/*刪除線*/

}
```
```css=
/*選擇器的一種，但它比較複雜，是鼠標有沒有在它上面時的狀態改變*/
a:link { 
  color: pink;
}

a:visited {
  color: green;
}
```
### 注意事項
- 父元素所附加的css格式會被子元素繼承，比如說加在<\html>的就會涵蓋整個網頁
- 其中除了固定的顏色可以選擇，可以參考色碼表，比如#00539F

### 在html中使用css的三種方式
1. 最有效最常用的: 就是CSS檔，然後用link接過去
```htmlmixed=
<link rel="stylesheet" href="styles.css">
```
2. 不常用 : 在html的head中加style的宣告，在單獨檔案中，這是個好方法，但多個檔案的情況中，一次修改就很麻煩
3. 最沒用的 : 在該元素的<>中打style，這實在很廢，所以除非像我一開始學html否則應該沒人這樣搞
