鱼C论坛

 找回密码
 立即注册
查看: 12965|回复: 63

[技术交流] <010>为你的页面增加图像

[复制链接]
发表于 2015-7-29 22:11:43 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 戴宇轩 于 2015-8-11 09:19 编辑

下面几节课中我们将学习为你的页面添加图片。比如你拍的照片,logo……


我们先复习一下前面的内容,看到下面的元素,请说出它是内联元素还是块元素:
<h1>
<a>
<em>
<ul>
<br>
<li>
<ol>
<img>
<q>
<blockquote>
答案:
游客,如果您要查看本帖隐藏内容请回复



图像格式

世界上有太多的图片格式,幸运的是,网页上常用的图片格式只有三个------JPEG, PNG, GIF

JPEG
1. 适合连续色调图像,比如照片
2. 是一种有损图片格式
3. 不支持透明度
4. 图片比较小,能在页面上高效地显示


PNG
1. 适合单色图像和线条构成的图像
2. 有三种格式: PNG-8, PNG-24, PNG-32, PNG-24不支持透明
3. 是一种无损图片格式


GIF
1. 和PNG一样,适合单色图像和线条构成的图像
2. 可以表示256种颜色
3. 支持透明,不过只允许一种颜色设置为透明
4. 支持动画



试一试

你已经在前几课学会了用src来指定图片的来源创建一个HTML文件,输入以下内容,你需要回答一支铅笔在正常情况下可以画多长的线

图像地址: http://xxx.fishc.com/forum/201507/29/211524qoq2voqlq9zv90zz.png
<html>
  <head>
    <title>pencil</title>
  </head>
  <body>
    <p>
      在这里插入图像
    </p>
  </body>
</html>
答案:
游客,如果您要查看本帖隐藏内容请回复



一定要提供候选格式

    你永远无法知道人们用什么浏览器访问你的网页,由于这些不确定性,我们要做好准备,沉着应对。
    我们可以在<img>元素内加入alt属性,这样当图片加载不出来时会显示alt里的文字

创建一个HTML文件,输入以下内容:
<html>
  <head>
    <title>image</title>
  </head>
  <body>
    <p>
      <img src="不存在的logo.png" alt="FishC Study">
    </p>
  </body>
</html>
结果:
IMG_20150729_213525.jpg


调整图像大小

要调整图像大小,我们可以在<img>元素内添加width(宽度)和height(高度)属性
IMG_20150729_214622.jpg

如果你想显示缩略图,用改变图片尺寸的方式缩小图片,那么图片加载速度会非常慢。最好的方法是事先做好缩略图,放在页面上,然后放一个超链接,链接到原图

示例下载: 示例.zip (53.24 KB, 下载次数: 79)


评分

参与人数 1荣誉 +5 鱼币 +5 贡献 +3 收起 理由
dmy0225 + 5 + 5 + 3 对于初学者来说很棒!加油哦!

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2015-8-3 14:06:18 | 显示全部楼层
good
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2015-8-4 09:14:12 | 显示全部楼层
很不错   最近在学习这个
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2015-8-5 16:16:53 | 显示全部楼层
D大调
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2015-8-13 15:22:43 | 显示全部楼层
不知道答案啊
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2015-8-19 17:56:14 | 显示全部楼层
答案答案
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2015-8-21 10:21:28 | 显示全部楼层
为什么一定要回复才能看啊
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2015-8-25 14:34:48 | 显示全部楼层
谢谢
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2015-8-25 20:32:19 | 显示全部楼层
块元素
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2015-8-27 10:17:34 | 显示全部楼层
比教学视频学起来还方便
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2015-8-30 11:23:11 | 显示全部楼层
谢谢分享。。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2015-9-16 17:09:47 | 显示全部楼层
顶楼主
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2015-9-30 15:26:10 | 显示全部楼层
学无止境!!!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

头像被屏蔽
发表于 2015-9-30 23:32:43 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2015-10-4 22:39:46 | 显示全部楼层
看看
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2015-10-7 01:42:50 From FishC Mobile | 显示全部楼层
多谢楼主!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2015-10-26 10:27:09 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2015-11-5 19:39:05 | 显示全部楼层
看看,不错!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2015-11-17 14:09:04 | 显示全部楼层
努力学习
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2015-12-11 20:01:06 | 显示全部楼层
楼主好样的
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-23 18:24

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表