开发者社区> 华章计算机> 正文

《Web前端工程师修炼之道(原书第4版)》——图片在哪里呢?

简介:
+关注继续查看

本节书摘来自华章社区《Web前端工程师修炼之道(原书第4版)》一书中的图片在哪里呢?,作者Jennifer Niederst Robbins,更多章节内容可以访问云栖社区“华章社区”公众号查看

图片在哪里呢?
显然,HTML文件里并没有图片,那么最终页面中的图片来自哪里呢?
你可以看看图2-3,每个图片都是一个单独的图像文件。图像文件放置在 HTML图片元素(img)中,图片元素可以告诉浏览器到哪里去找图片(它的URL)。当浏览器看到img元素时,它就会给服务器发送另一个请求,以获取图片文件,然后把这个图片放在img元素的内容中。浏览器软件把这些零碎的文件整合到最终的页面中。视频和其他嵌入式媒体文件的处理也是如此。
由于页面的整合发生在一瞬间,所以看起来整个页面是一次性载入的。如果网速太慢或者网页包括太大的图片或者多媒体文件,整合的过程就会很明显:文字的显示要快于图片。如果有新的图片到达,页面甚至需要刷新(当然,你可以用某种方式构造你的页面,以阻止发生这样的行为)。
添加一点样式


09d169f59bac090a5931edc73ad17d9dc8b3fff0

我希望你注意到我们的最小页面上的最后一个部分。在HTML文档的顶部附近有一个链接元素指向样式表文件kitchen.css。该样式表包含了几行指令,说明页面应该如何在浏览器中显示。这些样式指令遵循CSS的规则。 CSS允许设计师将视觉样式指令(称为文档外观)添加到标记文本(在网页设计术语里就是指文档的结构)中。在第三部分中,你就会看到CSS的作用。
图2-4显示了Jen抯 Kitchen页面,一个有样式,另一个没有样式。浏览器为每一个HTML文档都提供了默认样式,所以如果页面没有自己的自定义样式,浏览器就会使用默认样式(也就是右图中所看到的那样)。即便很少的样式规则也可以使页面的外观大为改善。


9b1cad7e00218b46246e9d65635277c66af6d57d

使用JavaScript添加行为
除了文档结构和外观,还有一个用来定义如何运行的行为部分。页面使用脚本语言JavaScript来控制行为。我们将在第四部分简单介绍,但是如果想深入学习,则需要了解更多。很多设计师(包括我)都要靠有脚本经验的帮手来给网站添加功能。不管怎样,了解如何编写JavaScript对于网页设计师来说变得越来越重要了。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
前端工程师的mysql笔记
背景 最近常参与后台php项目,虽说刚毕业时自学过一阵子php和mysql,不过长时间没用也忘差不多了,于是把mysql再温习一遍,前端同学也可以一起学习下! mysql安装以及操作 安装 brew install mysql 启动 $: mysql.
921 0
透视前端工程化之 Webpack 基本介绍【文末有彩蛋~】(上)
Webpack 是一款强大的打包工具。在 Webpack 中一切皆模块。Webpack 官网的 Banner 图完美地诠释了这一理念。Webpack 从一个入口文件开始递归地分析模块的依赖关系,根据依赖关系将这些模块打包成一个或多个文件。
15 0
前端图片合并方案调研
通过产品线数据分析,发现70%左右的图片为小于300K的图片,50%左右为小于100K的图片,因此调研前端图片合并方案是否有利于提高图片批量上传速度。之前做过的前端ZIP方案也是类似的思路。
100 0
透视前端工程化之 Webpack 基本介绍【文末有彩蛋~】(下)
Webpack 是一款强大的打包工具。在 Webpack 中一切皆模块。Webpack 官网的 Banner 图完美地诠释了这一理念。Webpack 从一个入口文件开始递归地分析模块的依赖关系,根据依赖关系将这些模块打包成一个或多个文件。
29 0
前端如何实现图片懒加载(lazyload) 提高用户体验
定义 图片懒加载又称图片延时加载、惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力。
921 0
透视前端工程化之 Webpack 基本介绍【文末有彩蛋~】(中)
Webpack 是一款强大的打包工具。在 Webpack 中一切皆模块。Webpack 官网的 Banner 图完美地诠释了这一理念。Webpack 从一个入口文件开始递归地分析模块的依赖关系,根据依赖关系将这些模块打包成一个或多个文件。
27 0
10057
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载