java教程_第三章 HTML相关技术基础知识.pdfVIP

第 3 章 HTML 相关技术基础知识 纵观各种动态页面开发技术，无论是 JSP、ASP 还是 PHP 都无法摆脱 HTML 的影子。这些动态的 页面开发技术无非是在静态 HTML 页面的基础上添加了动态的可以交互的内容。HTML 是所有动态页 面开发技术的基础。在接下来的章节将要详细介绍的就是 HTML 相关的一系列技术，包括 HTML、 JavaScript 和 CSS。其中 HTML 是一组标签，负责网页的基本表现形式；JavaScript 是在客户端浏览器运 行的语言，负责在客户端与用户的互动；CSS 是一个样式表，起到美化整个页面的功能。 本书不是详细介绍 HTML 的专著，在本章也只是讲解 Web 开发中最常见的 HTML 知识，目的在于 使读者能尽快进入 Web 开发的状态。如果读者有更深层次的需求可以参考专门讲解 HTML 的书籍。 3.1 HTML 基础知识 在各种 Web 开发技术中，HTML 无疑是最为基础的。任何动态语言都离不开 HTML 的支持。所以 在开始 Web 开发的学习之前，读者还是需要静下心来打好这个基础。在这个章节中将会概述 HTML 的 框架知识。 3.1.1 什么是 HTML HTML（Hyper TextMarkupLanguage）即超文本标记语言，用来描述 Web 文档数据。用户可以通 过 URL 链接来访问这种 Web 文档，从而达到信息展示、信息共享的目的。下面就是一个简单的 HTML 文档的例子。 //文件名：First.html html head title这是第一个 HTML 例子/title /head body 欢迎光临！这是我的第一个 HTML 文档。 br/ /body /html 在这个 HTML 文档中，可以看出 HTML 的简单结构，每个 HTML 文档都包括一对html/html 标 签 ， 这 是 所 有 HTML 文 档 所 必 需 的 。 在 这 个 标 签 中 间 还 包 括 着 其 他 两 对 head/head 、 body/body，其中在head/head中是 HTML 文档的头信息，包括标题、关键字、页面编码格式、 引入的 CSS 或者是 JavaScript 文件的路径等基本信息。在body/body中间放置的是文档要表述展示 的内容，在上面这个例子中我们要展示的仅仅是“ 欢迎光临！这是我的第一个 HTML 文档。”这句话。 所以在body/body这对标签中间没有其他内容。 注意：一般情况下，可以包括其他内容的 HTML标签都是成对出现的，例如上面例子中的 title/title这对标签，它包含了一个文字的标题信息，所以成对出现。而br/这样的标签仅仅是一个 回车换行的作用，它不包含其他内容，所以不成对出现。 3.1.2 HTML 运行原理 在上面的例子中我们看到的仅仅是几行代码，而在大家的印象中 HTML 文档就是网页，究竟如何 把 HTML 文档转化成我们常见的网页，这就是接下来要介绍的内容。 我们平时所看的丰富多彩的网页都是通过浏览器看到的，当你在浏览器中敲入网址，然后就可以看 到对应的一个网页，上面有各种各样的内容。其实在本质上你敲入的网址就是互联网上一个 HTML 文 档的访问路径，浏览器可以根据这个路径取回这个 HTML 文档，取回的文档格式和上面例子中的类似。 只不过把这些代码翻译成了一个形象的网页。 前面介绍 HTML 定义的时候就说过，HTML 是一种标记语言，每一种 HTML 标签都是有一定表现 含义的。浏览器就是按照 HTML 标签的语义规则把 HTML 代码翻译成漂亮的网页。就像上面的 HTML 文档示例会被翻译成如图 3.1 所示的效果。 图 3.1First.html 在浏览器中的运行效果 在图 3.1 中可以明显看到，上面文档中“title这是第一个 HTML 例子/title”这行代码被翻译成 了网页的标题。而body/body标签中包含的内容被翻译成了网页只能够显示的内容，在这里就只有 一句话。等接下来常用的 HTML 标签介绍结束之后，就可以构造出丰富表现形式的网页了。 3.1.3 HTML 常用标签 在本节要介绍的是常用标签的基本用法。 1 table 1 table 11．tt