--- 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.標準網頁的版權=打© ![](https://i.imgur.com/efCosdj.jpg) ![](https://i.imgur.com/TwExf60.jpg) --- 整個作品的程式碼: https://gist.github.com/jzs2home/f431a942e99021a774bc7a88dc8b6ab0 ![](https://i.imgur.com/gIihInP.jpg)