位置：首頁 > 軟件操作教程 > 編程開發(fā) > HTML > 問題詳情

HTML 圖像

提問人：劉團圓發(fā)布時間：2020-10-10

<html>

<body>

<p>

一幅圖像：

<img src=“/eg_mouse.jpg" width="128" height="128">

</p>

<p>

一幅動畫圖像：

<img src="/eg_cute.gif" width="50" height="50">

</p>

<p>請注意，插入動畫圖像的語法與插入普通圖像的語法沒有區(qū)別。</p>

</body>

</html>

從不同的位置插入圖片

<html>

<body>

<p>

來自另一個文件夾的圖像：

<img src="/ct_netscape.jpg" />

</p>

<p>

來自 W3School.com.cn 的圖像：

<img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" />

</p>

</body>

</html>


背景圖片

<html>

<body background="/i/eg_background.jpg">

<h3>圖像背景</h3>

<p>gif 和 jpg 文件均可用作 HTML 背景。</p>

<p>如果圖像小于頁面，圖像會進行重復。</p>

</body>

</html>


排列圖片

<html>

<body>

<p>

圖像

<img src="/i/eg_cute.gif" align="bottom"> 

在文本中

</p>

<p>

圖像

<img src ="/i/eg_cute.gif" align="middle"> 

在文本中

</p>

<p>

圖像

<img src ="/i/eg_cute.gif" align="top"> 

在文本中

</p>

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

<p>

圖像

<img src ="/i/eg_cute.gif"> 

在文本中

</p>

<p>

<img src ="/i/eg_cute.gif"> 

圖像在文本前面

</p>

<p>

圖像在文本后面

<img src ="/i/eg_cute.gif"> 

</p>

</body>

</html>


浮動圖像

<html>

<body>

<p>

<img src ="/i/eg_cute.gif" align ="left"> 

帶有圖像的一個段落。圖像的 align 屬性設置為 "left"。圖像將浮動到文本的左側。

</p>

<p>

<img src ="/i/eg_cute.gif" align ="right"> 

帶有圖像的一個段落。圖像的 align 屬性設置為 "right"。圖像將浮動到文本的右側。

</p>

</body>

</html>


調(diào)整圖像尺寸

<html>

<body>

<p>

<img src="/i/eg_mouse.jpg"

width="40" height="40">

</p>

<p>

<img src="/i/eg_mouse.jpg"

width="80" height="80">

</p>

<p>

<img src="/i/eg_mouse.jpg"

width="128" height="128">

</p>

<p>通過改變 img 標簽的 "height" 和 "width" 屬性的值，您可以放大或縮寫圖像。</p>

</body>

</html>


制作圖像鏈接

<html>

<body>

<p>

您也可以把圖像作為鏈接來使用：

<a href="/example/html/lastpage.html">

<img border="0" src="/i/eg_buttonnext.gif" />

</a>

</p>

</body>

</html>


繼續(xù)查找其他問題的答案？

相關視頻回答
回復(0)
返回頂部