前端 html body img标签 图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img src="imags/1.jpg">
</body>
</html>

 

调整图片高度 宽度 style

 

200像素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img src="imags/1.jpg" style="height: 200px;width: 200px;">
</body>
</html>

在图片上加上跳转url

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--  在里面包一个a标签-->
    <a href="http://www.baidu.com">
    <img src="imags/1.jpg" style="height: 200px;width: 200px;">
    </a>
</body>
</html>

没有图片时候显示 ALT

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="http://www.baidu.com">
    <img src="imags/1.jp" style="height: 200px;width: 200px;" ALT="章鱼">
    </a>
</body>
</html>

 

鼠标放在图片显示文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="http://www.baidu.com">
    <img src="imags/1.jpg" title="大章鱼" style="height: 200px;width: 200px;" ALT="章鱼">
    </a>
</body>
</html>

猜你喜欢

转载自www.cnblogs.com/mingerlcm/p/9076110.html