十天学会HTML:第五天 图像 — 背景图片 插入图片等

一、背景图案的设置



格式:

  1. <body background=”URL”>

复制代码

URL是指图片背景的地址



二、将图片插入到网页中去



格式:

  1. <img src=”URL”>

复制代码

功能:将图片插入到网页中去,单一标签



1、<img>下的属性



属性名称  属性值  说明

src     URL   图片的路径



2、图片的注解,也称为ALT,在SEO优化中经常会提到,也就是图片必须添加的选项



属性名称  属性值  说明

alt     字符串  给图片做注解



3、图象大小的设置



属性名称  属性值  说明

width    像素   绝对设置,宽

      百分比  相对设置,宽

height   像素    绝对设置,高

      百分比  相对设置,高



4、图象边框的设置



属性名称  属性值  说明

border   数字   图象边框



5、文字图象的排列



属性名称  属性值  说明

align    left    图象靠左,文字靠右

      right   图片靠右,文字靠左

      top    文字往上靠

      middle   文字靠中

      bottom  文字靠下



6、空隙的设置



属性名称  属性值  说明

vspace   像素   垂直上下两端与物件的距离

hspace   像素   水平左右两段与物件的距离



三、用图像作为超链接



格式:

  1. <a href=”URL”><img src=”URL”></a>

复制代码

2个URL代码是不同的,第一个是链接的地址,第二个是图片的地址,图像链接会经常使用,比如常见的一些图片广告位都是如此。



四、地图索引



格式:

  1. <map name=”图象名称” id=”图象名称”>
  2. <area shape=”选取区块的形状” coords=”坐标” href=”URL” alt=”文
  3. 字说明”>
  4. </map>

复制代码

<img src=”URL” USEMAP=”#图象名称”>



<map>声明整张图使用地图链接方式进行连接。



name、id指此图的名称.



<area>表示我们所要链接其中一点的区快



shape表示我们所选择的形状,如:rect矩形、circle圆、poly多边形。



coords 表示地图的坐标位置!!



五、为网站添加图标

  1. <link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”>

复制代码

一般网站开源程序默认都已经写好了代码,只需要制作favicon.ico图片,然后上传覆盖即可,推荐查看:ICO透明背景图标制作方法



作业:



1、制作一个图像链接,简单的代码图片广告位;

2、尝试写个简单的地图,包含3-5个链接点;

3、给你的网站制作一个favicon.ico

-=||=-收藏

未经允许不得转载:云破天开 » 十天学会HTML:第五天 图像 — 背景图片 插入图片等

评论

3+2=