|
自学代码教程☆图片标签
编辑/吉祥如意988 资料/ 春天没来
|
| 图片标签<img >基本语法表达式 |
|
图片标签，又叫做贴图标签。是制作网页的一种基本标签。图片标签，没有尾标签。
图片标签一般的基本语法表达方式为：
<IMG src="http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_8.jpg" width=450 height=673> |
| 图片标签<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的绝对定位样式与相对定位样式，我将单独撰写一节教程专题讲解。
图片标签可以添加的属性还有很多很多，等到你代码入门以后，自己再研究探讨吧。 |
| 查找图片地址 |
|
要想应用图片标签，你还得学会寻找图片的地址。寻找图片地址的方法如下：
例如这个图片：
如下图：
在制作网页时，我们常常要修改图片的大小。修改图片的方法有好几种，最简单实用的方法就是在代码中修改。在代码中修改图片的宽度值与高度值即可。
其宽度值是450，高度值是673。你只要修改这两个数值，就可以把图片变大或者变小。
|
| 复习思考作业题 |
|
1、认识图片标签的一般表达方式，弄清楚图片属性：路径、宽度、高度的含义。
2、会在图片标签中修改图片的规格，会在图片标签中替换图片的地址。
3、认识图片的“标题”属性、“替代文本”属性、“边框线”属性、“对齐方式”属性、“外边矩”属性，并学会应用这些属性。
4、试着给图片添加一个自定义鼠标指针。自定义鼠标指针，见我整理的这些文章：
添加方法：用这些文章中的“鼠标特效代码”替换上面讲解的“添加了自定义鼠标指针样式的图片标签”中“括号内的鼠标地址”。
5、试着给图片添加绝对定位样式，观察其显示效果。
6、试着给图片添加相对定位样式，观察其显示效果。
|
|
|
