第三章 HTML相关技术基础知识 纵观各种动态页面开发技术，无论是JSP、ASP还是PHP都无 法摆脱HTML的影子。这些动态的页面开发技术无非是在静 态HTML页面的基础上添加了动态的可以交互的内容。HTML 是所有动态页面开发技术的基础。在接下来的章节将要详 细介绍的就是HTML相关的一系列技术，包括HTML、

Presentation on theme: "第三章 HTML相关技术基础知识 纵观各种动态页面开发技术，无论是JSP、ASP还是PHP都无 法摆脱HTML的影子。这些动态的页面开发技术无非是在静 态HTML页面的基础上添加了动态的可以交互的内容。HTML 是所有动态页面开发技术的基础。在接下来的章节将要详 细介绍的就是HTML相关的一系列技术，包括HTML、"— Presentation transcript:

1 第三章 HTML相关技术基础知识 纵观各种动态页面开发技术，无论是JSP、ASP还是PHP都无 法摆脱HTML的影子。这些动态的页面开发技术无非是在静 态HTML页面的基础上添加了动态的可以交互的内容。HTML 是所有动态页面开发技术的基础。在接下来的章节将要详 细介绍的就是HTML相关的一系列技术，包括HTML、 JavaScript和CSS。其中HTML是一组标签，负责网页的基本 表现形式；JavaScript是在客户端浏览器运行的语言，负 责在客户端与用户的互动；CSS是一个样式表，起到美化整 个页面的功能。本书不是详细介绍HTML的专著，在本章也 只是讲解Web开发中最常见的HTML知识，目的在于使读者能 尽快进入Web开发的状态。如果读者有更深层次的需求可以 参考专门讲解HTML的书籍。

2 3.1 HTML 基础知识 在各种Web开发技术中，HTML无疑是最为基础的。 任何动态语言都离不开HTML的支持。所以在开始 Web开发的学习之前，读者还是需要静下心来打好 这个基础。在这个章节中将会概述HTML的框架知 识。

3 什么是HTML HTML（Hyper Text Markup Language）即超文本 标记语言，用来描述Web文档数据。用户可以通过 URL链接来访问这种Web文档，从而达到信息展示、 信息共享的目的。（具体内容请参照书。）

4 HTML运行原理 前面介绍HTML定义的时候就说过，HTML是一种标 记语言，每一种HTML标签都是有一定表现含义的。 浏览器就是按照HTML标签的语义规则把HTML代码 翻译成漂亮的网页。

5 HTML常用标签 在本节要介绍的是常用标签的基本用法。 1．<table>在HTML的布局标签中，<table>标签是 使用频率最高的一个。它可以把一组信息用表格 的形式表示出来， 2．DIV在以往的Web页面开发 中，表格是首选的布局元素， 3．<a>在浏览一个 网站的时候，我们经常会遇到一些链接，单击这 些链接就会导航的其他的页面。4．<img>在目前 的网站开发中，对图片的依赖是其他元素所不能 替代的，一个漂亮的网页往往是由一系列图片组 合而成。

6 HTML表单标签 前面讲述的都是HTML向用户展示信息的标签，在 本节要介绍的内容就是HTML用来收集用户输入的 标签。<form></form>是表单标签，只有在这个标 签中的用户输入才会被提交给服务器。表单标签 的使用方法类似下面这种格式。（具体内容请参 照书。）

7 HTML其他标签 在本章只是介绍了HTML最基本最常用的几个标签， HTML还有很多其他标签，例如应用程序标签中可 以加入不同动态程序代码，多媒体标签中可以加 入多媒体文件，Flash标签中可以加入Flash动画， 文本标签可以用各种方式组织文本内容的显示。 读者如果要深入全面的研究HTML标签，可以参考 这方面的参考手册。在本书中不再对这些内容进 行详细的介绍。

8 3.2 JavaScript基础知识 JavaScript的出现给静态的HTML网页带来很大的 变化。JavaScript增加了HTML网页的互动性，使 以前单调的静态页面变得富有交互性，它可以在 浏览器端实现一系列动态的功能，仅仅依靠浏览 器就可以完成一些与用户的互动。在下面的章节 中将要简单介绍这种技术的基础知识。

9 什么是JavaScript JavaScript是一种简单的脚本语言，可以在浏览 器中直接运行，无需服务器端的支持。这种脚本 语言可以直接嵌套在HTML代码中，它响应一系列 的事件，当一个JavaScript函数响应的动作发生 时，浏览器就会执行对应的JavaScript代码，从 而在浏览器端实现与客户的交互。

10 JavaScript中的事件 在HTML的标签中，绝大部分都可以触发一些事件， 例如鼠标单击、双击、鼠标经过、鼠标离开等一 系。JavaScript最主要的功能就是与用户的交互， 而用户只能在表单中提交输入内容，所以表单的 所有输入标签都可以出发鼠标事件、键盘事件等 JavaScript所能响应的常见事件。（具体内容请 参照书。）

11 JavaScript中的对象简介 JavaScript所实现的动态功能，基本上都是对 HTML文档或者是HTML文档运行的环境进行的操作。 那么要实现这些动态功能就必需找到相应的对象。 JavaScript中有已经定义过的对象供开发者调用，

12 window对象简介 window对象是所有JavaScript对象中最顶层的对 象，整个HTML文档就是在一个浏览器的一个窗口， 即window对象中显示。（具体内容请参照书。）

13 document对象简介 document对象是在具体的开发过程中用的最频繁 的对象，利用document对象可以访问页面上任何 的元素。通过控制这些元素可以完成与用户的互 动。（具体内容请参照书。）

14 location对象简介 在HTML标签中可以用<a></a>超链接标签来控制网 页中的跳转，在JavaScript中如果要实现类似的 网页跳转功能只能选择location对象，这个对象 的使用方法非常简单，只需要在JavaScript代码 中添加下面这行代码即可。 window.location.href = “

15 JavaScript输入验证 在本章将介绍在浏览器端对用户输入的简单验证， 这种验证仅仅局限于输入格式等方面。（具体内 容请参照书。）

16 JavaScript高级应用探讨 上面介绍的示例中，JavaScript都没有和服务器 进行互动，都是在浏览器中独立执行，这样所能 实现的与客户互动的功能就比较有限了，例如现 在用户注册的时候需要验证这个用户名是否已经 被占用，这个功能便需要到服务器中进行查询。 然而在我们上面的验证中，只有当表单提交的时 候服务器才会相应请求，其他情况下，如果没有 刷新整个页面是不能实现与服务器之间的通信的。

17 3.3 CSS基础知识 在前面的内容中讲解了HTML和JavaScript，现在 我们已经基本可以编出具有简单互动的网页，但 是仅仅这样还是不够的，一个专业的网页需要在 字体、颜色、布局等方面进行各种设置，需要给 用户带来视觉的冲击。接下来的内容将要介绍这 种美化页面的技术。

18 什么是CSS CSS（Cascading Style Sheets）即层叠样式表， 也就是通常所说样式表。CSS是一种美化网页的技 术。通过使用CSS，可以方便、灵活地设置网页中 不同元素的外观属性，通过这些设置可以使网页 在外观上达到一个更高的级别。

19 CSS属性设置 CSS美化网页就是通过设置页面元素的属性来实现 的，在下面的内容中将介绍CSS属性设置的基本方 法。

20 CSS绝对定位示例 在HTML中布局一般情况下需要使用表格，如果要 定位只有通过表格的嵌套来实现，这种方法的确 可以在一定程度上解决问题，但是却不能随意定 位页面元素，而且对某个元素位置的改变有可能 影响到整个页面的布局。

21 3.3.4 JavaScript+DIV+CSS实现下拉菜单
在Web应用中，下拉菜单的可以说是随处可见，在 学习了JavaScript和CSS以后实现起来毫无难度。 其原理就是在用JavaScript控制不同DIV的显示和 隐藏，其中所有的DIV都是用CSS定位方法提前定 义好位置和表现形式，下拉的效果只是当鼠标经 过的时候触发一个事件，（具体内容请参照书。）

22 3.3.5 JavaScript+CSS实现表格变色
在一些Web应用中间经常会用表格来展示数据，当 表格行数比较多的时候，就容易后看错行的情况 发生，所以需要一种方法来解决这个问题。在这 里我们采取这样一种措施，当鼠标移到某一行的 时候，这行的背景颜色发生变化，这样当前行就 会比较突出，不容易出错。（具体内容请参照 书。）

23 3.4 小结 HTML是组织展示内容的标记语言，JavaScript是 客户端的脚本语言，CSS是美化页面的样式表，这 三种技术结合在一起构成了Web开发最基础的知识， 所有的Web应用开发都是在这个基础之上进行的。 在本章的讲解中，仅仅对这三种技术的大体情况 进行了介绍，使读者可以迅速对Web开发的基础知 识有一个宏观的清楚的认识，从而可以快速进入 后面章节的学习，如果读者对这方面基础知识有 更深一步了解的需要，就有必要参考相关的专题 书籍。