---
# System prepended metadata

title: 網頁三兄弟
tags: [Enlightened, NISRA, '2021']

---

# 網頁三兄弟

:::danger
請愛惜共筆，勿進行惡意刪減
:::

[Slide](https://docs.google.com/presentation/d/1_joStoivDqiA0lwh9GHWbV5wgTImi95c/edit?usp=sharing&ouid=112476510912142534257&rtpof=true&sd=true)

---

:::spoiler Table of Content
[TOC]
:::

- 網頁架構
  ![](https://miro.medium.com/max/1050/1*DMLL29PVpc2xBW3Aeq-RIg.jpeg =500x350)
	- 使用者
	- 前端
	- 後端

## 網頁三兄弟
- HTML
	- 骨架
	- 全名:**H**yper**T**ext **M**arkup **L**anguage
	- 超文本**標記**語言
	- 讓瀏覽器讀取，並將其視覺化
	- **不是程式語言**
	- 是一種標記語言
		- 文件的內容:純文字
		- 結合文字及相關內容
		- 文件結構和資料處理細節的電腦文字編碼
		- **標記語言 VS. 程式與語言**
			- 標記語言不用於向計算機發出指令，常用於格式化和連結
			- 程式語言有較強的邏輯和行為能力
- CSS
	- 衣服
- JAVASCRIPT
	- 動作

```htmlmixed=
<!DOCTYPE html>
<html>
    <head>
        <title>Title!!!</title>
    </head>
    <body>
        <p>Text!!!</p>
    </body>
</html>
```

### HTML
- `<!DOCTYPE html>`
	- 讓瀏覽器以HTML5方式渲染
- `<head></head>`
	- 放網頁資訊，給瀏覽器看 or 導入文件
- `<title></title>`
	- 網頁的標題
- `<body></body>`
	- 主要的網頁部分
	- 主要可視內容
- `<p></p>`
    - 段落
    - 會換行(換行是p的特性，與結束符號/無關)
- `<!-- text -->`
	- 註解~可以開編輯模式翻這幾天的共筆\~~<!--這樣就可以在共筆偷偷聊天(? -->
<!-- 優質 -->
- 標題文字(從大到小)
	- `<h1></h1>`
	- `<h2></h2>`
	-  …
    - `<h6></h6>`

- 清單
    - `<ul></ul>`
        - 未排序的清單 **U**nordered **L**ist
      ```htmlmixed=
      <ul>
          <li>Coffee</li>
          <li>Tea</li>
          <li>Juice</li>
      </ul>
      ```
	- `<ol></ol>`
	    - 排序清單 **O**rdered **L**ist
	  ```htmlmixed=
	  <ol>
    	  <li>first</li>
    	  <li>second</li>
    	  <li>third</li>
	  </ol>
	  ```
- `<a href="連結">文字</a>`
    - 連結到你想去的網頁
- `<img src="圖片網址" width="寬" height="高">`
    - 插入圖檔
- `<a href="連結"><img src="圖片網址" width="寬" height="高"></a>` 
    - 點選圖片會進入到指定網址

> 為什麼 `img` 沒有後標籤？
> [name=sarapan19980221]
>> 剛剛有提醒到某些 `tag` 語法上沒有後標籤， `img` 就是其中之一喔
>> [name=dogQ]
>> 在這裡補充，大部分有前後標籤的 tag 都是為了包含某些資料進去，例如 `<a></a>` 是將東西轉化為連結，因此要變成連結的東西，需要包含在 `<a>要包起來的東西</a>`，因此像是 img 這種無須包含資料的 tag 大部分就不會給後標籤了
>> [name=CrazyFire]

> 請問一下 如何讓圖片換到下一行呢
> [name=m12192002]
>> 如果要達到換行的效果，可以用 `<br>` 這個 tag
>> [name=CrazyFire] 

- `<form action="" method=""></form>`
    - 創建表單
    - `<input type="" value="顯示的文字" name="" id="">`
        - `type`：text, password, button…
        - `name`：名字，可以重複
        - `id`：身分證，不可以重複
    - [input 更多玩法！](https://www.fooish.com/html/input-tag.html)
- `<div></div>`
    - 創建區塊
    - 方便排版、美化
    - 方便 CSS 套用

### CSS

- **C**ascading **S**tyle **S**heets
- 讓網頁變漂漂
    - [如果沒有的話...](https://freewebsitetemplates.com/preview/space-science/index.html)
- 使用方式
    - inline
    - internal
    - external
- 優先權
    - inline > internal > external
    - 多數使用 external
        - 好維護 ~~前端設計師才不會崩潰~~
- inline style
    - 寫在 style 屬性內
    - `<h2 style="color: red;">Red Text</h2>`
    - DOM
        - ![](https://i.imgur.com/L49Qm6r.png =400x200)
        - 父元素會影響子元素
        - **D**ocument **O**bject **M**odel
          定義HTML的結構
- internal style
    - 寫在 html 內
    - 只影響目前頁面
    - `<style></style>`
    - Selector
        - tag、class、id
    ```htmlmixed=
    <head>
        <style>
            h1{
                color: red;
            }
        </style>
    </head>
    
    ```
    ```css=
    body{
        background-color: black;
        /* body tag 中的背景變黑 */
    }
    .class-name{
        color: red;
        /* class-name 中的文字變紅*/
    }
    #id-name{
        color: blue;
        /* id-name 中的文字變藍*/
    }
    ```
- external style
    - 讀入外部 CSS
    - 可讓多個頁面共用
    ```htmlmixed=
    <head>
        <link rel="stylesheet" type="text/css" href="./路徑/名字.css">
    </head>
    ```
    ```css=
    body{
        background-color: black;
    }
    ```
- 常見 CSS
    - color：顏色
    - text-align：文字對齊
        - center：置中
        - right：靠右
        - left：靠左
    - size
        - px：絕對單位，pixel
            - font-size: 12px;
        - em：每個子元素透過倍數乘以父元素的 px 值
            - font-size: 1.5em;
        - rem：每個元素透過倍數乘以根元素的 px 值
            - font-size: 1.5rem;
        - %：每個子元素透過百分比乘以父元素的 px 值
    - background-color：背景顏色
        - [Color](https://webgradients.com/)
    - background-image：url("圖片網址")

> link 的rel跟type是甚麼
> [name=dh10050160]
>> rel 代表 relationship
>> type 代表 檔案類型 MIME 那些
>> 大致上就都是幫助瀏覽器辨識喔
>> 詳情可以看這些官方文件喔
>> [Official Document](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/link)、[rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-rel)、[type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-type)
>> [name=dogQ]

### JavaScript

- **直譯**式語言
	- 一行一行動態編議 + 執行
	- 較靈活的型別處理
	- 速度較慢
- 不是Java!!
	- Java是編譯式語言
	- 需要先編譯完才執行
	- 事先定義型態
	- 執行速度較快
- 動態網頁
  與人互動、更新網頁內容

* 可寫在 HTML 內任意位置
    ```javascript=
    function helloworld(){
	    console.log("Hello World!");
    }
    ```
* 也可外部引用 .js 檔
    ```htmlmixed=
    <head>
        <script src="./path/XXX.js"></script>
    </head>
    ```
* 變數宣告（變數名稱區分大小寫）： 弱型別
  ```javascript=
  let num = 666 //數字
  let str = "666" //字串
  let arr = [123, "tree"] //陣列
  let bool = true // or false， 布林值
  ```
- 運算子
	- `+ - * /`
	- `==  !=  >  >=  <  <=`
	- `&&  ||`
	- `%` 取餘數，如 5 % 3 = 2
    - `**` 次方
    - `===  !==` 嚴格比較 ~比較值\ &\ 型態~
- 輸出
	- `console.log()`
	- `alert()`

:::success
[Final Lab](https://drive.google.com/file/d/1Y_3-tg5bMp46fYois6BYAFSI68MfZjBw/view?usp=sharing)
:::

###### tags: `Enlightened` `NISRA` `2021`
<style>
.navbar-brand::after { content: " × NISRA"; }
</style>