現(xiàn)在我們學(xué)過的標(biāo)簽都是一個(gè)開始，一個(gè)結(jié)束，為什么膩？因?yàn)槠鋵?shí)我們要標(biāo)記的是一個(gè)范圍，所以要給出一個(gè)開始和一個(gè)結(jié)束的點(diǎn)。那么有沒有我們只需要給出一個(gè)點(diǎn)的情況呢？當(dāng)然有了，來看兩個(gè)標(biāo)簽先：

<br />

<hr />

解釋一下哦，<br /> 是在這里換行，那么明顯我們只需要指定一個(gè)位置就可以了；<hr /> 是在這里插入一條分割線，當(dāng)然也只要告訴他一個(gè)位置就夠了。

既然只需要一個(gè)位置，那么寫兩個(gè)（一組、一對）標(biāo)簽就是浪費(fèi)時(shí)間，所以懶惰的程序員們就把這一對標(biāo)簽合二為一，看看上邊的寫法，明白了吧。等等，不是什么標(biāo)簽都可以這么合并的哦，我這么說只是為了讓你理解一下的，你可別光顧著擼串又把我的話當(dāng)了耳旁風(fēng)啊～

這個(gè)當(dāng)然沒什么難的，不過有個(gè)很著名的標(biāo)簽也是獨(dú)行俠哦～～他獨(dú)來獨(dú)往，至今還是一只單身狗，那么他就是大名鼎鼎的圖片標(biāo)簽 <img src="在這里寫圖片地址哦～" />

那么現(xiàn)在，我們來玩哦～我這有一個(gè)圖片地址： http://coffee.zji.me/imgs/bridge.jpg ，那么我們的代碼應(yīng)該是：

<img src="http://coffee.zji.me/imgs/bridge.jpg" />

效果如下哦：

那么看懂啦 src 屬性就是要插入的圖片的地址。然后我們再看看他的其他屬性哦，這個(gè)開始有意思了。

<img src="http://coffee.zji.me/imgs/bridge.jpg" alt="這里是圖片的說明文字" />

alt 很像鏈接里的 title 屬性，這個(gè)是用來說明圖片的，但是他還有一個(gè)很重要的作用，要是因?yàn)榫W(wǎng)絡(luò)等問題圖片沒能正常顯示的時(shí)候，這些文字會(huì)顯示在圖片位置，讓人們知道這里應(yīng)該是什么。效果如下：

上面的這些對照著鏈接都很容易理解了，但是圖片還有兩個(gè)常用的屬性寬（width）和高（height），一般的說，我們給他們指定的值就好了，比如呢～

<img src="http://coffee.zji.me/imgs/bridge.jpg" width="300" height="300" />

在 html 代碼里，如果沒寫單位則默認(rèn)單位是 px（像素），效果如下：

而如果你只寫了其中一個(gè)屬性，則圖片會(huì)按比例縮放，也就是另一個(gè)屬性會(huì)跟著等比例變化。比如：

<img src="http://coffee.zji.me/imgs/bridge.jpg" width="300" />

它的效果如下：

那么我們基本了解了圖片這個(gè)標(biāo)簽，現(xiàn)在我們來為圖片加個(gè)鏈接吧～

<a >
    <img src="http://coffee.zji.me/imgs/bridge.jpg" />
</a>

好啦，那么這次就聊到這里，記得給我買咖啡喝哦～

本章學(xué)習(xí)卡片：卡片 8

本書是收費(fèi)的，不過交費(fèi)憑自覺。價(jià)格定義為每人請我喝一杯咖啡（哪種品質(zhì)的咖啡隨意），支付寶賬號(hào)：

alay9999@163.com （劉源）

為了讓大家閱讀方便，本書將在如下站點(diǎn)發(fā)布，但最終內(nèi)容以主站為準(zhǔn)：

• 主站首發(fā)： http://coffee.zji.me/
• Gitbook: http://codeme.gitbooks.io/easy-web-code-book/
• 簡書： http://www.jianshu.com/users/d37eaf3de0ff
• 站酷： http://www.zcool.com.cn/u/12927742

未經(jīng)本人許可，禁止任何形式轉(zhuǎn)載。相關(guān)事宜請聯(lián)系： dms@zji.me