---
# System prepended metadata

title: 營養標示

---

# 營養標示


:::success
最新建議，用 https://html-online.com/editor/ 編輯，很不錯，不會帶樣式碼！ :+1: 
:::


## 1.圖片範本
1. 到 canva
2. 開啟 ==營養標示 - ok== 的設計
![](https://i.imgur.com/FOOD51M.png)


3. 編輯之後匯出
![](https://i.imgur.com/3HvN2le.png)

4. 上傳至==官網==後，取得網址==備用==

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




## 2.html 範本
1. 到codepen，連結另外提示。
2. 選擇==營養標示==。

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

4. 開啟後，選擇 copy 所有的html欄內容，即是範本。
![](https://i.imgur.com/kGd1i3B.png)


5. 貼於文字編輯單上，專業或是內建的編輯器皆可。
![](https://i.imgur.com/OR43lgx.png)



## 3.組合它，使用它

1. 尋找 ==<--文字開始-->== 與 ==<--文字結束-->==，中間插入==html碼==，非正常文字。
![](https://i.imgur.com/XvdKX1i.png)

2. 尋找 ==&lt;img>== 這個標籤，其中的==src==後接官網圖片網址

``` html=
<img class="img-responsive" src="">
```
變成
``` html=
<img class="img-responsive" src="https://via.placeholder.com/150">
```


3. 現在 html 已經組合完成，上傳至編輯區即可。