3、 网页中的图像既可以使用img标记也可以css背景,有何区别?

html-css022

3、 网页中的图像既可以使用img标记也可以css背景,有何区别?,第1张

css载入出错、访客设置浏览器模式为无样式、RSS订阅、搜索引擎或其他程序抓取等情况下,总体来说是没有样式表的时候:

img插入的图片会显示,而你用background弄的背景不会显示出来。

用 img 还是 css背景 就业根据你的内容来定了,大体原则是尽量页面设计表现上的东西用背景,产品、照片等内容用 img 插入。

比如一个网页正文上的大标题 h1~h6 ,本来这样就可以实现:

<h1>某某公司发展大事记</h1>

<p>1992年,那是一个春天,有个老头在我国的南边划了一个圈...</p>

<img src="123.jpg" alt="那个老人的照片" />

<p>2011年,我公司著名程序猿张小龙在微信上面又划了一个圈...</p>

<img src="234.jpg" alt="张小龙开发微信的照片" />

为了设计上的美观,某某公司发展大事记 这几个字要设计成独特又不常用的字体,那就得做成图片,然后这里就该 html 代码不变,用背景图来展示:

<h1 id="test">某某公司发展大事记</h1>

#test{

1.设成图片宽高

2.块级元素

3.background: url(载入背景图)

4.文本缩进 -1000em 把文字隐藏掉

}

这样人看到的是图片文字标题,对于抓取你页面的程序,它们看到的是更适合它们胃口的<h1>字段文字。接下来那两张重要的很能体现你公司高大上形象的照片,就要用 img 插入了,否则,没样式时人看不到,搜索引擎、Rss订阅器等程序爬你网页时,也看不到。

img必须写在一行

<HTML>

<HEAD>

<TITLE>New Document </TITLE>

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT="">

<style type="text/css">

*{

margin:0

padding:0

}

img{

width:120px

height:350px

border:solid black 1px

}

</style>

</HEAD>

<BODY>

<div>

<img src="1.jpg"/><img src="2.jpg"/><img src="3.jpg"/><img src="4.jpg"/><img src="1.jpg"/><img src="2.jpg"/>

</div>

</BODY>

</HTML>