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