Java-Web开发基础第2章课件.ppt

1、第2章 Web客户端编程目录 CSS基础知识基础知识HTML简介简介 JavaScript基础知识基础知识 重 点JavaScript的基本语法与事件 了解并掌握HTML的基本语法以及标记理解并掌握CSS基本语法以及页面元素课 程 内 容HTML简介 CSS基础知识 JavaScript基基础知识础知识 HTML基本语法 HTML格式标签 CSS简介 CSS基本语法 JavaScript语言概述 JavaScript语法基础 HTML表单标记 案例-使用HTML设计注册表单 CSS网页元素 HTML中使用CSS JavaScript函数和事件 2.1 HTML简介 超文本标记语言或超文本链接语

2、言（HTML）是目前应用在网络上的较为流行、广泛的标记语言，也是构成网页文档的主要语言，最早起源于标准通用标记语言（SGML）。可以使用任何能够生成.txt类型源文件的文本编辑来产生HTML文件，用HTML编写的超文本文档称作为HTML文档。该文本文件通常带有.html或.htm的文件扩展名，是能独立于各种操作系统平台的、可供浏览器解释浏览的网页文件。2.1.1 HTML基本语法其格式如下：标题部分 正文部分 2.1.2 HTML格式标签1.标题标签在标题标签中可以使用属性align，用于设置标题文字的对齐方式，其取值如下：（1）Left：文字左对齐（默认值）。（2）Right：文字右对齐。（

3、3）Center：文字居中对齐。2.格式排版标签（1）：该标签的功能是实现强制文本换行，但是行与行之间不会留下空行。（2）：该标签的功能是在网页中加入一条水平线横跨网页，并且具有多个属性，可以通过这些属性来设置水平线的宽度、长度及显示效果等。3.文字格式标签主要属性包括如下：（1）Color：设置字体颜色。（2）Face：设置字体样式。（3）Size：设置字体大小，值为整数，分为7个级别（默认字体大小为3）。4.段落标签 标签对是用来创建一个新的段落，因此在标签对中加入的文本将会按照段落的格式显示在浏览器上。表示一个段落的开始，表示段落的结束，该标记可以省略。标签可以有多种属5.预定义格式标签

4、 标签在编辑文档时使用，主要功能是能够将显示内容保留在编辑工具中已经排好的形式原样显示在网页中。6.注释标签作为注释标签，在编写HTML文件时，主要是为了提高文件的可读性，其语法格式为：7.列表标签 列表标签在网页中主要是用来规定文字的排列方式、列举内容等。常用的列表分为三种：有序列表(使用标签)，无序列表(使用标签)，自定义列表(使用标签)。（1）有序列表 有序列表是指列表中各项按一定的编号顺序来显示，列表用开始，以结束，每一个列表项用标签对定义，其语法如下：列表项1 列表项2 8.多媒体和超链接标签 多媒体主要包括图像、视频、背景音乐等多种形式，多媒体的应用可以使网页更加丰富多彩；超链接的

5、使用可以使包含不同信息的网页链接在一起。因此，多媒体和超链接在网页中起着非常重要的作用。（1）插入图像标签 标签可以在网页中添加.gif、.jpg、.png等格式的图像.（2）插入视频 标签也能实现在网页中插入视频的功能，（3）插入背景音乐 标签的功能是实现在网页中添加.wav、.mid、.mp3等格式的背景音乐。（4）插入超链接超链接可以实现当前页面与其他页面间的跳转，使用户可以从一个页面直接跳转到另一个页面、图像或服务器。9.表格标签 表格是由行、列、单元格三部分组成，它不仅可以很好的组织信息，还可以很好地控制页面布局，在网页开发中占用很重要的地位。表格定义的基本格式如下：第一列的标题 第

6、二列的标题 第一行中第一个单元格内容 第一行中第二个单元格内容 第二行中第一个单元格内容 第二行中第二个单元格内容 .2.1.3 HTML表单标记表单一般是由表单标签、表单域、表单按钮组成。表单标签包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法；表单域包含了用于用户输入和交互的控件，比如文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等；表单按钮包括提交按钮、复位按钮和一般按钮，用于将数据传送给服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他的一些处理工作。1.表单标签标签对用来创建一个表单，标签用来定义表单的开始，标签用来定义表单的结

7、束。该标签属于容器标签，表单里所有数据采集功能的控件都需要定义在该标签对之间。表单标签基本语法结构如下：2.表单域标签（1）单行输入域标签 标签用来定义单行输入域，用户可在其中输入单行信息。（2）多行输入域标签 标签对是用来定义多行文本输入域 （3）选择域标签 标签对用来建立一个下拉列表，标签用来定义下拉列表中的一个选项，用户可以从列表中选择一项或多项。3.表单按钮标签 标签对用于定义提交表单内容给服务器的按钮，主要属性有Type和Accesskey。（1）Type属性：用于设置按钮类型，可取值为：Button（一般按钮）、Reset（复选按钮）、Submit（提交按钮）。它们与中同名的属性具

8、有相同的功能。（2）Accesskey属性：用于设置按钮的热键，即按下Alt键的同时按下该属性值所对应的键便可以快速定位到该按钮。2.2 CSS基础知识 Web网站的开发一般包含两方面的内容：一是站点的外观设计，二是站点的功能实现。一个成功的网站应该是一个设计美观而又方便实用的网站。2.2.1 CSS简介 级联样式表（Cascading Style Sheets，CSS）是一种设计网页样式的工具，它是W3C为了弥补HTML在显示属性设定上的一些不足而制订的一套扩展样式标准，其重新定义了HTML中的文字显示样式，并增加了一些新的概念，如类、层等，可以实现对文字的重叠及定位等。2.2.2 CSS基

9、本语法 在网页制作过程中，定义样式表的方法主要有下面三种方法：1.通过HTML标签定义样式表CSS样式表的基本语法格式：引用样式的对象标签属性：属性值；标签属性：属性值；标签属性：属性值；2.使用id定义样式表 在HTML页面中Id选择符是用来对某个单一元素定义单独的样式，定义Id选择符要在Id名称前加上一个#号。3.使用Class定义样式表 使用CSS类可以为同一元素创建不同的样式或不同元素创建相同的样式。CSS类的定义格式有两种，定义时需要在自定义类的名称前加一个点号“.”。（1）标签名.类名标签属性:属性值;标签属性:属性值;标签属性:属性值;（2）.类名标签属性:属性值;标签属性:属性

10、值;标签属性:属性值;2.2.3 HTML中使用CSS 在HTML中加入CSS主要有三种方法：嵌入式样式表、内联式样式表和外联式样式表。1.嵌入式样式表 嵌入式样式表很简单，只要在需要应用样式的HTML标签上添加CSS属性就可以了，这种方法主要用于对具体的标签做具体的样式设置，其作用范围只限于本标签。例如：使用嵌入式样式表2.内联式样式表 内联式样式表利用标签对将样式表定义在HTML文档的标签对之间，内联式样式表的作用范围是本HTML文档。3.外联式样式表 外联式样式表是将定义好的CSS单独放到一个以.css为扩展名的纯文本文件中，再使用标签链接到网页中。2.2.4 CSS网页元素1.字体的属

11、性CSS的字体属性包括：Font-family：表示字体的名称。Font-style：表示字体的风格，可以取值normal（默认值）、italic、oblique。Font-variant：表示字体的变形，可以取值normal（默认值）、small-caps（小型大写字母）。Font-weight：表示字体的加粗，可以取值normal（默认值）、bold、bolder、lighter、100900。Font-size：表示字体的大小，取值分为绝对大小（xx-samll、x-small、small、medium（默认值）、large、x-large、xx-large）、相对大小（larger、s

12、maller）、长度（单位为pt）和百分比。Font：表示字体属性的略写。2.CSS的颜色和背景属性CSS的颜色和背景属性主要包括：Color：设置前景色，可取值为：颜色名称（aqua、black、blue、gray、green、navy等）；RGB值（R代表红色，G代表绿色，B代表蓝色；数值范围0255）；十六进制值（以“#”开头，格式为#*）。Background-color：设置背景色，可取值为：颜色名称（对应英文单词）、RGB值、十六进制值，具体同上。Background-image：设置背景图案，可取值为：none表示不用图形做背景，url表示图形文件的URL地址。Backgroun

13、d-repeat：设置背景图片是否重复排列，可取值为：repeat（垂直和水平重复，默认值）repeat-x（水平重复）repeat-y（垂直重复）no-repeat（不重复）。Background-attachment：设置背景图片是否滚动，可取值为：scroll（元素背景图片随元素一起滚动）fixed（背景图片固定）。Background-position：设置背景图片位置，可取值为：top、left、right、bottom、center等。Background：背景属性略写。3.文本属性CSS的文本属性主要包括：Letter-spacing：设置字母之间的间距，可取值为：normal、

14、长度值。Word-spacing：设置单词之间的间距，可取值为：normal、长度值。Text-decoration：设置文字的装饰样式，可取值为：none、underline、overline、line-through和blink。Vertical-align：设置文本垂直方向对齐方式，可取值为：baseline、sub、super、top、text-top、middle、bottom、text-bottom和百分比。Text-transform：设置文本转换方式，可取值为：none、capitalize、uppercase、lowercase Text-align：设置文本水平对齐方式，可

15、取值为：left、right、center和justify。Text-indent：设置文本首行缩进方式，可取值为：长度或百分比。Line-height：设置文本的行高，可取值为：normal、数字、长度和百分比。4.分级属性CSS分级属性主要包括：Display：设置是否显示，可取值为：block、inline、list-item和none。White-space：设置处理空白的方式，可取值为：normal、pre和nowrap。List-style-type：设置项目编号的类型，可取值为：disc、circle、square、decimal、lower-roman、upper-roman、

16、lower-alpha、upper-alpha、none。List-style-position：设置列表项第二行起始的位置，可取值为：inside和outside。List-style-image：设置列表项前的图案，可取值为：url和none。List-style：分级属性缩写。5.鼠标属性CSS中鼠标属性主要包括：Auto：设置鼠标按照默认的状态根据页面上的元素自行改变样式。Crosshair：设置精确定位“+”字。Default：设置默认指针。E-resize：设置箭头朝右方。Hand：设置手形。Help：设置帮助。Move：设置移动。N-resize：设置箭头朝上方。Ne-resiz

17、e：设置箭头朝右上方。Nw-resize：设置箭头朝左上方。S-resize：设置箭头朝下方。2.3 JavaScript基础知识 1995年由Sun Microsystems和Netscape共同研发出JavaScript脚本语言，JavaScript是一种轻型的解释性脚本语言，是由Web浏览器内的解释器解释执行的程序语言，一般嵌入在HTML中运行，实现了与用户的交互，产生动态效果。2.3.1 JavaScript语言概述JavaScript的运行过程如下：1.用户在浏览器地址栏中输入请求页面的URL，该页面嵌入了JavaScript的程序片段。2.浏览器将用户请求发送到服务器端。3.服务器

18、响应该请求，将嵌入JavaScript的HTML文档发送到客户端。4.客户端浏览器从上到下逐行解释执行HTML标记和JavaScript脚本，同时把JavaScript脚本交给脚本引擎执行，最后把执行结果显示给用户。JavaScript的主要作用包括：1.表单验证 用户输入的信息包括用户名、密码以及其他一些相关信息等的长度、类型以及是否为空等的验证。2.实现网页特效 主要包括文字特效、鼠标特效、图片特效、页面特效、时间特效、状态栏特效、导航特效以及综合特效。3.改善页面样式 页面样式通常是通过样式表（CSS）来定义的。通过样式表，能够随着的加载定义页面元素的表现形式。但是有时需要根据实际的情况

19、，动态的改变页面的样式，这就需要用到JavaScript。比如单击某个按钮会使得两张图片互换；鼠标移到一个链接上会有不一样的样式效果等。4.应用Ajax Ajax技术并不是一个新的语言，是JavaScript、XMLHTTP、CSS、XHTML、XML等的一个综合应用。它的应用颠覆了传统的Web应用中数据传输的方式，将数据传输由同步传输改为异步传输，从而减少了交互的时间和用户体验等。2.3.2 JavaScript语法基础 JavaScript同其他程序设计语言一样，有着自己的语法结构，主要包含变量名的命名，注释的使用以及语句之间通过什么进行分隔等。1.大小写敏感JavaScript是一种对大

20、小写敏感的语言，比如对于变量名“myName”，“MyName”，“myname”，“Myname”来说是完全不同的四个变量。2.空格、制表符和换行关键字、变量名、数字、函数名或者其他的标识符中间的空格、制表符以及换行在JavaScript程序中是会被忽略的，除非这个空格是属于字符串或者其他变量的一部分。3.直接量 直接量就是在程序里直接显示出来的数值。原则上讲，直接量就是任何一种程序设计语言必不可少的一部分。例如：30、0.8、“你好！”、true等。4.分号 JavaScript里的分号“；”跟在很多程序语言中的作用一样，是用来分割两条程序语句的。JavaScript里的分号可以省略，而用

21、换行来代替。5.标识符 标识符相当于一个名称。在程序设计语言中，标识符用来命名变量名或函数名等。JavaScript和其他程序设计语言一样，有着同样的标识符命名规则：必须是以字母、下划线“_”或美元符号“$”开始的，字母、数字、下划线以及美元符号的任意组合。6.保留字 保留字也可以称为关键字，保留在JavaScript中具有特殊意义，是JavaScript语言的一部分。2.3.3 JavaScript函数和事件1.使用函数（1）定义函数函数和其他的普通JavaScript一样，也要放在“”和“”之间。在使用函数前必须使用保留字“function”对函数进行定义，具体的定义语句如下：functi

22、on 函数名(参数)具体语句;（2）调用函数 函数本身是不会自动执行的，所以如果需要某个函数，就需要编程人员对其进行调用。调用函数的方法是使用函数名称并在括号中包含着所要传入的参数值，调用语句也要放在“”和“”标签里。（3）函数的返回值 函数不仅可以实现一些简单的功能，还能够通过参数接受传入的变量，同时也能够将一些结果返回调用函数的地方。实现函数返回值的语句是“return”，语法如下所示：return 返回值;2.使用事件 利用事件JavaScript可以使HTML具有了动态的特性，还可以控制页面的效果。JavaScript是嵌入在HTML文档里的，因此HTML的标签是主要的事件对象。常用的

23、事件包括：（1）click事件 click单击事件是任何type属性的“”标签都具有的事件，当鼠标在输入框或按钮上单击时，就会触发该事件。（2）blur事件 blur事件是指对象失去焦点后触发的事件，比如对设置了触发事件的输入框输入完毕后，将光标放到另一个输入框里面时就会触发该事件，或者光标原来停留在某单选框中，移到别的地方后同样会触发该事件。（3）change事件 change事件通常指当输入框的值发生了变化后，就会触发这个事件。示例代码如下：运行后，在输入框中输入值，当光标移出输入框表示输入完毕，JavaScript如果检测到输入框的内容发生了变化，就触发事件。（4）select事件 select事件是指用鼠标在输入框内选中内容时，就会触发事件，具体示例代码如下：运行后，在输入框中输入值，当用鼠标选中一段文字后，就会触发事件。（5）focus事件 与blur事件正好相反，focus事件是获得焦点时触发的事件，具体示例代码如下：运行后，当将光标移到输入框内，就会触发事件。（6）load事件 Load事件使用最多的时候是在“”标签里，当页面所有内容全部加载完毕后就会触发该事件。