時間：2023-07-06 01:18:01 | 來源：網(wǎng)站運營
時間：2023-07-06 01:18:01 來源：網(wǎng)站運營
在HTML文檔中插入圖片：上期文章：
在線咨詢
<img>，且必須添加src（source）屬性，用來插入鏈接以指向圖片，達到插入圖片的效果。例如，我鏈接了位于同一文件夾的示例.jpg這張圖片：<img src="示例.jpg" />注意：上面的這個例子中，<img>標(biāo)簽沒有內(nèi)容，因此也可以寫成<img src="示例.jpg"></img>，甚至可以忽略尾標(biāo)簽，寫成<img src="示例.jpg>，一般來說也不會有問題，因為HTML文檔在編寫代碼時執(zhí)行的是很寬松的規(guī)范，且HTML文檔本身的容錯能力就非常強大，即使是一個千瘡百孔的HTML文檔，大多數(shù)瀏覽器都能正常顯示，比如下面這個：<!doCtypE html><htMl><BodY>這是一個很糟糕的HTML文檔，不過大多數(shù)瀏覽器都會正常顯示這句話。當(dāng)然，作為一個合格的前端工程師，還是要按照W3C發(fā)布的HTML推薦標(biāo)準(zhǔn)寫代碼，因為這樣能提高可讀性，讓所有瀏覽器正確地理解代碼。在不與上述條件沖突的情況下，要力求代碼更加簡潔，化繁為簡，避免浪費用戶的帶寬，自己看著也更舒服，后期維護也節(jié)省時間。像<br>等沒有內(nèi)容的標(biāo)簽，根據(jù)XHTML的規(guī)定，這種標(biāo)簽也必須按照正確的方法結(jié)束。雖然HTML沒有XHTML嚴(yán)格，但強烈建議仍然按照XHTML的規(guī)定編寫代碼。例如，上面插入圖片的例子還可以寫成：<img src="示例.jpg />在結(jié)尾打上斜杠「/」，然后打上右尖括號「>」，建議打完標(biāo)簽字母/屬性值后隔一個空格再打斜杠。 另外，你還可以寫完整的路徑：<img src="D:/pictures/示例.jpg" />在之后的文章中，我會詳細(xì)講解文件路徑的用法。你甚至可以鏈接到網(wǎng)絡(luò)上的圖片，下面的例子中，我鏈接到了W3School上的一張圖片：<img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" />alt（替代文本）屬性，屏幕閱讀器會讀出alt的屬性值，同時當(dāng)由于網(wǎng)絡(luò)質(zhì)量、指向的文件不存在或文件損壞等因素?zé)o法加載圖片時，就會顯示此屬性值，屏幕閱讀器也會讀出這張圖片的替代文本，就像下面這樣：alt屬性即可：<img src="http://www.w3school.com.cn/i/w3scool_logo_white.gif" alt="來自W3School的圖片" />快去試試吧。width屬性和height屬性，當(dāng)然也可以用CSS設(shè)定：<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8" /> <title>用不同的方法設(shè)定圖片的大小</title> <style> #ex { width:100; height:100; } </style></head><body> <h1>用不同的方法設(shè)定圖片的大小</h1> <p>下面是用設(shè)定元素的屬性來達到效果：</p> <img src="https://www.w3school.com.cn/i/eg_mouse.jpg" width="200" height="200" /> <p>下面是用CSS來達到此效果：</p> <img src="https://www.w3school.com.cn/i/eg_mouse.jpg" id="ex" /> <p>強烈建議使用CSS來達到設(shè)定圖片大小的效果，因為CSS易于管理和維護。</p></body></html>效果如下圖：關(guān)鍵詞：圖片
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
