插入图片 网页中常用的图片格式有:jpg、gif、png等。HTML中插入图片使用<img>标签
基本语法: <img src=“图片路径” width=宽度 height=高度>
语法解释:宽度和高度的单位都是像素,<img>是插入图片的HTML标签,src 是描述图片路径的属性,它的值表示图片的路径。 举例:
这里的图片路径表示bg.jpg图片和html文件在同一目录下.如果图片很多的话合理的做法是把所有的图片放在images子文件夹中显着整洁.那么上面的路径应改为<img src=”images/bg.jpg” />,关于路径问题,在后面”相对路径与绝对路径”课程中详细讲到. <img>标签除了src属性外还包括的属性有: - lowsrc:设定分辩率比较低的图片
- alt:设定图像的提示文字属性
- width、height:设定图像的宽度和高度
- border:设定图片的边框
- vspace:设定图像的垂直间距
- hspace:设定图像的水平间距
- align:设定图像的排列属性
设定图片的提示文字(alt )基本语法: <img src=“图片路径” alt=“提示文字”>
举例: <img src=“images/1.jpg” alt=“北国风光”>
IMG标签的alt属性是指鼠标放在网页的图片上没弹出一行提示性的文字。 设定图片的边框 border基本语法: <img src=“图片路径” border=边框宽度>
举例: <img src=“images/1.jpg” border=10>
设定图片的排列属性(align)
图片的超链接图片的超链接就是在图片上建立链接。和文字的链接相同,就是点击过链接的图片或文字后就会跳到对应的目标地址上。 图片的超链接与文字相同都是[url=]标记。 基本语法: <a href=”目标地址”><img src=”图片路径” /> </a>
举例:
本节总结
[CSS] 纯文本查看 复制代码 <html>
<head><title>插入图片演示</title></head>
<body>
<h1>插入IMG图片标签演示</h1>
<img src="img.jpg" height="180" width="320" border="10" alt="熊猫宝宝"/>
</body>
</html>
|