位置:首页 > 软件操作教程 > 编程开发 > HTML > 问题详情

HTML 图像

提问人:刘团圆发布时间: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>请注意,插入动画图像的语法与插入普通图像的语法没有区别。</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>


调整图像尺寸

<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>


继续查找其他问题的答案?

相关视频回答
回复(0)
返回顶部