第1章 HTML基础

随着计算机技术和通信技术的迅猛发展和日益普及，以 Internet 为代表的计算机网络已经从最初的军事、科研和教育的专用网络逐步向全球化网络、商业化网络和大众化网络方向发展，逐渐成为人们工作、学习和生活的一个重要部分，并深深地改变着我们的学习、工作和生活方式。时至今日，人们已经在很大程度上离不开网络了。目前Internet为人们提供了多种服务，如WWW、E-mail、FTP、BBS等，其中WWW是应用最广泛的服务之一，它已经成为查找信息、网上购物、网上结算、软件下载等活动的好场所。若要将网上的信息展现在用户面前，就需要使用一种称为HTML的标签语言。

1.1 基本概念

Internet也称为因特网、互联网，是全球最大的、开放的、由众多网络互连而成的计算机网络。

Internet 提供的服务主要有：WWW、FTP、E-mail、BBS和Telnet。其中，WWW 用于提供网页浏览服务，是应用最广、发展最快的一种服务。

1.WWW简介

WWW是全球广域网（World Wide Web）的缩写，简称为Web，中文又称为“万维网”。它起源于1989年3月，是由欧洲量子物理实验室（the European Laboratory for Particle Physics，CERN）所发展出来的超媒体系统。

WWW 为使用者提供了一个可以轻松驾驭的图形用户界面来查阅 Internet 上的文档，它允许使用者通过“跳转”或“超级链接”从某一页跳到其他页。一个完整的 WWW 系统包括 WWW服务器、浏览器、HTML文件（Web页面，网页）和网络4部分。

WWW服务器是指能够实现WWW服务功能的计算机，也称为Web站点。服务器上包含了许多称为html文件的资源，这些Web页面采用超级文本（Hypertext）的格式，即可以包含指向其他 Web 页面或其本身内部特定位置的超级链接。服务器信息资源主要是以网页的形式向外提供。访问者要查看Web站点上的信息，需使用Web浏览器软件，如Microsoft的IE或Google的Chrome等，它们能将Web站点上的信息转换成用户显示器上的文本或图形。一旦浏览器连接到了Web站点，就会在计算机上显示出有关的信息。相对于服务器来说，浏览器称为WWW的客户端。

一般来讲，一个Web站点由多个网页构成。每个Web站点上都有一个起始页，通常称为主页或首页。这是一个特殊的页面，它是网站的入口页面，其中包含指向其他页面的超链接。通常主页的名称是固定的，一般使用index或default来命名主页，例如，index.html或default.html。

WWW的运行涉及3个重要的概念：统一资源定位器（Uniform Resource Locator，URL）、超文本传输协议（Hypertext Transfer Protocol, HTTP）和超文本标签语言（Hypertext Markup Languag，HTML）。

（1）URL。在Internet上查找WWW信息资源需要使用URL。URL提供了在Web上访问资源的统一方法和路径，相当于现实生活中的门牌号，它标识了链接所指向的文件的类型及其准确位置。

（2）HTTP。WWW服务器和WWW客户机之间是按照文本传输协议（HTTP）互传信息的。HTTP协议制订了HTML文档运行的统一规则和标准，它是基于客户端请求、服务器响应的工作模式，主要由4个过程组成：客户端与服务器建立连接；客户端向服务器发出请求；服务器接受请求、发送响应；客户端接收响应，客户端与服务器断开连接。这一过程就好比打电话一样，打电话者一端为客户端，接电话者一端为服务端。

（3）HTML。HTML是一种文本类、解释执行的标签语言，用于编写要通过WWW显示的超文本文件。在后面会进一步介绍HTML。

2.浏览器

浏览器是专门用于执行HTML文件以及查看HTML源代码的一种软件。比如Microsoft的IE、Google的Chrome以及Mozilla 的Firefox。

浏览器执行HTML文件有两种方式：鼠标双击HTML文件来执行和通过浏览器地址栏中输入HTML文件的URL来执行。

3.静态网页和动态网页

由HTML直接书写，内容不会因人因时变化，并且不能够在客户端与服务器端进行交互的网页称为静态网页。静态网页的扩展名为.html或.htm。

内容能够因人因时变化，且能够在客户端与服务器端进行交互的网页称为动态网页。动态网页的扩展名依据所用的编程语言来定，如.jsp、.aspx等。

全部由静态页面组成的网站称为静态网站；包含有动态网页的网站称为动态网站。

1.2 HTML概述

1.2.1 HTML定义

HTML是一种文本类、由浏览器解释执行的标签语言, 用于编写要通过WWW显示的超文本文件，具有平台无关性。

1.2.2 HTML的发展历程

HTML诞生于20世纪90年代，由Tim Berners-Lee所设计。最初的HTML被设计得很简单,只包含几个标签，主要用于在网上展现文本。随着Web网络的迅速发展，人们开始希望在网上发布的信息图文并茂，并且动感十足。为满足人们不断增加的需要，HTML被不断地发展，其标签不断被充实，功能也得到了不断增强。至今，HTML已发展到了HTML5。在HTML5之前的HTML的最高版本是HTML4.0.1，现在说的HTML通常就是指HTML4.0.1。在这个版本的语言中，规范更加统一，浏览器之间的兼容性也更强了。

虽然 HTML 目前的功能已得到了极大的增强，不同浏览器之间的兼容性也更加好了，但HTML本身存在致命的缺点，就是不能描述数据的具体含义，同时它的标签也是很有限的，这就使得HTML的发展比较有限。另外在HTML的整个发展历程中，各种浏览器厂商对HTML的支持并没有完全严格按规范要求来做，使得HTML显得极其宽松，比如双标签可以没有结束标签，标签和属性的大小写不约束，属性值是否有引号都没关系，标签是否正确嵌套也没关系。而运行在计算机上的各种浏览器对错误的HTML也极其宽容，以至于明显格式不良的HTML文档在浏览器上竟然也能正确显示结果。随着技术的发展，浏览器不仅能在计算机上运行，而且还能在移动设备和手持设备上运行，而运行在这些设备上的浏览器对HTML的错误就没有这么宽容了。为此，W3C建议使用可扩展标签语言（Extensible Markup Language，XML）规范来约束HTML文档。

XML是一套用来定义如何标签文本的规则，没有固定的标签，在XML中，程序员可以根据需要定义不同的标签。XML是区分大小写的，所有元素必须成对出现，所有属性值必须用英文引号引起来。XML的主要用途：一是作为定义各种实例标签语言标准的元标签；二是作为Web数据的标准交换语言，起到描述交换数据的作用。

XML作为Web数据的标准交换语言，具有很强的数据转换功能，完全可以替代HTML。但目前存在成千上万的基于HTML语言设计的网站，因此马上采用XML还不太合适。为从HTML平滑过渡到XML，而采用了可扩展HTML（Extensible Hyper-Text Markup Language, XHTML）。XHTML是一个过渡技术，它同时结合了HTML的简单性和XML的规范性等优点，是一种增强了的HTML。2000年1月，W3C发布了XHTML1.0版本。

虽然HTML看上去显得很不规范，但事实上，W3C将它以及XHTML作为标准来发布时，都通过文档类型定义（Document Type Definition，DTD）对它们制订了严格的规范标准，但现在大量存在互联网上的 HTML 文档却很少完全遵守这些规范。出于“存在即是合理”的考虑，Web 超文本应用技术工作组（Web Hypertext Application Technology Working Group，WHATWG）组织制定了HTML5这样一个新的HTML标准，这是一种由规范向现实“妥协”的规范。HTML5的规范极其宽松，甚至不用提供DTD。在WHATWG的努力下，W3C在2008年终于认可了HTML5，2014年10月28日，W3C的HTML工作组正式发布了HTML5的正式推荐标准（W3C Recommendation）。HTML5增加了支持Web应用开发者的许多新特性，以及更符合开发者使用习惯的新元素，并重点关注定义清晰的、一致的准则，以确保Web应用和内容在不同用户代理（浏览器）中的互操作性。HTML5带来了一组新的用户体验，如Web的音频和视频不再需要插件，通过Canvas更灵活地完成图像绘制，而不必考虑屏幕的分辨率，浏览器对可扩展矢量图（SVG）和数学标签语言（MathML）的本地支持等。HTML5 是构建开放 Web 平台的核心，为此，各大浏览器厂商都对HTML5抱着极大的热情，纷纷在自己的浏览器中对HTML5提供越来越高的支持。在Web开发界，它也得到了越来越多开发人员的青睐，事实上，Google在很多地方都开始使用HTML5。

1.3 HTML文件

使用HTML语言编写的文件称为HTML文件，也叫Web页面或网页，扩展名为.html或.htm。HTML 文件是一种纯文本文件，可以使用记事本、Editplus 等文本编辑工具，或 frontPage、IntelliJIDEA、Dreamweaver等可视化编辑工具来编写。HTML文件由浏览器解释执行，具有跨平台性，任何一台主机，只要具有浏览器就可以执行HTML文件。通过浏览器中的“查看>>源文件”命令，访问者可以查看网页的HTML代码。

HTML文件的组成包含两部分内容：一是HTML标签；二是HTML标签所设置的内容。

1.3.1 HTML标签

HTML标签，也称为元素，用于描述网页结构，同时也可对页面对象样式进行简单的设置。所有标签都是由一对尖括号（“<”和“>”）和标签名所构成的，并分为开始标签和结束标签。开始标签使用<标签名>表示，结束标签使用</标签名>表示。在开始标签中使用attributename=“value”这样的格式来设置属性，结束标签不包含任何属性。标签中的标签名用来在网页中描述网页对象，属性则用于表示元素所具有的一些特性。比如事物的形状、颜色、用途等特性。

标签语法格式：

<标签名称 属性="属性值" 属性="属性值" …> …</标签名称>

一个标签中可以包含任意多个属性，不同属性之间使用空格分隔，例如：<a href=“http://www.sise.com.cn” title=“华软主页”>。

属性值可以使用引号括起来，也可以不使用引号。使用引号时既可以是单引号，也可以是双引号，例如，title=”华软主页”及 title=‘华软主页’都正确。但需注意的是，引号必须配对使用，不能一边使用双引号，另一边却使用单引号；此外，使用引号时必须保证是在英文输入状态下输入。另外，HTML标签和属性不区分大小写，即标签<hr>、<Hr>和<HR>作用是一样的。

标签属性虽然可以对标签所设置的内容进行一些简单样式的设置，如对文字颜色、字号、字体等样式进行设置。但在实际应用中，一般使用CSS来设置样式，而不建议标签属性来设置样式，这是因为使用标签属性设置样式，一方面会使表现和结构无法分开；另一方面有可能造成在不同浏览器中得到不同的表现效果。

通常标签都具有默认属性，当一个标签中只包含标签名时，标签将使用默认属性来获得标签的默认样式，例如：段落标签<p>，其存在一个默认的居左对齐方式。需要修改标签的默认样式时，通常使用CSS来重置默认样式。

大多数HTML标签都有一个开始标签和结束标签，有部分标签只有开始标签，没有结束标签，如<br>。对于同时具有开始标签和结束标签的称为双标签，而只具有开始标签的称为单标签。

HTML开始标签后面或标签对之间的内容就是HTML标签所设置的内容，其中的内容可以是普遍的文本，也可是嵌套的标签。

1.3.2 HTML文件的基本结构

按照实现功能的不同，整个 HTML 文件可分成两层：一层是外层，由<html>和</html>标签对来标识；另外一层是内层，用于实现HTML文件的具体功能。根据实现功能的不同，又可以将内层细分为两个区域，即头部区域和主体区域。

头部区域的标识标签是<head>和</head>，<head>和</head>之间的内容都属于头部区域中的内容。这个区域主要用来设置一些与网页相关的信息，如网页标题、字符集、网页描述的信息等，设置的信息内容一般不会显示在浏览器窗口中。

要在浏览器窗口显示的内容需要放在主体区域。主体区域的标识标签是<body>和</body>。

HTML文件的基本结构如下。

1.3.3 HTML文件的编写方法

HTML文件是一个文本文件，我们可以使用任意一种文本编辑工具进行编写。在此，我们将介绍三种编写方法，即使用最简单的记事本工具编写和使用可视化的 Dreamweaver 以及 IntelliJ IDEA编写。

1.使用记事本编写HTML文件

打开记事本，在光标处直接输入图1-1所示的代码，并以“ex1-1.html”为文件名将文件保存在E:\jk\lesson1目录下。

在E:\jk\lesson1目录找到ex1-1.html文件，双击该文件，会自动打开浏览器执行该html文件；或者打开浏览器，选择“文件→打开”命令，从弹出的“打开”对话框中找到ex1-1.html文件后，单击“确定”按钮，即可以执行该文件，运行效果如图1-2所示。

2.使用Dreamweaver编写HTML文件

Dreamweaver是Macromedia公司推出的目前最流行、使用最广泛的一款专业的可视化网页制作软件，它集网页制作和网站管理于一身，可用于对 Web站点、Web页面进行设计和编码。

Dreamweaver的文档窗口通常包含多个视图窗口，其中Dreamweaver CS6包含了4个视图窗口，分别如下。

代码视图：用于编写和编辑HTML、CSS、JavaScript等代码的编码环境。

设计视图：用于可视化页面布局、可视化编辑的设计环境。

拆分视图：用于同时显示同一文档的代码视图和设计视图。

实时视图：用于实时展现浏览器浏览效果的窗口。

打开Dreamweaver CS6软件，在打开的界面中选择“新建”栏目下的“HTML”，将会默认打开图1-3所示的代码视图。在代码视图中可直接编写代码，编写完后将文件保存为html文件，如图1-4所示。如果同时单击拆分视图和实时视图，则可同时查看代码视图及其在浏览器中的显示效果，如图1-5所示。

在代码视图、设计视图和拆分视图中，也可通过单击“在浏览器中预览/调试”按钮，以打开选择的浏览器来浏览网页，如图1-6所示。

3.使用IntelliJ IDEA 编写HTML文件

IntelliJ IDEA 是Java语言开发的集成环境。IntelliJ IDEA 虽然主要用于开发Java的工具，但其创建HTML、CSS和JavaScript文档时一样特别出色。在静态网站的开发方面，IntelliJ IDEA 和Dreamweaver都是优秀的集成化开发工具，都可以开发HTML、CSS和JavaScript文档。但在智能代码助手、代码自动提示等方面，IntelliJ IDEA 优于Dreamweaver。Dreamweaver的主要优点是可视化和网站的管理。下面我们来介绍使用IntelliJ IDEA 编写HTML文件的步骤。

运行IntelliJ IDEA软件后打开图1-7所示界面。在该界面双击第一项“Create New Project”打开图1-8所示界面。在图1-8界面中选择“Static Web”新建一个静态网站。

单击图1-8中的“Next”按钮，打开图1-9所示界面。在该界面中输入项目名和项目保存位置，然后点击“finish”按钮后打开图1-10所示界面。

在图1-10中对项目名单击鼠标右键，在弹出的菜单中依次选择“New”“HTML File”菜单，然后在打开的对话框中输入HTML文件名，并从下拉列表中选择HTML文件的类型。创建步骤如图1-11所示。

单击“OK”按钮即可打开所创建的HTML文件，如图1-12所示。在打开的HTML文件中输入相应的内容，然后将鼠标移到HTML文件代码行区域的任何位置处，此时将会出现五大浏览器的图标（注意：如果鼠标移在</html>标签之后的空白区域，浏览器图标不会出现），如图1-13所示。单击你已安装的浏览器对应的图标，你所创建的HTML文件将在该浏览器中运行，如图1-14所示。

1.4 XHTML基础

我们知道XHTML是HTML向XML发展的一种过渡技术，它使用了XML的规则对HTML4进行了扩展。

1.4.1 XHTML基本语法

标准的XHTML遵循严格的XML语法规则，这些规则主要如下。

（1）文档之首必须使用DOCTYPE声明。

（2）文档的根元素必须是html，并且必须为其指定命名空间，例如：

<html xmlns="http://www.w3.org/1999/xhtml">

（3）元素必须正确嵌套。即当有标签嵌套使用时，必须先结束里层的标签，再结束外层的标签。

例如：

（4）标签必须成对使用。每个元素都必须有结束标签，除非在DTD中将其声明为EMPTY。对于单标签，必须在开始标签的右尖括号前加一反斜线，如<br />。

（5）标签名和属性名必须小写。

（6）属性值必须用引号括起来，并且引号必须在英文状态下输入。

（7）每个属性都必须有属性值。

HTML标签的属性可以没有值，而XHTML规定所有属性都必须有一个确定的值，没有值的以属性名作为属性值，例如：

<input type="checkbox" name="shirt" value="short" checked="checked" >

（8）使用id作为标签的标识属性。

（9）<script>和<style>标签必须设置type属性。

1.4.2 XHTML文档类型

规范的XHTML文档需要以<!DOCTYPE>标签开始。DOCTYPE（document type）主要用来说明所使用的 XHTML 或者 HTML 是什么版本以及按什么规范来解析网页。解析规范由DOCTYPE 定义的 DTD（文档类型定义）所指定，DTD 规定了使用通用标签语言的网页语法。XHTML1.0提供了以下3种类型的DOCTYPE。

（1）过渡类型（Transitional）：浏览器对 XHTML 的解析比较宽松，它允许使用 HTML4.01的标签，但要符合XHTML的语法。

基本格式：

（2）严格类型（Strict）：浏览器对 XHTML 的解析比较严格，不允许使用任何表现样式的标签和属性，提倡内容与样式分开。

基本格式：

（3）框架类型（Frameset）：如果页面中使用框架结构，就需要使用框架类型。

基本格式：

注：在 HTML5 中，对标签的书写格式要求很宽松，所以可以不用规定标签必须遵循的 dtd文件，所以在HTML5中的文档类型设置格式如下。

<!DOCTYPE html>

极客学院

jikexueyuan.com

XHTML的使用规范

1.5 网站的建设与发布

网站建设是一个系统工程，包含一定的工作流程，我们只要遵循这个流程，按部就班把每一步工作做好，就有可能创建一个令人满意的网站。简单来说，这个流程大致可分为：网站策划、网站素材收集、网站目录设计、网页规划、网页制作、网站测试和网站发布等几个主要步骤。

1.5.1 网站策划

网站策划，即网站定位，在建设一个网站前，首先必须确定网站的主题。这一步主要是确定网站的题材，即要明确网站的类型，是作为一个个人主页，还是作为门户网站、社交网站、公司网站或是电子商务网站。确定主题后还要明确访问网站的对象和网站内容。主题、对象和内容三者之间存在的相互关系如图1-15所示。

1.5.2 网站素材收集

网站定位后，接下来就应该围绕网站的主题和访问对象收集网站的素材。这些素材主要包括文字、图片、动画、声音及影像等类型的资料。对网站素材的收集途径主要有以下两种。

（1）自己编制文字材料或使用一些制作软件（如 Photoshop、Fireworks 等软件）制作图片，使用Flash等软件制作动画，以及使用一些影视软件制作影像视频等多媒体文件。

（2）从网络、书本、报刊、杂志、光盘等媒体中获取所需素材。

收集到素材后应分门别类地保存在相应的目录中，以便制作网站时使用。另外，在使用别人的素材时，要注意版权问题以及确保内容的完整性与正确性。

1.5.3 网页规划

网页规划包括网页版面布局和颜色规划。

网页的版面，指的是在浏览器中看到的完整的一个页面的大小。由于浏览器有800像素×600像素、1024像素×768像素，1280像素×800像素等多种不同的分辨率，故为了能在浏览器窗口完整地显示页面，我们制作网页时需要对页面的宽度进行设置。目前宽度一般设置为不超过800px或让网页自适应浏览器宽度变化。

网页布局指的是网页结构的设计，即合理地设计页面中的栏目和板块，并将其合理地分布在页面中。如网站主页的基本构成内容包括网站标志、导航栏、广告条、主内容区、页脚等，在进行规划时需要对这些内容进行布局规划。如作为网站的标志应该能集中体现网站的特色、内容及其内在的文化内涵和理念；广告条位置应该对访问者有较高的吸引力，通常在此处放置网站的宗旨、宣传口号、广告语或设置为广告席位来出租；导航栏则可以根据具体情况放在页面的左侧、右侧、顶部和底部；主内容区一般是二级链接内容的标题、内容提要或内容的部分摘录，布局通常是按网站内容的分类进行分栏或划分板块；页脚通常用来标注站点所属的单位的地址、E-mail链接以及版权所有或导航条。

页面颜色的规划需要遵循一定的原则：保持网页的色彩搭配的协调性；保持不同网页色彩的一致性；根据页面的主题、性质及浏览者来规划整体色彩。

1.5.4 网站目录设计

为了能正确地访问，以及便于日后的维护和管理，我们在设计网站目录时，需要遵循这样的原则：目录的层次不要太深，一般不要超过3层；不要使用中文目录；尽量使用意义明确的目录名称。

一个网站的目录一般按以下步骤来设计。

（1）创建一个站点根目录。

（2）根据网站主页中的导航条，一般在站点根目录下为每个导航栏目建一个目录（除首页栏目外）。

（3）在站点根目录下创建用于存放公用图片的目录images。

（4）在站点根目录下创建一个保存样式文件的CSS文件夹。

（5）在站点根目录下创建一个保存脚本文件的JS文件夹。

（6）如果有 flash、avi 等多媒体文件，则可以在站点根目录下再创建一个用于保存多媒体文件的media文件夹。

（7）创建主页，将主页命名为index.html或default.html，并存放在根目录下。

（8）每个导航栏目的文件分别存放在相应导航栏目录下。

1.5.5 网页制作

上述各项工作准备好后，就可以开始制作网页了。网页包括静态网页和动态网页，如果是静态网页，只需使用HTML、CSS和JavaScript来创建；如果是动态网页，则还需要使用到诸如JSP、ASP.net、PHP等这样一些用于创建动态网页的技术。在此我们主要介绍静态网页的制作。静态网页的制作可以使用任意一种文本编辑工具，如记事本、Dreamweaver等工具。

1.5.6 网站测试

为了保证所建设的网站能被用户快速有效地访问到，在发布网站之前以及之后都应对网站进行测试。根据测试内容的不同，可将网站测试分为以下几种类型。

（1）浏览器兼容的测试：在不同的浏览器中和在不同的版本下访问网页，查看显示情况是否正确。

（2）链接测试：单击每一个链接，查看能否正确链接到目标页面，确保不存在无效和孤立链接。

（3）发布测试：将网站发布到 Internet 上后，对网站中的网页进行链接及访问速度等内容的测试，确保各个链接有效，同时访问速度可接受。

1.5.7 网站发布

网站创建好后，就可以申请域名供别人访问了，如果网站空间需要使用别人提供的，则还需要申请空间，并且将网站上传到所申请的空间上。网站的上传可以使用cutFtp这样的FTP软件，也可以使用Dreamweaver软件的上传文件功能进行上传。

习题1

1.填空题

（1）WWW的全称是______，简称为______，中文名为______。

（2）HTML的中文名称叫______，是一种文本类的由______解释执行的标签语言。

（3）用HTML语言编写的文件称为______，HTML文件的扩展名可以是______或.htm。

（4）HTML文件的头部区域使用______标签来标识，主体区域使用______标签来标识

2.简答题

网站的创建流程包括哪些步骤？简述每个步骤的操作内容。

3.上机题

（1）熟悉Dreamweaver软件，并分别使用记事本和Dreamweaver软件创建一个简单的HTML文件。

（2）在浏览器中单击菜单“查看→源文件”查看所创建的HTML文件的源代码。