網頁設計
HTML, CSS, JavaScript
我素誰
廖姸惁
人稱文靜知性萌妹
楓資32屆教學
興趣是看小說看電影
我素誰
加我哀居加我低吸
IG：zsisc32_.ys
DC：ys._1021
目錄
網頁架構
使用者
前端
後端
手機電腦等
資料庫
HTML, CSS, JS
網頁架構
能看到的文字圖片等都屬於前端
網頁架構
HTML
CSS
JS
前端三件套
網頁架構
HTML
網頁的架構
可以理解為一個人的骨架
網頁架構
CSS
網頁的外觀
可以理解為一個人的長相
網頁架構
JS
網頁的行為
可以理解為一個人的行為
網頁架構
以電風扇來舉例的話
HTML就是底座 支架 扇葉
CSS就是顏色 大小 有幾片扇葉
JS就是按鈕 控制風的大小 擺頭
安裝VSCODE
安裝VSCODE
安裝VSCODE
檔名.html
檔名.css
檔名.js
檔名想打什麼都行
通常會打成上面那樣
但如果你有自己的想法也是沒關係的ㄛ
安裝VSCODE
找到這個東西
按Install下載
有了這個才能讓你寫的程式出現在網頁上
按右下角的GO Live就可以了
安裝VSCODE
有需要的人再下就行了
可以把畫面變中文
方法跟前面一樣不會可以往前翻
HTML
起手式
打！＋ tab
使瀏覽器使用 HTML5 的標準來解析文件
設定頁面上所有文字的語言
包住的是文件的資訊，不直接顯示在頁面
告訴瀏覽器這份文件使用的是 UTF-8 編碼
網頁標題
設定視窗寬度為裝置寬度，設定視窗寬度為裝置寬度（不放大也不縮小）
包住文字圖片之類的
HTML
文字和常用標籤
<h1>別墅裡面唱k</h1>
<h2>水池裡面銀龍魚</h2>
<h3>我送阿叔茶具</h3>
<h4>他研墨下筆直接給我四個字</h4>
<h5>大展鴻圖大師親手提筆字</h5>
<h6>大展鴻圖搬來放在辦公室</h6>
標題大小，1到6是大到小，如圖。
HTML
文字和常用標籤
| 功能 | 程式碼 |
|---|---|
| 註解 | <！--內容--> |
| 文字 | <p>內容</p> |
| 換行 | <br/> |
| 水平線 | <hr/> |
| 粗體字 | <b>內容</b> |
| 斜體 | <i>內容</i> |
<！--內容-->
<p>內容</p>
內容<br/>內容
內容<hr/>內容
<b>內容</b>
<i>內容</i>
<a href="網址/檔名">要顯示的字</a>
<img src="圖片連結/檔名"/>| 連結 | <a href="網址/檔名">要顯示的字</a> |
| 圖片 | <img src="圖片連結/檔名"/> |
HTML
題目
染柳煙濃，吹梅笛怨，春意知幾許。
出自於李清照的《永遇樂．落日熔金》
憬彼淮夷，來獻其琛。
出自於《泮水》
染柳煙濃，吹梅笛怨，春意知幾許。
出自於李清照的《永遇樂．落日熔金》
憬彼淮夷，來獻其琛。
出自於《泮水》HTML
解答
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1><b>染柳煙濃，吹梅笛怨，春意知幾許。</b></h1>
<h3>出自於李清照的《永遇樂．落日熔金》</h3>
<hr/>
<h1><b>憬彼淮夷，來獻其琛。</b></h1>
<h3>出自於《泮水》</h3>
<script src="script.js"></script>
</body>
</html>CSS
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>連結到CSS檔
CSS
在html的<head>裡面加上<style>
<style>
h1 {
color: blue;
}
</style>或者 在css直接打
h1 {
color: blue;
}簡潔乾淨 更推薦用下面這種
<h1 style="color: blue;">文字</h1>CSS
選擇器
h1{
color: black;
}屬性
值
CSS
| 常見選擇器 | 常見屬性 |
|---|---|
| h1 | color |
| .class | font-size |
| #id | background-color |
| width/height | |
| text-align | |
| padding |
顏色
文字大小
背景顏色
寬/高
文字水平對齊
內容與邊框之間的距離
CSS
p {
color: red;
font-size: 24px;
background-color: lightblue;
width: 200px;
height: 100px;
text-align: center;
padding: 20px;
}CSS
color & background-color
顏色有很多種表示方法，這裡舉三種較常見的：
p {
color: blue;
}顏色名稱
十六進位顏色值
h1 {
color: #3498db;
}RGB顏色值
h1 {
color: rgb(255, 0, 0 / 0.5);
/* 紅色帶 50% 透明度 */
}CSS
px：一種單位
font-size、width、height等都可以使用
p {
font-size: 24px;
}CSS
| class | id |
| 分類群組樣式 給多個元素使用 |
給單一元素唯一識別符號 |
| 可以重複用在多個元素上 | 一個 HTML 頁面中只能出現一次 |
| 開頭加. | 開頭加# |
CSS
ID像身分證，每個人只能有一個，不能重複。
CLASS像制服，很多人可以穿同一種衣服。
<p id="title">我是標題</p>
<p class="highlight">我是重點段落</p>
<p class="highlight">我也是重點段落</p>#title {
color: red;
font-size: 30px;
}
.highlight {
background-color: yellow;
}CSS
題目
我今早被車撞了，我連忙拉著想帶我到醫院的朋友，邊吐著血邊說：「快……快帶我去看獸醫……」 ，朋友大惑不解，於是我嘴角含笑地解釋：「因為我是(稚楚)的貓！」
人名可替換
我今早被車撞了，我連忙拉著想帶我到醫院的朋友，邊吐著血邊說：「快……快帶我去看獸醫……」 ，朋友大惑不解，於是我嘴角含笑地解釋：「因為我是(稚楚)的貓！」
#2ed9f0 藍色
#fff282 黃色
#333 文字顏色CSS
解答
body {
background-color: #2ed9f0;
padding: 40px;
}
p {
background-color: #fff282;
padding: 20px;
color: #333;
font-size: 18px;
}
javascript
<body>
<script src="script.js"></script>
</body>連結到js檔
javascript
在html的<head>裡面加上<script>
<script>
console.log("Hello world!");
</script>或者 在js直接打
console.log("Hello world!");簡潔乾淨 更推薦用下面這種
javascript
函式
function 函式名稱(參數1, 參數2, ...) {
//函式主體（要執行的程式碼）
return 回傳值; //可以有也可以沒有
}javascript
舉例函式
function add(a, b) {
return a + b;
}
const input1 = prompt("請輸入第一個數字：");
const input2 = prompt("請輸入第二個數字：");
const a = Number(input1);
const b = Number(input2);
const result = add(a, b);
alert("加總結果是：" + result);javascript
題目
請輸入年齡，若滿 18 歲就顯示「可以看限制級」，否則顯示「不行喔！」
提示:可以使用if&else喔
javascript
解答
let age = prompt("請輸入你的年齡");
if (age >= 18) {
alert("可以看限制級！");
}
else {
alert("不行喔！");
}THANKS
暑訓
By ys
