《HTML+CSS+JavaScript》之第7章图片_javascript html css图片-CSDN博客

本文链接：https://blog.csdn.net/oqqyx1234567/article/details/125592602

《HTML+CSS+JavaScript》之第7章图片

7.1 图片标签

<img src="" alt="" title=""/>

7.1.1 src属性

src指定图片路径，可以是相对路径，也可以是决定路径。
src是img标签必不可少的属性。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <img src="img/haizei.png">
</body>
</html>

7.1.2 alt属性和title属性

alt必选属性，title可选属性。
alt和title都用于图片描述，alt给搜索引擎看，图片无法显示时，页面显示alt文字；
title给用户看，鼠标指针移动到图片上时，显示title文字。

alt属性

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <img src="img/haizei.png" alt="海贼王之索隆" />
</body>
</html>

title属性

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <img src="img/haizei.png" title="海贼王之索隆"/>
</body>
</html>

7.2 图片路径

7.2.1 page1.html引用图片

绝对路径
完整路径。

<img src="D:/website/img/haizei.png"/>

相对路径
相对当前页面的路径。

<img src="img/haizei.png"/>

7.2.2 page2.html引用图片

图片和超链接，一般使用相对路径，几乎不会使用绝对路径。

7.3 图片格式

7.3.1 位图

像素图，像素点组成的图片。缩放，图片会失真。
jpg(jpeg)、png、gif。

jpg适合展示色彩丰富的高品质图片，体积较大，不支持透明背景。
png无损压缩格式，体积小，支持透明背景，不适合存储颜色丰富的图片。
gif图片效果最差，适合制作动画。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>jpg、png与gif</title>
    <style type="text/css">
        body{background-color:hotpink;}
    </style>
</head>
<body>
    <img src="img/1.jpg" alt=""/><br/>
    <img src="img/2.png" alt=""/><br/>
    <img src="img/3.gif" alt=""/>
</body>
</html>