澳门新葡萄京www27111com

相关下载
文件名 文件大小
example.gif 94k
<img> 即图像标签
需要设置其属性 src指定图像的路径

示例 1 : 显示图像   
示例 2 : 同级目录图像   
示例 3 : 上级目录图像   
示例 4 : 其他目录图像   
示例 5 : 设置图像的大小   
示例 6 : 图像居中   
示例 7 : 替换图片上的文字   

示例 1 :

显示图像

运行效果
<img src="http://www.prowz.com/example.gif"/>
 澳门新葡萄京www27111com www.prowz.com <img src="http://www.prowz.com/example.gif"/>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 2 :

同级目录图像

如果是本地文件,只需把图片放在同一个目录下即可
src直接使用文件名,不需要/
同级目录图像
示例 3 :

上级目录图像

图片在上级目录,则在src上加上 ../,即可访问上级目录的图片
如果是在上级目录的上级目录,则使用 ../../
上级目录图像
示例 4 :

其他目录图像

src使用图片所在的绝对路径,并在前面加上file://
其他目录图像
示例 5 :

设置图像的大小

如果设置的大小比原图片大,则会产生失真效果
运行效果
<img width="200" height="200" src="http://www.prowz.com/example.gif"/>
<img width="200" height="200" src="http://www.prowz.com/example.gif"/>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 6 :

图像居中

img不能够自己居中,需要放在其他能够居中的标签中实现这个效果,比如h1标签,p标签.
经常采用的手段是放在div中居中
关于div,请参考
运行效果
<div align="left"> <img src="http://www.prowz.com/example.gif"/> </div> <div align="center"> <img src="http://www.prowz.com/example.gif"/> </div> <div align="right"> <img src="http://www.prowz.com/example.gif"/> </div>
<div align="left">
  <img src="http://www.prowz.com/example.gif"/>
</div>

<div align="center">
  <img src="http://www.prowz.com/example.gif"/>
</div>

<div align="right">
  <img src="http://www.prowz.com/example.gif"/>
</div>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 7 :

替换图片上的文字

如果图片不存在,默认会显示一个缺失图片,这是不友好的
所以可以加上alt属性。
当图片存在的时候,alt是不会显示的
当图片不存在的时候,alt就会出现
运行效果
<img src="http://www.prowz.com/example_not_exist.gif" /> <br/> <img src="http://www.prowz.com/example.gif" alt="这个是一个图片" /> <br/> <img src="http://www.prowz.com/example_not_exist.gif" alt="这个是一个图片" />
  <img src="http://www.prowz.com/example_not_exist.gif" />

  <br/>

  <img src="http://www.prowz.com/example.gif" alt="这个是一个图片" />

  <br/>
  <img src="http://www.prowz.com/example_not_exist.gif" alt="这个是一个图片" />


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2017-04-23 src
潘岩
src 是什么意思 代表什么




1 个答案

how2j 答案时间:2017-04-24
src代表这个图片所处于的位置




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2017-02-28 图片不显示
NewB



在浏览器中图片显示异常,无图片显示
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>skill.html</title>
	
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    

  </head>
  
  <body>
    <h3>英雄技能</h3>
    <table border="1" width="800px">
    <tr bgcolor="pink">
    <td width="6%"><strong>技能名</strong></td>
    <td width="35px"><strong>触发</strong></td>
    <td><strong>技能属性</strong></td>
    <td width="70%"><strong>技能效果</strong></td>
    <td><strong>图标</strong></td>
    </tr>
    <tr>
    <td><strong>坚韧</strong></td>
    <td><strong>被动</strong></td>
    <td colspan="2">盖伦如果在9秒内不受到任何伤害,之后的每秒都会回复自己最大生命的0.4%。小兵的伤害不会中断坚韧效果。</td>
    <td><img src="../photo/skill1.png"></img></td>
    </tr>
    <tr>
    <td><strong>致命打击</strong></td>
    <td align="center"><strong>Q</strong></td>
    <td>冷却时间:8</td>
    <td>盖伦移除身上的所有降速效果,并获得30%移动速度加成,持续1.5/2/2.5/3/3.5秒<br/>
    在接下来的4.5秒内,他的下次普通攻击会造成30/55/80/105/130(+1.4AD)物理伤害,并沉默目标1.5秒。
    </td>
    <td><img src="../photo/skill2.png"/></td>
    </tr>
    <tr>
    <td><strong>勇气</strong></td>
    <td align="center"><strong>W</strong></td>
    <td>冷却:24/23/22/21/20</td>
    <td><strong>被动:</strong>击杀一个单位会永久提供0.25护甲和魔法抗性加成,最大值30<br/>
    <strong>主动:</strong>盖伦获得一个持续2/3/4/5/6秒的防御护盾,减少即将到来的30%伤害。</td>
    <td><img src="../photo/skill3.png" title="勇气" alt="course"/></td>
    </tr>
    <tr>
    <td><strong>审判</strong></td>
    <td align="center"><strong>E</strong></td>
    <td>冷却:9</td>
    <td>盖伦快速地旋舞大剑,持续3秒,在持续期间对周围敌人总共造成物理伤害--14/18/22/26/30加上他总攻击力的34/35/36/37/38%,5次(英雄每3级加1次)<br/>
    E【审判】会在攻击单个敌人时造成33%额外伤害。<br/>
    取消E【审判】会返还相当于剩余持续市场的冷却时间。<br/>
    E【审判】可以暴击,并造成额外伤害。</td>
    <td><img src="../photo/skill4.png"/></td>
    </tr>
    <tr>
    <td><strong>德玛西亚正义</strong></td>
    <td align="center"><strong>R</strong></td>
    <td>冷却:120/100/80</td>
    <td><b>被动:</b>最近获得最多击杀数的敌人会成为<strong>大反派。</strong>盖伦E【审判】和普攻会对大反派造成额外真实伤害,伤害值为<strong>大反派</strong>1%的最大生命值。<br/>
    <strong>主动:</strong>盖伦召唤德玛西亚之力,试图斩杀一名敌方英雄,目标损失的生命越多,则此技能造成的伤害越高。造成175/350/525魔法伤害加上目标已损失生命值的28/33/44%,对<strong>大反派</strong>造成真实伤害。</td>
    <td><img src="../photo/skill5.png"/></td>
    </tr>
        
    </table>
  </body>
</html>

							


2 个答案

NewB 答案时间:2017-03-03
恩恩,是的,放的位置有关系,已解决,谢谢,teacher!

how2j 答案时间:2017-03-01
因为启动tomcat服务器后,能通过相对路径访问的范围就在WebRoot里了,之外的文件,就无法访问,而你的图片恰恰就放在WebRoot外。 你把photo目录,放在WebRoot里,再修改一下相对路径,试试




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2016-12-07 猥琐的实例图片,跟领导坐在一起,都不好意思打开
2016-11-11 大佬来教教我吧
2016-06-12 加了alt显示的缺省图更大了
2016-06-12 加了alt显示的缺省图更大了
2016-06-12 加了alt显示的缺省图更大了
2016-06-12 加了alt显示的缺省图更大了
2016-04-14 什么叫相对路径和绝对路径




提问之前请登陆
关于 前端基础-HTML-图像 的提问

尽量提供截图、代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 389538688
站长会在每个工作日早上尽量回答提问(如果有漏掉没有回答的,请进群提醒一下)
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
站长是玻璃心,提问的时候请语气温柔些 kiss~
截止2017-5-19日累计提问 1638个,站长回答了 1546个
截止2017-8-15日累计提问 2788个,站长回答了 2544个

上传截图