Q1.二者有何区别?
A1.写在css里面的图片是以背景图形式存在的,而写在html里的是以<img>标签形式存在的,
在网页加载的过程中,以css背景图存在的图片会等到结构加载完成(网页的内容全部显示以后)才开始加载,而html中的<img>标签是网页结构(内容)的一部分会在加载结构的过程中加载,换句话讲,网页会先加载<img>标签的内容,再加载背景图片,如果你用<img>引入了一个很大的图片,那么在这个图片下载完成之前,<img>之后的内容都不会显示。而如果用css来引入同样的图片,网页结构和内容加载完成之后,才开始加载背景图片,不会影响你浏览网页内容。

Q2.什么图片插入在css,什么图片插入在html里面?
A2.如果是装饰性的图片就写在css里面,如果是内容性的图片就写在html里面,
打个比方,你要做一个有漂亮边框的相册。那么修饰边框的图片就写在css里面,相框里面的内容照片就写在html里面。

Q3.不知道怎样问了,扩展点说就更好。
A3.以后的网页设计方向是表现层和内容层分离,css管表现,也就是显示效果,html管结构,内容结构的划分,这样代码要简洁易维护一些。关于其他回答中的“像<img />这种属于表现层的东西都会被丢弃的”这种说法是不正确的,内容中的图片还是要使用<img>图标而不是css背景来引入。而“css图片可以复用,<img>图片不能复用”这种说法也不正确,网页加载过程中相同的图片会下载一次并保存在缓存里面,其他地方的<img>使用了同样的图片是不会再去下载的。<img>图片也可以复用。

网页实现插入图片—css与html的区别的更多相关文章

  1. Bootstrap css栅格 + 网页中插入代码+css表格

    设计达人 http://www.shejidaren.com/30-minimal-app-icons.html CSS栅格: <!DOCTYPE html> <html lang= ...

  2. html插入图片和多媒体

    图像 插入图像 在html网页中插入图片唯一的标记就是,它的src属性是必需属性 <img src="图片地址"> 属性 说明 src 图像的源文件 alt 提示文字 ...

  3. 认识<img>标签,为网页插入图片

    在网页的制作中为使网页炫丽美观,肯定是缺少不了图片,可以使用<img>标签来插入图片. 语法: <img src="图片地址" alt="下载失败时的替 ...

  4. CSS - 插入图片img和背景图片

    1. img插入图片,用的最多,比如产品展示类 .section img { width: 200px;/* 插入图片更改大小 width 和 height */ height: 210px; mar ...

  5. 插入图片新方式:data:image

    我们在使用<img>标签和给元素添加背景图片时,不一定要使用外部的图片地址,也可以直接把图片数据定义在页面上.对于一些“小”的数据,可以在网页中直接嵌入,而不是从外部文件载入. 如何使用 ...

  6. 网页制作常用的CSS知识

    在制作网页中,我们会用到很多CSS的知识,在这里我简单的总结了一些. div    划分区块 ul,li 无序列表(配合划分区块) ol,li 有序列表 a 超链接标签 p 段落标签 h 标题标签 i ...

  7. 【转】手机web——自适应网页设计(html/css控制)

    手机web——自适应网页设计(html/css控制) 就目前形势来看,Web App 正是眼下的一个趋势和潮流,但是,对于Web App的设计可能大家有的不是很了解,下面就将整理好的网页设计的技巧奉献 ...

  8. 可编辑DIV (contenteditable="true") 在鼠标光标处插入图片或者文字

    近期需开发一个DIV做的编辑器,插入表情图片可直接预览效果,仔细参考了下百度贴吧的过滤粘贴过来文件的THML代码,自己整理了下.写出来只是和大家分享下,我自己也不大懂,经过努力,幸好搞定. 蛋疼的事情 ...

  9. 手机web——自适应网页设计(html/css控制) - 51CTO.COM

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

随机推荐

  1. xpath教程三---逐层检索和全局检索

    本节主要介绍用xpath来描述html的层级关系 主要使用到的知识点如下: 单独的一个点 .,表示当前位置 两个点 ..,表示上一级父标签的位置 单独的一个斜杠 /,表示只检索下面一级 单独的两个斜杠 ...

  2. phpcms退出 提示 :退出成功0 。 的解决办法

    打开/phpcms/modules/member/index.php 搜索如下代码: showmessage(L('logout_success').$synlogoutstr, $forward); ...

  3. 发送tcp的时候,数据包是如何拷贝的

    发送数据包的时候,用户态的数据包是如何拷贝到内核的kiovec msghd 结构体 icmp是走sock吗? 每一个skb_buffer的大小都是固定的吗?所以有skb_available这样的函数 ...

  4. Oracle查询字段中有空格的数据

    一.问题说明 最近在给某个用户下的表批量添加注释时,在程序中将注释名用trim()过滤一遍就可以了,但是在程序执行成功后怎么检测添加的注释名是否有空格存在呢? 二.解决方法 1.SELECT * FR ...

  5. css样式 一定要reset?

    有大神讲过了,直接看http://www.zhangxinxu.com/wordpress/?p=758

  6. python-输出颜色显示

    显示颜色格式:\033[显示方式;字体色;背景色m...主题内容hello world...\033[0m \033 从这里开始标颜色................................. ...

  7. [HNOI2010]合唱队 区间DP

    ---题面--- 题解: 偶然翻到这道题,,,就写了. 观察到一个数被插在哪里只受前一个数的影响,如果明确了前一个数是哪个,那么我们就可以确定大小关系,就可以知道当前这个数插在哪里,而上一个插入的数就 ...

  8. 【QQ】前端实现QQ会话功能

    <a href="tencent://message/?uin=客服QQ号码&Menu=yes" target="blank"></a ...

  9. 【BZOJ2648】SJY摆棋子(KD-Tree)

    [BZOJ2648]SJY摆棋子(KD-Tree) 题面 BZOJ Description 这天,SJY显得无聊.在家自己玩.在一个棋盘上,有N个黑色棋子.他每次要么放到棋盘上一个黑色棋子,要么放上一 ...

  10. POJ3090:Visible Lattice Points——题解

    http://poj.org/problem?id=3090 题目大意:你站在(0,0)的点上看向第一向限的点,点和点会互相阻挡,问最多看到多少点. 很容易想到,我们能看到的点,它的横纵坐标一定是互质 ...