zoukankan      html  css  js  c++  java
  • HTML图片元素(标记)

    <html>
    <head>
    <title>第一个网页</title>
    </head>
    <body>
    ***************图片元素******************</br>
    <img src='mm.jpg' />
    </body>
    </html>

    新建一个文件夹“text”,在text文件夹内新建index.html并放入一张图片mm.jpg

    在index.html中写入 <img src="a.jpg" /> 保存

    打开index.html

     更改图片大小<img src='mm.jpg' width=170px />只需写width,height会随着width自动比例变换

    另外我们使用“../”来表示上一级目录,“../../”表示上上级的目录,以此类推。

    <img src="" />
    如果图片和html文件在同一目录,就直接写*.jpg
    如果图片的文件夹和html在同一目录,就写/../*.jpg


    说明,图片可以链接外部网络的URL
    例如百度页面上百度的logo,在logo上右键复制图片地址,将图片地址复制到src中
    <img src='https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png' width=120px />
    <img src='https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png' width=120px border=1 />

    观察上面两行,第二个多了border,图片显示的效果是图片外面一圈有黑色框,border的属性值可以更改

    <img src='mm.jpg' width=170px />
    <img src='mm.jpg' width=170px />
    <img src='mm.jpg' width=170px />
    <img src='mm.jpg' width=170px />
    <img src='mm.jpg' width=170px />
    <img src='mm.jpg' width=170px />
    <img src='mm.jpg' width=170px />
    <img src='mm.jpg' width=170px />

    观察效果,相同的图片可以显示多次

  • 相关阅读:
    day30---内置函数
    day30---绑定方法与非绑定方法
    元类以及属性查找
    python 内置方法/魔法方法
    python 面向对象高级-反射机制
    centos7下jenkins升级
    屏蔽百度右侧热搜
    centos7部署汉化版gitlab
    CentOS 7 安装 Jenkins
    centos7安装与配置ansible
  • 原文地址:https://www.cnblogs.com/Yimi/p/5847639.html
Copyright © 2011-2022 走看看