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>
  • 相关阅读:
    推荐一个wpf&sliverlight的图表控件
    数独求解
    WPF中的 CollectionChanged事件通知
    Windows 7 任务栏之缩略图预览(Thumbnail)
    把Google HK设为IE默认的搜索引擎
    F#小记——1. Hello F#
    F#小记——2. 基本数据类型
    使用异步socket的时候需要注意memory spike
    《everytime you kissed me》的中文歌词
    我回来了o(∩_∩)o...
  • 原文地址:https://www.cnblogs.com/lx09110718/p/2839585.html
Copyright © 2011-2022 走看看