<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<!--
HTML图像
在线实例
插入图像
本实例演示如何在网页中显示图像
从不同的位置插入图片
本实例演示如何将其他文件夹或者服务器的图片显示到网页中
HTML图像-图像标签(<img>)和源属性(Src)
在HTML中,图像由<img>标签定义
<img>是空标签, 意思是说,它只包含属性,并没有闭合标签
要是在页面上显示图像,你需要使用源属性(src).src是指source.源属性的值是图像的URL地址
定义图像的语法是:
<img src="URL" alt="some_text">
URL是指存储图像的位置,如果名为"pupit.jpg"的图像位于www.runoob.com的images目录中.
那么其URL为http://www.runoob.com/images/pulit.jpg
浏览器将图像显示在文档图像标签出现的地方.如果你将图像标签置于两个段落之间,
那么浏览器会首先显示第一个段落,然后显示图片,最后显示第二段.
HTML图像-设置图像的高度与宽度
height与width属性用于设置图像的高度和宽度
属性值默认单位是像素
<img src="pulpit.jpg" alt="Pupit rock" width="304" height="223">
提示:指定图像的高度和宽度是一个很好的习惯,
如果图像指定了高度宽度.页面加载时就会保留指定的尺寸,
如果没有指定图片的大小,加载页面时有可能会破坏HTML页面的整体布局
基本注意事项-有用的提示
注意:假如某个HTML文件包含十个图像,那么为了正确显示这个页面,需要加载11个文件.
加载图片是需要时间的,所以我们的建议是慎用图片
注意:加载页面时,要注意插入页面图像的路径,
如果不能正确设置图像的位置,浏览器就会无法加载图片,
图像标签就会显示一个破碎的照片
更多实例
HTML标签
<img>定义图像
<map>定义图像地图
<area>定义图像地图中的可点击区域
-->
<body>
<p>一个图像
<img src="img/smiley.gif" alt="Smiley face" width="32" height="32"/>
</p>
<p>一个动图
<img src="img/hackanm.gif" alt="Computer man" width="48" height="48"/>
</p>
<p>注意插入动图的语法和静态图的语法是一样的</p>
<p>一个来自文件夹中的图像</p>
<img src="img/chrome.gif" alt="Google Chrome" width="33" height="32"/>
<p>一个来自菜鸟教程的图像</p>
<img src="//www.runoob.com/images/logo.png" alt="runoob.com" width="336" height="69"/>
<h4>默认对齐的图像(align="bottom")</h4>
<p>这是一些文本<imcg src="img/smiley.gif">这是一些文本</p>
<h4>图片使用align="middle"</h4>
<p>这是一些文本<img src="img/smiley.gif">这是一些文本</p>
<h4>默认对齐的图像</h4>
<p>这是一些文本<img src="img/smiley.gif">这是一些文本</p>
<h4>默认对齐的图像</h4>
<p>这是一些文本<img src="img/smiley.gif">这是一些文本</p>
<p><b>注意</b>在HTML5中align属性已经不再支持因此也就不再写了,只能在CSS里面写</p>
</body>
</html>
0
点赞
收藏
分享
011-HTML-图像
相关推荐
0 条评论
