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>

    结果展示:

     

  • 相关阅读:
    Roslyn 编译器和RyuJIT 编译器
    go语言---defer
    go语言---for
    go语言--time.After
    go语言---for range
    用gulp打包带参数资源做法与asp.net/java项目结合的自动构建方案探讨
    JQuery判断元素是否存在
    gulp实现打包js/css/img/html文件,并对js/css/img文件加上版本号
    gulp同步执行任务
    gulp-rev同时将js和css文件写在一个rev-manifest.json文件里面的方式探讨
  • 原文地址:https://www.cnblogs.com/lirongyang/p/11250740.html
Copyright © 2011-2022 走看看