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

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

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

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

我们先复习一下前面的内容，看到下面的元素，请说出它是内联元素还是块元素:<h1>
<a>
<em>
<ul>
<br>
<li>
<ol>
<img>
<q>
<blockquote>答案:**** Hidden Message *****


图像格式
世界上有太多的图片格式，幸运的是，网页上常用的图片格式只有三个------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>答案:**** Hidden Message *****


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

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



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


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

示例下载:


下一课
<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

{:9_241:}

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

看看，不错！

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

努力学习

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

楼主好样的
页: [1] 2 3 4
查看完整版本: <010>为你的页面增加图像