zoukankan      html  css  js  c++  java
  • Html图像标签、绝对路径和相对路径:

    Html图像标签:

    <img>标签可以在网页上插入一张图片,它是独立使用的标签,它的常用属性有:

    (1)src 属性 定义图片的引用地址

    (2)alt 属性 定义图片加载失败时显示的文字,搜索引擎会使用这个文字收录图片、盲人读屏软件会读取这个文字让盲人识别图片,所以此属性非常重要。(图片的文字说明)

    <img src=”images/pic.jpg” alt=”产品图片” />

    绝对路径和相对路径:

    像网页上插入图片这种外部文件,需要定义文件的引用地址,引用外部文件还包括引用外部样式表、javascript等等,引用地址分为绝对地址和相对地址。

    绝对地址:相对于磁盘的位置去定位文件的地址

    相对地址:相对于引用文件本身去定位被引用的文件地址

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>网页插入图片</title>
    </head>
    <body>
        <h1>图片</h1>
    
        <h2>相对路径</h2>
        <!-- 网页和images在同一目录 -->
        <!-- 完整的写法是:./images/我是仙女.jpg  ./ 表示当前目录,可以省略 -->
        <img src="./images/我是仙女.jpg" alt="做个优雅的女人" />
        <img src="images/loading.gif" alt="加载中" />
    
    <!-- 网页所在的目录和images 在同一目录 -->
    <!-- 图片并没有展示出来 -->
        <img src="../images/哥总是这么迷人.jpg" alt="哥总是这么迷人" />
    
    <h2>绝对路径,不建议使用</h2>
    <!-- 图片并没有展示出来 -->
        <img src="C:UsersRenDesktopimg5.jpg" alt="生无可恋" />
    
    </body>
    </html>
    

    页面显示效果:

  • 相关阅读:
    JavaScript-警告(alert 消息对话框)
    JavaScript中4种document.write()输出展示
    JavaScript-什么是函数
    JavaScript-判断语句(if...else)
    javascript里面什么是变量
    [学习笔记] IT项目管理
    [学习笔记] IT项目管理
    [学习笔记] Oracle基础增删改查用法
    [学习笔记] Oracle字段类型、建表语句、添加约束
    [学习笔记] RabbitMQ的简单使用
  • 原文地址:https://www.cnblogs.com/reyinever/p/10549854.html
Copyright © 2011-2022 走看看