html扩展名用于保存清单文件,Internet应用与网络 （樊月华）第4章 HTML（42页）-原创力文档...

第4章 HTML/DHTML的应用 HTML/DHTML的应用 4.1 HTML/DHTML的结构 4.2 HTML的应用 4.3 DHTML技术基础 4.4 可视化页面制作与管理工具 FrontPage 2000 4.5 网页制作实训课题——应用技术学院网站 的建设 练 习 上机练习 实训课题 4.1 HTML/DHTML的结构 4.1.1 HTML的结构——HTML示例 1. 一个HTML示例 为了使读者对HTML有一个整体的了解，我们将和读者一起来制作一个简单网页。请按以下步骤进行： (1) 编写HTML代码使用简单的文字编辑器。 (2) 以扩展名“.html”保存文件。在只支持三个字母作后缀的操作系统中，它的扩展名是“.htm”。 (3) 在浏览器中显示页面ex04-001.html，显示效果如图4.1所示。 图4.1 页面代码ex04-001在浏览器中的显示 (4)在图4.1中单击“中国高等职业技术教育研究会”，页面将转跳至代码ex04-002所显示的页面。如图4.2所示。 图4.2 页面转跳到ex04-002 (5) 我们以页面代码ex04-001.html为例说明HTML的简单使用。 2. HTML的结构 图4.3 HTML文件结构 4.1.2 DHTM的结构——DHTML示例 1. 什么是DHTML 传统的HTML页面一旦被下载到客户端的浏览器后，就无法改变显示内容，所以被称为静态网页。 使用DHTML技术制作的网页，在其内容下载到浏览器后，不必通过服务器就可以使浏览器与用户交互信息，更新网页内容，所以被称为动态网页。 2. 一个DHTML示例 (1) 请读者在编辑器中输入ex04-003.html的代码 。 (2) ex04-003.html在浏览器中的显示效果如图4.4所示。 (3) 把鼠标移动到文字“鼠标移到此处，新增一行文字”处，页面产生动态变化，新增加一行文字。浏览器显示如图4.5所示。 (4) 请读者把鼠标移到改变文字颜色的文本上，文字将变成红色，移开后文字变成蓝色。 图4.4 DHTML示例 图4.5 动态改变网页 (5) 读者可以看到，在HTML的基础上使用了脚本语言(Script)，使网页产生动态效应。 3. ?DHTML结构 (1) DHTML的特点。 (2) DHTML的结构。 图4.6 DHTML的组成 4.2 HTML的应用 4.2.1 HTML标记的格式 HTML语言元素标记> ·例如：

你好！

·标记与字母的大小写无关，例如 与的作用是一样的。 ·标记可以带有属性参数。 ·注释标记不在浏览器中显示，只供阅读页面代码帮助理解使用。 4.2.2 HTML应用案例1——文本标记 (1) 文本标记主要用于控制页面的段落，显示字符的大小、颜色、字体和属性等。 (2) 页面代码ex04-004.html说明了文本标记的使用 。 (3) ex04-004.html在浏览器中的显示效果如图4.7所示。 图4.7 文本标记的使用 (4) 代码说明 图4.8 图像标记的使用 4.2.4 HTML应用案例3——表格标记 (1) 表格标记 标记的使用。 (2) 页面代码ex04-007.html说明了超级链接标记的使用 (3) 页面代码在浏览器中显示如图4.10所示 图4.10 超级链接的使用 (4) 代码说明如下 4.2.6 HTML应用案例5——表单(FORM)和输入标记 (1) 表单的作用 (2) 页面代码ex04-008.html说明了表单标记的使用 (3) 代码在浏览器中显示如图4.11所示。