HTML 簡易教學
學會寫簡單的 HTML,讓物品說明清楚又美觀。
HTML (HyperText Markup Language) 是用來編寫網頁的簡單語言,可以使用 HTML 來讓物品刊登頁面看起來更醒目!
方法如下:
段落、換行與水平線
- 分隔段落,使用 <p> 標籤,開始新的段落。
- 使用 <br> 標籤,換到下一行的最前面。
- 要加一條橫線,請使用 <hr> (水平線)。
| HTML 標籤 |
如何使用 |
顯示效果 |
| <p> </p> |
<p>對我的物品出價!</p>
<p>包你滿意!</p> |
對我的物品出價!
包你滿意! |
| <br> |
對我的物品出價!<br>
包你滿意! |
對我的物品出價!
包你滿意! |
| <hr> |
對我的物品出價!
<hr>
包你滿意! |
對我的物品出價!
包你滿意! |
6 種字體大小,建立你的物品標題
| HTML 標籤 |
如何使用 |
顯示效果 |
| <h1> </h1> |
<h1>對我的物品出價!</h1> |
對我的物品出價! |
| <h2> </h2> |
<h2>對我的物品出價!</h2> |
對我的物品出價! |
| <h3> </h3> |
<h3>對我的物品出價!</h3> |
對我的物品出價! |
| <h4> </h4> |
<h4>對我的物品出價!</h4> |
對我的物品出價! |
| <h5> </h5> |
<h5>對我的物品出價!</h5> |
對我的物品出價! |
| <h6> </h6> |
<h6>對我的物品出價!</h6> |
對我的物品出價! |
用粗體字、斜體字及底線來強調某些文字
| HTML 標籤 |
如何使用 |
顯示效果 |
| <b> </b> |
<b>對我的物品出價!</b> |
對我的物品出價! |
| <i> </i> |
<i>對我的物品出價!</i> |
對我的物品出價! |
| <u> </u> |
<u>對我的物品出價!</u> |
對我的物品出價! |
利用 <big> 和 <small> 標籤來調整字體的大小
| HTML 標籤 |
如何使用 |
顯示效果 |
| <big> </big> |
買到算你<big>賺到!</big>立即出價,<big>你</big>可能就是中標者! |
買到算你賺到!立即出價,你可能就是中標者! |
| <small> </small> |
立即出價!<small>別錯失良機!</small> |
立即出價!別錯失良機! |
使用色彩
使用內建的色彩,讓字體更加活潑,例如
水藍色、
黑色、
藍色、
洋紅色、
灰色、
綠色、
萊姆色、
褐紅色、
海軍藍、
橄欖色、
紫色、
紅色、
銀色、
藍綠色或
黃色 。
| HTML 標籤 |
如何使用 |
顯示效果 |
| <font color= color> </font> |
立即<font color= green>出價</font>,你可能就是中標者! |
立即出價,你可能就是中標者! |
| <font color=color> </font> |
立即<font color=blue>出價</font>,你可能就是中標者! |
立即出價,你可能就是中標者! |
將文字置於版面中央
| HTML 標籤 |
如何使用 |
顯示效果 |
| <center> </center> |
<center>立即出價!</center> |
立即出價! |
使用項目符號或編號建立清單
- 使用 <ol> 建立有順序或有編號的清單。
- 使用 <ul> 建立有項目符號的清單。
- 清單中每一個項目前面都應該有 <li> 標籤,且句尾要有 </li> 標籤。
| HTML 標籤 |
如何使用 |
顯示效果 |
| <ul> </ul> |
我的物品是:
<ul>
<li>新的</li>
<li>狀況良好的</li>
</ul>
|
我的物品是:
|
| <ol> </ol> |
我的物品是:
<ol>
<li>新的</li>
<li>狀況良好的</li>
</ol>
|
我的物品是:
- 新的
- 狀況良好的
|
為物品增加圖片
利用 <img> 標籤,並指定圖片的網址。
| HTML 標籤 |
如何使用 |
顯示效果 |
| <img> |
<img src="http://www.yourdomain.com/images/yourpicture.jpg"> |
物品的圖片將出現在 HTML 標記出現的位置。 |
可以組合這些標籤,來達到你想要的效果。例如,你想要顯示:
立即出價!
HTML 內容應該寫成:
<center><b><i>立即出價!</i></b></center>
趕快動手試試看!