第2章 JSP动态网页设计基础课件.ppt

第2章 JSP动态网页设计基础;要使用JSP开发出专业的动态网站，首先必须熟练掌握静态网站的制作技术。HTML是在学习JSP之前必须了解的基础知识，很多JSP语法的使用都是建立在HTML文档的基础上。实际开发中，一般都是使用现成的HTML文档来添加JSP的动态脚本并做适当修改，除了特殊的应用，很少从零开始写一个JSP页面，所以读懂HTML文档并了解HMTL语言中的技巧为更快地上手JSP提供了很大的帮助。 JavaScript是JSP知识体系中一个可选的知识模块。也就是说不了解JavaScript知识也不会影响JSP的应用开发，但是如果掌握了JavaScript的知识，将可以更加方便地解决网页开发中的某些特定问题，例如经常使用JavaScript判断用户在表单中输入数据的合法性。;本章学习目标： 了解HTML与JSP的关系 掌握HTML的常用标签 能够使用HTML设计基本网页 能够使用HTML设计网络中常用的表单 能够使用简单的CSS控制页面样式 了解JavaScript在JSP学习中的作用 了解JavaScript的简单应用 能够读懂JavaScript程序，并能通过查阅资料了解更多JavaScript应用;2.1 HTML快速入门;2.1.1 HTML5 基本结构 ;【例2-1】网页基本结构;步骤1：建立站点根目录——新建一个文件夹用于存放网页，比如在F盘创建一个文件夹myweb，在本章我们把它作为站点根目录，读者在做练习时可以自行设定站点根目录。 步骤2：编写代码——HTML可以使用任何字处理软件来编写，最简单的是Windows自带的记事本。用记事本编写以上代码，标题和网页主体内容可以适当修改。 步骤3：保存文件——文件名命名为first.html（注意：其中first是自己为文件起的名字，可修改，但扩展名必须为html或者htm），另外注意将“文件类型”改为“所有文件”，如图2-1所示。;;步骤4：浏览网页——保存完毕后，在文件夹myweb中可以看到first.html被浏览器识别，双击即可查看网页效果，在IE中浏览效果如图2-2所示，如需要继续编辑，则右键单击选择以记事本打开。;我们回过头分析一下第一个网页，其中的代码由四对标签组成。 html…/html：表示整个HTML文档的开始和结束，网页的所有内容都位于这两个标签之间。 head…/head：头部标签，在例子中，头部之间插入一对标题标签。 title…/title：标题标签，说明该HTML文件的标题是什么，当浏览该文件时，标题显示在浏览器上方的标题栏内。在第一个网页中，我们在title…/title标记之间包含的标题是“我的第一个网页”，在图2-2中可以看到它显示在网页的标题栏。 body…/body：主体标签，页面的主体部分都放在这对标签之间。在第一个网页中，我们在body…/body标记之间包含的内容是“少年不识愁滋味，为赋新词强说愁”，在图2-2可以看到这行字显示在网页的主体部分。;2.1.2 HTML常用标签 ;1. 文本;预览网页，结果如图2-3所示，似乎没有我们预期的结果，这是因为，如果没有标签修饰文本，文字将以无格式的形式显示，（如果浏览器窗口显示不下，则自动换行），要实现分段可以使用标签来修饰文字，但是HTML5不再有用于修饰文本字体、大小和颜色的font标签，而改由CSS来实现这些。 ;(1) 分段排版 分段标签主要有“预先格式化标签”pre…/pre、“换行标签”br和“段落标签”p…/p。 预先格式化标签pre…/pre：添加在文本的开始和结尾处。用这个标签括起来的文本，在网页中会按照输入时的格式显示。 换行标签br /：换行标签加在需要换行的位置，当浏览器遇到这个标签时，会自动进行换行。 段落标签p…/p：段落标签添加在段首和段尾。值得注意的是在HTML5中p标签不再保留属性align。段落标签和br /标签的不同之处在于在不同段落之间，多一行空行。;【例2-3】预先格式化标签的使用（pre.html）。;;【例2-4】换行和段落标签的使用（paragraph.html）。;;(2)强调文本 有些时候，我们会希望对某些文本进行必要的强调，或者标记出需要在CSS中强调的文本。 粗体标签：b.../b 斜体标签：i.../i;【例2-5】强调文本（empha.html）。;;(3) 标题文本 一般文章都有标题、章和节等结构，HTML中提供了标题标签h1、h2、h3、h4、h5和h6，hn中的n表示标题级别，n值越小，标题字号越大。标题标签也是成对出现的。;;2. 图像;属性;【例2-7】在网页中加入图像（image.html）。;;3. 超链接;【例2-8】超链接（link.htm