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

1、第2章 静态网页开发技术 静态网页是指可以由浏览器解释执行而生成的网页，其开发技术主要有：HTML、JavaScript和CSS。HTML：一组标签，负责网页的表现形式（显示信息的格式）。JavaScript：是在客户端浏览器运行的语言，负责在客户端与用户的互动。CSS：是一个样式表，起到美化整个页面的功能。教学内容与教学目标1、教学内容 本章主要介绍HTML、JavaScript和CSS三种技术及其使用，并给出设计案例。2、教学目标（1）掌握静态网页的常用设计技术（2）利用这些设计技术，能够根据所给出的设计要求，较熟练的设计静态网页。（3）三种设计技术（HTML+JavaScript+CSS

2、）的整合应用，必须掌握。 引言1_静态网页设计的预备知识1、网页 网页就是按各种格式显示或展示各类信息的。2、标签 不同信息、不同的展示方式，要采用不同的标记来标识 这些标记称为标签。 例如： （1）画一条线：如何绘制并展示。 源代码 示例 （2）利用表格：显示3个学生信息。源代码 示例 （3）为了完成各类不同信息的展示， 就需要用HTML+JavaScript+CSS三种技术整合展示信息。 引言2_静态网页的有关预备知识 静态网页是指没有后台数据库、不含程序的网页，可以直接在浏览器上运行。静态网页是以htm或html结尾的html文件编写的。在程序设计中一般又把html网页称为静态网页。HT

3、ML是Hypertext Markup Language的缩写，中文也就是超文本链接标示语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。引言3_静态网页开发相关技术基础知识 相关的一系列技术：HTML、JavaScript和CSS。 （1） HTML HTML是一组标签，负责网页的基本表现形式。 （2）JavaScript JavaScript是在客户端浏览器运行的语言，负责在客户端与用户的互动。 （3）CSS CSS是一个样式表，起到美化整个页面的功能。引言4_静态网页的开发环境与运行环境1、开发环境（开发工具）（1）最简单的开发

4、工具 利用记事本编写静态网页代码（2）利用集成开发环境（有很多种） 我们主要利用MyEclipse（或者Eclipse）2、运行环境 必须由浏览器解释执行。（1）第一种方式：直接利用浏览器解释执行 利用浏览器打开静态网页程序（*.html）（2）第二种方式：程序存放到服务器上，由浏览器请求服务器，然后服务器响应返回信息，再有浏览器解释执行并显示网页。注意：所有的实际应用程序，都是采用这种方式。引言5_HTML文件 用HTML编写的超文本文档称为HTML文档（文件），是一个放置了“标签”的文本文件，以“.html”或“.htm”为扩展名，可供浏览器解释执行的网页文件例2-1源代码 网页文件是利用

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

6、放系统设计 7 HTML5语法与HTML5表单新特性 8 案例基于HTML5表单新特性实现客户注册输入校验 本节内容实际上介绍各类标签的使用方法，其实，我们可以不需要详细介绍，在设计网页时，根据需要直接查阅所需要的标签即可。提示：HTML网页设计的基本思想与方法（1）设计网页，就是在显示器上，按一定的格式展示所希望显示的信息。（2）为了显示不同的信息，采用不同的标签及其相应的属性设置要显示信息的格式和样式。 例如： （1）要显示一个表格，如何定义显示方式呢？ （2）要显示一个图片，如何定义显示方式呢？ （3）要显示一个超链接，如何定义显示方式呢？ . 源代码显示展示（3）所以，要了解和掌握HT

7、ML有关的标签，然后，根据需要，选择有关的标签定义相关信息的显示。我们学习内容就是各种标签的使用。 HTML文档结构与基本标记的使用 HTML表单标签与表单设计 HTML框架标签与框架设计 1 HTML文档结构与基本语法网页结构：设计完成该网页的代码：1.1 HTML标记(或标签)HTML标签是什么？（每个标签就是定义一个显示对象，需要指定对象属性与属性值） 网页文件是利用HTML所规定的标签定义网页中的各种元素的性质和特点，从而完成网页所要求的功能。标签的作用：标签规定网页中的各元素如何展示相关的信息。使用示例：在网页中，绘制一条水平红线， 关键术语：标签名称，标签的属性，标签的属性值（1）

8、标签的分类（类型）按功能分类 在网页上要展示的不同元素，需要采用不同的标签给出定义和说明。 每种标记都有其标记名称和对应的标记属性和属性值，从而给出不同性质、特点的展示。主要有：定义网页结构的标签； 定义网页头部的标签；定义网页网体内容的标签，该类标签中主要包含； 文字、行、 段落、列表标签 表格、图形 超链接、视频、音频 表单 （2）标签的分类（类型）按标签的结构分类标签有单标签和双标签。单标签： 例如，换行标记： 绘制横线标签：双标签: (有头标记和尾标记) 例如，标题标记： 内容 本小节结束回顾，所介绍的主要知识点内容！（1）网页结构（2）标签以及标签属性（3）标签的分类1.2 标签的标记及其属性、属性值标记的基本语法：单标记： 双标记： 要标记显示的内容 语法说明： 属性应写在首标记内，并且和标记名之间有一个空格分隔。例如： 标记是在网页中插入一条水平线，但是，要绘制什么类型（线的粗细、颜色等）的直线呢？对直线的粗细、颜色的限制，就需要标签的属性和属性值。 其中：align为属性， center为属性值（表示居中）； color为颜色属性，其属性值为blue（蓝色）； size为字体大小属性，其属性值为5px。再例如： 山东农业大学1.3 注释说明标