【0001】网页和网站入门知识

在系统学习前端知识之前，我们需要先了解一些网页和网站的入门知识，为后续的学习做一个开端。

本文知识体系如下图所示：

一、认识网页和网站

网页是人们上网最主要的依托之一 ，由于人们频繁的通过网页来使用网络，因此网页而变得越来越重要，网页设计也得到了快速的发展。网页讲究的是排版布局，其目的是提供一种布局更合理、使用更方便，功能更强大、体验更友好的形式给每一个网页浏览者，使他们能够轻松、愉快、快速地了解网页所提供的信息。

1.1 网页和网站的概念

使用某个浏览器，进入某个网站首先看到的是网站的主页（Homepage），也称之为首页，主页集成了指向二级页面及其他网站的超链接，也包含一些要展示的内容，浏览者进入主页后可以浏览最新的信息，找到感兴趣的内容，通过单击超链接跳转到感兴趣的页面。如图1-1，展示的是菜鸟教程网站的主页。

1.1.1 网页

当浏览者在地址栏中输入一个网址或者单击某个超链接后，在浏览器中看到的文字、图像、音频、视频、动画和超链接等内容时，承载你所看到的内容的页面就是网页。网页通过HTML(超文本标记语言)、CSS(层叠样式表)、JavaScript等语言编写，然后由浏览器中显示和访问。网页是网站的基本信息单位，是www(万维网)的基本文档。

1.1.2 网站

网站是由多个网页组成的集体，通常包含一个或多个主题，提供相关的信息和服务。网站可以是个人的、企业的、政府的等各种类型，用于展示，交流，销售等多种目的。不管是哪种类型的网站，网站页面都是由最基本的网页元素组合到一起形成的。

一个网站对应磁盘上的一个文件夹，网站的所有网页和其他资源文件都会放在该文件下货其他子文件夹下，设计良好的网站通常将网页文档及其他资源分门别类地保存在相应的文件夹中以方便管理和维护。这些网站通过超链接组织在一起，其中主页是一个网站门户网页，一般会命名为“index.html”，必须放在网站的根目录下。

1.2 网页的基本构成元素

网页由网址（URL：Uniform Resource Locator，统一资源定位符）来识别与存取，当访问者在浏览器的地址栏中输入网址后，通过一段复杂而又快速的程序，网页文件会被传送到访问者的计算机内，然后浏览器把这些HTML代码“翻译”成图文并茂的网页。如图1-2页面所示。

虽然网页的形式与内容不相同，但是组成网页的基本元素是大体相同的，一般包含文本和图像、超链接、动画、表单、音频视频等内容。

（1） 文本和图像

文本和图像是网页中最基本的构成元素，基本上所有的网页中都有它们的身影。

（2） 超链接

超链接是网站的灵魂，通过超链接可以实现不同网页之间的连接。网页中的超链接分为文字超链接和图像超链接，浏览者只需要通过鼠标单击带有超链接的文本或者图像，网页就可以自动跳转到超链接指向的其他文件，通过超链接将所有的网页链接成为一个整体。

（3） 动画

网页里的动画可以分为Flash动画和GIF动画两种。动态的内容要比静态的内容更加吸引人的注意力，因此精彩的动画能让网页更加丰富，更加吸引人。

（4） 表单

表单是一种可以实现访问者和服务器进行交互的技术，日常上网操作中的搜索、登录等都是通过表单来实现和服务器进行交互操作的。

（5） 音频和视频

随着网络技术的飞速发展，网站上已经不再是单调的图像和枯燥的文字内容，越来越多的网页设计人员会在网页中加入音频、视频、背景音乐等，让网站更加具有个性和时尚感。

二、如何设计网页

每天无数的信息在网络上传播，而形态各异、内容繁杂的网页就是这些信息的载体。如何设计网站页面，对于每一个网站来说都是至关重要的。

2.1 什么是网页设计

随着时代的发展、科学的进步、需求的不断提高，网页设计已经在短短数年内跃升成为一个新的艺术门类，而不再仅仅是一门技术。相比其他传统的艺术设计门类而言，它更突出艺术与技术的结合、形式与内容的统一、交互与情感的诉求。

在这种时代背景的要求下，人们对网页设计产生了更深层次的审美需求。网页不仅是把各种信息简单地堆积起来，能看或者表达清楚就行，更要考虑通过各种设计手段与技术技巧，让受众能更多、更有效地接收网页上的各种信息，从而对网站留下深刻的印象，催生消费行为，提升企业品牌形象。

随着互联网技术的进一步发展与普及，当今时代的网站，更注重审美的要求和个性化的视觉表达，这也对网页设计师这一职业提出了更高层次的要求。平面设计中的审美观点都可以以套用到网页设计上。

但网页设计也有自己的独特性。在颜色的使用上，它有自己的标准色——“安全色”；在界面设计上，它要充分考虑到测览者使用的不同浏览器、不同分辨率的各种情况；在元素的使用上，它可以充分利用多媒体的长处，选择最恰当的音频与视频相结合的表达方式，给用户以身临其境的感觉和比较直观的印象。说到底，这还只是一个比较模糊抽象的概念，在网络世界中，有许许多多设计精美的网页值得去学习欣赏和借鉴，如图1-3所示。


以上的网页，仅仅是互联网海洋中众多优秀网页作品的两个例子，但从以上作品不难看出，好的网站应该给人有这样的感觉:干净整洁、条理清晰、专业水准、引人入胜。优秀的网页设计作品是艺术与技术的高度统一，它应该包含视听元素与版式设计两项内容；以主题鲜明、形式与内容相统一、强调整体为设计原则；具有交互性与持续性、多维性、综合性、版式的不可控性、艺术与技术结合的紧密性5个特点。

2.2 网页设计的特点

与当初的纯文字和数字的网页相比，现在的网页无论是在内容上，还是在形式上都已经得到了极大的丰富。现在的网页设计主要具有以下特点。

（1）交互性

网页设计不同于传统媒体的地方就在于信息的动态更新和即时交互性。即时的交互是网络媒体成为热点媒体的主要原因，也是网页设计时必须考虑的问题。网页设计人员可以根据网站各个阶段的经营目标，配合网站不同时期的经营策略，以及用户的反馈信息，经常对网页进行调整和修改。

（2）设计的不可控性

网页的设计并没有固定的或统一的标准，其具体表现为：一是网页页面会根据当前浏览器窗口大小自动格式化输出；二是网页的浏览者可以控制网页页面在浏览器中的显示方式；三是不同种类、不同版本的浏览器观察同一网页页面时效果会有所不同；四是浏览者的浏发器工作环境不同，显示效果也会有所不同。把所有这些问题归结为一点，即网页设计者无法控制页面在用户端的最终显示效果，这正是网页设计的不可控性。

（3）技术与艺术结合的紧密性

设计是主观和客观共同作用的结果，设计者不能超越自身已有经验和所处环境提供的客观条件来进行设计。优秀的设计者正是在掌握客观规律的基础上，进行自由的想象和创造。网络技术主要表现为客观因素，艺术创意主要表现为主观因素，网页设计者应该积极主动地掌握现有的各种网络技术规律，注重技术和艺术的紧密结合，这样才能穷尽技术之长，实现艺术想象，满足浏览者对网页的高质量需求。

（4）多媒体的综合性

目前网页中使用的多媒体视听元素主要有文字、图像、声音、动画和视频等。网络带宽的增加、芯片处理速度的提高以及跨平台的多媒体文件格式的推广，必将促使设计者综合运用多种媒体元素来设计网页，以满足和丰富浏览者对网页不断提高的要求。多种媒体的综合运用已经成为网页设计的特点之一，也是网页设计未来的发展方向之一

（5）多维性

多维性源于超链接，主要体现在网页设计中导航的设计上。由于超链接的出现，网页的组织结构更加丰富，浏览者可以在各种主题之间自由跳转，从而打破了以前人们接收信息的线性方式。例如，可以将页面的组织结构分为序列结构、层次结构、网状结构和复合结构等。但页面之间的关系过于复杂，不仅增加了浏览者检索和查找信息的难度，也会给设计者带来更大的挑战。为了让浏览者在网页上迅速找到所需要的信息，设计者必须考虑快捷而完善的导航以及超链接设计，如图 1-4所示。

2.3 网页设计相关术语

在相同的条件下，有些网页不仅美观，打开的速度也非常快，而有些网页却要等很久，这就说明网页设计不仅仅是需要页面精美、布局整洁，很大程度上还要依赖于网络技术。因此，网站不仅仅是设计者审美观和阅历的体现，更是设计者知识面和技术等综合素质的展示。

因此，我们要学习网页设计相关知识，还要了解一些网页设计相关的术语。

（1）因特网

因特网(Interet)是由许许多多遍布全世界的计算机组织而成的，一台计算机在连接上网的一瞬间，就已经是因特网的一部分了。网络是没有国界的，通过因特网，浏览者可以随时传递文件信息到世界上因特网能覆盖的任何角落，当然也可以接收来自世界各地的实时信息。

在因特网上查找信息，“搜索”是最好的办法。例如可以使用搜索引擎，搜索引擎提供了强大的搜索能力，用户只需要在文本框中输入几个查找内容的关键字，就可以找到成干上万条与之相关的信息，如图 1-5 所示。

（2）浏览器

浏览器是安装在计算机中用于查看因特网中网页的一种工具，每一个用户都要在计算机上安装浏览器来“阅读”网页中的信息，这是使用因特网的最基本的条件，就好像要用电视机来收看电视节目一样。目前大多数用户所用的 Windows操作系统中已经内置了浏览器。

（3）静态网页

静态网页是相对于动态网页而言的，并不是说网页中的元素都是静止不动的。静态网页是指浏览器与服务器端不发生交互的网页，网页中的 GIF 动画、Flash 动画等都会发生变化。静态网页的执行过程大致如下。
1）浏览器向网络中的服务器发出请求，指向某个静态网页。
2）服务器接到请求后将传输给浏览器，此时传送的只是文本文件。
3）浏览器接到服务器传输的文件后解析 HTML标签，将结果显示出来

（4）动态网页

动态网页除了静态网页中的元素外，还包括一些应用程序，这些程序需要浏览器与服务器之间发生交互行为，而且应用程序的执行需要服务器中的应用程序服务器才能完成。目前的动态网页主要使用 ASP、PHP、JSP 和.NET 等程序。

（5）URL

URL是 Uniform Resource Locator 的缩写，中文为“统一资源定位器”。它就是网页在因特网中的地址，如果要访问某网站是需要通过 URL才能够找到某网页的具体地址。例如“网易”的 URL是 www.163.com，也就是它的网址，如图 1-6所示。

（6）HTTP

HTTP是 Hypertext Transfer Protocol 的缩写，中文为“超文本传输协议”，它是一种最常用的网络通信协议。如果想链接到某一特定的网页时，就必须通过 HTTP 协议，不论是用哪一种网页编辑软件，在网页中加入什么资料，或是使用哪一种浏览器，利用HTTP 协议都可以看到正确的网页效果。

（7）TCP/IP

TCP/IP 是 Transmission Control Protocol/Internet Protocol 的缩写，中文为“传输控制协议/网络协议”。它是因特网所采用的标准协议，因此只要遵循 TCP/IP 协议，不管计算机是什么系统或平台，均可以在因特网的世界中畅行无阻。

（8）FTP

FTP是 File Transfer Protocol的缩写，中文为“文件传输协议”。与 HTTP 协议相同，它也是 URL地址使用的一种协议名称，以指定传输某一种因特网资源，HTTP协议用于链接到某一网页，而 FTP 协议则是用于上传或是下载文件。

（9）IP 地址

IP地址是分配给网络上计算机的一组由32 位二进制数组成的编号，用于对网络中的计算机进行标识，好比人的身份证号码。为了方便记忆地址，采用了十进制标记法，每个数值小于等于225，数值中间用“.”隔开，一个 IP 地址对应一台计算机并且是唯一的。这里提醒读者注意的是所谓的唯一是指在某一时间内唯一，如果使用动态 IP，那么每一次分配的 " 地址是不同的，这就是动态 IP，在使用网络的这一时段内，这个I是唯一指向正在使用的计算机的；另一种是静态IP，它是固定将这个 IP 地址分配给某计算机使用的。网络中的服务器就是使用的静态 IP。

（10）域名

IP 地址是一组数字，人们记忆起来不够方便，因此人们给每台计算机赋予了一个具有代表性的名字，这就是主机名。主机名由英文字母或数字组成，将主机名和 IP 地址对应起来，这就是域名，方便读者的记忆。
域名和IP地址是可以交替使用的，但一般域名还是要转换成IP地址才能找到相应的主机，这就是上网的时候经常用到的 DNS 域名解析服务。

（11）虚拟主机

虚拟主机(Virtual Host/Virtual Server)是使用特殊的软硬件技术，把一台计算机主机分成一台台“虚拟”的主机，每一台虚拟主机都具有独立的域名和IP 地址(或共享的IP地址)，有完整的 Intemet 服务器(WWW、FTP、E-mail 等)功能。在同一台硬件、同一个操作系统上，运行着为多个用户打开的不同的服务器程序，互不干扰；而各个用户拥有自己的一部分系统资源(IP 地址、文件存储空间、内存、CPU 时间等)。虚拟主机之间完全独立，并可由用户自行管理。在外界看来，每一台虚拟主机和一台独立的主机的表现完全一样。

虚拟主机属于企业在网络营销中比较简单的应用，适合初级建站的小型企事业单位。这种建站方式，适合用于企业宣传、发布比较简单的产品和经营信息。

（12）租赁服务器

租赁服务器是指通过租赁ICP(万联网内容供应商)的网络服务器来建立自己的网站。使用这种建站方式，用户无须购置服务器，只需要租用他们的线路、端口、机器设备和所提供的信息发布平台就能够发布企业信息，开展电子商务。它能替用户减轻初期投资的压力，减少对硬件长期维护所带来的人员及机房设备投入，使用户既不必承担硬件升级负担又同样可以建立一个功能齐全的网站。

（13）主机托管

主机托管是企业将自己的服务器放在 ICP的专用托管服务器机房，利用他们的线路、端口、机房设备为信息平台建立自己的宣传基地和窗口。使用独立主机是企业开展电子商务的基础。虚拟主机会被共享环境下的操作系统资源所限，因此，当用户的站点需要满足日益发展的要求时，虚拟主机将不再满足用户的需要，这时候用户需要选择使用独立的主机。

三、了解Web标准

在学习使用HTML、CSS和JavaScript制作网页之前，还需要清楚什么是 Web 标准。

3.1 Web标准是什么

Web 标准，即网站标准。目前通常所说的 Web 标准一般指进行网站建设所采用的基于XHTML语言的网站设计语言。Web标准并不是某一个标准，而是一系列标准的集合。

Web 标准由一系列规范组成。由于 web设计越来越趋向于整体与结构化，对于网页设计制作者来说，理解 Web 标准首先要理解结构和表现分离的意义。刚开始的时候理解结构和表现的不同之处可能很困难，特别是如果不习惯思考文档的语义结构的话。但是，理解这点是很重要的，因为，当结构和表现分离后，用 CSS样式表来控制表现就是很容易的一件事了

网站标准的目的是:提供最多利益给最多的网站用户；确保任何网站文档都能够长期有效；简化代码、降低建设成本；让网站更容易使用，能适应更多不同用户和更多网络设备；当浏览器版本更新，或者出现新的网络交互设备时确保所有应用能够继续正确执行。

3.2 什么是W3C

W3C组织是制定网络标准的一个非营利组织。W3C是WorldWide WebConsortium(万维网联盟)的缩写，像HTML、XHTML、CSS、XML的标准就是由 W3C 制定的。它创建于1994年，研究 Web规范和指导方针，致力于推动web 发展，保证各种 Web技术能很好地协同工作。

根据 W3C 官方网站的介绍，W3C 会员包括生产技术产品及服务的厂商、内容供应商、团体用户、研究实验室、标准制定机构和政府部门，大家一起协同工作，致力在万维网发展方向上达成共识。自 1998 年开始，“Web 标准组织”将 W3C 的“推荐”重新定义为“Web标准”，这是一种商业手法，目的是让制造商重视并重新定位规范，在新的浏览器和网络设备中完全支持那些规范。

3.3 结构、表现、行为和内容

Web 标准是由 W3C和其他标准化组织制定的一套规范集合，包含一系列标准，包含人们所熟悉的HTML、XHTML、JavaScript以及CSS等。Web标准的目的在于创建一个统一的用于 web 表现层的技术标准，以便于通过不同浏览器或终端设备向最终用户展示信息内容。

3.3.1 结构

（1）XML

XML的英文全称是 The Extensible Markup Language。目前推荐遵循的是 W3C于2000年10 月6日发布的 XML 1.0。和 HTML 一样，XML 同样来源于 SGMIL，但 XML 是一种能定义其他语言的语言。XML 最初的设计目的是弥补 HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。

（2）HTML

HTML的英文全称是 HyperText Markup Language，中文称为超文本标识语言，广泛应用于现在的网页，HTML 的目的是为文档增加结构信息，例如表示标题、表示段落。浏览器可以解析这些文档的结构，并用相应的表现形式表现出来。例如:浏览器会将<strong之间的内容用粗体显示。并且设计师也可以通过 CSS 样式来定义某种结构以什么形式表现出来。

HTML元素构成了 HTML文件，这些元素是由HTML标签(tags)所定义的。HTML文件是一种包含了很多标签的纯文本文件，标签告诉浏览器如何去显示页面。

（3）XHTML

XHTML称为可扩展标识语言，英文全称为The Extensible HyperText Markup Language。XML虽然数据转换能力非常强大，完全可以替换 HTML，但面对成千上万已经存在的网站，直接采用 XML 还为时尚早。因此，在HTML4.0的基础上，用XML的规则对其进行扩展得到了 XHTML。简单地说，建立 XHTML的目的就是实现 HTML 向 XML的过渡。

3.3.2 表现

CSS 称为层叠样式表，英文全称是 Cascading Sryle sheets。目前推荐遵循的是 W3C 于 1998年5月12日发布的 CSS 2.0。W3C 创建CSS标准的目的是以CSS取代HTML表格式布局和其他表现的语言。纯 CSS布局与结构化的 XHTML相结合能够帮助网页设计师分离结构和外观，使站点的访问和维护更加容易。

随着互联网的发展，网页的表现方式更加多样化，需要新的CSS 规则来适应网页的发展，所以在最近几年 W3C已经开始着手 CSS 3.0标准的制定，目前CSS 3.0还处于草案阶段，但已经可以领略到 CSS 3.0的特殊效果。

3.3.3 行为

（1）DOM

DOM 称为文档对象模型，英文全称是 Document Object Model，是一种 W3C颁布的标准，用于对结构化文档建立对象模型，从而使得用户可以通过程序语言(包括脚本)来控制其内部结构。可以简单地理解为，DOM解决了Netscape的JavaScript和Microsoft 的Jscript之间的冲突，给网页设计师和网页开发人员一个标准的方法，来访问他们站点中的数据、脚本和表现层对象。

（2）ECMAScript

ECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言(JavaScript)，目前遵循的是ECMAScript-262 标准。

3.3.4 内容

内容就是制作者放在页面内真正想要访问者浏览的信息，可以包含数据、文档或者图片等。注意这里强调的“真正”，是指纯粹的数据信息本身，而不包含辅助的信息，如导航菜单装饰性图片等，内容是网页的基础，在网页中具有重要的地位。

3.4 遵循Web标准的好处

首先最为明显的好处就是用 Web标准制作的页面代码量小，可以节省带宽。

一些测试表明，通过内容和设计分离的结构进行页面设计，浏览器对网页的解析速度大大提高，相对老式的内容和设计混合编码而言，浏览器在解析过程中可以更好地分析结构元素和设计元素，良好的网页浏览速度使来访者更容易接受。

由于 Web 标准页面的清晰结构、语义完整，利用一些相关设备能很容易地正确提取信息给残障人士。因此，方便盲人阅读信息也成为Web 标准的好处之一。

四、入门知识总结

本人主要介绍了有关网页和网站开发的相关基础知识，包括网页与网站的关系、网页的基本构成元素、网页设计的特点和网页设计相关类型等相关内容，使读者对网页与网站有更深入的了解和认识。本文还介绍了有关 Web 标准的相关知识。本文所介绍的基础概念较多，读者需要认真理解，并能够用自己的语言表述出来。