JAVA WEB开发教程 第三章 HTML相关技术基础知识

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第三章,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 Text Markup Language）,即超文本标记语言，用来描述,Web,文档数据。用户可以通过,URL,链接来访问这种,Web,文档，从而达到信息展示、信息共享的目的。（具体内容请参照书。）,3.1.2,HTML,运行原理,前面介绍,HTML,定义的时候就说过，,HTML,是一种标记语言，每一种,HTML,标签都是有一定表现含义的。浏览器就是按照,HTML,标签的语义规则把,HTML,代码翻译成漂亮的网页。,3.1.3,HTML,常用标签,在本节要介绍的是常用标签的基本用法。1,在,HTML,的布局标签中，,标签是使用频率最高的一个。它可以把一组信息用表格的形式表示出来， 2,DIV,在以往的,Web,页面开发中，表格是首选的布局元素， 3,在浏览一个网站的时候，我们经常会遇到一些链接，单击这些链接就会导航的其他的页面。4,在目前的网站开发中，对图片的依赖是其他元素所不能替代的，一个漂亮的网页往往是由一系列图片组合而成。,3.1.4,HTML,表单标签,前面讲述的都是,HTML,向用户展示信息的标签，在本节要介绍的内容就是,HTML,用来收集用户输入的标签。,是表单标签，只有在这个标签中的用户输入才会被提交给服务器。表单标签的使用方法类似下面这种格式。（具体内容请参照书。）,3.1.5,HTML,其他标签,在本章只是介绍了,HTML,最基本最常用的几个标签，,HTML,还有很多其他标签，例如应用程序标签中可以加入不同动态程序代码，多媒体标签中可以加入多媒体文件，,Flash,标签中可以加入,Flash,动画，文本标签可以用各种方式组织文本内容的显示。读者如果要深入全面的研究,HTML,标签，可以参考这方面的参考手册。在本书中不再对这些内容进行详细的介绍。,3.2,JavaScript,基础知识,JavaScript,的出现给静态的,HTML,网页带来很大的变化。,JavaScript,增加了,HTML,网页的互动性，使以前单调的静态页面变得富有交互性，它可以在浏览器端实现一系列动态的功能，仅仅依靠浏览器就可以完成一些与用户的互动。在下面的章节中将要简单介绍这种技术的基础知识。,3.2.1 什么是,JavaScript,JavaScript,是一种简单的脚本语言，可以在浏览器中直接运行，无需服务器端的支持。这种脚本语言可以直接嵌套在,HTML,代码中，它响应一系列的事件，当一个,JavaScript,函数响应的动作发生时，浏览器就会执行对应的,JavaScript,代码，从而在浏览器端实现与客户的交互。,3.2.2,JavaScript,中的事件,在,HTML,的标签中，绝大部分都可以触发一些事件，例如鼠标单击、双击、鼠标经过、鼠标离开等一系。,JavaScript,最主要的功能就是与用户的交互，而用户只能在表单中提交输入内容，所以表单的所有输入标签都可以出发鼠标事件、键盘事件等,JavaScript,所能响应的常见事件。（具体内容请参照书。）,3.2.3,JavaScript,中的对象简介,JavaScript,所实现的动态功能，基本上都是对,HTML,文档或者是,HTML,文档运行的环境进行的操作。那么要实现这些动态功能就必需找到相应的对象。,JavaScript,中有已经定义过的对象供开发者调用，,3.2.4,window,对象简介,window,对象是所有,JavaScript,对象中最顶层的对象，整个,HTML,文档就是在一个浏览器的一个窗口，即,window,对象中显示。（具体内容请参照书。）,3.2.5,document,对象简介,document,对象是在具体的开发过程中用的最频繁的对象，利用,document,对象可以访问页面上任何的元素。通过控制这些元素可以完成与用户的互动。（具体内容请参照书。）,3.2.6,location,对象简介,在,HTML,标签中可以用,超链接标签来控制网页中的跳转，在,JavaScript,中如果要实现类似的网页跳转功能只能选择,location,对象，这个对象的使用方法非常简单，只需要在,JavaScript,代码中添加下面这行代码即可。,window.location.,href,= “http:/www.,sohu,.com”;,3.2.7 JavaScript,输入验证,在本章将介绍在浏览器端对用户输入的简单验证，这种验证仅仅局限于输入格式等方面。（具体内容请参照书。）,3.2.8,JavaScript,高级应用探讨,上面介绍的示例中，,JavaScript,都没有和服务器进行互动，都是在浏览器中独立执行，这样所能实现的与客户互动的功能就比较有限了，例如现在用户注册的时候需要验证这个用户名是否已经被占用，这个功能便需要到服务器中进行查询。然而在我们上面的验证中，只有当表单提交的时候服务器才会相应请求，其他情况下，如果没有刷新整个页面是不能实现与服务器之间的通信的。,3.3,CSS,基础知识,在前面的内容中讲解了,HTML,和,JavaScript，,现在我们已经基本可以编出具有简单互动的网页，但是仅仅这样还是不够的，一个专业的网页需要在字体、颜色、布局等方面进行各种设置，需要给用户带来视觉的冲击。接下来的内容将要介绍这种美化页面的技术。,3.3.1 什么是,CSS,CSS（Cascading Style Sheets）,即层叠样式表，也就是通常所说样式表。,CSS,是一种美化网页的技术。通过使用,CSS，,可以方便、灵活地设置网页中不同元素的外观属性，通过这些设置可以使网页在外观上达到一个更高的级别。,3.3.2,CSS,属性设置,CSS,美化网页就是通过设置页面元素的属性来实现的，在下面的内容中将介绍,CSS,属性设置的基本方法。,3.3.3,CSS,绝对定位示例,在,HTML,中布局一般情况下需要使用表格，如果要定位只有通过表格的嵌套来实现，这种方法的确可以在一定程度上解决问题，但是却不能随意定位页面元素，而且对某个元素位置的改变有可能影响到整个页面的布局。,3.3.4,JavaScript+DIV+CSS,实现下拉菜单,在,Web,应用中，下拉菜单的可以说是随处可见，在学习了,JavaScript,和,CSS,以后实现起来毫无难度。其原理就是在用,JavaScript,控制不同,DIV,的显示和隐藏，其中所有的,DIV,都是用,CSS,定位方法提前定义好位置和表现形式，下拉的效果只是当鼠标经过的时候触发一个事件，（具体内容请参照书。）,3.3.5,JavaScript+CSS,实现表格变色,在一些,Web,应用中间经常会用表格来展示数据，当表格行数比较多的时候，就容易后看错行的情况发生，所以需要一种方法来解决这个问题。在这里我们采取这样一种措施，当鼠标移到某一行的时候，这行的背景颜色发生变化，这样当前行就会比较突出，不容易出错。（具体内容请参照书。）,3.4 小结,HTML,是组织展示内容的标记语言，,JavaScript,是客户端的脚本语言，,CSS,是美化页面的样式表，这三种技术结合在一起构成了,Web,开发最基础的知识，所有的,Web,应用开发都是在这个基础之上进行的。在本章的讲解中，仅仅对这三种技术的大体情况进行了介绍，使读者可以迅速对,Web,开发的基础知识有一个宏观的清楚的认识，从而可以快速进入后面章节的学习，如果读者对这方面基础知识有更深一步了解的需要，就有必要参考相关的专题书籍。,