第五节图片标签
图片标签，又叫做贴图标签。是制作网页的一种基本标签。图片标签，没有尾标签。
图片标签一般的表达方式为：
图片标签解析：<图片标签路径＝“地址”宽度＝450高度＝673>
图片标签的宽度与高度（也叫图片的规格），还可以用css样式表示。例如：
图片的路径，是指图片保存在哪个网站的服务器中，也就是指图片的地址。
图片标签中，还可以添加许多属性与属值：
title属性：标题。在等号后面的双引号内输入标题内容，当用鼠标箭头指向图片的时候，就会显示出这些文字。例如：title="东方女性之魅力"。当用鼠标箭头指向图片的时候，就会显示出“东方女性之魅力”这些文字。
标题的文字内容，可以是对图片的描述，也可以是你的空间的名称等内容。
alt属性：替代文本。alt属性的作用是：当图片无法显示的时候，就会显示出这里的文字内容。
例1：alt="“春天没来”欢迎您"。当图片无法显示的时候，就会显示出“春天没来”欢迎您的文字内容，说明这个图片来自“春天没来”的图书馆。
例2：alt="东方女性美美美"。当图片无法显示的时候，就会显示出东方女性美美美的文字内容，说明这个图片是美女图片。
添加了标题属性与替代文本属性的图片标签：
图片标签还可以添加边框线的属性：
上面的图片标签中添加了宽度为4px的灰色的实线型边框线。要修改边框线的颜色，你就修改上面标签中括号内的数值；要修改边框线的宽度，你就修改“4px”中的“4”；要修改边框线的样式，你就替换solid代码。
边框线的样式如下：dotted是点虚线型；dashed是线虚线型；solid是实线型；double是双线型；groove是3D沟槽状；ridge是3D脊状；inset是3D内嵌式；outset是3D外嵌式。（边框线的设置方法，我将在“表格标签”一节中详细讲解。）
图片标签还可以添加对齐方式属性：（DISPLAY:block属性不可省略）
你看看效果吧，图片是不是居中显示的？（对齐方式，我在以后的相关教程中详细讲解。）
图片标签还可以添加自定义鼠标指针样式：
你看看效果吧，图片中是不是有了漂亮的光标了？（这种效果，可能有的浏览器不支持。）
图片标签还可以添加外边矩属性：
图片标签添加了外边矩属性，会在图片外围的四周留出一定的空白部位。也可以设置为在图片外围的某一边留出一定的空白部位（外边矩属性，我在以后的相关教程中详细讲解。）。
图片标签还可以添加css的绝对定位样式或者相对定位样式，添加了这些属性，可以将图片放置到你想放置的任意地方：
上面的图片标签添加了css的绝对定位样式，要添加css的相对定位样式，把absolute修改为relative即可。
你看看这个图片，是不是放置到网页下方很远的地方了？需要向下拖动竖向滚动条才可以看到欧！
css的绝对定位样式与相对定位样式，我将单独撰写一节教程专题讲解。
图片标签可以添加的属性还有很多很多，等到你代码入门以后，自己再研究探讨吧。
要想应用图片标签，你还得学会寻找图片的地址。
寻找图片地址的方法如下：
例如这个图片：
在欣赏图片的页面中，“右击”图片，然后点击“属性”，就会弹出一个“属性”的方框，方框中就有这个图片的地址了：http://image59.360doc.com/DownloadImg/2013/03/2017/31071360_11.jpg
如下图：
在制作网页时，我们常常要修改图片的大小。修改图片的方法有好几种，最简单实用的方法就是在代码中修改。在代码中修改图片的宽度值与高度值即可。
例如：这个图片：
其宽度值是450，高度值是673。你只要修改这两个数值，就可以把图片变大或者变小。
作业：
1、认识图片标签的一般表达方式，弄清楚图片属性：路径、宽度、高度的含义。
2、会在图片标签中修改图片的规格，会在图片标签中替换图片的地址。
3、认识图片的“标题”属性、“替代文本”属性、“边框线”属性、“对齐方式”属性、“外边矩”属性，并学会应用这些属性。
4、试着给图片添加一个自定义鼠标指针。自定义鼠标指针，见我整理的这些文章：
http://www.360doc.com/content/13/0825/08/4127803_309703150.shtml
http://www.360doc.com/content/13/0825/12/4127803_309747794.shtml
http://www.360doc.com/content/13/0825/13/4127803_309760722.shtml
http://www.360doc.com/content/13/0825/13/4127803_309763960.shtml
http://www.360doc.com/content/13/0825/17/4127803_309816084.shtml
添加方法：用这些文章中的“鼠标特效代码”替换上面讲解的“添加了自定义鼠标指针样式的图片标签”中“括号内的鼠标地址”。
5、试着给图片添加绝对定位样式，观察其显示效果。
6、试着给图片添加相对定位样式，观察其显示效果。
“春天没来”编撰
2014年4月2日于北京
|
|
