首頁 > 開發者 > 網站開發

今天學習image在html中的應用

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

今天學習image在html中的應用

 

上次在學習超級連結的使用中有一小問題，是在添加網址中href=“http://www.baidu.com“

中不能忘記http：//，否則連結會出現莫名錯誤。

 

 

接下來學習image

網頁中的圖片多數支援gif/bmp/jpeg/png/tiff格式，最廣泛的是gif和jpeg

Gif像素大小為256色

Jpeg最大像素達到1670萬色

Png圖片具有不失真，傳輸效率高，支援透明在網頁中很流行

網頁中圖片路徑有絕對路徑和相對路徑之分。

 

 

在網頁中插入圖片用

 

屬性

值

描述

Alt

Text

定義圖形簡短的描述

Src

url

要顯示圖形的url

Height

Pixels%

定義圖形高度

Ismap

url

把映像定義為伺服器端的圖形映射

Usermap

url

作為用戶端圖形映射的一幅映像

Vspace

Pixels

定義映像頂部和底部的空白

width

Pixels%

定義映像的寬度

 

用於插入映像的語句

<img src=”圖片路徑”>

這裡的圖片路徑是指圖片的儲存路徑，如c：image/1.png

路徑可以是相對路徑也可以是絕對路徑

 

 

在網頁中插入一張圖片

<img src=”1.jpg”>

從不同位置插入圖片

{

來自一個檔案夾的圖片;

<img src=”image/1.jpg”>

}

來自百度的圖片:

{

<img src=”http://baidu.com/image/0545151151.jpg”>

}

 

定義圖片的高度和寬度

<img src=”1.jpg” width=”500px” height=”300px”>

 

設定圖片的提示字

<img src=”1.jpg” alt=“這張圖片來自百度”>

 

將圖片設定成網頁背景

<body background=”image/1.jpg”>

<h3>映像背景</h3>

 

柏拉圖像像，會用到幾個屬性

Align=“bottom/middle/top“

 

 

在網頁中柏拉圖像

<p>映像<img src=”1.jpg”  align=“bottom“>在文本中</p>

<p>映像<img src=”1.jpg”  align=“middle“>在文本中</p>

<p>映像<img src=”1.jpg”  align=“top“>在文本中</p>

 

注意在瀏覽網頁中出現了圖片不顯示，一定要仔細檢查圖片路徑。

如果在同一個檔案中反覆使用同一個圖片，最好使用相對路徑，不要使用絕對路徑或者url，因為使用相對路徑，瀏覽器只下載一次，再次使用時只顯示即可。使用絕對路徑每次都需要下載，大大降低了映像的顯示速率。

 

附:

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>Document</title>

 </head>

 <body>

  在網頁中插入一張圖片<br/>

<img src="image/0.jpg"><br/>

從不同位置插入圖片<br/>

來自一個檔案夾的圖片;<br/>

<img src="0.jpg"><br/>

來自百度的圖片:<br/>

<img src="http://baidu.com/image/0545151151.jpg"><br/>

定義圖片的高度和寬度<br/>

<img src="0.jpg" width="500px" height="300px"><br/>

設定圖片的提示字<br/>

<img src="0.jpg" alt="這張圖片來自百度"><br/>

將圖片設定成網頁背景<br/>

<!-- <body background="0.jpg"><br/> -->

<h3>映像背景</h3>

在網頁中柏拉圖像

<p>映像<img src="0.jpg" align="bottom">在文本中</p><br/>

<p>映像<img src="0.jpg" align="middle">在文本中</p><br/>

<p>映像<img src="0.jpg"  align="top">在文本中</p><br/>

 </body>

</html>

今天學習image在html中的應用

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More