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>

    结果展示:

     

  • 相关阅读:
    Java 8 新特性-菜鸟教程 (8) -Java 8 日期时间 API
    Java 8 新特性-菜鸟教程 (7) -Java 8 Nashorn JavaScript
    Java 8 新特性-菜鸟教程 (6) -Java 8 Optional 类
    心理相关
    matlab和Visio安装
    论文资料搜集整理(研究现状)
    调式相关
    梅花落与折杨柳
    混合高斯模型——学习笔记
    NSCT,非下采样Contourlet变换——学习笔记
  • 原文地址:https://www.cnblogs.com/lirongyang/p/11250740.html
Copyright © 2011-2022 走看看