HTML中图片的网页插入以及属性设置

最新推荐文章于 2023-05-12 22:42:19 发布

爱睡觉的小馨

最新推荐文章于 2023-05-12 22:42:19 发布

阅读量3.2k

点赞数 1

分类专栏： HTML与CSS5网页设计

本文链接：https://blog.csdn.net/qq_45696288/article/details/108410308

版权

HTML与CSS5网页设计专栏收录该内容

21 篇文章 7 订阅

订阅专栏

文章速览：

HTML基础知识的学习+附加常用HTML标签

HTML中有序列表（＜ol＞＜li＞）和无序列表（＜ul＞＜li＞）以及定义列表的使用，以及利用无序列表制作网购按钮

HTML中图片的网页插入以及属性设置

HTML中＜a＞＜/a＞标签的四大功能必看！必看！！必看！！！

HTML表单标签＜form＞＜/form＞登录窗口和单选框以及下拉栏的制作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    
        <img src="images/dilireba.jpg" style="width: 600px;" alt="这是迪丽热巴" title="迪丽热巴">

</body>

</html>

说明：
上面的 img 标签是用来插入图片的
src属性是用来写要插入图片的地址（此时要注意图片和HTML文件的路径是相对的还是绝对的）
style="width: 600px;是用来缩放图片的（根据像素的大小进行调节）
alt属性的作用当照片显示不出来的时候将alt中的信息提示出来
title 属性的作用是当鼠标放在了图片上的时候，图片会有一个小说明，说明title中的内容

对上面 alt 的属性作用进行演示：

<body>
    
        <img rc="images/dilireba.jpg" style="width: 600px;" alt="这是迪丽热巴" title="迪丽热巴">

</body>

上面的代码中src少写了一个s，所有造成的结果就是图片显示不出来，所以提示提示信息
在这里插入图片描述
当图片可以正常的插入到网页的时候，alt 内的信息就不会提示出来

对上面的title 属性进行演示：
在这里插入图片描述
说明：
alt 是图片占位符
title是图片提示符

爱睡觉的小馨

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML中图片的网页插入以及属性设置

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> &l
复制链接

扫一扫