QQ登录

只需一步,快速开始

登录 | 立即注册 | 找回密码

主题

帖子

荣誉

资深鱼友Ⅰ

Rank: 8Rank: 8Rank: 8Rank: 8

积分
1524
查看: 3318|回复: 55

[系列教程] <010>为你的页面增加图像

[复制链接]
最佳答案
0 
累计签到:284 天
连续签到:1 天
戴宇轩 发表于 2015-7-29 22:11:43 331855 | 显示全部楼层 |阅读模式

马上注册加入鱼C,享用更多服务吧^_^

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

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
  1. <html>
  2.   <head>
  3.     <title>pencil</title>
  4.   </head>
  5.   <body>
  6.     <p>
  7.       在这里插入图像
  8.     </p>
  9.   </body>
  10. </html>
复制代码
答案:
游客,如果您要查看本帖隐藏内容请回复



一定要提供候选格式

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

创建一个HTML文件,输入以下内容:
  1. <html>
  2.   <head>
  3.     <title>image</title>
  4.   </head>
  5.   <body>
  6.     <p>
  7.       <img src="不存在的logo.png" alt="FishC Study">
  8.     </p>
  9.   </body>
  10. </html>
复制代码
结果:
IMG_20150729_213525.jpg


调整图像大小

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

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

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

评分

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

查看全部评分

本帖被以下淘专辑推荐:

楼层
跳转到指定楼层
最佳答案
0 

尚未签到

tuzimina 发表于 2015-8-3 14:06:18 | 显示全部楼层
good
最佳答案
0 
累计签到:202 天
连续签到:2 天
kingguo 发表于 2015-8-4 09:14:12 | 显示全部楼层
很不错   最近在学习这个
最佳答案
0 
累计签到:3 天
连续签到:1 天
王鹏啊 发表于 2015-8-5 16:16:53 | 显示全部楼层
D大调
最佳答案
0 
累计签到:14 天
连续签到:1 天
SAMLA-- 发表于 2015-8-13 15:22:43 | 显示全部楼层
不知道答案啊
最佳答案
0 
累计签到:3 天
连续签到:1 天
彼岸花316 发表于 2015-8-19 17:56:14 | 显示全部楼层
答案答案
最佳答案
0 
累计签到:3 天
连续签到:1 天
羊圈圈 发表于 2015-8-21 10:21:28 | 显示全部楼层
为什么一定要回复才能看啊
最佳答案
0 
累计签到:34 天
连续签到:1 天
dabaojian 发表于 2015-8-25 14:34:48 | 显示全部楼层
谢谢
头像被屏蔽
最佳答案
0 
累计签到:65 天
连续签到:1 天
大冬瓜 发表于 2015-8-25 20:32:19 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
最佳答案
0 
累计签到:808 天
连续签到:1 天
hfut_wangfei 发表于 2015-8-27 10:17:34 | 显示全部楼层
比教学视频学起来还方便
最佳答案
0 
累计签到:51 天
连续签到:1 天
若尘 发表于 2015-8-30 11:23:11 | 显示全部楼层
谢谢分享。。
最佳答案
0 
累计签到:11 天
连续签到:1 天
cheyne0917 发表于 2015-9-16 17:09:47 | 显示全部楼层
顶楼主
最佳答案
2 
累计签到:766 天
连续签到:1 天
太空军校生 发表于 2015-9-30 15:26:10 | 显示全部楼层
学无止境!!!
头像被屏蔽
最佳答案
0 

尚未签到

鱼鱼521 发表于 2015-9-30 23:32:43 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
最佳答案
0 
累计签到:8 天
连续签到:1 天
街边拣幸福 发表于 2015-10-4 22:39:46 | 显示全部楼层
看看
最佳答案
0 
累计签到:1 天
连续签到:1 天
asd1157671820 发表于 2015-10-7 01:42:50 From FishC Mobile | 显示全部楼层
多谢楼主!
最佳答案
0 
累计签到:115 天
连续签到:1 天
stg808@126.com 发表于 2015-10-26 10:27:09 | 显示全部楼层
最佳答案
2 
累计签到:156 天
连续签到:1 天
夕阳游龙 发表于 2015-11-5 19:39:05 | 显示全部楼层
看看,不错!
最佳答案
0 
累计签到:4 天
连续签到:1 天
神农超儿 发表于 2015-11-17 14:09:04 | 显示全部楼层
努力学习
最佳答案
0 
累计签到:2 天
连续签到:1 天
Stone日月 发表于 2015-12-11 20:01:06 | 显示全部楼层
楼主好样的

发表回复

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

本版积分规则

关闭

小甲鱼强烈推荐 上一条 /1 下一条

    移动客户端下载(未启用)
    微信公众号

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备11014136号

Copyright 2018 鱼C论坛 版权所有 All Rights Reserved.

Powered by Discuz! X3.1 Copyright
© 2001-2018 Comsenz Inc.    All Rights Reserved.

小黑屋|手机版|Archiver|鱼C工作室 ( 粤公网安备 44051102000370号 | 粤ICP备11014136号

GMT+8, 2017-11-25 19:02

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