Java-Web应用开发技术与案例教程课件第2章HTML结构与基本语法.ppt

1、第第2章章 静态网页开发技术静态网页开发技术 静态网页静态网页是指可以由是指可以由浏览器解释执行而生成的网页浏览器解释执行而生成的网页，其开发技术主要有：其开发技术主要有：HTML、JavaScript和和CSS。nHTML：一组标签，负责网页的一组标签，负责网页的表现形式（表现形式（显示信息的格式）。显示信息的格式）。nJavaScript：是在客户端浏览器运行的语言，负责在是在客户端浏览器运行的语言，负责在客户端与用户的互动。客户端与用户的互动。nCSS：是一个样式表，起到是一个样式表，起到美化整个页面美化整个页面的功能。的功能。教学内容与教学目标教学内容与教学目标1、教学内容、教学内容

2、本章主要介绍本章主要介绍HTML、JavaScript和和CSS三种技术及其使用，并给出设计案例。三种技术及其使用，并给出设计案例。2、教学目标、教学目标（1）掌握静态网页的常用设计技术）掌握静态网页的常用设计技术（2）利用这些设计技术，能够根据所给出的设计要求，较熟练的设计静态网页。）利用这些设计技术，能够根据所给出的设计要求，较熟练的设计静态网页。（3）三种设计技术（）三种设计技术（HTML+JavaScript+CSS）的整合应用，必须掌握。）的整合应用，必须掌握。引言引言1_静态网页设计的预备知识静态网页设计的预备知识1、网页、网页 网页网页就是按各种格式就是按各种格式显示或展示显示或

3、展示各类信息各类信息的。的。2、标签、标签 不同信息、不同的展示方式，要采用不同的不同信息、不同的展示方式，要采用不同的标记标记来标识来标识 这些标记称为这些标记称为标签标签。例如例如：（1）画一条线画一条线：如何绘制并展示。：如何绘制并展示。源代码源代码 示例示例 （2）利用表格：利用表格：显示显示3个学生信息。个学生信息。源代码源代码 示例示例 （3）为了完成各类不同信息的展示，）为了完成各类不同信息的展示，就需要用就需要用HTML+JavaScript+CSS三种技术整合展示信息。三种技术整合展示信息。引言引言2_静态网页的有关预备知识静态网页的有关预备知识 静态网页静态网页是指是指没有

4、后台数据库、不含程序的网页，可以直接在浏览器上运行没有后台数据库、不含程序的网页，可以直接在浏览器上运行。静态网页是以静态网页是以htmhtm或或htmlhtml结尾结尾的的htmlhtml文件编写的。在程序设计中一般又把文件编写的。在程序设计中一般又把htmlhtml网页网页称称为为静态网页静态网页。HTMLHTML是是Hypertext Markup LanguageHypertext Markup Language的缩写，中文也就是的缩写，中文也就是超文本链接标示语言超文本链接标示语言。HTMLHTML文本是由文本是由HTMLHTML命令组成的描述性文本，命令组成的描述性文本，HTMLH

5、TML命令可以说明文字、图形、动画、声命令可以说明文字、图形、动画、声音、表格、链接音、表格、链接等。等。引言引言3_3_静态网页开发相关技术基础知识静态网页开发相关技术基础知识 相关的一系列技术：相关的一系列技术：HTML、JavaScript和和CSS。（1）HTML HTML是一组标签，负责网页的基本表现形式。是一组标签，负责网页的基本表现形式。（2）JavaScript JavaScript是在客户端浏览器运行的语言，负责在客户端与用户的互动。是在客户端浏览器运行的语言，负责在客户端与用户的互动。（3）CSS CSS是一个样式表，起到美化整个页面的功能。是一个样式表，起到美化整个页面的

6、功能。引言引言4_4_静态网页的开发环境与运行环境静态网页的开发环境与运行环境1、开发环境（开发工具）、开发环境（开发工具）（1）最简单的开发工具）最简单的开发工具 利用记事本编写静态网页代码利用记事本编写静态网页代码（2）利用集成开发环境（有很多种）利用集成开发环境（有很多种）我们主要利用我们主要利用MyEclipse（或者（或者Eclipse）2、运行环境、运行环境 必须由浏览器解释执行。必须由浏览器解释执行。（1）第一种方式：）第一种方式：直接利用浏览器解释执行直接利用浏览器解释执行 利用浏览器打开静态网页程序（利用浏览器打开静态网页程序（*.html）（2）第二种方式：）第二种方式：程

7、序存放到服务器上，由浏览器请求服务器，然后服务器响应返回程序存放到服务器上，由浏览器请求服务器，然后服务器响应返回信息，再有浏览器解释执行并显示网页。信息，再有浏览器解释执行并显示网页。注意：注意：所有的实际应用程序，都是采用这种所有的实际应用程序，都是采用这种方式。方式。引言引言5_HTML文件文件 用用HTML编写的超文本文档称为编写的超文本文档称为HTML文档（文件），是一个放置了文档（文件），是一个放置了“标签标签”的文的文本文件，以本文件，以“.html”或或“.htm”为扩展名，可供浏览器解释执行的网页文件为扩展名，可供浏览器解释执行的网页文件例例2-1源代码源代码 网页文件是利用

8、网页文件是利用HTML所所规定的标签定义网页中的各种元素规定的标签定义网页中的各种元素的性质和特点，从而完成的性质和特点，从而完成网页所要求的功能。网页所要求的功能。例例2-1运行界面运行界面 本小节总结回顾，所介绍的主要知识点内容！实际上，本引言已经介绍完成HTML的基本内容。这些知识点理解了，我们的HTML也就学会了，后面的问题就是如何应用HTML设计程序了。后面的内容：介绍常见的标签及其使用，有的介绍的详细，有的不介绍。你们在以后，可以根据需要自学相关的标签。第第1节节 HTML网页设计网页设计具体内容具体内容 1 HTML文档结构与基本语法文档结构与基本语法 2 HTML基本标记与使用

9、基本标记与使用 3 HTML表单标签与表单设计表单标签与表单设计 4 表单设计案例表单设计案例学生入校注册页面设计学生入校注册页面设计 5 HTML框架标签与框架设计框架标签与框架设计 6 框架设计案例框架设计案例多媒体播放系统设计多媒体播放系统设计 7 HTML5语法与语法与HTML5表单新特性表单新特性 8 案例案例基于基于HTML5表单新特性实现客户注册输入校验表单新特性实现客户注册输入校验 本节内容实际上介绍各类标签的使用方法，其实，我们可以不需要详细介绍，本节内容实际上介绍各类标签的使用方法，其实，我们可以不需要详细介绍，在设计网页时，根据需要直接查阅所需要的标签即可。在设计网页时，

10、根据需要直接查阅所需要的标签即可。提示：提示：HTML网页设计的基本思想与方法网页设计的基本思想与方法（1）设计网页，就是在显示器上，）设计网页，就是在显示器上，按一定的格式按一定的格式展示所希望显示的信息展示所希望显示的信息。（2）为了显示不同的信息，）为了显示不同的信息，采用采用不同的标签不同的标签及其及其相应的属性相应的属性设置设置要显示信息的要显示信息的格式格式和和样式样式。例如例如：（1）要显示一个要显示一个表格表格，如何定义显示方式呢？，如何定义显示方式呢？（2）要显示一个）要显示一个图片图片，如何定义显示方式呢？，如何定义显示方式呢？（3）要显示一个）要显示一个超链接超链接，如何

11、定义显示方式呢？，如何定义显示方式呢？.源代码源代码显示展示显示展示（3）所以，要）所以，要了解和掌握了解和掌握HTML有关的标签有关的标签，然后，根据需要，选择有关的标签定义，然后，根据需要，选择有关的标签定义相关信息的显示。相关信息的显示。我们学习内容就是各种标签的使用我们学习内容就是各种标签的使用。n HTML文档结构与基本标记的使用文档结构与基本标记的使用n HTML表单标签与表单设计表单标签与表单设计n HTML框架标签与框架设计框架标签与框架设计 1 HTML文档结构与基本语法文档结构与基本语法网页结构：设计完成该网页的代码：1.1 HTML标记标记(或标签或标签)HTML标签是什

12、么？标签是什么？（每个标签就是定义一个每个标签就是定义一个显示对象显示对象，需要指定对象属性与属性值），需要指定对象属性与属性值）网页文件是利用网页文件是利用HTML所规定的所规定的标签标签定义网页中的各种元素的性质和特点，定义网页中的各种元素的性质和特点，从而完从而完成网页所要求的功能。成网页所要求的功能。n标签的作用：标签的作用：标签规定网页中的各元素如何展示相关的信息。标签规定网页中的各元素如何展示相关的信息。n使用示例：使用示例：在网页中，绘制一条水平红线，在网页中，绘制一条水平红线，n关键术语：关键术语：标签名称，标签的属性，标签的属性值标签名称，标签的属性，标签的属性值（1）标签的

13、分类（类型）标签的分类（类型）按功能分类按功能分类 在网页上要在网页上要展示的不同元素展示的不同元素，需要，需要采用不同的标签采用不同的标签给出定义和说明。给出定义和说明。每种标记都有每种标记都有其标记其标记名称名称和对应的标记和对应的标记属性属性和和属性值，属性值，从而给出不同性质、从而给出不同性质、特点的展示。特点的展示。主要有：主要有：n定义网页结构的标签；定义网页结构的标签；n定义网页头部的标签；定义网页头部的标签；n定义网页网体内容的标签，该类标签中主要包含；定义网页网体内容的标签，该类标签中主要包含；l 文字、行、文字、行、段落、列表标签段落、列表标签l 表格、图形表格、图形l 超

14、链接、视频、音频超链接、视频、音频l 表单表单 （2）标签的分类（类型）标签的分类（类型）按标签的结构分类按标签的结构分类标签有标签有单标签单标签和和双标签双标签。n单标签：单标签：例如，换行标记：例如，换行标记：绘制横线标签：绘制横线标签：n双标签双标签:(有有头标记头标记和和尾标记尾标记)例如，标题标记：例如，标题标记：内容内容 本小节结束回顾，所介绍的主要知识点内容！（1）网页结构（2）标签以及标签属性（3）标签的分类1.2 标签标签的的标记标记及其及其属性、属性值属性、属性值标记的基本语法：标记的基本语法：单标记：单标记：双标记：双标记：要标记显示的内容要标记显示的内容 语法说明：语法

15、说明：属性应写在属性应写在首标记内首标记内，并且和标记名之间有一个，并且和标记名之间有一个空格分隔空格分隔。例如：例如：标记标记是在网页中插入一条水平线，但是，要绘制什么类型（线的粗细、颜是在网页中插入一条水平线，但是，要绘制什么类型（线的粗细、颜色等）的直线呢？对直线的粗细、颜色的限制，就需要色等）的直线呢？对直线的粗细、颜色的限制，就需要标签的标签的属性属性和和属性值属性值。其中：其中：align为属性，为属性，center为属性值（表示居中）为属性值（表示居中）；color为颜色属性，为颜色属性，其属性值为其属性值为blue（蓝色）；（蓝色）；size为字体大小属性，为字体大小属性，其属性值为其属性值为5px。再例如：再例如：山东农业大学山东农业大学1.3 注释说明标记注释说明标记 注释标记用于在注释标记用于在HTML源码中插入注释。源码中插入注释。注释部分，不会再会被浏览器解释执行，也不显示在网页上，只是注释部分，不会再会被浏览器解释执行，也不显示在网页上，只是对我们编辑的网页某些部分的说明。对我们编辑的网页某些部分的说明。基本语法：基本语法：应用示例应用示例理解标签的分类、使用格式、属性属性值理解标签的分类、使用格式、属性属性值 标签的分类、格式、属性、属性值标签的分类、格式、属性、属性值 Hello,world!你好！你好！源代码源代码显示展示显示展示