第8课 HTML中插入图片

QQ 群 587183576 观看本节视频

    在HTML中使用图片， 图片是网页中除了文字外，使用比较高的网页元素之一， 图片能提高网页界面的友好效果。能很大程度 上提高网页的客户体验效果，表现出超强的视觉冲击。

1使用背景图片：

     图片是外部文件，展示在网页中能实现文字无法表达的效果。 怎样在网页中插入图片呢，有两种方法来把图片放进网页中。
1 背景图
2 img标签
Gif png jpeg 图片适合网页。
背景图，作为标签的一个属性加入网页，body 和table标签可以用 <table background="java.jpg" bgproperties="fixed" >
使用CSS属性插入背景图：background-image: url(image.jpg);

2 img 插入图片到文档：

    用img标签可以在文档的任何位置插入图片 <img src="java.jpg" /> 此标签是单标签。src 表示图片的来源，是相对于本文档的位置，或者是一个绝对路径。

3在图片上加入飞屏提示：

    <img src="java.jpg" alt=”提示信息” /> 这个信息在图片加载完成时鼠标放上去会提示 的文字信息。与缩写功能有点类似，超链接的 title的功能。 有些浏览器不支持飞屏，但是如果图片加载失败不能显示，此文字就会显示在图片位置。

4图片尺寸设置：

    图片如果不设置尺寸时默认是全尺寸显示的。如果需要缩放的话，通过设置尺寸显示 <img src="java.jpg" alt="11212221" height="100",width="100"> 浏览器就会按比例对图片尺寸进行绽放。

5 设置图像边框：

    <img src="java.jpg" alt="11212221" height="100",width="100" border="10">

6 图像排列：

    左对齐 <img src="java.jpg" alt="11212221" height="100",width="100" border="10" align="left">
    右对齐 <img src="java.jpg" alt="11212221" height="100",width="100" border="10" align="right">
    中对齐<img src="java.jpg" alt="11212221" height="100",width="100" border="10" align="center">

7图像的边间隙：

水平方向，vspace="5" 垂直方向，hspace="5"

8图片的超链接：

    与文本的超链接类似。用A标签把img标签包含起来就可以了。 <a href="https://www.lingxiedu.com/" title="图片的超链接"><img src="java.jpg" height="100",width="100" border="1" align="left" hspace="5"> </a>