英语专四成绩查询入口:学习笔记——HTML图片(Images)
来源:百度文库 编辑:九乡新闻网 时间:2024/04/30 08:34:29
多福老人欢迎您
地址:http://qwp43.360doc.com
HTML图片(Images)
参考来源:www.BlaBla.cn 布啦布啦网页教程与代码
学习笔记
用 这个 Tag 可以在HTML里面插入图片。最基本的语法如下:
url表示图片的路径和文件名。比如 url 可以是 http://www.blabla.cn/images/logo/blabla_logo01.gif,也可以是个相对路径 "../images/logo/blabla_logo01.gif"。
示例
效果
取
http://userimage2.360doc.com/10/0822/23/2572160_201008222340480660.jpg
图片alt属性
中有一个alt属性,英文叫alternate text。例句如下:
假使浏览器没有载入图片的功能,浏览器就会转而显示Alt属性的值。
其实,现在大多数浏览器都支持图片载入。在此介绍Alt属性,是因为它的另外一个重要功能。目前搜索引擎抓取工具无法识别图像中所含的文字,所以用ALT属性写上图片的说明,便于搜索引擎抓取你网页的内容。
示例
效果
将鼠标停留在图片上,你可以看到Alt属性里写的内容。
图片align属性
用align属性,可以改变图片的垂直(居上、居中、居下)对齐方式和水平对齐方式(居左、居中、居右)。
示例
效果
取
http://userimage2.360doc.com/10/0822/23/2572160_201008222340480660.jpg
http://userimage2.360doc.com/10/0822/23/2572160_201008222341050676.jpg
http://userimage2.360doc.com/10/0822/23/2572160_201008222343170441.jpg
http://userimage2.360doc.com/10/0822/23/2572160_201008222340170223.jpg
图片的上下对齐方式:
对齐方式:top(居上)
对齐方式:middle(居中)
对齐方式:bottom(居下)
图片的左右对齐方式:
对齐方式:left(居左)
对齐方式:center(居中)
对齐方式:right(居右)
图片的大小
在缺省状况下,图片显示原有的大小。你可以用height和width属性改变图片的大小。不过图片的大小一旦被改变,图片会相应放大或缩小,显示出来的结果可能会很难看。
示例
效果
你可以使用Height和Width属性来改变图片的大小。
建议
图片相对文字,所占的字节数较多,比如一个全屏的图片,即使经过压缩,也要占去大约50k字节,这相当于25000字的文本。因此浏览器载入图片比较费时,建议一个HTML文件里不要包含过多的图片,否则会影响你的网页显示速度。
更多示例
背景图片
这个示例演示如何将一个图片作为HTML网页的背景图片。
效果
这个网页有背景图片哦!
如果图片比页面小,图片会自动重复。
将一个图片作为一个超链接
这个示例演示了如何将一个图片作为一个超链接,即点击一个图片,可以连接到其它文件。
效果
你可以将一张图片作为一个链接,点击这个图片。
地址:http://qwp43.360doc.com
HTML图片(Images)
参考来源:www.BlaBla.cn 布啦布啦网页教程与代码
学习笔记
用 这个 Tag 可以在HTML里面插入图片。最基本的语法如下:
url表示图片的路径和文件名。比如 url 可以是 http://www.blabla.cn/images/logo/blabla_logo01.gif,也可以是个相对路径 "../images/logo/blabla_logo01.gif"。
示例
布啦布啦Logo图片:
效果
取
http://userimage2.360doc.com/10/0822/23/2572160_201008222340480660.jpg
图片alt属性
中有一个alt属性,英文叫alternate text。例句如下:
假使浏览器没有载入图片的功能,浏览器就会转而显示Alt属性的值。
其实,现在大多数浏览器都支持图片载入。在此介绍Alt属性,是因为它的另外一个重要功能。目前搜索引擎抓取工具无法识别图像中所含的文字,所以用ALT属性写上图片的说明,便于搜索引擎抓取你网页的内容。
示例
将鼠标停留在图片上,你可以看到Alt属性里写的内容。
效果
将鼠标停留在图片上,你可以看到Alt属性里写的内容。
图片align属性
用align属性,可以改变图片的垂直(居上、居中、居下)对齐方式和水平对齐方式(居左、居中、居右)。
示例
图片的上下对齐方式:
对齐方式:top
对齐方式:middle
对齐方式:bottom
图片的左右对齐方式:
对齐方式:left
对齐方式:center
对齐方式:right
效果
取
http://userimage2.360doc.com/10/0822/23/2572160_201008222340480660.jpg
http://userimage2.360doc.com/10/0822/23/2572160_201008222341050676.jpg
http://userimage2.360doc.com/10/0822/23/2572160_201008222343170441.jpg
http://userimage2.360doc.com/10/0822/23/2572160_201008222340170223.jpg
图片的上下对齐方式:
对齐方式:top(居上)
对齐方式:middle(居中)
对齐方式:bottom(居下)
图片的左右对齐方式:
对齐方式:left(居左)
对齐方式:center(居中)
对齐方式:right(居右)
图片的大小
在缺省状况下,图片显示原有的大小。你可以用height和width属性改变图片的大小。不过图片的大小一旦被改变,图片会相应放大或缩小,显示出来的结果可能会很难看。
示例
你可以使用Height和Width属性来改变图片的大小。
效果
你可以使用Height和Width属性来改变图片的大小。
建议
图片相对文字,所占的字节数较多,比如一个全屏的图片,即使经过压缩,也要占去大约50k字节,这相当于25000字的文本。因此浏览器载入图片比较费时,建议一个HTML文件里不要包含过多的图片,否则会影响你的网页显示速度。
更多示例
背景图片
这个示例演示如何将一个图片作为HTML网页的背景图片。
这个网页有背景图片哦!
如果图片比页面小,图片会自动重复。
效果
这个网页有背景图片哦!
如果图片比页面小,图片会自动重复。
将一个图片作为一个超链接
这个示例演示了如何将一个图片作为一个超链接,即点击一个图片,可以连接到其它文件。
效果
你可以将一张图片作为一个链接,点击这个图片。
学习笔记——HTML图片(Images)
学习笔记——HTML列表(Lists)
学习笔记——HTML表单(Forms)
学习笔记——如何创建HTML表格
学习笔记——如何创建HTML表格 1
学习笔记——一些基础的HTML Tag
学习笔记——HTML利用超链接打开链接文件
学习笔记——HTML背景颜色和背景图片
学习笔记——HTML头部信息(Head)
学习笔记——【HTML一些基本命令的代码】
学习笔记——图片右边+文字
学习笔记——图片添加文字
学习笔记——图片的添加
学习笔记——插入图片练习
学习笔记——图片加边框
学习笔记——布啦布啦网页教程与代码——HTML基本概念
学习笔记——HTML相对路径(Relative Path)和绝对路径(Absolute Path)
学习笔记——图片右移练习
学习笔记——多图片向上方向滚动
学习笔记——多图片向上方向滚动2
学习笔记——多图片向上方向滚动1
学习笔记——图片+滚动字+flash
学习笔记——图片防被盗代码
学习笔记——Flash音画加入图片的代码