HTML与CSS网页设计概述
1.1 认识网页、网页相关的名词、Web标准
1.1.1 认识网页
一、什么是网页
为了使初学者更好地认识网页，我们首先来看一下京东商城官方网站。打开火狐浏览器，在地址栏输入京东商城官方网站的网址，按下回车键，这时火狐浏览器中显示的页面即为京东商城官方网站首页，如图1-1所示。
图1-1 京东商城官方网站首页截图
从图1-1中可以看到，网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。
二、网页是如何形成的
为了让初学者快速了解网页是如何形成的，接下来查看一下网页的源代码。
在京东商城官方网站首页中，单击鼠标右键，在弹出的菜单栏中选择【查看页面源代码】选项，如图1-2所示。
在弹出的窗口中便会显示当前网页的源代码，具体效果截图如图1-3所示。
图1-2 单击鼠标右键弹出的菜单栏
图1-3 京东商城官方网站首页源代码
图1-3即为京东商城官方网站首页的源文件，它是一个纯文本文件，仅包含一些特殊的符号和文本。而我们浏览网页时看到的图片、视频等，其实是这些特殊的符号和文本组成的代码被浏览器渲染之后的结果。
三、网站与网页
一个网站通常包含多个子页面，例如京东商城官方网站包含了众多的子页面。网站其实就是多个网页的集合，网页与网页之间通过超链接互相访问。输入网址，第一个打开的页面就是该网站的首页。
网站由网页构成，网页有静态网页和动态网页之分。现在互联网上的大部分网站都是由静态网页和动态网页混合组成的，两者各有千秋，用户在开发网站时可根据需求酌情采用。
那么，静态网页与动态网页有什么区别呢？
静态网页是指用户无论何时何地访问，网页都会显示固定的信息，除非网页源代码被重新修改上传。
所谓静态网页就是指没有后台数据库、不含程序和不可交互的网页。你编的是什么，它显示的就是什么，不会有任何改变。静态网页更新起来相对比较麻烦，适用于一般更新较少的展示型网站。反之，不符合静态网页概念的就属于动态网页。
静态网页使用语言：HTML。在网站设计中，一般的静态网页文件是以.htm、.html、.shtml、.xml等为后缀的。但是，并不是说静态网页就没有动态的效果，有的静态网页也会有动态效果，如.GIF格式的动画、Flash、滚动字母等。
运行于客户端的程序、网页、插件、组件，属于静态网页，例如，html页、Flash、JavaScript、VBScript等，它们是永远不变的。
动态网页显示的内容则会随着用户操作和时间的不同而变化。动态网页使用语言为 HTML+ASP 或HTML+PHP或HTML+JSP等。
在服务器端运行的程序、网页、组件，属于动态网页，它们会随不同客户、不同时间，返回不同的网页，例如ASP、PHP、JSP、ASP.net、CGI等。
区别静态网页与动态网页最重要的一点——程序是否在服务器端运行，这是最重要的标志。
1.1.2 网页相关的名词
一、Internet网络
所谓Internet网络就是我们通常所说的互联网，是由一些使用公用语言互相通信的计算机连接而成的网络。
二、WWW
WWW（英文World Wide Web的缩写）中文译为“万维网”。但WWW不是网络，也不代表Internet，它只是Internet提供的一种服务——即网页浏览服务，我们上网时通过浏览器阅读网页信息就是在使用WWW服务。
三、URL
URL（英文Uniform Resource Locator的缩写）中文译为“统一资源定位符”。URL其实就是Web地址，俗称“网址”。
四、DNS
DNS（英文Domain Name System的缩写）是域名解析系统。在Internet上域名与IP地址之间是一一对应的，域名（例如人民邮电出版社的域名为www.ptpress.com.cn）虽然便于人们记忆，但计算机只认识IP地址，将好记的域名转换成IP的过程被称为域名解析。
五、HTTP
HTTP（英文Hypertext transfer protocol的缩写）中文译为超文本传输协议。它是一种详细规定了浏览器和万维网服务器之间互相通信的规则。
六、Web
Web本意是蜘蛛网和网的意思。对于网站设计、制作者来说，它是一系列技术的复合总称（包括网站的前台布局、后台程序、美工、数据库开发等），我们称它为网页。
七、W3C组织
W3C（英文World Wide Web Consortium的缩写）中文译为“万维网联盟”。万维网联盟是国际最著名的标准化组织。W3C最重要的工作是发展Web规范，如：超文本标记语言（HTML）、可扩展标记语言（XML）等。这些规范有效地促进了Web技术的兼容，对互联网的发展和应用起到了基础性和根本性的支撑作用。
1.1.3 Web标准
一、什么是Web标准
Web标准并不是某一个标准，而是一系列标准的集合，主要包括结构（Structure）、表现（Presentation）和行为（Behavior）3个方面。
1.结构
结构用于对网页元素进行整理和分类，主要包括XML和XHTML两个部分。XHTML是基于XML的标识语言，是在HTML4.0的基础上，用XML的规则对其进行扩展建立起来的，它实现了HTML向XML的过渡。
2.表现
表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。
3.行为
行为是指网页模型的定义及交互的编写，主要包括DOM和ECMAScript两个部分。其中，DOM（英文Document Object Model的缩写）是文档对象模型；ECMAScript是ECMA（英文European Computer Manufacturers Association的缩写）以JavaScript为基础制定的标准脚本语言。
二、为什么需要Web标准
由于不同的浏览器解析出来的效果可能不一致，开发者往往需要为多版本的开发而艰苦工作。使用Web标准，可以使不同的浏览器展示统一的内容。
三、采用Web标准有什么好处
（1）让Web的发展前景更广阔。
（2）内容能被更多的设备访问。
（3）更容易被搜索引擎搜索。
（4）降低网站流量费用。
（5）使网站更易于维护。
（6）提高页面浏览速度。
四、结构、表现、行为之间的关系
以一个人为例，就可以清晰地说明三者之间的关系：人的骨骼就相当于结构，结构可以使内容更清晰、更有逻辑性；衣服、帽子、鞋子就相当于表现，表现用于修饰内容的样式；行走、跳跃、奔跑就是行为，行为就是内容的交互及操作效果。