武汉纺织大学传媒学院 cm.wtu.edu.cn

Presentation on theme: "武汉纺织大学传媒学院 cm.wtu.edu.cn"— Presentation transcript:

1 武汉纺织大学传媒学院 cm.wtu.edu.cn
第4节 HTML图片标签 武汉纺织大学传媒学院 cm.wtu.edu.cn 2018/9/17 传媒学院

2 文字是网页中重要的元素，图片、声音、视频和动画等多媒体信息也是网页制作必不可少的元素
2018/9/17 传媒学院

3 1、图片标签 网页中常用的图片格式 在HTML文档中，显示图片所用的标签 基本语法 GIF、JPEG和PNG <img>
单标签 基本语法 <img src="url"> 属性src必不可少 2018/9/17 传媒学院

4 例子 图片路径 <img src="eiffel.jpg"> 效果：在显示图片eiffel.jpg 图片存放的位置
上述例子的是一个相对路径 例子：<img src="eiffel.jpg"> 表示显示当前网页所在目录下的eiffel.jpg图片文件 2018/9/17 传媒学院

5 绝对路径 例子： <img src=images\eiffel.jpg> 建议大家使用相对路径 \ 是路径分隔符
存放网页目录截图如右 建议大家使用相对路径 \ 是路径分隔符 绝对路径 例子： <img src=d:\pic\eiffel.jpg> 表示显示d盘pic目录下的eiffel.jpg图片文件 2018/9/17 传媒学院

6 img标签具有的属性 属性名 功能说明 src 指定图像源，即图像的URL路径 width 指定图像的显示宽度 height
指定图片的显示高度 hspace 定义图像左侧和右侧的空白。 vspace 定义图像顶部和底部的空白。 align 指定图片的对齐方式 border 指定图片的边框大小 title 如果图片无法显示，代替图像的说明文字 2018/9/17 传媒学院

7 2、指定图像的高与宽 默认情况下，在网页中显示的是图像的原始大小 如果要显示指定的图像大小，必须使用img标签的width和height属性
这两个属性的取值可以是像素，也可以是百分比 例子 <img src="eiffel.jpg" width=100> 图片宽度为100个像素，而且高度会等比例变化 2018/9/17 传媒学院

8 例子 <img src="eiffel.jpg" width="50%" height="20%">
图片的宽度为图片原始大学的50％，高度为原始大小的20％ 如果同时指定width和height两个属性，有可能拉伤图片 通常只用一个属性来改变图片大小，除非有特殊的效果要求 2018/9/17 传媒学院

9 3、指定图像的间距 <img>标签的hspace和vspace属性是分别用来指定图像的水平间距和垂直间距 hspace
指的是所设置图片与相邻元素的水平间距 vspace 指的是所设置图片与相邻元素的垂直间距 例子 <img src=eiffel.jpg hspace=20> 表示图片与左右两边元素的间隔为20像素 2018/9/17 传媒学院

10 4、边框 <img>标签的border属性 例子 用来指定图像的边框
<img src=eiffel.jpg border=2> 给图片增加边框（默认是没有的），边框厚度为两个像素，颜色为黑色 后面学习css后可以改变边框颜色 2018/9/17 传媒学院

11 5、提示 <img>标签的title属性 例子 用来指定图像的替代文字说明
<img src=eiffel.jpg title=艾菲尔铁塔> 如果浏览器（很老的）不能显示图片，则会显示属性title的值 如果浏览器可以显示图片，title的值会在作为提示显示，当鼠标移动到图片上时会显示提示 2018/9/17 传媒学院

12 作业 在网页上显示4张图片，图片宽度为200，每行显示两张（假定浏览器宽度可以显示两张），鼠标移动到图片上时有图片的介绍信息（自定），图片间隔20个像素，如下所示 2018/9/17 传媒学院