[理学]第0章HTML基础.ppt

* HTML与JSP简介 课程地位和目的 地位：公选课 随着网络技术和软件技术的发展，基于 Web的程序设计技术得到了广泛应用，它 是继编程语言、Internet网络基础、数据库 应用等学科后的一门重要应用科目 先导课程： 计算机网络 操作系概论 静态网页编写（HTML） 高级语言程序设计（JAVA） 目的： 了解网络环境下的编程方法，软件实现技术 ；在互联网的应用层掌握建立网站和制作 主页的基本方法及相关技术。（JSP） * 关于课程 周理论学时：3 教学周数：12 考试方法：笔试 学习方法 理论与实践并重 案例为辅 自学工具 多多实践 * 网络程序设计概述 JSP简介 JSP语法基础知识 JSP内置对象 JSP的文件操作 JSP与数据库的结合 JavaBean技术 Servlet技术 模式与框架 在JSP中使用XML 网络基础 计算机网络定义。 计算机网络的组成。 网络体系结构 网络拓扑结构：环形、总线、星形、树形 、 网状、无线蜂窝形 局域网类型：以太网；令牌环网；令牌总 线网 OSI TCP/IP 应用层 各种应用层协议（HTTP， 表示层 TELNET,FTP,SMTP等） 会话层 传输层 TCP、UDP 网络层 RIP,IP,ICMP 数据链路层 与各种网络的接口 物理层 网络程序设计发展 网络程序设计的发展经历了从单机编程到 网络编程的转变，其发展历程基本上是与 网络自身的发展同步的。 分为联机多用户程序设计、对等网络程序 设计、Client/Server程序设计、RPC程序设 计、Browser/Server程序设计、分布式程序 设计六个阶段 网页的基本概念 动态网页 在服务器端运行的程序、网页、组件，属于动 态网页，它们会随不同客户、不同时间，返回 不同的网页，例如ASP、PHP、JSP、 ASP.net、CGI等。 静态网页 运行于客户端的程序、网页、插件、组件，属 于静态网页，例如html页、Flash、JavaScript 、VBScript等等，它们是永远不变的 * 网页的基本概念 动态网页的一般特点 动态网页以数据库技术为基础，可以大大降低 网站维护的工作量 采用动态网页技术的网站可以实现更多的功能 ，如用户注册、用户登录、在线调查、用户管 理、订单管理等等 动态网页实际上并不是独立存在于服务器上的 网页文件，只有当用户请求时服务器才返回一 个完整的网页 * 网页的基本概念 静态网页的一般特点 静态网页每个网页都有一个固定的URL，且网页URL 以.htm、.html、.shtml等常见形式为后缀，而不含有“ ？” 网页内容一经发布到网站服务器上，无论是否有用户 访问，每个静态网页的内容都是保存在网站服务器上 的，也就是说，静态网页是实实在在保存在服务器上 的文件，每个网页都是一个独立的文件 静态网页的内容相对稳定因此容易被搜索引擎检索 静态网页没有数据库的支持，在网站制作和维护方面 工作量较大，因此当网站信息量很大时完全依靠静态 网页制作方式比较困难 * 网页的基本概念 静态网页和动态网页各有特点，网站采用 动态网页还是静态网页主要取决于网站的 功能需求和网站内容的多少，如果网站功 能比较简单，内容更新量不是很大，采用 纯静态网页的方式会更简单，反之一般要 采用动态网页技术来实现。 * HTML基础 0.1 HTML概述 0.2 HTML标记 0.3 HTML表单的设计 实用案例1 用户注册表单页面的设计 HTML简介 学习html的方法 毋须强记，记住基本结构，细节用多少熟悉多 少，不会时尽快翻手册 刚开始时照猫画虎，循序渐进的掌握原理 多参考他人的页面 * 0.1 HTML概述 HTML语言，又称超文本标记语言，英文全称 是Hypertext Markup Language。它是一种标识性 的语言，由一些特定符号组成，语法简单，其目的 在于运用标记使文件达到预期的显示效果。 返回 用HTML编写的超文本文件称为HTML文件，扩 展名可以是htm、html、shtm或shtml。 返回 0.1.1 HTML的基本概念 HTML语言独立于操作系统平台（如Unix， Linux，Windows等）。自1990年以来，HTML就一 直被用作Word Wide Web，即万维网WWW的信息 表示语言。 返回 返回 WWW有3个基本内容组成，分别是URL、 HTTP和HTML。 1)URL（Uniform Resource Locators）：统一资源 定位符 2）HTTP（Hypertext Transfer Protocol）：超文本 传输协议 3)HTML语言(Hypertext Markup Language)： HTML文档是一个放置了标记（Tags）的ASCII文本 文件 0.1.2 HTML特点 HTML语言与其它编程语言（如C和Java）不同，具 有以下特点： （1）超文本性 ；（2）标记性 ；（3）简单性； （ 4）可扩展性 ；（5）平台无关性 返回 0.1.3 HTML基本结构 1）HTML基本语法 HTML文件表现力十分丰富，语法结构却比较 简单。HTML文件是由标记和内容组成，形式如下 ： 文本或超 文本内容 返回 2) HTML文件基本结构 HTML文档结构可以划分为两个基本部分：文 件头(head)和文件体(body)。一个典型的HTML文档 结构如图0-2所示。 返回 返回 图0-2 HTML文档结构 图0-2 HTML文档结构 0.1.4 HTML文档的编写 HTML文档的编写是非常容易的，可以使用任何 文本编辑工具来编写，保存时的文件扩展名可以是 htm、html、shtm或shtml。 返回 0.2 HTML标记 标记(Tags)，通常又叫着标签，它是HTML文档 的重要组成部分。可以说没有标记就没有形式多样 化的Web页面效果。 0.2.1 基本标记 1） 标记放在HTML文档的最前面，用来表示 HTML文档的开始，而标记放在HTML文档的 最后，用来表示HTML文档的结束，这两个标记必须 一起使用。 返回 2） 和是HTML文档头部标记，在此 标记对之间可以使用、等标 记 。 3) 是HTML文档的主体部分，在此 标记对之间可包含、 、等众多的标记 4） 是标题标记，这一对标记包含的内 容将显示在浏览器的标题栏上。 0.2.2 格式标记 格式标记主要用于修饰如何显示文本之类的信息， 这些标记都被用于标记对之间。 1） 标记对是用来创建一个段落，在此标记对之间 加入的文本将按照段落的格式显示在浏览器上。标 记也可以没有结束标记，可单独使用。 返回 2） 是在显示内容中产生一个换行的标记，它没有 结束标记。 3） 标记对用来排版大块Html段落，也用于 格式化表。 返回 0.2.3 文本标记 文本字体格式如斜体、黑体字、下划线等由文 本标记控制。 标题标记，i取值范围为16。是字号最大 的标题，而则是字号最小的标题。 返回 3）、 用来使文本以黑体字的形式输出；用 来使文本以斜体字的形式输出；用来使文本 以下加一划线的形式输出；使用 文本字体加粗。 4） 是字体标记，它可以对输出文本的字 体大小、颜色等进行设置。font标记主要有size 、 color和face三个属性。 返回 0.2.4 图像标记 图像在网页制作中是非常重要的一个方面， HTML语言也专门提供了标记来处理图像的输 出。图像标记的基本格式是： 返回 背景标签 当使用者链接到页面时，若背景图案还没 传输完之前，就会先显示背景颜色。 0.2.5水平线标记 标记是在HTML文档中加入一条水平线。 0.2.6 表格标记 表格标记是HTML中非常重要的标记之一。多数 网页都是使用表格或多重表格来设计，主要是因为 表格不但可以固定文本或图像等网页元素的输出。 1） 返回 标记对用来创建一个表格。 2）， 标记对用来创建表格中的行，只能放 在标记对之间使用。标记 对用来创建表格中行中的每一个单元格 。 3） 标记对用来设置表格头，通常是黑体居中 文字。 返回 0.2.7 链接标记 链接标记使浏览的内容具有了灵活性和网络性。 链接标记的格式如下： 链接的载体 标记对之间的链接载体可是文本或图像。href属 性不可缺少。 返回 0.2.8 表单标记 表单在Web网页中用来给访问者填写信息，实 现客户端与服务器端的交互功能。 表单标记的格式: . 标记创建一个表单容器。 返回 1）input标记 格式： 表单控件标记中具有非常重要的地位，它提 供客户的输入区。该标记是单个标记，没有结束标 记。该标记共提供了九种类型的输入区域，由type 属性来决定。 返回 2）下拉列表框、 标记对用来创建一个菜单下拉 列表框。具有multiple、name和size属性。 multiple属性使用下拉列表实现多选；name是定义 列表框的名字；size属性用来设置列表的高度。 标记用来指定列表框中的一个选项， 它放在标记对之间。此标记具有 selected和value属性，selected用来指定默认的选 项，value属性用来给指定的选项赋值，服 务器正是通过调用区域的名字来获取value 属性的数据值。 返回 3）多行文本框 用来创建一个可以输入 多行的文本框，此标记对用于标记对 之间。具有以下属性： name是文本框的名称； cols是文本框的宽度； rows是文本框的列数，即其高度。 返回 0.3 HTML表单的设计 0.3.1 Web页面的交互 Web页面的交互功能在客户端是同表单来实现的 。HTML表单提供了一个用户与服务器端交互的界面 。 0.3.2 常用表单的设计 常见的表单有用户登陆、注册、调查、查询、 图片或文件上传等。 返回 返回 1 1）登陆窗口）登陆窗口ch0-11login.htmch0-11login.htm的设计，效果如图的设计，效果如图0-130-13所示。所示。 图0-13 一个登陆窗口的设计 返回 2 2） 用户注册窗口用户注册窗口ch0-12register.htmch0-12register.htm的设的设 计，效果如图计，效果如图0-140-14所示。所示。 图图0-14 0-14 一个用户注册窗口的设计一个用户注册窗口的设计 3 3）查询窗口）查询窗口ch0-13serch.htmch0-13serch.htm的设计，效果如图的设计，效果如图0-0- 1515所示。所示。 返回图图0-15 0-15 一个查询窗口的设计一个查询窗口的设计 一个典型用户注册表单设计实例 【例0.16】（ex0-14form.html）在许多网站中都存 在用户注册的功能，本例设计了一个典型的用户注 册页面，效果如图0-16所示。 返回 返回 图0-16 典型用户注册表单页面 JSP简介 什么是JSP JSP（Java Server Pages）是基于Java 语言 的一种Web应用开发技术，利用这一技术可以 建立安全、跨平台的先进动态网站。如今，许 多著名的Web网站都使用了JSP技术。 * JSP简介 Java的安装与配置 获取J2SDK开发工具 Download J2SDK from , the package in executable format for Windows platform 安装J2SDK开发工具 Windows: run the executable * JSP简介 Java工作环境配置 Set environment variables: JAVA_HOME, CLASSPATH, PATH Windows 2000/NT/XP StartControl panelSystemAdvance Environment Variables Windows 9x/me: Add these lines in autoexec.bat: set JAVA_HOME= set PATH=%PATH%;%JAVA_HOME%bin et CLASSPATH=.; * JSP简介 Tomcat服务器的安装与配置 将安装JSP引擎的计算机称作一个支持JSP的Web服 务器。支持JS