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>

    结果展示:

     

  • 相关阅读:
    phpexcel Could not open for reading! File does not exist.
    tp5 微信JSAPI支付
    ajax返回数据不跳success
    tp5 paginate带参翻页
    php 小程序 前后端POST通信
    小程序页面跳转不同方法
    小程序添加购物车
    小程序商城数量加减效果
    Include conf/extra/httpd-ssl.conf apache 无法启动
    SQL 实验详细源码参考
  • 原文地址:https://www.cnblogs.com/lirongyang/p/11250740.html
Copyright © 2011-2022 走看看