- HTML+CSS+JavaScript实用详解
- 叶青编著
- 134字
- 2020-08-26 19:31:43
第一篇 HTML网页技术
第1章 网页技术学前班
Internet，中文称为国际互联网。众所周知，Internet起源于1969年，由美国国防部授权ARPANET（高级研究规划署）进行的互联网的试验。当初没有人会预料到，在几十年后的今天，互联网成了全球互通的主要方式。网页是Internet最主要的组成部分，在本章读者可以学到很多Internet及网页制作方面的基础知识。
1.1 Internet相关技术介绍
读者在本节将了解Internet技术中比较重要的知识，如IP地址等。只有学好了这些知识才可以理解网页制作技术的基本原理，为后面的学习打好基础。
1.1.1 TCP/IP协议
TCP/IP协议是Internet国际互联网络的基础，主要包括TCP、IP、UDP和ICMP等协议。
TCP/IP协议使用客户端/服务器模式进行通信。TCP/IP通信是点对点的，即通信是网络中的一台主机与另一台主机之间的。读者要了解的是，当前Internet上数据都是通过TCP/IP在网络上进行控制、转发的，所以，要连接上Internet，操作系统必须安装TCP/IP协议。Windows 98以上的Windows系统已经安装TCP/IP协议，所以读者不需自己安装。
TCP/IP协议中HTTP协议用于浏览网页，FTP协议用于Internet文件共享。
注意：TCP/IP协议可以让不同结构的主机、不同操作系统的主机通过网络连接。
1.1.2 IP地址和域名简介
网络中每台主机通过一个唯一的地址进行标识（如同一个人的身份证号码），那就是IP地址。由于IP地址是唯一的，所以数据可以通过IP地址发送到相对应的电脑主机。
IP地址是32位的二进制数值，用于在TCP/IP通讯协议中标记每台计算机的地址。通常我们使用点式十进制来表示，如192.168.0.1、202.105.26.22等。
IP地址可以笼统地分为公网地址和私有地址。
公网地址即在Internet上能识别唯一主机的地址。
私有地址即在局域网中唯一识别主机的地址，用得比较多的有192.168.0.0-192.168.254.0。
由于IP地址比较复杂，难以记忆，所以Internet采用域名解决了这个问题。域名是一组用于标识IP地址的有意义的词组。比如www.baidu.com、www.google.com。
而IP地址和域名之间的转换由当地网络运营商完成，用户无须关心。图1.1和图1.2向读者展示了两种访问网站的方法。
图1.1 使用IP地址访问网站
图1.2 使用域名访问网站
注意：IP地址的知识读者只要了解其作用，一般访问网站使用域名。
1.1.3 URL简介
URL即Uniform Resource Locator，中文称为全球资源定位器。读者通过上面的学习知道了什么是域名，我们可以通过域名方便地访问网络上的网站。但是一个域名只能对应一个IP地址（通常为一个网站）。为了访问网站上的具体内容，必须通过URL来实现。
URL通俗地讲就是平常所说的网址。如http://www.google.com/music/index.html，这就是一个完整的URL，通过域名下的目录访问该网站所需的网页，http://代表采用http协议访问。
通过URL，可以精准地定位网络上的各种资源，除了网页文件以外，还可以定位图片、音乐、视频等。如果直接输入域名访问网站，URL将会指向该网站的默认主页。例如，在浏览器的地址栏输入www.google.cn与输入www.google.cn/index.html是同样的页面，如图1.3所示。
图1.3 谷歌网站的默认主页即为index.html
1.1.4 Web浏览器
读者应该很熟悉Web浏览器，浏览Internet网站的主力程序。
由于网页的表现都是由代码编写的，当网页代码通过网络传到读者的电脑后，Web浏览器负责按代码的规则把网页的各种代码翻译成丰富多彩的网页。
最常用的Web浏览器是Windows系统自带的Internet Explorer，简称IE浏览器。目前IE浏览器最常用的版本为6.0和7.0。
另一个比较有名的浏览器是Mozilla公司的Firefox（习惯上简称FF），目前最新版本为2.0。
虽然还有其他的一些Web浏览器，如Opera等，但是以上两种浏览器已经占到了95%以上的市场份额。所以网页测试时往往以IE浏览器和FF浏览器的效果为标准。
注意：如无特别说明，本书图片以IE7.0为准。
1.2 Internet技术的应用
在信息技术发达的今天，读者每天都可以感受到Internet技术在生活中的巨大作用。通过Internet，读者可以每天浏览到最新的新闻，可以参与论坛各种话题火热的讨论，可以和世界各地的朋友一起玩游戏等。
网络技术应用中使用最广泛的就是网页技术，而读者要了解的是，网页技术属于一种B/S架构的技术。
说明：B/S结构，即Browser/Server（浏览器/服务器）结构，就是只安装维护一个服务器（Server），而客户端采用浏览器(Browse)运行软件。
在Internet的网页技术中，用户通过浏览器向分布在网络上的许多网页服务器发出请求，网页服务器对浏览器的请求进行处理，将用户所需网页数据返回到浏览器。其余如数据请求、加工、结果返回等工作全部由网页服务器完成。
读者可能知道，在以前的Internet网页应用中，浏览者大多是被动地接收服务器的信息，互动很少。最近几年Internet应用中炒得很火的Web 2.0，其实只是一种新的网站运营模式。通过部分技术的组合，Web 2.0网站使浏览者充分地参与到网站的内容中，比如博客、视频播客等。对于以上的Internet应用来说，其网页技术本质并没有变化。
注意：从技术学习的角度，读者不要被Web 2.0的概念所迷惑。
1.3 HTML网页技术简介
HTML网页技术是一切网页技术的基础，只有学好HTML技术，才能做出精美的网站。在本节作者将详细地阐述HTML网页技术，希望读者能细细体会并动手实践。
1.3.1 什么是HTML
HTML（Hypertext Markup Language）即超文本标记语言。没有基础的读者不要对“语言”有所畏惧，这并不是计算机编程语言，而是由一些命令组成的描述性文本。
HTML命令用于说明并组织网页上的文字、图形、动画、声音、表格、链接等。网页上的内容都是由HTML命令组织起来的，可见HTML技术在网页中的重要性。
组织网页元素的HTML命令是由<和>包括的，这些HTML命令也叫HTML标签。一般的HTML标签是成对出现的，被组织的网页元素放在首尾标签内，如<b>你好</b>。也有少数标签是单个出现的，如<br>，<img>。
网页文件即采用HTML标签组织内容并符合HTML规范的文件，一般扩展名为htm或者html。
注意：HTML格式的文件是一种文本文件，里面的内容都是文本。
1.3.2 HTML网页的结构
HTML文件内容要包含在<html>和</html>标签内，完整的HTML网页文件应该包括头部和主体2大部分，如图1.4所示。
图1.4 HTML网页文件结构图
头部的HTML标签是<head>和</head>，这里主要放网页文件描述浏览器所需的基本信息。主体的标签是<body>和</body>，包含所要描述的网页具体内容。
在以后的学习中，HTML的网页结构一定要严谨书写，养成良好的习惯。
1.3.3 如何获取网页的HTML
刚刚接触网页制作的读者肯定对网上优秀的网页感兴趣，本节学习如何获取这些网页的代码。综上所述，这些网页都是HTML标签组成的，读者可以直接查看其HTML源代码。查看方法为打开网页后右键单击页面空白处，并在弹出的菜单中单击“查看源文件”选项。
注意：读者在操作时，一定要在网页没有任何内容的空白处右击。
还有一个查看源文件的办法，浏览器菜单栏中单击“查看|查看源文件”。单击“查看源文件”后，读者可以马上看到此网页的HTML代码。系统会调用记事本便于查看HTML源代码，如图1.5所示。
图1.5 记事本查看网页的HTML源代码
如果读者需要保存此网页的HTML代码，只需以下几步：
（1）在记事本的菜单栏单击“文件”。
（2）在弹出的下拉菜单中选“另存为”。
（3）选择保存的路径。
注意：保存后的文件为txt文本文件，而不是html网页文件。
利用优秀网页的代码作参考，是读者学习的好方法。
1.4 什么是静态网页和动态网页
关于静态网页和动态网页的区分，恐怕是初学者最想知道的。在本节笔者将详细地讲述动态网页和静态网页的概念以及区别。
1.4.1 有动画的网页就是动态网页吗
在很多刚接触网页的读者中，不乏有这样的看法，即“动态网页就是有动画的网页”。对于这个看法，笔者有必要在此纠正。
动态网页，指网页的内容可根据某种条件的改变而自动改变，如计数器就是动态的，当有人点击网页时，计数器的值会自动增加；BBS论坛也是动态的，当用户在论坛上发布信息时，网页内容会自动更新，显示出新发布的信息及相关回复。而究其实质，动态网页通常情况下都是数据驱动的网页，即网页中变化的数据都是通过数据库的操作完成的。
常见的动态网页一般扩展名为asp、aspx、php、jsp等，其共同点是网页内的代码在存放网页的服务器上执行，完成数据库操作后，生成的HTML代码网页发送给客户端的浏览器执行。
注意：数据库是计算机使用最普遍的一种强大的数据存储形式，通常通过程序来操作其中数据。
可见带动画的网页不一定是动态网页，动画一般是固定内容的网页元素，所以通常是静态网页元素。
注意：比较高级的动画也可以通过程序操作数据库形成动态网页，不过应用比较少。
静态网页，即纯粹的HTML网页。网页代码除了包含完整的HTML代码外，还可能包含运行于客户端的JavaScript程序。
一般的扩展名为html、htm的网页文件为静态网页，其共同点是网页内的代码都是在客户端的浏览器中执行。
注意：客户端即浏览该网页的用户系统，静态网页的JavaScript程序只完成网页的动态行为。
1.4.2 有了动态网页还有必要学习HTML吗
看了上一小节的介绍，很多读者会认为学习静态的HTML网页无用或者过时，那可就错了。
HTML网页是动态网页的基础，读者可以细心再看一遍动态网页的工作流程，在服务器端执行程序以后还是要输出HTML代码给浏览器执行。也就是说，无论什么网页，在浏览器上看到的都是HTML代码，所以学习HTML静态网页制作是任何网页制作的前提。
不仅如此，比较高级的动态网页站点都有专门的程序把动态生成的网页进行静态化，生成一个个HTML静态网页。读者可以仔细观察一下国内比较大的网站，网页的扩展名是不是html或htm等静态网页。
为什么要这么做呢？因为静态网页保存在网页服务器上，用户浏览时不需要服务器再次执行网页程序，查询数据库并重新生成HTML，这样一来就大大减轻了网页服务器的负担。另外，静态网页数量多，有利于百度，谷歌等搜索引擎的收录，对网站的推广非常有利。
注意：论坛由于数据更新比较频繁，故很少使用静态网页。
1.4.3 网站简介
网页仅仅是一个页面文件，可以单独存在，如扩展名为htm或html的文件。
网站包含很多网页文件，并且还包含和网页相关的资源，如图片、动画、音乐等。总之，网站是若干网页（静态或动态）及其相关资源的集合，如图1.6所示。
注意：一般情况下，一个域名对应一个网站。
在以后的学习里，读者将会学习静态网页的制作及其相关资源的组织，从而完成完整的网站制作。在具备一定能力后，读者将可以利用网页制作技术参与到网站的商业运营中。
图1.6 网站组成图
1.5 小结
由于本书假定读者没有任何网页技术知识，所以本章从最基础的Internet技术介绍开始，使读者逐步了解网页开发的大环境。可能某些知识点在本书中不能马上应用（例如IP地址），但是要成为一名合格的网站开发人员，在进一步的学习中是非常需要这些知识的。本章还介绍了少许动态网页的概念，读者在了解这些概念后，可以对以后的技术学习有比较完善的规划，做到有的放矢。