HTML图片(Images)

2016-02-19 22:20 6 1 收藏

想不想get新技能酷炫一下,今天图老师小编就跟大家分享个简单的HTML图片(Images)教程,一起来看看吧!超容易上手~

【 tulaoshi.com - Web开发 】

用 img 这个 Tag 可以在HTML里面插入图片。最基本的语法如下:

img src="url"
url表示图片的路径和文件名。比如 url 可以是 images/Logo/blabla_Logo01.gif,也可以是个相对路径 "../images/Logo/blabla_Logo01.gif"。

图片alt属性
img中有一个alt属性,英文叫alternate text。例句如下:

img src = "../images/html_tutorials/smile.jpg" alt="smile face"
假使浏览器没有载入图片的功能,浏览器就会转而显示Alt属性的值。

其实,现在大多数浏览器都支持图片载入。在此介绍Alt属性,是因为它的另外一个重要功能。目前搜索引擎抓取工具无法识别图像中所含的文字,所以用ALT属性写上图片的说明,便于搜索引擎抓取你网页的内容。

图片align属性

用align属性,可以改变图片的垂直(居上、居中、居下)对齐方式和水平对齐方式(居左、居中、居右)。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

图片的大小

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

在缺省状况下,图片显示原有的大小。你可以用height和width属性改变图片的大小。不过图片的大小一旦被改变,图片会相应放大或缩小,显示出来的结果可能会很难看。

建议

图片相对文字,所占的字节数较多,比如一个全屏的图片,即使经过压缩,也要占去大约50k字节,这相当于25000字的文本。因此浏览器载入图片比较费时,建议一个HTML文件里不要包含过多的图片,否则会影响你的网页显示速度。

背景图片

这个示例演示如何将一个图片作为HTML网页的背景图片。

这个示例演示了如何将一个图片作为一个超链接,即点击一个图片,可以连接到其它文件。

来源:http://www.tulaoshi.com/n/20160219/1628196.html

延伸阅读
标签: Web开发
以前,在web上要显示灰度图片的话,只有手工使用图片软件转换。但是现在借助于html5的canvas可以实现这个过程,而不需要再借助图片编辑软件了。我用html5和jquery做了一个demo,来展示如何实现这个功能。 目的 这个demo将会向你展示用html5和jquery,如何实现鼠标在图片上移动移出时,灰度图像和原图之间的切换。在html5出现之前,要实现这...
标签: Web开发
HTML 组件(HTML COMPONENTS)是IE5。0的主要扩展之一,其也最具革命性,微软的意图是用HTML组件来取代ACTIVEX控件,和ACTIVE控件一样,HTML组件是自持续封闭对象,可以一次开发任意使用,使用HTML组件有很多好处,本文将给您揭示其中的一些! HTML组件带入了很多新的术语、思想、对象、方法和属性,我将通过一个日历应用给您接受这些,这...
标签: Web开发
带有图片预览功能的上传表单,完整的HTML代码如下所示 html       head       meta http-equiv="Content-Type" content="text/html; charset=gb2312"       title带有图片预览功能的上传表单it.com.cn/title     &nb...
标签: Web开发
html,address, blockquote, body,dd,div, dl,dt,fieldset,form, frame,frameset, h1,h2,h3,h4, h5,h6,noframes, ol,p,ul,center, dir,hr,menu,pre{display:block} li{display:list-item} head{display:none} table{display:table} ...
标签: Web开发
html, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre   { display: block }  li              { display: list-item }  head&nb...

经验教程

248

收藏

86
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部