Web Intro

$whoami

LAVI
Slides are made by CHA
輔大資工二乙
長期霸榜的卷姊
110 屆會長
Hel10 H@ck1r 第一名

Agenda

網頁架構
- 前端、後端
網頁三兄弟介紹
前端資訊安全
- https、cookie......
- XSS、CSRF......

Warning

中華民國刑法

關於網頁的大小事

網頁 vs. 網站

網頁
- Web Page
- 與網際網路相連的檔案
網站
- Web Site
- 由多個網頁組成

圖片來源

網頁架構

前端框架

後端資料

網頁三兄弟

三兄弟

網頁三兄弟

HTML
- 骨骼
CSS
- 衣服
JavaScript
- 大腦、肌肉、關節

圖片來源

HTML

HyperText Markup Language
「不是程式語言！」 x 3
描述網頁內容與架構
元素、標籤、屬性、內容
檔案存放在伺服器端
瀏覽器將內容視覺化

<!DOCTYPE html>
<html>
<head>
	<title>我是標題</title>
</head>
<body>
	<h1>H1 大小</h1>
</body>
</html>

打開 Sublime Text 3 → Ctrl + S

<Filename>.html

常用標籤

<p></p>
- 文字段落
<a></a>
- 超連結
<img>
- 圖片

<form></form>
- 表單
- <input>
  - 輸入框
  - type
  - maxlength

CSS

Cascading Style Sheets
將檔案的內容與顯示區隔
- 簡化 HTML 資訊
- 改動更方便
- 決定內容的顯示特性
  - 字型、顏色、位置...
選擇器、屬性、值

<!DOCTYPE html>
<html>
<head>
	<title>我是標題</title>
	<style>
		body {
			background-color: #123123;
		}
		h1 {
			color: red;
			text-align: center;
		}
	</style>
</head>
<body>
	<h1>H1 置中</h1>
	<h2 style="color: yellow;">我是 H2</h2>
</body>
</html>

CSS 可內嵌也可獨立

<!DOCTYPE html>
<html>
<head>
	<title>Web Intro</title>
</head>
<body>
	<h1>NISRA</h1>
	<h2>LAVI</h2>
	<h3>FJCU CSIE</h3>
	<h4>資工二乙</h4>
	<p>Lavinia</p>
	<p>Hello World!</p>
	<a href="https://www.nisra.net/" target="_blank">NISRA</a>
	<br><br>
	<a href="https://discord.gg/RGqpdPBPNm"><img src="https://cdn-icons-png.flaticon.com/512/2111/2111370.png" alt="Discord" style="width: 100px; height: inherit;" onerror='alert()'></a>
    <form>
		使用者名稱：<input type="text" name="name" value="使用者名稱"><br>
		密碼 (長度限 5)：<input type="password" name="passwd" maxlength="5">
	</form>
</body>
</html>

HTML demo

JavaScript

「不是 Java！」 x 3
高階直譯式程式語言
事件觸發
與後端互動
動態型別
- 資料型態間轉換方便

<!DOCTYPE html>
<html>
<head>
	<title>我是標題</title>
	<script>
		function Get_Date(){
			document.getElementById('time').innerHTML = Date();
		}
	</script>
</head>
<body>
	<h1>H1 大小</h1>
	<script>alert(1)</script>
	<script>console.log('Hello NISRA!')</script>
	<button type="button" onclick="Get_Date()">按我顯示時間</button>
	<p id="time">顯示在這裡</p>
</body>
</html>

JavaScript 可內嵌也可獨立