HTML-圖像

時間 2019-11-06

標籤 html 圖像欄目 HTML 简体版

原文原文鏈接

經過使用 HTML，能夠在文檔中顯示圖像。

實例

本例演示如何在網頁中顯示圖像。

本例演示如何將其餘文件夾或服務器的圖片顯示到網頁中。

圖像標籤（<img>）和源屬性（Src）

在 HTML 中，圖像由 <img> 標籤訂義。html

<img> 是空標籤，意思是說，它只包含屬性，而且沒有閉合標籤。瀏覽器

要在頁面上顯示圖像，你須要使用源屬性（src）。src 指 "source"。源屬性的值是圖像的 URL 地址。服務器

定義圖像的語法是：url

<img src="url" />

URL 指存儲圖像的位置。若是名爲 "boat.gif" 的圖像位於 www.w3school.com.cn 的 images 目錄中，那麼其 URL 爲 http://www.w3school.com.cn/images/boat.gif。spa

瀏覽器將圖像顯示在文檔中圖像標籤出現的地方。若是你將圖像標籤置於兩個段落之間，那麼瀏覽器會首先顯示第一個段落，而後顯示圖片，最後顯示第二段。code

替換文本屬性（Alt）

alt 屬性用來爲圖像定義一串預備的可替換的文本。替換文本屬性的值是用戶定義的。htm

<img src="boat.gif" alt="Big Boat">

在瀏覽器沒法載入圖像時，替換文本屬性告訴讀者她們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。爲頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助於更好的顯示信息，而且對於那些使用純文本瀏覽器的人來講是很是有用的。blog

圖片align屬性

圖片align屬性用align屬性，能夠改變水平對齊方式(居左、居中、居右)。在缺省情況下，圖片顯示原有的大小。你能夠用height和width屬性改變圖片的大小。不過圖片的大小一旦被改變，圖片會相應放大或縮小，顯示出來的結果可能會很難看。圖片

<html>

<body>

<h2>未設置對齊方式的圖像：</h2>

<p>圖像 <img src ="E:\BRTC_SVN\html\image\eg_tulip.jpg"> 在文本中</p>

<h2>已設置對齊方式的圖像：</h2>

<p>圖像 <img src="E:\html\image\eg_tulip.jpg" align="bottom"> 在文本中</p>

<p>圖像 <img src ="E:\html\image\eg_tulip.jpg" align="middle"> 在文本中</p>

<p>圖像 <img src ="E:\html\image\eg_tulip.jpg" align="top"> 在文本中</p>

<p>請注意，bottom 對齊方式是默認的對齊方式。</p>

</body>
</html>

<html> <body> <div align= " center " > <img src=" E:\BRTC_SVN\html\image\pso.jpg " width=150 heigh=50 > </body> </html>

HTML背景顏色和背景圖片

HTML的 <body> 有兩個關於背景的屬性， bgcolor屬性 bgcolor屬性用來設置HTML網頁的背景顏色。 background屬性 background屬性用來設置HTML網頁的背景圖片。background屬性值就是背景圖片的路徑和文件名，若是背景圖片小於網頁顯示窗口，那麼這個背景圖片會自動重複。ip

<html>
<body bgcolor="yellow">
<h2>看，這個頁面是黃色的。</h2>
</body>
</html>

<html>
<body background=" E:\SVN\html\image\psu.jpg">

<h3>這個網頁有背景圖片哦！</h3>

<p>若是圖片比頁面小，圖片會自動重複。</p>

</body>
</html>

基本的注意事項 - 有用的提示：

假如某個 HTML 文件包含十個圖像，那麼爲了正確顯示這個頁面，須要加載 11 個文件。加載圖片是須要時間的，因此咱們的建議是：慎用圖片。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。