HTML+CSS基础入门-第四天（HTML-图片标记）

最新推荐文章于 2024-07-26 14:13:59 发布

bree working

最新推荐文章于 2024-07-26 14:13:59 发布

阅读量611

点赞数

分类专栏： html+css 文章标签： html css 图片

本文链接：https://blog.csdn.net/qq_27261927/article/details/64123963

版权

html+css 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<img>图像标记

使用方法

注意

<img>为但标记，不需要使用</img>闭合
在加载图像文件的时候，文件的路径或者文件名格式错误，将无法加载文件。

<img>标记的属性

src属性

指定我们要加载图片的路径和图片的名称以及图片的格式。

代码1：图片位置与.html文件在一个文件夹下

    <body>
        <img src="airetv_camera.png">
    </body>

代码2：图片位置在.html文件夹中src文件夹中

    <body>
        <img src="src/airetv_camera.png">
    </body>

代码3：图片位置在.html文件夹的上一级中

    <body>
        <img src="../airetv_camera.png">
    </body>

显示结果：
4-1

width属性

指定图片的宽度单位px，em，cm，mm

height属性

指定图片的高度单位px， em，cm，mm

代码：以px为单位

<body>
        <img src="../airetv_camera.png" >
        <img src="../airetv_camera.png" width="10px" height="10px">
        <img src="../airetv_camera.png" width="100px" height="100px">
    </body>

显示结果：
4-2

代码：可以用百分比

    <body>
        <img src="../airetv_camera.png" width="50%" height="50%">   
    </body>

显示结果
4-3
百分比为占有父布局的百分比

border属性

指定图标的边框昆都，单位px，em，cm，mm
代码：

    <body>
        <img src="../airetv_camera.png" width="10%" height="10%" border="4px">  
    </body>

显示结果
4-4

alt属性

当王爷上的图片架子完成后，鼠标移动上面去，会显示这个图片的属性。

浏览器版本原因，无法演示。

如果图形没有下载或者加载失败，会用文字来代替图像显示

代码：

    <body>
        <img alt="cmera" src="./airetv_camera.png" width="10%" height="10%" border="4px">   
    </body>

显示结果：
4-5

搜索引擎可以通过这个属性的文字来抓取图片

bree working

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录