html中图片插入相关知识点<img src = "图片">

定义和用法

    img元素向网页内嵌入一张图像

    <img src=" 图像 "  alt = " 图片代替文本 ">   <!--src属性和alt属性是img标签所必须的属性-->

    title=" 内容 "  属性,表现方式鼠标在图片上然后显示内容文字。

    多个属性用空格空开,

 

          align属性设置图像对齐方式 例如 align="bottom"

          src的值可以是相对url 也可以是绝对url

  • 绝对 URL - 指向其他站点(比如 src="http://www.example.com/")
  • 相对 URL - 指向站点内的文件(比如 src="/i/image.gif")

      延伸:

        html背景图 :将background="url"放入<body>标签内作为它的属性,如果图像小于界面会一直重复

        排列图片:给 <img>标签添加align属性 

        图片浮动:align属性的right ,left值

        图片的放大和缩小:width和hight属性,宽度高度一般只设置一个,不影响图片缩放效果(等比例缩放)属性内的宽度高度可以                 不用加单位。

        图片制作超链接: 将<img>标签放入<a>标签内

        创建图像地图:将一个图片分为几块,每一块都对应一个超链接

 

示例

  源代码:

  

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>img</title>
 6 </head>
 7 <body background="https://ps.ssl.qhimg.com/sdmt/352_135_100/t01e7946e730229de69.jpg">
 8 <!--来自站内的图片-->
 9 <img src="../../美女.jpg" alt="美女">
10 <!--来自网站上的图片-->
11 <img src="http://uploads.oh100.com/allimg/1711/32-1G1240RG2.jpg" border = "15" alt="父爱如山">
12 <!--来自网站上的图片但是未显示-->
13 <img src="http://image.so.com/v?q=%E7%88%B6%E4%BA%B2%E8%8A%82&src=tab_www&correct=%E7%88%B6%E4%BA%B2%E8%8A%82&cmsid=1ff413c909fef82c03f76cf69a84b478&cmran=0&cmras=0&cn=0&gn=0&kn=50#multiple=0&gsrc=1&dataindex=18&id=d1e6a211621ed63d1c09bd84780ef021&currsn=0&jdx=18&fsn=110" border = "1" alt="图片未找到">
14 
15 
16 </body>
17 </html>
img

 

  运行图片:

  

 

    

 

 

 

 

 

 

    

 

转载于:https://www.cnblogs.com/sunmoonyou/p/9192381.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值