---
# System prepended metadata

title: HTML
tags: [前端作品]

---

---
title: HTML
tags: 前端作品
---
---

賣南瓜-html的SOP-
先創建一個資料夾project-然後裡面再建一個index.html

2.開工~從空白的開始~
![](https://i.imgur.com/Uu48IEQ.jpg)

![](https://i.imgur.com/svNsqb1.jpg)
![](https://i.imgur.com/9YeZFzw.jpg)

3.代碼要確認是HTML5+下面砍一行
![](https://i.imgur.com/2m3rkza.jpg)


4.程式碼開始:加入地區語言~中文+地區=繁體+台灣= zh-Hant-TW
header=網站的標題(搜索的到)
![](https://i.imgur.com/rd7e5Sh.jpg)

目前狀況:
![](https://i.imgur.com/JYlI7Dk.jpg)

5.加入圖片-在資料夾內創一個放圖片的資料夾，再把圖片放入
![](https://i.imgur.com/w5rXcMJ.jpg)

在section裡加入照片.img src="img/vegetable_kabocha.png" alt="vegetable_kabocha"的" "一定要記得不然少一個是無法顯示的
如果圖片無法顯示可以看看是否是路徑或是/和\打錯方向
![](https://i.imgur.com/VDn2EWB.jpg)


6.新增副標題-放入影片.mp4檔:再加入section.用br /換行
把影片放入跟index.html同層級
程式碼:
![](https://i.imgur.com/iAJvxyy.jpg)

圖示
![](https://i.imgur.com/mH6AYi5.jpg)


7.增加描述~使用article用p換行
![](https://i.imgur.com/R9nBXDQ.jpg)


效果:
![](https://i.imgur.com/rUBNO4s.jpg)


8.增加表格:
![](https://i.imgur.com/Oz5PsSC.jpg)
![](https://i.imgur.com/wE0iQUS.jpg)



---

使用CSS語法-表格邊框

![](https://i.imgur.com/BtRSjQG.jpg)

![](https://i.imgur.com/doaE7sn.jpg)

---

9.footer=網頁角(留言訊息/定義可以留言幾行+留下MAIL)
![](https://i.imgur.com/zwjAM6Q.jpg)

![](https://i.imgur.com/AvTmHus.png)

---

10.標準網頁的版權=打&copy;
![](https://i.imgur.com/efCosdj.jpg)

![](https://i.imgur.com/TwExf60.jpg)

---

整個作品的程式碼:
https://gist.github.com/jzs2home/f431a942e99021a774bc7a88dc8b6ab0
![](https://i.imgur.com/gIihInP.jpg)
