HTML相关技术基础知识

《HTML相关技术基础知识》由会员分享，可在线阅读，更多相关《HTML相关技术基础知识（39页珍藏版）》请在金锄头文库上搜索。

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

2、，目的在于使读者能 尽快进入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定义

3、的时候就说过，HTML是一种标 记语言，每一种HTML标签都是有一定表现含义的 。浏览器就是按照HTML标签的语义规则把HTML代 码翻译成漂亮的网页。3.1.3 常用的HTML标记表单 (form)文本框 (text)文本区域 (textArea)单选按钮 (Radio)复选框 (checkbox)下拉列表框 (select)按钮 (submit)表格 (table、tr、td)超级链接 (a)1. 表单 (form)2. 文本框(text)3. 文本区域 (textArea)This is a student4. 单选按钮 (Radio)性别： 男 女 5. 复选框 (checkbox)爱

4、好： 足球唱歌6. 下拉列表框 (select)清华大学北京大学天津大学7. 按钮 (submit)8. 表格 (table、tr、td)9. 超级链接 (a)新浪网 第一行第一列第一行第二列第二行第一列第二行第二列3.1.4 HTML表单标签 前面讲述的都是HTML向用户展示信息的标签，在 本节要介绍的内容就是HTML用来收集用户输入的 标签。是表单标签，只有在这个标 签中的用户输入才会被提交给服务器。表单标签 的使用方法类似下面这种格式。 表单提交数据get与post的区别都能实现提交数据，用get会重写url把提交的数据加到地址上，所以提交的数据不能超过2kb；但post就直接提交数据，

5、所以并没有限制提交的数据量。用户名：密码：重新输入密码:性别：男女出生日期：请选择198119821983198419851986年兴趣：音乐动漫电影3.1.5 HTML其他标签 在本章只是介绍了HTML最基本最常用的几个标签 ，HTML还有很多其他标签，例如应用程序标签中 可以加入不同动态程序代码，多媒体标签中可以 加入多媒体文件，Flash标签中可以加入Flash动 画，文本标签可以用各种方式组织文本内容的显 示。读者如果要深入全面的研究HTML标签，可以 参考这方面的参考手册。在本书中不再对这些内 容进行详细的介绍。3.2 JavaScript基础知识 JavaScript的出现给静态的

6、HTML网页带来很大的 变化。JavaScript增加了HTML网页的互动性，使 以前单调的静态页面变得富有交互性，它可以在 浏览器端实现一系列动态的功能，仅仅依靠浏览 器就可以完成一些与用户的互动。在下面的章节 中将要简单介绍这种技术的基础知识。3.2.1 什么是JavaScript JavaScript是一种简单的脚本语言,一种解释性的 语言，可以在浏览器中直接运行（因为浏览器中 包含了对这些脚本语言的解释引擎，不同浏览器 或不同浏览器，能够支持的JavaScript 版本不同 ），无需服务器端的支持。这种脚本语言可以直 接嵌套在HTML代码中，它响应一系列的事件，当 一个JavaScri

7、pt函数响应的动作发生时，浏览器 就会执行对应的JavaScript代码，从而在浏览器 端实现与客户的交互。3.2.2 JavaScript中的事件 在HTML的标签中，绝大部分都可以触发一些事件 ，例如鼠标单击、双击、鼠标经过、鼠标离开等 一系。JavaScript最主要的功能就是与用户的交 互，而用户只能在表单中提交输入内容，所以表 单的所有输入标签都可以出发鼠标事件、键盘事 件等JavaScript所能响应的常见事件。事件触发示例function test() alert(“事件触发测试！“); 3.2.3 JavaScript中的对象简介JavaScript所实现的动态功能，基本上都是

8、对HTML文档或 者是HTML文档运行的环境进行的操作。那么要实现这些动 态功能就必需找到相应的对象。JavaScript中有已经定义 过的对象供开发者调用。3.2.4 window对象简介 window对象是所有JavaScript对象中最顶层的对 象，整个HTML文档就是在一个浏览器的一个窗口 ，即window对象中显示。常用window对象方法： （1）window.open(“”, “”,”width=300,height=200) （2）window.close() （3）window.confirm(“”) （4）window.alert(“”)3.2.5 document对象简介

9、 document对象是在具体的开发过程中用的最频繁 的对象，利用document对象可以访问页面上任何 的元素。通过控制这些元素可以完成与用户的互 动。 （1）利用document定位HTML页面元素 document.getElementById(),访问所有元素 访问表单：document.forms“formNname”和document.forms“formIndex” （2）利用document对象动态生成HTML页面动态生成HTML页面function create() var content = “动态生成的HTML文档“;content += “这个文档的内容是利用docum

10、ent对象动态 生成的“;content += “;var newWindow = window.open(); newWindow.document.write(content); newWindow.document.close(); 3.2.6 location对象简介 在HTML标签中可以用超链接标签来控制网 页中的跳转，在JavaScript中如果要实现类似的 网页跳转功能只能选择location对象，这个对象 的使用方法非常简单，只需要在JavaScript代码 中添加下面这行代码即可。 window.location.href = “http:/”;3.2.7 JavaScrip

11、t输入验证 用JavaScript实现表单输入验证，是JavaScript 最常用的一种应用。在浏览器端对用户输入的简 单验证，这种验证仅仅局限于输入格式等方面。表单输入验证示例function validate()var userName=document.forms0.userName.value;var password=document.forms0.password.value;var rePassword=document.forms0.rePassword.value;if(userName.length 用户名： 密码： 重新输入密码: 性别：男 女 出生日期： 请选择 198

12、1 1982 1983 1984 1985 1986 年 兴趣：音乐 动漫 电影 3.2.8 JavaScript高级应用探讨 上面介绍的示例中，JavaScript都没有和服务器 进行互动，都是在浏览器中独立执行，这样所能 实现的与客户互动的功能就比较有限了，例如现 在用户注册的时候需要验证这个用户名是否已经 被占用，这个功能便需要到服务器中进行查询。 然而在我们上面的验证中，只有当表单提交的时 候服务器才会相应请求，其他情况下，如果没有 刷新整个页面是不能实现与服务器之间的通信的 。3.3 CSS基础知识 在前面的内容中讲解了HTML和JavaScript，现在 我们已经基本可以编出具有简

13、单互动的网页，但 是仅仅这样还是不够的，一个专业的网页需要在 字体、颜色、布局等方面进行各种设置，需要给 用户带来视觉的冲击。接下来的内容将要介绍这 种美化页面的技术。3.3.1 什么是CSS CSS（Cascading Style Sheets）即层叠样式表， 也就是通常所说样式表。CSS是一种美化网页的技 术。通过使用CSS，可以方便、灵活地设置网页中 不同元素的外观属性，通过这些设置可以使网页 在外观上达到一个更高的级别。3.3.2 CSS属性设置 CSS美化网页就是通过设置页面元素的属性来实现 的，在下面的内容中将介绍CSS属性设置的基本方 法。3.3.3 CSS绝对定位示例 在HTM

14、L中布局一般情况下需要使用表格，如果要 定位只有通过表格的嵌套来实现，这种方法的确 可以在一定程度上解决问题，但是却不能随意定 位页面元素，而且对某个元素位置的改变有可能 影响到整个页面的布局。3.3.4 JavaScript+DIV+CSS实现下拉菜 单 在Web应用中，下拉菜单的可以说是随处可见，在 学习了JavaScript和CSS以后实现起来毫无难度。 其原理就是在用JavaScript控制不同DIV的显示和 隐藏，其中所有的DIV都是用CSS定位方法提前定 义好位置和表现形式，下拉的效果只是当鼠标经 过的时候触发一个事件。3.3.5 JavaScript+CSS实现表格变色 在一些W

15、eb应用中间经常会用表格来展示数据，当 表格行数比较多的时候，就容易后看错行的情况 发生，所以需要一种方法来解决这个问题。在这 里我们采取这样一种措施，当鼠标移到某一行的 时候，这行的背景颜色发生变化，这样当前行就 会比较突出，不容易出错。3.4 小结 HTML是组织展示内容的标记语言，JavaScript是 客户端的脚本语言，CSS是美化页面的样式表，这 三种技术结合在一起构成了Web开发最基础的知识 ，所有的Web应用开发都是在这个基础之上进行的 。在本章的讲解中，仅仅对这三种技术的大体情 况进行了介绍，使读者可以迅速对Web开发的基础 知识有一个宏观的清楚的认识，从而可以快速进 入后面章节的学习，如果读者对这方面基础知识 有更深一步了解的需要，就有必要参考相关的专 题书籍。