《HTML与CSS入门经典(第8版)》——1.3 理解Web内容交付

简介:

本节书摘来自异步社区《HTML与CSS入门经典(第8版)》一书中的第1章,第1.3节,作者: 【美】Julie C. Meloni , Michael Morrison 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.3 理解Web内容交付

在许多不同的地方发生了多个过程,最终产生了你看到的Web内容。这些过程发生得很快——在几毫秒之内——而且是在幕后发生的。换句话说,当我们认为所作的一切是打开一个Web浏览器,输入Web地址,并且立即看到请求的内容时,幕后的技术正在为我们辛勤地工作。图1.1展示了浏览器和服务器之间的基本交互。


<a href=https://yqfile.alicdn.com/2cae06ce7fcd2e6e59419d682d77a8e750e9d4cf.png" >

但是,这个过程中有许多步骤,在你看到整个请求网站的内容之前,可能在浏览器和服务器中有多次往返。

假定你想要进行一次Google搜索,所以你认真地在地址栏输入 http://www.google.com 或者从书签列表中选择Google书签。你的浏览器几乎立即显示出如图1.2所示的画面。


e3979b675212ea798eeb906669f1ed0c2a466b1b

图1.2显示了一个包含文本和一个图形(Google标志)的网站。从Web服务器读取这些文本和图像并且在你的屏幕上显示所发生的简单过程如下。

1.你的Web浏览器发出对位于 http://www.google.com/ 地址的index.html文件的一个请求。index.html文件不必是你在地址栏上输入的地址的一部分;你将在第2章中学习到更多关于index.html文件的知识。

2.在接收到对一个具体文件的请求后,Web服务器进程在它的目录中查找具体的文件,并且将该文件的内容发送回你的浏览器。

3.Web浏览器接受index.html文件的内容,这是由HTML代码标记的文本,并且根据HTML代码显示内容。在显示内容的同时,浏览器发现用于Google标识的HTML代码,这个标识在图1.2中可以看到。HTML代码类似以下代码:

<img src="logos/logo.gif" width="384" height="121" border="0" alt="google"/>

这个代码标记提供了告诉浏览器显示该标识所需要的文件源位置(src)、宽度(width)、高度(height)、边框类型(border)以及辅助文本(alt)。你将通过稍后的课程学习更多关于特性的知识。

4.浏览器查看标记中的src特性以查找源位置。在这个例子中,图像logo.gif可以在读取HTML文件的相同Web地址中找到。

5.浏览器请求 http://www.google.com/logos/logo.gif 上的文件。

6.Web服务器解释该请求,寻找该文件,并且将该文件的内容发送给请求它的浏览器。

7.Web浏览器在你的显示器上显示该图像。

正如你在Web内容交付过程的描述中看到的,Web浏览器所作的只是像你可以看到内容的一个像框。浏览器组合Web内容部件并且按照文件中的HTML命令安排这些部分。

你还可以在“本地”或者你的硬盘驱动器上查看Web内容,而不需要一个Web服务器。内容读取和显示的过程和前面列出的浏览器查找并且解释HTML文件的代码和内容的过程相同,但是旅程较短,浏览器在你自己的计算机硬盘上而不是远程机器上寻找文件。解释嵌入在文件中的基于服务器的编程语言需要一个Web服务器,但是这超出了本书的范围。实际上,你可以在没有Web服务器的情况下完成本书的所有课程,但是在你之外没有人能看到你的杰作。

相关文章
|
12天前
|
关系型数据库 MySQL
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
|
1天前
|
前端开发
|
4天前
|
前端开发
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
|
5天前
|
移动开发 HTML5
HTML5/CSS3粒子效果进度条代码
HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果,就像一些小颗粒从进度条上散落下来
16 0
HTML5/CSS3粒子效果进度条代码
|
8天前
|
移动开发 前端开发 JavaScript
:掌握移动端开发:HTML5 与 CSS3 的高效实践
:掌握移动端开发:HTML5 与 CSS3 的高效实践
23 1
|
12天前
|
JavaScript 前端开发 UED
【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
【5月更文挑战第2天】【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
|
12天前
|
存储 前端开发 JavaScript
【Web 前端】如何找到所有 HTML select 标签的选中项?
【5月更文挑战第2天】【Web 前端】如何找到所有 HTML select 标签的选中项?
|
14天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
14天前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS前端技术趋势篇】前端框架(React/Vue/Angular)与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发,通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合,使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展,掌握新工具,提升开发效能。
|
14天前
|
前端开发 JavaScript UED
【专栏:HTML 与 CSS 前端技术趋势篇】Web 性能优化:CSS 与 HTML 的未来趋势
【4月更文挑战第30天】本文探讨了CSS和HTML在Web性能优化中的关键作用,包括样式表压缩、选择器优化、DOM操作减少等策略。随着未来趋势发展,CSS模块系统、自定义属性和响应式设计将得到强化,HTML新特性也将支持复杂组件构建。同时,应对浏览器兼容性、代码复杂度和性能功能平衡的挑战是优化过程中的重要任务。通过案例分析和持续创新,我们可以提升Web应用性能,创造更好的用户体验。