《HTML5+CSS3网页设计入门必读》——1.8 了解在Web服务器上放置文件的位置

简介:

本节书摘来自异步社区《HTML5+CSS3网页设计入门必读》一书中的第1章,第1.8节,作者: 【美】Julie Meloni更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.8 了解在Web服务器上放置文件的位置

维护Web内容的一个重要方面是确定将如何组织该内容——不仅便于用户查找,而且便于你维护服务器上的内容。把文件放在目录中有助于管理那些文件。

在Web服务器上命名和组织目录以及开发针对文件维护的规则完全取决于你自己。不过,在这个漫长的过程中,维护一个组织良好的服务器可以使其内容管理更高效。

1.8.1 基本的文件管理
在你浏览Web时,可能注意到当你在Web站点中导航时URL会改变。例如,如果查看一家公司的Web站点,并且单击通往公司的产品或服务的图形导航元素,URL可能会从

http://www.companyname.com/

变为

http://www.companyname.com/products/

http://www.companyname.com/services/

在上一节中,我使用了术语文档根目录(document root),但是没有真正解释它的有关含义。Web服务器的文档根目录实质上是完整URL中的末尾斜杠。例如,如果域是 yourdomain.com ,并且URL是 http://www.yourdomain.com/ ,那么文档根目录就是通过末尾斜杠(/)表示的目录。文档根目录是你在Web服务器上创建的目录结构的起点;Web服务器将从这个位置开始寻找Web浏览器请求的文件。

如果像前面所指示的那样把sample.html文件放在文档根目录中,将能够通过Web浏览器利用以下URL访问它:

http://www.yourdomain.com/sample.html

如果把这个URL输入到Web浏览器中,将会看到呈现的sample.html文件,如图1.8所示。


b8626c5be92581658a666a40fe700c359c152d5e

不过,如果在文档根目录内创建一个新目录,并把sample.html文件放在该目录中,则将利用下面这个URL访问该文件:

http://www.yourdomain.com/newdirectory/sample.html

如果把sample.html文件放在一连接到你的服务器时就最初看到的目录中,也就是说,你没有改变目录并把文件放在文档根目录中,那么将不能从你的Web服务器利用任何URL访问sample.html文件。该文件仍然位于你称为Web服务器的机器上,但是由于文件不在服务器软件知道从此开始寻找文件的文档根目录中,永远都没有人能够通过Web浏览器访问到它。

底线就是:在开始传输文件之前,总是要导航到Web服务器的文档根目录。

对于图形和其他多媒体文件尤其如此。Web服务器上的公共目录被称为images,正如你可能想到的,其中将存放所有的图像资源以便检索。其他流行的目录包括用于存放样式表文件的.css文件(如果使用多个样式表文件的话),以及用于存放外部JavaScript文件的.js文件。此外,如果你知道在Web站点上将具有一个区域,访问者可以从中下载许多不同类型的文件,就可能简单地把该目录命名为downloads。

无论它是一个包含你的艺术选辑的ZIP文件,还是一个带有销售数字的Excel电子数据表,在Internet上发布不仅仅是Web页面的文件通常是有用的。为了使一个不是HTML文件的文件在Web上可用,只需把该文件像一个HTML文件一样上传到Web站点,并遵循本章前面给出的关于上传文件的指导即可。在把文件上传到Web服务器之后,就可以创建一个指向它的链接(在第8章将学习这方面的知识)。换句话说,Web服务器不仅仅能提供HTML文件。

下面给出了一段示例HTML代码,在本书后面将学习关于它的更多知识。下面的代码将用于一个名为artfolio.zip的文件,它位于Web站点的downloads目录中,并且会显示链接文本“Download my art portfolio!”:

<a href="/downloads/artfolio.zip">Download my art portfolio!</a>

1.8.2 使用索引页面
在你想到索引时,可能会想起本书后面的那一节,它告诉你在哪里寻找各个关键词和主题。Web服务器目录中的索引文件可以服务于此目的——如果你像那样设计它的话。事实上,该名称最初就起源于此。

index.html文件(或者采用它通常的叫法即索引文件(index file))是你给一个页面提供的名称,当人们导航到你的Web站点中的特定目录时,你希望他们把该页面视为默认的文件。

索引文件的另一个作用是,访问你的站点上的某个目录的用户将具有一个索引页面,但是没有指定该页面仍将登录到用于站点的那个区域(或者用于站点本身)的主页上。

例如,可以输入以下URL之一,并登录到Apple的iPhone信息页面上:

http://www.apple.com/iphone/

http://www.apple.com/iphone/index.html

iphone目录中没有index.html页面,结果将依赖于Web服务器的配置。如果服务器被配置成禁止目录浏览,用户在尝试访问不带有指定的页面名称的URL时将会看到一条“Directory Listing Denied”(“目录列表被拒绝”)消息。不过,如果服务器被配置成允许目录浏览,用户将会看到那个目录中的文件列表。

你的托管提供商将已经确定了这些服务器配置选项。如果你的托管提供商允许你通过控制面板修改服务器设置,你就可以更改这些设置,使得服务器基于你自己的需要来响应请求。

索引文件不仅在子目录中使用,也在Web站点的顶级目录(或文档根目录)中使用。Web站点的第一个页面——首页(home page)或主页(main page),或者当用户第一次访问你的域时你希望他们看到的Web内容的你所喜欢的任何称呼——都应该被命名为index.html,并且放在Web服务器的文档根目录中。这确保当用户在他们的Web浏览器中输入 http://www.yourdomain.com/ 时,服务器将利用你打算让他们看到的内容来响应(而不是给他们提供“Directory Listing Denied”(目录列表被拒绝)消息或者其他某种意外的后果)。

相关文章
|
2月前
|
存储 Web App开发 移动开发
HTML5 Web 存储详解
HTML5 Web存储提供了两种客户端数据存储机制:**Local Storage**和**Session Storage**。Local Storage用于长期存储数据,即使关闭浏览器数据也依然存在,适用于保存用户偏好设置等信息。Session Storage则在标签或窗口关闭时清除数据,适合存储临时信息。两者均提供了简单的API进行数据的存取操作,但需要注意的是,Web存储并非加密存储,不应存放敏感信息。现代浏览器普遍支持Web存储,合理利用这两种存储方式可提升Web应用的用户体验。
|
2月前
|
存储 移动开发 大数据
HTML5 Web IndexedDB 数据库详解
IndexedDB 是一种高效的浏览器存储方案,允许在本地存储大量结构化数据,支持索引和事务,适用于需要离线和大数据处理的应用。它由数据库、对象仓库等组成,通过键值对存储数据,确保数据一致性和完整性。本介绍展示了如何创建、读取、更新和删除数据,以及事务和错误处理的最佳实践。
|
1月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
95 6
|
2月前
|
前端开发 JavaScript 开发者
探索现代Web前端技术:React框架入门
【10月更文挑战第9天】 探索现代Web前端技术:React框架入门
|
2月前
|
存储 移动开发 数据库
HTML5 Web IndexedDB 数据库常用数据存储类型
IndexedDB 支持多种数据存储类型,满足复杂数据结构的存储需求。它包括基本数据类型(如 Number、String、Boolean、Date)、对象(简单和嵌套对象)、数组、Blob(用于二进制数据如图像和视频)、ArrayBuffer 和 Typed Arrays(处理二进制数据)、结构化克隆(支持 Map 和 Set 等复杂对象),以及 JSON 数据。尽管不直接支持非序列化数据(如函数和 DOM 节点),但可以通过转换实现存储。开发者应根据具体需求选择合适的数据类型,以优化性能和使用体验。
|
1月前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过&lt;head&gt;部分的&lt;style&gt;标签定义;外部样式表适用于多个页面,通过&lt;link&gt;标签引用外部CSS文件;&lt;style&gt;定义样式,&lt;link&gt;引用资源;已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;,属性有color和bgcolor。
|
2月前
|
移动开发 JavaScript 前端开发
HTML5 Web Workers详解
HTML5 Web Workers 允许在后台线程中运行 JavaScript,实现复杂计算而不影响用户界面,提升应用性能。其主要特性包括并行处理、异步通信、独立作用域及多数据类型支持。通过创建和使用 Worker 文件,如 `worker.js`,可执行后台任务,并与主线程通过消息传递机制通信。适用于数据处理、图像处理、复杂计算及网络请求并行等场景。需要注意的是,Web Workers 在浏览器兼容性、安全性限制、调试及资源消耗方面需特别关注。合理利用 Web Workers 可显著增强 Web 应用的流畅度和响应速度。
|
2月前
|
SQL 存储 移动开发
HTML5 Web SQL 数据库详解
Web SQL 数据库是 HTML5 中的一种本地存储技术,允许在浏览器中使用 SQL 语言操作本地数据,支持离线访问和事务处理,适用于缓存数据和小型应用。然而,其存储容量有限且仅部分现代浏览器支持,标准已不再积极维护,未来可能被 IndexedDB 和 localStorage 等技术取代。使用时需谨慎考虑兼容性和发展前景。
|
2月前
|
移动开发 JavaScript 前端开发
HTML5 服务器发送事件(Server-Sent Events)详解
**服务器发送事件(Server-Sent Events, SSE)** 是一种用于构建单向实时通信的技术,允许服务器主动向客户端(通常是浏览器)推送更新。SSE 提供了一个简单的 API,非常适合实时应用,如新闻更新、天气变化、社交媒体通知等。SSE 基于 HTTP 协议,通过长连接实现数据传输。其主要优点包括简洁的 API、持久连接和自动重连功能。大多数现代浏览器都内置了对 SSE 的支持。通过简单的服务器端和客户端代码,可以轻松实现数据的实时推送和接收。
|
2月前
|
存储 移动开发 缓存
HTML5 Web 存储详解
HTML5 Web 存储包括 `localStorage` 和 `sessionStorage`,前者提供持久存储且无过期时间,后者仅在会话期间有效。两者均支持键值对形式存储数据,容量约为 5-10 MB。`localStorage` 适用于用户偏好设置、登录状态保持及离线应用缓存;`sessionStorage` 则用于临时数据如表单输入。数据以字符串形式存储,可通过 `JSON` 方法处理对象。由于数据存储于本地,不适合存放敏感信息。示例代码展示了如何使用按钮将输入框内容保存至 `localStorage` 并进行清除操作。