《HTML与CSS入门经典(第8版)》——2.3 理解Web服务器上放置文件的位置

简介:

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

2.3 理解Web服务器上放置文件的位置

维护Web内容的一个重要方面是确定组织内容的方法——不仅是为了用户寻找,也为了你在服务器上的维护。将文件放到指定目录中将帮助你管理这些文件。

在你的Web服务器上命名和管理目录,并且开发文件维护规则,这完全取决于你。但是,维护一个精心组织的服务器使你在长期中更加有效地管理它的内容。

2.3.1 基本文件管理
在你浏览Web时,你可能已经注意到URL随着你在网站之间浏览而变化。例如,如果你查看一个公司的网站并且单击图形化导航进入公司的产品或者服务,URL可能从

http://www.companyname.com/

变成

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

或者

http://www.companyname.com/services

在前一小节中,我使用术语“文档根目录”而未作真正的解释。Web服务器的文档根目录实际上是完整的URL中后缀的“斜杠”。例如,如果你的域名是yourdomain.com,你的URL为http://www.yourdomain.com/,那么文档根目录是由后续的斜杠(/)代表的目录。文档根是在你的Web服务器上创建的目录结构的起始点,这时Web服务器开始查找Web浏览器请求的文件的开始位置。

如果你将sample.html按照刚才的指示放在文档根目录,那么你将能够通过Web浏览器在如下URL中访问它:

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

如果你在Web浏览器中输入这个URL,你将看到如图2.4所示的sample.html。

但是,如果你在文档根目录中创建了一个新的目录(newdirectory)并且将sample.html放在那个目录,那么文件可能在如下URL中访问:

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

如果你将sample.html放在你连接服务器时原来看到的目录中——也就是说,你不改变目录并将文件放在文档根目录——那么sample.html文件将无法以任何URL在你的Web服务器上访问到。文件将仍然存在于你的Web服务器上,但是因为文件不在文档根目录——服务器软件所知的开始寻找文件的位置——它将永远不能被通过Web浏览器访问的人读取到。


ba408627d5af1a0d1158774196ae284cc4916b7d

根本的原则是什么?始终导航到你的Web服务器的文档根目录,然后才开始传送文件。

对于图形和其他多媒体文件尤其如此。Web服务器上常用的一个目录称为“images”,你可以想象,这是所有图像资源放置的位置。其他常见的目录包括用于样式单文件的“CSS”(如果你使用超过一个样式单)以及用于外部JavaScript文件的“JS”。或者,如果你知道你将在网站上安排一个部分,访问者可以从这里下载许多其他不同类型的文件,你可能称这个目录为“downloads”。

不管是包含你的艺术相集的ZIP文件还是具有销售数字的Excel试算表,在互联网上发布网页之外的文件都是有帮助的。为了使非HTML文件在Web上可用,只要按照本章前面的上载说明,将文件如同HTML文件一样上传到Web服务器。当文件上传到Web服务器之后,你可以创建一个指向它的链接(你将在后面的章节中学习到)。换句话说,你的Web服务器能够提供远远超过HTML的服务。

本章中你将学习到一个HTML代码样板。如下的代码将被用于一个名为artfolio.zip文件,该文件位于你的网站的downloads目录,链接文本称为“Download my art portfolio!”:

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

2.3.2 使用一个索引页面
当你想到一个索引的时候,你可能想到的是书籍最后告诉你到哪里寻找各种关键词和主题的部分。Web服务器目录中的索引文件可以服务于这一目的——如果你这么设计它。实际上,这就是这个名字的来源。

index.html(或者只称之为索引文件,正如一般提到的那样)是你为希望人们在导航到你的网站的特定目录时看到的默认文件所取的名字。如果你创建该页的时候牢记可用性,你的用户将从索引页面中得到该部分的所有内容。

例如,如图2.5所示,显示了包含指向3个页面的链接的下拉式导航和左边导航:Solutions Overview(解决方案概述,索引页本身所在的部分)、Connection Management(连接管理)和Cost Management(成本管理)。页面本身的内容——称为index.html,位于solutions目录中——还链接到solutions部分的其他两个页面。当用户到达这个特殊网站的solutions部分时,他们能够到达该部分的任意其他页面(并且可以用3种不同的途径)。


11d51f0bdd447c0ce2ad57ce5e6baf500c2744f9

索引页面的另一个功能是当用户访问你的网站上具有索引页面的一个目录,但是没有指定该页时,他们将会登录到你的网站该部分(或者网站本身)的主页面上。

例如,在前一个示例中,用户可以输入下面的某个URL并且登录到网站solutions部分的主页面:

http://www.ipass.com/solutions/
http://www.ipass.com/solutions/index.html

如果solutions目录下没有index.html页面,结果将取决于Web服务器的配置。如果该服务器被配置为不允许目录浏览,用户将在尝试访问没有具体的页面名称的URL时看到“Directory Listing Denied”(目录列表被拒绝)信息。但是,如果服务器被配置为允许目录浏览,用户将会看到该目录的文件。

这些服务器配置选项将已经由你的主机提供商为你确定。如果你的主机提供商允许你通过控制面板修改服务器配置,那么你可以修改这些设置,这样你的服务器根据你的需求对请求进行响应。

索引文件不仅用于子目录,它也用在网站的顶级目录(或者文档根目录)。你的网站的第一个页面——或者称为主页(home page),或者其他用来称呼你希望用户在访问你的域时首先看到的Web内容的词——应该被命名为index.html并且放在Web服务器的文档根目录中。这将确保用户在Web浏览器中输入http://www.yourdomain.com/ 时,服务器将以你打算让他们看到的内容响应(而不是“目录列表被拒绝”或者其他不希望的后果)。

相关文章
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
1102 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
1029 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
375 34
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
1392 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
794 33
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
380 24
|
前端开发
“弘五四,耀青春”程序创意获奖作品【html+css】
本作品以“青春筑梦,共创未来”为主题,采用动态龙元素展现青春活力与创新精神。页面设计简洁明快,色彩协调,突显年轻人积极向上的风貌。作品内容包括获奖截图、名字《时代扬新帆》及源代码分享。特别说明:禁止用于商业活动,可用于比赛和作业等开源场景。最后,作者表达了对五四精神的致敬与传承,强调了青春活力和创造力的重要性,并感谢评委和支持者。 **获奖感言摘录:** “获得这个奖项,对我们团队来说,既是认可也是激励。我们将继续努力,不断优化产品,为用户带来更好的体验,为社会贡献更多价值。”
477 2
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
1145 7
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
576 6

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    708
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    565
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    571
  • 4
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
    346
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    660
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    839
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1639
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    393
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1356
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    669