為了美化我們HTML的網頁，HTML提供幾種常用的模板語言，以下我們一一介紹，

1.h1-h6:標題標籤(Head Line)，h後面的數字代表著文字的大小，1是最大而6是最小。這個標籤的使用方式為成對的標籤 將文字包在裡面，例如:<h1>Head line1</h1>

2.p:段落標籤(Paragraph):這個標籤的使用方式也是將文字包在中間並且形成一段沒有大小區別的文字
，例如:<p>這是一段文字</p>。

3.br:斷行標籤(break):顧名思義，這個標籤可以使文字斷行，值得注意的是，這個標籤沒有成對出現!例如:。

4. <!-- --> :註解，(快捷鍵 Ctrl+/)當文字編輯器讀到這一對標籤的時候，中間的內容並不會顯示在網頁上，因此可以用來做筆記或註解給其他的人看。例如:<!--這是註解-->。

5. :超連結標籤 href="" 兩個雙引號中間可以輸入，檔案的「相對位置」 或網址的連結。
   相對位置:相對於當前檔案的資料位置，例如: ./about 或 ../product (注意兩個點代表往上兩層)。
   網址連結:直接輸入想要跳轉的網頁，即可連結過去，如果不想要取代原本的頁面，則可以加入target="blank" 就會另開新視窗囉。例如:<a href="./home.jpg"></a>
   圖片式超連結，顧名思義就是在圖片中加入超連結，使其可以點選圖片後，跳轉到我們指定的網頁頁面。
   使用方式如下:

<a href="">
    <img src="" alt="">
</a>

小叮嚀:
target="blank" 資安風險:為了避免惡意人士寫入Javascript腳本趁勢修改或擷取我們的網站資訊，因此可以在標籤 內加入target="blank"。

6.<img src=" " alt=" ">:圖片標籤，中間的src是圖片來源，可以是相對位置也可以是網址連結，src 的前面我們可以增加屬性 width、height來設定圖片的大小，而alt屬性的用意，是在當圖片失效的時候，會出現的文字。

小叮嚀:

1. 一般建議使用的格式jpg,jpeg,png,gif,svg，同時建議大小小於1MB，因為當圖片過大，使用手機載入的時候會影響到顯示速度。
2. 建議設定width 或height讓另外一個參數自動變更，並免圖片走樣。
3. img標籤的特性，可以試著改變瀏覽器的大小，這時會發現，只要空間放得下，會放在同一行。
4. 圖片除了可以使用GOOGLE上下載外，也可以從一些免費的圖庫網站上面直接下載，這邊介紹使用https://picsum.photos/images#2 上面有很多範例可以使用，就不一一介紹。