zoukankan      html  css  js  c++  java
  • HTML--Boby部分之<img>标签

     随笔记录方便自己和同路人查阅。

    #------------------------------------------------我是可耻的分割线-------------------------------------------

    <img>标签是用来显示图片的

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>input系列</title>
    </head>
    <body>
        <img src="2.jfif" alt="校花" />
    </body>
    </html>

    结果展示:

    注意事项:图片需放在html同一目录,不然需要写上图片的相对路径

    以上结果可以看出图片加载成功了,但是有点大,优化一下就上长和宽:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>input系列</title>
    </head>
    <body>
        <img src="2.jfif" alt="校花" width="200px;" height="200px;" />
    </body>
    </html>

    结果展示:

    给图片加超链接跳转功能,比如淘宝一点击商品图片就跳转到商品详情页:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>input系列</title>
    </head>
    <body>
        <a href="s12.html">
            <img src="2.jfif" alt="校花" width="200px;" height="200px;" />
        </a>
    </body>
    </html>

    跳转到的页面,HTML文件名称为s12.html,代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>input系列</title>
    </head>
    <body>
        <form>
            <p>个人简介:</p>
            <p>姓名:不知</p>
            <p>年龄:不详</p>
            <p>她是网络上下载的不知名校花,哈哈哈哈</p>
        </form>
    </body>
    </html>

    效果展示:

    打开网页显示照片,点击照片后跳转到超链接

    注意:其中alt属性是文字描述,如果图片加载失败,就显示该文件,效果如下

     

    Title标签是用来显示提示信息的,鼠标悬浮到图片显示该提示信息

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>input系列</title>
    </head>
    <body>
        <a href="s12.html">
            <img src="2.jfif" title="大美女" alt="校花" width="200px;" height="200px;"/>
        </a>
    </body>
    </html>

    结果展示:

     

  • 相关阅读:
    模拟两位选手进行n羽毛球比赛(15分赛制)并计算模拟胜率
    Pyton实例
    Python图片处理
    jieba库的使用和好玩的词云
    Python汉诺塔问题
    多线程同时操作一个epoll_fd
    Linux tr命令
    iptables 深入分析
    Linux xtables
    Linux IPC 共享内存
  • 原文地址:https://www.cnblogs.com/lirongyang/p/11250740.html
Copyright © 2011-2022 走看看