作者：（美）朱莉·C·梅洛尼（Julie·C·Meloni）

出版社：人民邮电出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

PHP、MySQL和JavaScript入门经典(第6版)试读：

前言

欢迎阅读本书。本书综合了《HTML、CSS和JavaScript入门经典（第2版）》（《Sams Teach Yourself HTML, CSS & JavaScript All in One (Second Edition)》）和《PHP、MySQL和Apache入门经典（第5版）》（《Sams Teach Yourself PHP, MySQL & Apache All in One (Fifth Edition)》）中最有用的部分，根据技术上所发生的必然的变化更新了内容，并为你打下Web应用“全栈”开发的基础。

示例提供了这种基础。本书通过展示那些层层构建的代码，解释代码的细节，并且给出示例的输出（也就是在你计算机的屏幕上看上去是什么样子），从而帮助你加深对HTML、CSS、JavaScript和PHP（以及和MySQL的数据库交互）的理解。

本书的目标并不是让你成为这些技术中的某一方面的专家，而是让你具备开发现代的、符合标准的Web应用程序的基础技能。需要特别注意如下几点。● 本书中的每一个示例都经过了HTML5和CSS3验证。● 本书中的所有示例，在每一种主流的Web浏览器的最新版本中进行了兼容性测试。这些浏览器包括Apple Safari、Google Chrome、Microsoft Internet Explorer、Mozilla Firefox和Opera。你将先学习和过去的版本的兼容性，当然这也是为将来做好准备。● 所有的PHP代码都能在PHP 7下正确运行，但是向下兼容到PHP 5.6.x，因为仍然有数以千计的Web托管服务提供商使用后者。

正是因为注意了这些基本问题，本书之前的多个版本成了畅销书，而这一新版也不例外。不管你选择专门研究HTML和CSS、JavaScript、PHP，还是要精通所有的这些技术，牢固的基础知识对你未来的开发工作都很关键。

本书只是你通向对技术开发的更高层级的理解的第一步，但并不意味着这是唯一的一步，记住这一点同样也很重要。在某件事情上成为专家，需要花1万小时的时间去练习，这可比你用来阅读本书的时间要长得多。

本书的目标读者

本书瞄准那些对万维网的概念有一般性了解的人，也就是说，知道有一个叫作万维网的东西，并且能够使用Web浏览器连接到网络上。这就够了，阅读本书不需要再具备其他的知识。

本书深入介绍PHP编程的那些章，也并不需要读者具备该语言的知识。然而，如果你已经拥有其他编程语言的经验，你会发现阅读起来更容易，因为你熟悉诸如变量、控制结构、函数、对象等类似的编程元素。类似的，如果你已经使用过MySQL之外的数据库，那么，你已经拥有了阅读和MySQL相关内容的牢固基础。

本书的内容结构

本书分为5个部分，每一个部分对应一组专门的主题。建议读者一章一章地按顺序阅读，每一章的内容都基于其前面一章的内容。

第1部分：Web应用基础知识。这部分帮助你理解Web上的通信，以便能够编写基本的PHP脚本，还介绍了HTML、CSS和JavaScript的基础知识。即便你已经从基本知识的层面熟悉这些技术中的一种或多种，还是应该快速浏览一下这几章以进行温习。本书剩下的大多数内容，都构建在刚开始的这几章的基础之上。

第2部分：动态Web站点基础。这部分主要介绍JavaScript的语法和用法。在动态Web站点中，JavaScript提供动态功能—HTML和CSS通常只是负责实现漂亮的外观，而JavaScript要让内容动起来，至少在你加入PHP和数据库功能之前，JavaScript要做到这一点。

第3部分：提高Web应用程序的层级。这部分跨越前端并且深入应用程序的后端。你将会学习PHP语言的基础知识，包括像数组和对象这样的结构性元素，然后学习如何让cookies和用户会话为你所用。和以前需要了解的关于表单的内容相比，在本书的这个部分所要学的内容更多。

第4部分：将数据库整合到应用程序中。这部分的各章介绍了使用数据库的通用知识，例如数据库规范化，以及使用PHP连接和使用MySQL。这部分还包括SQL基础知识、MySQL专有的函数以及其他信息。

第5部分：应用开发基础。这部分的各章专门介绍使用PHP和MySQL来执行一个特定的任务，综合应用了本书中的所有知识。项目包括创建一个讨论论坛、一个基本的网店和一个简单的日历。

在每一章的最后，都有几个测验问题，来测试你对所学的内容掌握得如何。额外的练习则提供了另一种方法来应用本章所学到的知识，并且指导你如何使用下一章中将要学习的新内容。

本书的资源

本书各章中的代码都可以通过异步社区（www.epubit.com）下载。

自己录入代码，在打字、产生错误以及烧脑的查找分号错误的任务等方面会有一些有用的体验。然而，如果你想要略过这些课程，并且只是把本书的工作代码上传到你的站点，也没问题。

本书的体例

本书使用不同的字体来区别代码和正文，也通过这种方法来帮你识别重要的概念。在本书中，代码、命令和你所输入的或者在计算机屏幕上看到的文本，都使用等宽字体。在正文中定义新术语的地方使用斜体。此外，特别的内容板块都带有图标。注意：给出了和当前话题相关的一段有趣的信息。提示：提出建议，或者教给你执行一项任务的简单方法。警告：警告你潜在的缺陷并说明如何避免它们。

问与答、测验和练习

在每一章的最后，都有一个简短的问题和解答部分，会提出那种“答案显而易见”的问题。还有一个简短但完整的测验，让你能够进行测试，以确保理解了本章所介绍的所有内容。最后，还有一两个可选的练习题，让你有机会在继续往下阅读之前练习一下自己的新技能。

资源与支持

本书由异步社区出品，社区（https://www.epubit.com/）为您提供相关资源和后续服务。

配套资源

本书提供如下资源：● 本书源代码。

要获得以上配套资源，请在异步社区本书页面中点击，跳转到下载界面，按提示进行操作即可。注意：为保证购书读者的权益，该操作会给出相关提示，要求输入提取码进行验证。

提交勘误

作者和编辑尽最大努力来确保书中内容的准确性，但难免会存在疏漏。欢迎您将发现的问题反馈给我们，帮助我们提升图书的质量。

当您发现错误时，请登录异步社区，按书名搜索，进入本书页面，点击“提交勘误”，输入勘误信息，单击“提交”按钮即可。本书的作者和编辑会对您提交的勘误进行审核，确认并接受后，您将获赠异步社区的100积分。积分可用于在异步社区兑换优惠券、样书或奖品。

与我们联系

我们的联系邮箱是contact@epubit.com.cn。

如果您对本书有任何疑问或建议，请您发邮件给我们，并请在邮件标题中注明本书书名，以便我们更高效地做出反馈。

如果您有兴趣出版图书、录制教学视频，或者参与图书翻译、技术审校等工作，可以发邮件给我们；有意出版图书的作者也可以到异步社区在线提交投稿（直接访问www.epubit.com/selfpublish/submission即可）。

如果您是学校、培训机构或企业，想批量购买本书或异步社区出版的其他图书，也可以发邮件给我们。

如果您在网上发现有针对异步社区出品图书的各种形式的盗版行为，包括对图书全部或部分内容的非授权传播，请您将怀疑有侵权行为的链接发邮件给我们。您的这一举动是对作者权益的保护，也是我们持续为您提供有价值的内容的动力之源。

关于异步社区和异步图书

在学习HTML（Hypertext Markup Language，超文本标记语言）、CSS（Cascading Style Sheets，层叠样式表）和JavaScript的复杂知识之前（先不要说像PHP这样的后端编程语言），对这些技术有一个牢固的理解是很重要的，正是这些技术帮助把纯文本文件转换成你在计算机、平板电脑或智能手机上浏览WWW时看到的丰富的多媒体显示。

例如，如果不使用Web浏览器查看，那么包含标记和客户端代码（HTML、CSS和JavaScript）的文件将是无用的，并且除非使用Web服务器，否则除你之外的其他人将无法查看你的内容。Web服务器使你的内容可供其他人使用，他们反过来又使用其Web浏览器导航到一个地址并等待服务器向自己发送信息。你将密切地参与这个发布过程，因为你必须创建文件，然后把它们放到服务器上，使得文件的内容第一时间可用，并且必须确保你的内容像预期的那样出现在最终用户面前。1.1　HTML和WWW简史

在月球上还没有任何人类足迹的时候，一些有远见的人决定去看看他们是否能够连接几个主要的计算机网络。我将和你分享它们的名称和故事（可以说非常丰富），这些事情的最终的结果是“所有网络之母”，我们称之为Internet。

到1990年，通过Internet访问信息还相当具有技术性。事实上，它是如此困难，以至于那些拥有博士学位的物理学家们在尝试交换数据时也经常会遭受挫折。有这样一位物理学家，即现在非常著名的Tim Berners-Lee爵士，他设计了一种方式，可以通过超文本链接轻松地交叉引用Internet上的文本。

这不是一种新思想，但是他开发的简单HTML却成功地兴盛起来，而更多雄心勃勃的超文本项目步履维艰。超文本（Hypertext）最初意指以电子形式存储的文本，并且在页面之间具有交叉引用的链接。它现在是一个更宽泛的术语，指可以链接到其他对象的任何几何对象（文本、图像、文件等）。超文本标记语言（Hypertext Markup Language）是用于描述如何组织和链接文本、图形以及包含其他信息的文件的一种语言。

到1993年，全世界只有100台左右的计算机配备提供HTML页面。这些互连的页面称为WWW（World Wide Web，万维网），并且人们编写了几个Web浏览器程序，以允许查看Web页面。由于Web日益普及，几个程序员不久之后编写了可以查看带有图形图像的文本的Web浏览器。从此，Web浏览器软件的持续开发以及包括HTML、CSS和JavaScript在内的Web技术的标准化带领我们进入了今天的世界。在这个世界里，有超过10亿个Web站点提供数万亿（甚至更多）的文本和多媒体文件。注意：有关WWW发展历史的更多信息，参见关于这个主题的维基百科的介绍。

上面几段文字实际上只是Web发展简史中的一个不同寻常的历史阶段的简短描述。今天的大学生从来也不了解WWW不存在的那段时间，以及永远在线的信息和无处不在的计算的思想对我们以后生活的各个方面产生深远的影响。学完本书时，你将把Web看作是任何人（而不仅限于少数的技术人员，如果你愿意的话，可以将其称为怪才）都可以掌握的技能，而不再把Web内容创建和管理视作只有少数怪才所拥有的一项技能。1.2　创建Web内容

你可能注意到本书中使用的术语是“Web内容”（Web content），而不是“Web页面 ”（Web page），我们是有意这样做的。尽管我们谈论的是“访问Web页面”，但是实际的意思是“查看我们计算机上的一个地址上的所有文本和图像”。我们阅读的文本和查看的图像都是通过Web浏览器呈现的。浏览器将按照各个文件中的指示来呈现它们。

这些文件可以包含被HTML代码标记或包围的文本，告诉浏览器如何显示文本——作为标题、作为段落或者以项目列表显示等。一些HTML标记告诉浏览器显示图像或视频文件，而不是纯文本，由此得出以下结论：发送给Web浏览器的是不同类型的内容，因此仅仅称作Web页面将无法完全涵盖它们。我们在这里代之以Web内容这个术语，以涵盖完整的内容范围，包括文本、图像、音频、视频以及线上可以找到的其他媒体。

在后面几章中，你将学习链接到或直接创建在Web站点中发现的各类多媒体Web内容的基础知识，以及使用PHP通过服务端脚本创建动态内容的方法。此时，你只需记住你正在控制用户在访问你的Web站点时所查看的内容。从一个文件开始，其中包含要显示的文本或者告诉服务器给用户的Web浏览器发送一幅图形的代码，你将不得不规划、设计和实现最终构成Web状态（Web presence）的所有部分。正如你将在整本书中所学到的，它不是一个困难的过程，只要在学习过程中理解每一个小步骤即可。

就其最基本的形式而言，Web内容开始于一个包含HTML标记的简单文本文件。在本书中，你将学习和创建符合标准的HTML5标记。编写符合标准的代码有很多的好处，其中一个好处是：将来代码需要在多种类型的浏览器和设备上工作的时候，你不必担心必须回顾代码以从根本上修改代码。相反，你的代码将（很可能）总是适用的，只要Web浏览器遵守标准并且做到向下兼容即可（在一段较长的时间内有望如此）。1.3　理解Web内容递送

在许多不同的位置会发生多个过程，最终将产生你可以查看的Web内容。这些过程将发生得非常快（以毫秒级的速度），并且是在幕后发生的。换句话说，尽管我们可能认为我们所做的全部事情是打开Web浏览器，输入一个Web地址，并立即查看所请求的内容，后台的技术会代表我们努力地工作着。图1.1显示了浏览器与服务器之间的基本交互。图1.1　浏览器请求和服务器响应

不过，在看到所请求的站点的全部内容之前，这个过程将会涉及多个步骤，并且可能在浏览器与服务器之间会往返多次。

假设你想进行Google搜索，必然会在地址栏中输入“www.google.com”，或者从书签列表中选择Google书签。浏览器几乎立即就会显示如图1.2所示的内容。

图1.2显示了一个包含文本以及一幅图像（Google标志）的Web站点。用于从Web服务器获取文本和图像并将其显示在屏幕上的过程可以简单地描述为如下几个步骤。

1．Web浏览器对位于www.google.com地址上的一个index.html文件发送请求。index.html文件不必是在地址栏中输入的地址的一部分，本章后面将会介绍关于index.html文件的更多知识。

2．在收到对特定文件的请求后，Web服务器进程将在其目录内容中寻找特定的文件，打开它，并把该文件的内容发送回Web浏览器。图1.2　访问www.google. com

3．Web浏览器接收index.html文件的内容，该文件是用HTML代码标记的文本，并基于这些HTML代码呈现内容。在呈现内容时，浏览器将遇到用于Google标志的HTML代码，在图1.2中可以看到该标志。HTML代码看起来如下所示：

这个图像的HTML代码是一个标签，并且它提供了一些属性，告诉浏览器显示这个标志所必需的信息：文件源地址（src）、宽度（width）和高度（height）。在后面各章中，我们将会学习关于属性的更多知识。

4．浏览器查看标签中的src属性，查找源位置。在这种情况下，可以在与浏览器获取HTML文件相同的Web地址（www.google.com）上的images目录中找到googlelogo_color_272x92dp.png图像。

5．浏览器请求位于Web地址http://www.google.com/images/branding/googlelogo/2x/ googlelogo_color_272x92dp.png的文件。

6．Web服务器解释该请求，找到文件，并把该文件的内容发送给请求它的Web浏览器。

7．Web浏览器在显示器上显示图像。

在Web内容递送过程的描述中可以看到，Web浏览器不仅仅是充当用于查看内容的“相框”。浏览器将会依据文件中的HTML命令组合Web内容成分，并布置那些部分。

也可以在本地或者在你自己的硬盘驱动器上查看Web内容，从而无需Web服务器。获取和显示内容的过程与上述步骤列出的过程相同，其中浏览器将寻找并解释HTML文件的代码和内容，但是往返行程更短：浏览器将在你自己的计算机的硬盘驱动器上（而不是在远程机器上）寻找文件。如果文件中嵌入了任何基于服务器的编程语言，将需要Web服务器解释它们，但是这超出了本书的范围。实际上，无需拥有自己的Web服务器，你就可以顺利学完本书中关于HTML、CSS和JavaScript所有内容。但如果是这样的话，除你自己之外其他任何人都将无法查看你的杰作。1.4　选择Web托管提供商

尽管刚才告诉你无须具有Web服务器也可以顺利地学完本书中关于HTML、CSS和JavaScript所有内容，我们还是建议你使用Web服务器继续学习下面的内容。你终究想要让自己的静态Web站点或动态Web站点能够公之于众，为此，本书附录部分介绍了如何在本地机器上安装完整的Web服务器和数据库以便进行个人开发。不要担心，获得托管提供商通常是一个快速、轻松并且相对廉价的过程。事实上，只需支付比这本书的定价稍微多一点的费用，就能获得你自己的域名和为期一年的Web托管。

如果在所选的搜索引擎中输入“web hosting provider”（Web托管提供商），将获得数百万条提示和无穷无尽的赞助性搜索结果（也称为广告）。如果不这样，许多Web托管提供商将从世界上消失，尽管事实可能并非如此。即使正在查看一个更便于管理的托管提供商列表，它也可能令人不知所措，尤其是当你只是想要寻找一个位置，来托管你自己或者你的公司或组织的简单Web站点的时候。

你想要在寻找提供商时缩小搜索的范围，并且选择最适合自己需要的提供商。针对Web托管提供商的一些选择标准如下。● 可靠性/服务器“正常运行时间”：如果具有一种在线状态（online presence），你希望确保人们实际上能够以一致的方式到达那里。● 客户服务：寻求多种方法用于联系客户服务的（电话、电子邮件、聊天），以及针对常见问题的在线文档。● 服务器空间：托管包将会包括足够的服务器空间以存放你计划在Web站点（如果有的话）中包括的所有多媒体文件（图像、音频、视频）吗？● 带宽：托管包将会包括足够的带宽从而可以满足所有人访问你的站点并下载文件，而无须额外付费吗？● 域名购买和管理：托管包将会包括域名吗，或者你必须单独通过托管账户购买和维护域名吗？● 价格：不要为托管支付过多的费用。你将会看到所提供的广泛价格，并且应该立即就想知道“它们有什么区别？”通常，它们之间的区别几乎与服务的质量无关，而只与公司的系统开销以及公司认为它可以怎样避免向人们收费有关。一个良好的经验法则是：如果每年为基本的托管包和域名支付75美元以上的费用，那么你支付的费用就可能太高了。

下面列出了3家可靠的Web托管提供商，它们的基本托管包以相对较低的费用提供丰富的服务器空间和带宽（以及域名和额外的好处）。如果你不中意其中任何一家Web托管提供商，至少可以使用它们基本的托管包描述，作为你货比三家的指导原则。注意：本书作者多年来使用了所有这些提供商（后来还使用了其他一些提供商），推荐使用其中任何一家提供商都没有问题。作者主要使用DailyRazor作为Web托管提供商，对于高级开发环境则更是如此。● A Small Orange：它的Tiny和Small托管包是新的Web内容发布者的完美起点。● DailyRazor：甚至它的Rookie个人托管包也是全功能的和可靠的。● Lunarpages：它的Basic托管包非常适合于许多个人和小企业的Web站点。

良好的托管提供商的一个特点是：它会提供一个“控制面板”，让你管理自己账户的各个方面。图1.3显示了我自己在DailyRazor上的托管账户的控制面板。许多Web托管提供商都提供了这种特殊的控制面板软件，或者某种在设计上类似的控制面板——清楚标记的图标引导你执行任务以配置和管理账户。图1.3　一个示例控制面板

你可能永远也不需要使用控制面板，但是有这样一个控制面板可用将能够简化以下操作：安装数据库及其他软件、查看Web统计信息和添加电子邮件地址（以及许多其他的特性）。如果你能够遵循指导，在无需特殊培训的情况下就可以管理自己的Web服务器。1.5　利用多种Web浏览器执行测试

刚才讨论了Web内容递送的过程以及如何获得Web服务器，现在回过头来讨论利用多种Web浏览器测试Web站点似乎有点奇怪。不过，在继续学习关于利用HTML和CSS创建Web站点的所有知识之前，要记住下面这句非常重要的话：你的Web站点的每位访问者将可能使用与你自己不同的硬件和软件配置，包括设备类型（台式机、笔记本电脑、平板电脑、智能手机）、屏幕分辨率、浏览器类型、浏览器窗口大小、连接的速度等。记住，当访问者查看你的站点时，你不能控制他们的任何行为。因此，在设置Web托管环境并准备好工作时，要考虑下载多种不同的Web浏览器，以便可以使用本地测试工具套件。下面让我解释为什么这一点很重要。

尽管所有的Web浏览器都会以相同的常规方式处理信息，但是它们当中的一些特定的区别将导致事情在不同的浏览器中看起来并不总是相同的，甚至相同Web浏览器的相同版本的用户也可能通过选择不同的显示选项和/或更改他们的浏览窗口的大小，以改变页面的显示方式。所有主流的Web浏览器都允许用户利用他们自己的选择覆盖Web页面作者指定的背景和字体。当页面第一次出现在人们的显示屏幕上时，屏幕分辨率、窗口大小和可选的工具栏也可能改变他们所看到的页面大小。你只能确保自己编写的是符合标准的HTML和CSS。注意：在第3章中，我们将学习一点响应式Web设计的概念，其中站点的设计将根据用户的行为和浏览环境（屏幕大小、设备等）自动转换和改变。

在任何情况下，都不要花时间创建只会在你自己的计算机上看起来完美无缺的最终设计——除非你想要在朋友的计算机上、大街上的咖啡店里的计算机上或者你的iPhone上查看它时面对失望。

应该总是在尽可能多的Web浏览器上，在标准的、便携的和移动的设备上，测试你的Web站点。● 用于Mac的Apple Safari。● 用于Mac、Windows和Linux/UNIX的Google Chrome。● 用于Windows的Microsoft Internet Explorer和Microsoft Edge。● 用于Mac、Windows和Linux/UNIX的Mozilla Firefox。

既然你已经建立了开发环境，或者对将来想要建立的开发环境至少有了某种想法，现在就让我们继续创建一个测试文件。1.6　创建一个示例文件

在开始前，让我们看看程序清单1.1。这个程序清单是一份简单的Web内容，其中包含几行HTML代码，用于在两行上以大号、加粗字母打印“Hello World! Welcome to My Web Server.”，并在浏览器窗口内居中显示它们。在继续学习本书后面的内容时，你将对这个文件内使用的HTML和CSS有更多的了解。程序清单1.1　示例HTML文件

Hello World!
Welcome to My Web Server.

为了利用这些内容，可以打开所选的文本编辑器，比如Notepad（在Windows上）或TextEdit（在Mac上）。不要使用WordPad、Microsoft Word或者其他全功能的字处理软件，因为这些程序创建的文件类型不同于我们用于创建Web内容的纯文本文件。

输入在程序清单1.1中的内容，然后使用sample.html作为文件名保存文件。.html扩展名告诉Web服务器，你的文件的确是HTML。当把文件内容发送给请求它的Web浏览器时，浏览器也会知道它是HTML，并将相应地呈现它。

既然你已经有了一个要使用的示例HTML文件，并且希望把它放到某个地方，如Web托管账户，现在就让我们发布你的Web内容。1.7　使用FTP传输文件

就像你迄今为止所学到的，必须把Web内容放到Web服务器上，使之可供其他人访问。这个过程通常是使用FTP（File Transfer Protocol，文件传输协议）完成的。要使用FTP，需要一个FTP客户端，这个程序用于把你的计算机上的文件传输到Web服务器上。

FTP客户端需要3部分信息来连接到Web服务器，在你建立了账户之后，托管提供商将把下面这些信息发送给你。● 你将连接到的主机名或地址。● 你的账户的用户名。● 你的账户的密码。

当你拥有了这些信息后，就准备好使用FTP客户端把内容传输到Web服务器。1.7.1　选择FTP客户端

无论你使用的FTP客户端是什么，它们一般都会使用相同类型的界面。图1.4显示了一个FireFTP的示例，它是Firefox Web浏览器使用的FTP客户端。本地机器（你的计算机）的目录清单将出现在屏幕左边，远程机器（Web服务器）的目录清单则出现在右边。通常会看到右箭头和左箭头按钮，如图1.4所示。右箭头把所选的文件从计算机发送到Web服务器上，左箭头则把文件从Web服务器发送到计算机上。许多FTP客户端还允许简单地选择文件，然后把那些文件拖放到目标机器上。

许多FTP客户端可以免费使用，但是也可以通过基于Web的File Manager（文件管理）工具传输文件，该工具很可能是Web服务器的控制面板的一部分。不过，这种文件传输方法通常会在过程中引入更多的步骤，并且几乎不像在你自己的计算机上安装FTP客户端的过程那样流畅（或简单）。

下面列出了一些流行的免费FTP客户端。● 用于Mac和Windows的Classic FTP。● 用于Mac的Cyberduck。● 用于Mac的Fetch。● 用于所有平台的FileZilla。● 用于所有平台的FireFTPFirefox扩展。图1.4　FireFTP的界面

当选择一个FTP客户端并在计算机上安装它时，就准备好从Web服务器上传和下载文件。在下一节中，我们将使用程序清单1.1中的示例文件解释这个过程的工作方式。1.7.2　使用FTP客户端

下面的步骤说明了如何使用Classic FTP连接到Web服务器并传输文件。不过，所有的FTP客户端都使用类似的（如果不是完全相同的）界面。如果理解了下面的步骤，就应该能够使用任何FTP客户端。记住，首先需要主机名、账户的用户名和账户的密码。

1．启动Classic FTP程序，并单击Connect按钮，将提示你填写要连接到的站点的相关信息，如图1.5所示。

2．填写图1.5所示的每个项目，如下所述。● FTP Server是需要向其发送Web页面的Web服务器的FTP地址，你的托管提供商将为你提供这个地址。它可能是yourdomain.com，但是在签订服务合同时要检查所接收到的信息。● 使用托管提供商提供的信息完成User Name框和Password框。

3．你可能要切换到Advanced选项卡，并修改以下可选的项目，如图1.6所示。● Site Label是你将用于称呼自己站点的名称。其他任何人都不会看到这个名称，因此可以输入你想要的任何名称。● 可以更改Initial Remote Directory on First Connection和Initial Local Directory on First Connection的值，但是你可能要等待，直到你习惯了使用FTP客户端并且建立了工作流程再这么做。图1.5　在Classic FTP中连接到新的站点图1.6　Classic FTP中的Advanced连接选项

4．完成设置后，单击Add Site按钮保存设置。然后可以单击Connect按钮，建立一条与Web服务器的连接。

你将看到一个对话框，指示Classic FTP尝试连接到Web服务器。一旦成功连接，将会看到一个与图1.7类似的界面，其左边显示本地目录的内容，其右边显示Web服务器的内容。

5．现在应准备好将文件传输到Web服务器，剩余的全部工作是把目录改为所谓的Web服务器的文档根目录（Document Root）。Web服务器的文档根目录被指定为Web内容的顶级目录，它是目录结构的起点，在本章后面，我们将了解关于它的更多信息。通常，这个目录命名为public_html、www（因为www被创建为public_html的别名）或htdocs。你自己不必创建这个目录，托管提供商将为你创建它。图1.7　通过Classic FTP成功连接到远程Web服务器

双击文档根目录名称打开它。FTP客户端界面的右边将显示该目录的内容（此时它可能是空的，除非Web托管提供商代表你在该目录中放置了占位符文件）。

6．这里的目标是把你以前创建的sample.html文件从你的计算机传输到Web服务器上。在FTP客户端界面的左边列出的目录中查找文件（如果需要，可以进行导航），并单击它一次，以高亮显示文件名。

7．单击FTP客户端界面中间的右箭头按钮，把文件发送到Web服务器。当文件传输完成时，客户界面的右边将会刷新，以显示发送到目的地的文件。

8．单击Disconnect按钮关闭连接，然后退出Classic FTP程序。

无论何时想通过FTP把文件发送到Web服务器上，从概念上讲都要采取这些类似的步骤。也可以使用FTP客户端在远程Web服务器上创建子目录。要使用Classic FTP创建子目录，可以单击Remote菜单，然后单击New Folder按钮。不同的FTP客户端具有不同的界面选项，来实现相同的目标。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所示。图1.8　通过Web浏览器访问的sample.html文件

不过，如果在文档根目录内创建一个新目录，并把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服务器之后，就可以创建一个指向它的链接（在第2章中将学习这方面的知识）。换句话说，Web服务器不仅仅能提供HTML文件。

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

当你想到索引时，可能会想起图书后面的索引，它告诉你在哪里寻找各个关键词和主题。Web服务器目录中的索引文件可以用于此目的（如果你这样设计它的话）。事实上，索引这个名称最初就起源于此。

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

索引文件的另一个作用是：你的站点拥有一个索引页面，但是访问站点上的某个目录的用户并没有指定该页面，他仍然会登录到你的站点的该部分的（或者站点本身的）主页面。

例如，可以输入苹果公司的官方网址，并登录到Apple的iPhone信息页面上。

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”消息或者其他某种意外的后果）。1.9　小结

本章介绍了使用HTML标记文本文件来生成Web内容的概念。我们应该获悉Web内容不仅仅是“页面”，Web内容还包括图像、音频和视频文件。所有这些内容都存在于Web服务器上，这是一台通常远离你自己的计算机的远程机器。在你的计算机或其他设备上，你使用Web浏览器请求、获取并且最终在屏幕上显示Web内容。

我们学习了在确定Web托管提供商是否适应你的需求时要考虑的标准。在选择了Web托管提供商之后，就可以开始把文件传输到Web服务器，我们还学习了如何使用FTP客户端执行该操作。我们还学习了一点关于Web服务器目录结构和文件管理的知识，以及给定的Web服务器目录中的index.html文件的重要的用途。此外，我们还学习了可以在可移动媒体上分发Web内容，并且学习了如何动手构造文件和目录，以实现在不使用远程Web服务器的情况下查看内容的目标。

最后，我们学习了把工作成果放到Web服务器上后，在多种浏览器中对其进行测试的重要性。编写有效的、符合标准的HTML和CSS代码有助于确保你的站点对于所有的访问者看上去都是相似的，但是如果没有接收到来自开发团队之外的潜在用户的输入，那么仍然不应该进行设计——当你是设计团队中的一员时，获取其他人的输入甚至更重要！1.10　问与答

Q：我查看了Internet上的一些Web页面的HTML源代码，它们看上去极难学习。我必须像一名计算机程序员那样思考，才能够学习这种材料吗？

A：尽管复杂的HTML页面看上去可能的确令人畏缩不前，但是学习HTML比学习实际的程序设计语言（如C++或Java）要容易得多。HTML是一种标记语言，而不是程序设计语言，使用它标记文本，以便浏览器可以以某种方式呈现文本。与开发计算机程序相比，这是一组完全不同的思考过程。你实际上不需要任何作为计算机程序员的经验或技能，就能成为一名成功的Web内容作者。

许多商业Web站点背后的HTML代码看上去比较复杂的原因之一是：它们很可能是通过可视化Web设计工具创建的，该工具是一个“所见即所得”（what you see is what you get，WYSIWYG）编辑器，在某些情况下会使用其软件开发人员让它使用的任何标记（而在手工编码中，你可以完全控制得到的标记）。本书将从头开始介绍基本的编码，这通常会得到干净的、易于阅读的源代码。可视化Web设计工具倾向于使代码难以阅读，以及产生错综复杂且不符合标准的代码。

Q：运行你建议的所有测试将要花费比创建我的页面更长的时间！我不能利用时间较少的测试蒙混过去吗？

A：如果你的页面没有打算用于赚钱或者提供重要的服务，那么当它们在某些用户看来很滑稽或者偶尔会产生错误时，这可能不是一个大问题。在这种情况下，只需利用两种不同的浏览器测试每个页面，并且每天访问它一次。不过，如果需要展示专业的图像，除了进行严格的测试之外，将别无选择。

Q：说真的，谁在乎我是怎样组织我的Web内容的呢？

A：无论相信与否，你的Web内容的组织结构与搜索引擎和站点的潜在访问者密切相关。但是，总而言之，具有组织有序的Web服务器目录结构有助于跟踪内容，因为你很可能会频繁地更新内容。例如，如果你具有专门的目录用于存放图像或多媒体，就可以确切知道在哪里寻找你想更新的文件，而无须搜寻包含其他内容的目录。1.11　测验

本测验包含一些问题和练习，可帮助读者巩固本章所学的知识。在查看后面的“解答”一节的内容之前，要尝试尽量回答所有的问题。1.11.1　问题

1．你将需要把多少个文件存储在Web服务器上，用以产生单个Web页面，并且它上面具有一些文本和两幅图像？

2．在选择Web托管提供商时，要关注的一些特点是什么？

3．通过FTP连接到Web服务器需要哪3份信息？

4．index.html文件的用途是什么？

5．Web站点必须包括一种目录结构吗？1.11.2　解答

1．将需要3个文件：一个用于Web页面本身，它包括文本和HTML标记，还有两个文件分别用于每一幅图像。

2．要关注可靠性、客户服务、Web空间和带宽、域名服务、站点管理的额外事项和价格。

3．需要主机名、你的账户的用户名和你的账户的密码。

4．index.html文件通常是用于Web服务器内的某个目录的默认文件。它允许用户访问http://www.yourdomain.com/somedirectory/，而不必在末尾使用文件名，并且最终仍然会到达合适的位置。

5．不是。使用一种目录结构以进行文件组织完全取决于你自己，尽管强烈建议这样做，因为它可以简化内容维护。1.11.3　练习● 有序地获得你的Web托管服务——你将在自己的计算机上通过在本地查看文件来学习本书中的各章内容？还是将使用Web托管提供商？注意，大多数Web托管提供商在你购买托管计划的当天就能使你正常运行自己的站点。● 如果你使用的是外部托管提供商，那么就使用FTP客户端，在Web站点的文档根目录内创建一个子目录。把sample.html文件的内容粘贴进另一个名为index.html的文件中，把标签之间的文本更改成新的内容，并且把

与

在第1章中，我们基本了解了创建Web内容并且在线（或者在本地，如果还没有Web托管提供商的话）浏览它的幕后过程。在本章中，我们将言归正传，介绍必须出现在HTML文件中的各种元素，以使其在Web浏览器中适当地显示。

概括来讲，本章将快速总结HTML的基础知识，并给出一些实用的提示，帮助你作为Web页面开发人员充分利用好自己的时间。HTML5元素可以让我们增强在标记过的文本中所提供的信息的语义（含义），在学习它们的时候，我们将开始更深入一点地研究它背后的理论。你将密切观察6个元素，它们构成了文档的稳定语义结构的基础，这6个元素是：

在本书余下的全部内容中，我们将看到在代码示例中如何适当地使用这些标签，因此在继续学习后面的内容之前，本章将确保你很好地领会了它们的含义。2.1　从一个简单的Web页面开始

在第1章中，我们学习到Web页面只是一个被HTML代码标记（或包围）的文本文件，这些代码告诉浏览器如何显示文本。要创建这些文本文件，可以使用诸如“记事本”（在Windows上）或TextEdit（在Mac上）之类的文本编辑器，不要使用“写字板”、Microsoft Word或其他全功能的字处理软件，因为它们所创建的文件类型与我们用于创建Web内容的纯文本文件不同。警告：我们反复申明这一点，因为它对于结果和学习过程本身非常重要：不要利用Microsoft Word或者任何其他HTML兼容的字处理器创建第一个HTML文件，其中大多数程序都试图以奇怪的方式为你重写HTML代码，这可能会把你完全搞糊涂。此外，我还建议不要使用所见即所得（what you see is what you get，WYSIWYG）的图形编辑器，比如Adobe Dreamweaver。你很可能发现，在开始学习HTML时，从一个简单的文本编辑器入手将更容易，并且更有教育意义。

在开始工作前，应该从你想要放在Web页面上的一些文本开始。

1．查找（或者编写）几个关于你自己、你的家庭、你的公司、你的宠物或者你感兴趣的其他某个主题的文本段落。

2．把这段文本另存为标准的ASCII纯文本。“记事本”（Windows上的）和大多数简单的文本编辑器总是把文件另存为纯文本，但是如果使用另一个程序，则可能需要选择这种文件类型作为一个选项（在选择“文件”>“另存为”命令之后）。

在学习本章的过程中，将给文本文件添加HTML标记（称为标签，tag），从而把它转变成在Web浏览器呈现最佳的Web内容。

在保存包含HTML标签的文件时，总是要给它们提供以.html结尾的名称。这很重要。如果在保存文件时忘记了在文件名末尾输入.html，大多数文本编辑器都会给它提供某个其他的扩展名（比如.txt）。如果发生这种情况，当你尝试利用Web浏览器查看文件时，可能会找不到文件，即使找到文件，它肯定也不能正确地显示。换句话说，Web浏览器期望Web页面文件具有.html文件扩展名并且具有纯文本格式。

在访问Web站点时，还可能遇到文件扩展名为.htm的页面，它是另一个可接受的文件扩展名。你还可能发现在Web上使用的其他文件扩展名，比如.jsp（Java Server Pages）、.asp（Microsoft Active Server Pages）或.php（PHP：Hypertext Preprocessor）。除了程序设计语言之外，这些文件中也包含HTML，尽管这些文件中的程序代码是在服务器端编译的，并且你在客户端看到的一切都是HTML输出。但是如果查看源文件，你很可能会看到程序设计代码和标记代码错综复杂地交织在一起。在本书后面的各章中，我们将学习如何把PHP加入到Web站点中。

程序清单2.1显示了一段可以输入并保存的文本示例，用于创建一个简单的HTML页面。如果用Web浏览器打开这个文件，将会看到如图2.1所示的页面。你创建的每个Web页面都必须包括一个 声明，以及、、和标签对。程序清单2.1　、、

In the beginning, Tim created the HyperText Markup Language. The Internet was without form and void, and text was upon the face of the monitor and the Hands of Tim were moving over the face of the keyboard. And Tim said, Let there be links; and there were links.

试读结束[说明：试读内容隐藏了图片]

下载完整电子书