自学代码教程☆图片标签

编辑/吉祥如意988 资料/ 春天没来

图片标签<img >基本语法表达式

图片标签，又叫做贴图标签。是制作网页的一种基本标签。图片标签，没有尾标签。

图片标签一般的基本语法表达方式为：

图片标签<img>语法表达式解析

图片标签解析：<图片标签路径＝"地址" 宽度＝450 高度＝673>

图片标签css样式

图片标签的宽度与高度（也叫图片的规格），还可以用css样式表示。例如：

图片的路径，是指图片保存在哪个网站的服务器中，也就是指图片的地址。

图片标签中添加属性与属值

图片标签中，还可以添加许多属性与属值：

title属性：标题。在等号后面的双引号内输入标题内容，当用鼠标箭头指向图片的时候，就会显示出这些文字。

例如：title="东方女性之魅力"。当用鼠标箭头指向图片的时候，就会显示出“东方女性之魅力”这些文字。

标题的文字内容，可以是对图片的描述，也可以是你的空间的名称等内容。

alt属性：替代文本。

alt属性的作用是：当图片无法显示的时候，就会显示出这里的文字内容。

例1：alt="“春天没来”欢迎您" 。当图片无法显示的时候，就会显示出“春天没来”欢迎您的文字内容，说明这个图片来自“春天没来”的图书馆。

例2：alt="东方女性美美美"。当图片无法显示的时候，就会显示出东方女性美美美的文字内容，说明这个图片是美女图片。

图片标签添加标题属性与替代属性语法表达式

添加了标题属性与替代文本属性的图片标签：

图片标签添加边框线属性语法表达式

图片标签还可以添加边框线的属性：

上面的图片标签中添加了宽度为4px的灰色的实线型边框线。要修改边框线的颜色，你就修改上面标签中括号内的数值；要修改边框线的宽度，你就修改“4px”中的“4”；要修改边框线的样式，你就替换solid代码。

BORDER-LEFT（左边框宽）BORDER-TOP（上边框宽）BORDER-RIGHT（右边框宽）BORDER-BOTTOM（下边框宽）

边框线的样式如下：dotted是点虚线型；dashed是线虚线型；solid是实线型；double是双线型；groove是3D沟槽状；ridge是3D脊状；inset是3D内嵌式；outset是3D外嵌式。（边框线的设置方法，我将在“表格标签”一节中详细讲解。）

图片标签添加对齐方式属性语法表达式

图片标签还可以添加对齐方式属性：

你看看效果吧，图片是不是居中显示的？（对齐方式，我在以后的相关教程中详细讲解。）

图片标签还可以添加自定义鼠标指针样式

你看看效果吧，图片中是不是有了漂亮的光标了？（这种效果，可能有的浏览器不支持。）

图片标签还可以添加外边距属性

图片标签添加了外边矩属性，会在图片外围的四周留出一定的空白部位。也可以设置为在图片外围的某一边留出一定的空白部位（外边矩属性，我在以后的相关教程中详细讲解。）。

图片标签添加css的绝对定位样式或者相对定位样式

图片标签添加css的绝对定位样式或者相对定位样式，添加了这些属性，可以将图片放置到你想放置的任意地方：

上面的图片标签添加了css的绝对定位样式，要添加css的相对定位样式，把absolute修改为 relative即可。

你看看这个图片，是不是放置到网页下方很远的地方了？需要向下拖动竖向滚动条才可以看到哦！

css的绝对定位样式与相对定位样式，我将单独撰写一节教程专题讲解。

图片标签可以添加的属性还有很多很多，等到你代码入门以后，自己再研究探讨吧。

查找图片地址

要想应用图片标签，你还得学会寻找图片的地址。寻找图片地址的方法如下：

例如这个图片：

在欣赏图片的页面中，“右击”图片，然后点击“属性”，就会弹出一个“属性”的方框，方框中就有这个图片的地址了：http://image59.360doc.com/DownloadImg/2013/03/2017/31071360_11.jpg

如下图：

在制作网页时，我们常常要修改图片的大小。修改图片的方法有好几种，最简单实用的方法就是在代码中修改。在代码中修改图片的宽度值与高度值即可。

例如：这个图片：<IMG src="http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_8.jpg" width=450 height=673>

其宽度值是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、试着给图片添加相对定位样式，观察其显示效果。

欢迎光临吉祥如意图书馆

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。