Web前端开发——HTML之HTML标签（Ⅲ）img

最新推荐文章于 2024-07-05 11:29:39 发布

OSurer

最新推荐文章于 2024-07-05 11:29:39 发布

阅读量412

点赞数

分类专栏： Web前端开发文章标签： HTML标签 img标签

本文链接：https://blog.csdn.net/wq_ocean_/article/details/104129204

版权

Web前端开发专栏收录该内容

26 篇文章 4 订阅

订阅专栏

1. img标签格式

插入图像时使用 img标签，img标签是单个标签，格式为：

<img src="路径+文件名" alt="路径无效时要显示的文字">

2. img图片路径

路径可分为相对图片路径和绝对路径

绝对路径：以根目录为基准，如：<img src = “C:/site/logo.gif” />

相对路劲：以该文档所在位置为基准，如：<img src = “logo.gif” />

3. 几种相对路径

4. 案例

4.1 效果图

4.2 组织形式

4.3 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My site</title>
</head>
<body>
    <h3>常用站点</h3>
    <p>
        <img src="images\ifeng.png" alt="凤凰网">
        <a href="https://www.ifeng.com/">凤凰</a>
    </p>
    <p>
        <img src="images\sina.png" alt="新浪网">
        <a href="https://www.sina.com.cn/">新浪</a>
    </p>
    <p>
        <img src="images\sohu.png" alt="搜狐网">
        <a href="http://www.sohu.com/">搜狐</a>
    </p>
    <p>
        <img src="images\baidu.png" alt="百度网">
        <a href="https://www.baidu.com/">百度</a>
    </p>
</body>
</html>

注：img标签和a标签一样，需要放在p标签内才会换行

OSurer

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web前端开发——HTML之HTML标签（Ⅲ）img

目录1. img标签格式2. img图片路径3. 几种相对路径4. 案例4.1 效果图4.2 组织形式4.3 代码1. img标签格式插入图像时使用img标签，img标签是单个标签，格式为：<img src="路径+文件名" alt="路径无效时要显示的文字">2. img图片路径路径可分为相对图片路径和绝对路径绝对路径：以根目...
复制链接

扫一扫

专栏目录