0基礎網站開發技術教學(一) --(前端篇)--

甚麼是前端?就是我們平時看到網頁的樣子。可看似精美的前端網頁，其實也是由代碼堆出來的。

這個系列，小編會手把手教大家如何創建一個完整的網頁 。而今天小編會跟大家分享基礎的前端開發技術，保你看完就能馬上實操，創建屬於自己的網站。

一、開發工具

大家可能會用記事本敲代碼哈，這可以是可以，但太慢太不方便了。小編這裡給大家推薦一款開發工具---trae

中文版下載網址: TRAE - The Real AI Engineer

=> 需要登錄哈，然後跟着指示安裝就可以了。

二、開發語言

前端開發主要用3種語言:

HTML
CSS
JS ( JavaScript )

=> 也被稱為前端三劍客

基本格式

=> 網頁開發的基礎格式。大家不用背哈，後面教大家怎麼一鍵自動寫代碼

html 复制代码

<!DOCTYPE html>            //用甚麼語言寫的
<html> 
<head> 
    <meta charset="utf-8"> //編碼格式
    <title></title>        //標題
</head>
<body>                     
                           //可見的網頁內容
</body>
</html>

A.) HTML

在<body>和</body>之間，我們主要會用HTML語言編寫，這也是**唯一會顯示在網頁中的內容。**下面，小編會為大家演示一個註冊網站是怎麼敲出來的。

基礎代碼

標題屬性

* h1 = 字體最大 h6 = 字體最小

html 复制代码

<h1>歡迎註冊</h1>

1. 段落屬性

html 复制代码

<p>如何呢?又能怎?</p>

2. 圖片屬性

src= 圖片路徑
alt = 若src沒找到，就顯示alt內容 (可以不寫)

html 复制代码

<img src="圖片路徑">

3. 超鏈接

target="_blank" = 開新頁並打開
target="" = 直接在本頁打開

html 复制代码

<a href="http://www.sina.cn/" target="_blank">
    查
</a>

=> 按 ++查++ 會跳轉至指定網址(http開始寫)

4. 換行

<br/>

=>防止圖片&鏈接寫在一行

html 复制代码

<img src="圖片路徑"><br/>
<a href="http://www.sina.cn/" target="_blank">
    查
</a>

5.註釋

=>只有編碼時能看到，不會顯示在網頁上。

5. 表單標籤

action = 表單提交的網址
method = get / post (寫post即可)

表單元素標籤

i.) 單行文本框

用戶名: <input type="text" name=" "/>

name = 數據名(命名)
用戶名: = 給文本框命名

ii.) 密碼框

密碼: <input type="password" name=" "/>

name = 數據名(命名)
密碼: = 給密碼框命名

iii.) 提交按鈕

value = 提交按鈕的名字

html 复制代码

<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>

=> 按提交會跳轉到指定網頁

合在一起

html 复制代码

<!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部分的。

語法

選擇器{屬性:值;}

i.) 屬性

color:顏色;
font-size:字體大小;
width:圖片寛度;
height:圖片高度;
text-align: 文句位置(置中/靠左...);

ii.) 選擇器

**1.**元素選擇器

=>標籤名{...}

元素 = HTML的<p>/<img>/<h1>

css 复制代码

p{color:red;}
::把HTML的p標籤內容變成紅色

2. class選擇器

=>**.**class屬性器{}

*參數要寫在html始標籤中

css 复制代码

.col{color:red;}
<p class="col">如何呢?又能怎?</p>
::效果相同

3. id 選擇器

**=> #**id屬性器{}

=>與class用法相同

css 复制代码

#para{color:red;}
<p id="para">如何呢?又能怎?</p>
::僅作用一次
<h1>主題</h1>    ::不會變紅色

再合在一起呢:

html 复制代码

<!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編碼的結果

語法

alert("內容")

=> 彈窗

javascript 复制代码

<script>
    alert("付費以解鎖更多功能")
</script>

document.write()

=> 頁面輸出(正常寫字)

javascript 复制代码

<script>
    document.write("你好 我叫小楓")
</script>

** <br/>要分開寫

javascript 复制代码

document.write("你好 我叫小楓")
document.write("<br/>")
document.write("你好 我叫小楓")

javascript 复制代码

//document.write("你好 我叫小楓") 也太長了，可以用var變量
str="你好 我叫小楓"
document.write(str)
document.write("<br/>")
document.write(str)
//效果一樣

三、實操

大家需自己開一個空白文件(.txt)

=>把文件後贅改為(.html)

打開trae，並把文件打開

在第一行打"!" ，並回車

=>會直接幫你寫好格式

跟着我剛教的寫或自己探索即可

trae用起來極為方便，大家用了就知道有多好用了。這篇前端創建就說的差不多了，大家可能會發現我說的不怎深入哈，因為小編希望把篇幅集中講解後面的後端，那才是網頁運作的關鍵。那麼好，

這篇到此結束了，下3篇小編會跟大家分享後端創建技術，欲知後事如何，且聽小編下回分解了。