只有HTML標籤，其實是不夠的。接下來，我們想給每個HTML標籤更多的額外資料，便需要為他們加上不同的屬性。
屬性的添加方法是:
在起始標籤(Opening Tag)中加入：
屬性＝”值”
一個常常使用屬性的Tag，就是<a>
<a>代表連結。<a>會使用屬性href, 寫法如下：
<a href=”http://yahoo.com”>Link</a>
在以上例子，我們在<a>加入一個名為href的屬性。而這個href的value則是一個網址http://yahoo.com。
使用以上的語法後，我們的Link這個字，便可以變為連結。一按下去便會去到http://yahoo.com
同一個Tag，我們可以添加多於一個屬性。每個屬性只要用一個格號，分格便可以。
例如我們可以添加多一個叫target的屬性，如果把它的值設為_blank，當用家按這個連結時, 便會在一個新視窗開連結啟。
<a href=”http://yahoo.com” target=”_blank”>Link</a>
包著”值”的這個引號，可以是單引號，也可以是雙引號。
另外一個常常使用屬性的Tag，就是<img>
<img>代表圖片。<img>會使用屬性src, 寫法如下：
<img src=”xxxx.jpg”>
src中的值便是一張圖片的連結。
什麼是圖片連結？
圖片連結就是以圖片副檔名結尾的網址，例如：
.jpg (最常用，因為圖片容量最小)
.jpeg (最常用，因為圖片容量最小)
.png (可以有透明底，常用於logo)
.gif (動畫)
.svg (用vector畫的動畫)
我們試試到 http://image.google.com 搜尋相片。
指著圖片按右鍵->新分頁開啟圖片 （要使用chrome才有以上的功能）
複製圖片網址。
然後把網址放到src的value中，例如：
<img src=”https://kids.nationalgeographic.com/content/dam/kids/photos/animals/Mammals/H-P/pig-young-closeup.ngsversion.1412640764383.jpg”>
在Brackets中Preview看看，圖片是不是出來了？
你也可以把圖片儲存到和你html同一個Folder。這時候，你只要在src中直接輸入圖片的檔案名字及副檔名，便可以直接指到圖片。<img src=”xxxx.jpg”>
如果你覺得圖片太大，可以加上width屬性，讓圖片變小。
<img src=”xxxx.jpg” width=”400″>
width的單位是px。px是網頁設計中常用的長度單位。其長度大約可以理解為：一部13吋的Macbook的闊度大約是1400px。
此文章轉載自鬍子科技學院http://mtache.com/html