0基礎網站開發技術教學(一) --(前端篇)--
甚麼是前端?就是我們平時看到網頁的樣子。可看似精美的前端網頁，其實也是由代碼堆出來的。
這個系列，小編會手把手教大家如何創建一個完整的網頁。而今天小編會跟大家分享基礎的前端開發技術，保你看完就能馬上實操，創建屬於自己的網站。
一、開發工具
大家可能會用記事本敲代碼哈，這可以是可以，但太慢太不方便了。小編這裡給大家推薦一款開發工具---trae
中文版下載網址: TRAE - The Real AI Engineer
=> 需要登錄哈，然後跟着指示安裝就可以了。
二、開發語言
前端開發主要用3種語言:
1. HTML
2. CSS
3. JS ( JavaScript )
=> 也被稱為前端三劍客
基本格式
=> 網頁開發的基礎格式。大家不用背哈，後面教大家怎麼一鍵自動寫代碼
<!DOCTYPE html> //用甚麼語言寫的
<html>
<head> <meta charset="utf-8"> //編碼格式<title></title> //標題
</head>
<body> //可見的網頁內容
</body>
</html>A.) HTML
在<body>和</body>之間，我們主要會用HTML語言編寫，這也是唯一會顯示在網頁中的內容。下面，小編會為大家演示一個註冊網站是怎麼敲出來的。
基礎代碼
- 標題屬性
<h1>標題</h1> 到 <h6>標題</h6>
* h1 = 字體最大 h6 = 字體最小
<h1>歡迎註冊</h1>
1. 段落屬性
<p>內容</p>
<p>如何呢?又能怎?</p>
2. 圖片屬性
<img src=" " alt=" ">
- src = 圖片路徑
- alt = 若src沒找到，就顯示alt內容 (可以不寫)
<img src="圖片路徑">
3. 超鏈接
<a href="網址" target="打開方式">鏈接命名</a>
- target="_blank" = 開新頁並打開
- target="" = 直接在本頁打開
<a href="http://www.sina.cn/" target="_blank">查
</a>
=> 按 查 會跳轉至指定網址(http開始寫)
4. 換行
<br/>
=>防止圖片&鏈接寫在一行
<img src="圖片路徑"><br/>
<a href="http://www.sina.cn/" target="_blank">查
</a>
5. 註釋
<!-- 內容 -->
=>只有編碼時能看到，不會顯示在網頁上。
5. 表單標籤
<form action=" " method=" ">表單內容</form>
-
action = 表單提交的網址
-
method = get / post (寫post即可)
表單元素標籤
<input type=" " name=" " />
i.) 單行文本框
用戶名: <input type="text" name=" "/>
- name = 數據名(命名)
- 用戶名: = 給文本框命名
ii.) 密碼框
密碼: <input type="password" name=" "/>
- name = 數據名(命名)
- 密碼: = 給密碼框命名
iii.) 提交按鈕
<input type="submit" value=" "/>
- value = 提交按鈕的名字
<form action="http://www.sina.cn" method="post">用戶名：<input type="text" name="username"><br/> <!-- 要用<br/>隔行 -->密碼：<input type="password" name="password"><br/><input type="submit" value="提交">
</form>
=> 按提交會跳轉到指定網頁
合在一起
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><h1>歡迎註冊</h1><p>如何呢?又能怎?</p><img src="圖片路徑"><br><a href="http://www.sina.cn/" target="_blank">查</a><form action="http://www.sina.cn" method="post">用戶名：<input type="text" name="username"><br>密碼：<input type="password" name="password"><br><input type="submit" value="提交"></form>
</body>
</html>
B.) CSS
CSS語言用於將頁面變得好看，不同於HTML，CSS是用在head部分的。
<style>操作參數</style>
語法
選擇器{屬性:值;}
i.) 屬性
-
color:顏色;
-
font-size:字體大小;
-
width:圖片寛度;
-
height:圖片高度;
-
text-align: 文句位置(置中/靠左...);
ii.) 選擇器
1. 元素選擇器
=>標籤名{...}
-
元素 = HTML的<p>/<img>/<h1>
p{color:red;}
::把HTML的p標籤內容變成紅色
2. class選擇器
=> .class屬性器{}
*參數要寫在html始標籤中
.col{color:red;}
<p class="col">如何呢?又能怎?</p>
::效果相同3. id 選擇器
=> #id屬性器{}
=>與class用法相同
#para{color:red;}
<p id="para">如何呢?又能怎?</p>
::僅作用一次
<h1>主題</h1> ::不會變紅色
再合在一起呢:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>img{width: 300px; ::圖片大小height: 300px;}p{color: red;}</style>
</head>
<body><h1>歡迎註冊</h1><p>如何呢?又能怎?</p><img src="C:\Users\user\Pictures\Screenshots\螢幕擷取畫面 2025-07-22 214641.png"><br><a href="http://www.sina.cn/" target="_blank">查</a><form action="http://www.sina.cn" method="post">用戶名：<input type="text" name="username"><br>密碼：<input type="password" name="password"><br><input type="submit" value="提交"></form>
</body>
</html>
C.) JS
javascript顧名思義就是腳本哈，就是讓網頁動起來的語言。通常寫在</html> // </body>後
=> 這種5秒換一次圖片的效果就是JS編碼的結果
語法
<script>JS內容</script>
1. alert("內容")
=> 彈窗
<script>alert("付費以解鎖更多功能")
</script>
2. document.write()
=> 頁面輸出(正常寫字)
<script>document.write("你好 我叫小楓")
</script>
** <br/>要分開寫
document.write("你好 我叫小楓")
document.write("<br/>")
document.write("你好 我叫小楓")
//document.write("你好 我叫小楓") 也太長了，可以用var變量
str="你好 我叫小楓"
document.write(str)
document.write("<br/>")
document.write(str)
//效果一樣三、實操
1. 大家需自己開一個空白文件(.txt)
=>把文件後贅改為(.html)
2. 打開trae，並把文件打開
3. 在第一行打"!" ，並回車
=>會直接幫你寫好格式
4. 跟着我剛教的寫或自己探索即可
trae用起來極為方便，大家用了就知道有多好用了。這篇前端創建就說的差不多了，大家可能會發現我說的不怎深入哈，因為小編希望把篇幅集中講解後面的後端，那才是網頁運作的關鍵。那麼好，
這篇到此結束了，下3篇小編會跟大家分享後端創建技術，欲知後事如何，且聽小編 下回分解了。