zoukankan      html  css  js  c++  java
  • HTML自学之旅(四)插入图像

    <html>
    <body background="D:\响O(∩_∩)O\响的东东\漂漂桌面\%5Bwallcoo_com%5D_best_of_nature_15173434.jpg">
    <img src="http://www.webshu.net/Soft/UploadSoftPic/200603/20060325143500917.gif">
    <br />
    <!--img src="C:\Users\Ideal\Desktop\^_^\webweb\img\ali.png" alt="阿狸阿狸"-->
    <p>如果图像无法显示(没找到资源,或浏览器不支持),则会显示alt定义的文本。否则文本不显示。在浏览器无法载入图像时,替换文本属性告诉读者们失去的信息。为页面上的图像都加上替换文本属性是个好习惯。<br />
    <img src="C:\Users\Ideal\Desktop\^_^\webweb\img\小纯洁.gif" alt="小纯洁动画"/>
    </p>
    <p>来自另一个文件夹的图像:
    <img src="C:\Users\Ideal\Desktop\^_^\webweb\Icons\favorite.png" alt="爱心"/>
    </p>
    <hr />图像在不同位置插入
    <p>
    图像<img src="C:\Users\Ideal\Desktop\^_^\webweb\img\刷牙.gif">在文本中
    </p>
    <p>图像<img src="C:\Users\Ideal\Desktop\^_^\webweb\img\刷牙.gif" align="bottom">在文本中(文本与图像底端对齐)</p>
    <p>图像<img src="C:\Users\Ideal\Desktop\^_^\webweb\img\刷牙.gif" align="middle">在文本中(文本与图像中端对齐)</p>
    <p>图像<img src="C:\Users\Ideal\Desktop\^_^\webweb\img\刷牙.gif" align="top">在文本中(文本与图像顶端对齐)</p>
    <p>注意!默认的是文本与图像的底端对齐!</p>
    
    <hr />浮动图像
    <p>
    <img src="C:\Users\Ideal\Desktop\^_^\webweb\img\鱼兔妹.gif" align="left">
    <br />
    带有图像的一个段落,图像的align属性设定为“left”。图像将浮动到文本的左侧。带有图像的一个段落,图像的align属性设定为“left”。图像将浮动到文本的左侧。带有图像的一个段落,图像的align属性设定为“left”。图像将浮动到文本的左侧。带有图像的一个段落,图像的align属性设定为“left”。图像将浮动到文本的左侧。带有图像的一个段落,图像的align属性设定为“left”。图像将浮动到文本的左侧。
    </p>
    
    <p>
    <img src="C:\Users\Ideal\Desktop\^_^\webweb\img\鱼兔妹.gif" align="right" />
    <br />
    带有图像的一个段落,图像的align属性设定为“right”。图像将浮动到文本的右侧。带有图像的一个段落,图像的align属性设定为“left”。图像将浮动到文本的左侧。带有图像的一个段落,图像的align属性设定为“left”。图像将浮动到文本的左侧。带有图像的一个段落,图像的align属性设定为“left”。图像将浮动到文本的左侧。
    </p>
    
    <hr />调整图像大小
    <p>
    <img src="C:\Users\Ideal\Desktop\^_^\webweb\img\小女孩.jpg" width="90" height="50" />
    </p>
    
    <p>
    <img src="C:\Users\Ideal\Desktop\^_^\webweb\img\小女孩.jpg" width="150" height="100" />
    </p>
    
    <p>
    <img src="C:\Users\Ideal\Desktop\^_^\webweb\img\小女孩.jpg" width="250" height="200" />
    </p>
    <hr />制作图像链接
    <p>
    <a href="http://www.baidu.com">
    <img border="0" src="C:\Users\Ideal\Desktop\^_^\webweb\img\eg_buttonnext.gif" />
    </a>
    </p>
    <hr />制作图像映射
    <p>
    <img src="C:\Users\Ideal\Desktop\^_^\webweb\img\小女孩.jpg" width="288" height="180" alt="小女孩壁纸" usemap="#girlmap">
    <map name="girlmap">
    <area href="girl.html"  shape="rect" coords="148,52,232,172" target="_blank" alt="girl">
    <area href="flower.html"  shape="circle" coords="108,86,20" target="_blank" alt="flower">
    </map>
    </p>
    
    <hr />把图像转换为图像映射
    <p>请把鼠标移动到图像上,看一下状态栏的坐标如何变化。</p>
    <p>也可以把下面的html改成服务器asp文件,然后点击图片,服务器会返回一个坐标值</p>
    <a href="插入图像.html">
    <img src="C:\Users\Ideal\Desktop\^_^\webweb\img\小女孩.jpg" ismap/>
    </a>
    
    
    <body>
    </html>
  • 相关阅读:
    js将单个反斜杠转化为斜杠的问题
    HTML提供的6种空格
    JavaScript 内存管理
    JavaScript:4个常见的内存泄露
    正则多种匹配描述
    css3图片展示方式
    动态规划篇一:初见动态规划
    小球下落(Dropping Balls, Uva 679)
    破损的键盘(悲剧文本)(Broken Keyboard(a.k.a. Beiju Text),Uva 11988)
    铁轨(rails, ACM/ICPC CERC 1997,Uva 514)
  • 原文地址:https://www.cnblogs.com/lx09110718/p/2839585.html
Copyright © 2011-2022 走看看