<010>为你的页面增加图像

戴宇轩 · 发表于 2015-7-29 22:11:43

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

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

x

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

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

我们先复习一下前面的内容，看到下面的元素，请说出它是内联元素还是块元素:
<h1>
<a>

<ul>
 
<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> 在这里插入图像 </body> </html>
答案:
游客，如果您要查看本帖隐藏内容请回复

一定要提供候选格式

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

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

调整图像大小

要调整图像大小，我们可以在<img>元素内添加width（宽度）和height（高度）属性

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

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

2015-7-29 22:11 上传
点击文件名下载附件

下一课
<011>了解HTML标准和字符编码

tuzimina · 发表于 2015-8-3 14:06:18

good

kingguo · 发表于 2015-8-4 09:14:12

很不错最近在学习这个

王鹏啊 · 发表于 2015-8-5 16:16:53

D大调

SAMLA-- · 发表于 2015-8-13 15:22:43

不知道答案啊

彼岸花316 · 发表于 2015-8-19 17:56:14

答案答案

羊圈圈 · 发表于 2015-8-21 10:21:28

为什么一定要回复才能看啊

dabaojian · 发表于 2015-8-25 14:34:48

谢谢

大冬瓜 · 发表于 2015-8-25 20:32:19

块元素

hfut_wangfei · 发表于 2015-8-27 10:17:34

比教学视频学起来还方便

若尘 · 发表于 2015-8-30 11:23:11

谢谢分享。。

cheyne0917 · 发表于 2015-9-16 17:09:47

顶楼主

太空军校生 · 发表于 2015-9-30 15:26:10

学无止境！！！

鱼鱼521 · 发表于 2015-9-30 23:32:43

提示: 作者被禁止或删除内容自动屏蔽

街边拣幸福 · 发表于 2015-10-4 22:39:46

看看

asd1157671820 · 发表于 2015-10-7 01:42:50

多谢楼主！

stg808@126.com · 发表于 2015-10-26 10:27:09

夕阳游龙 · 发表于 2015-11-5 19:39:05

看看，不错！

神农超儿 · 发表于 2015-11-17 14:09:04

努力学习

Stone日月 · 发表于 2015-12-11 20:01:06

楼主好样的

账号		自动登录	找回密码
密码			立即注册

鱼鱼521 鱼鱼521 当前离线 UID 321395 日志相册贡献荣誉积分 5 狗仔卡头像被屏蔽	发表于 2015-9-30 23:32:43 \| 显示全部楼层提示: 作者被禁止或删除内容自动屏蔽
	想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
	回复使用道具举报显身卡

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

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

评分

本帖被以下淘专辑推荐: