第2章-HTML语言和JavaScript语言

从零开始－JSP动态网页制作基础培训教程1第2章HTML语言和JavaScript语言编程从零开始－JSP动态网页制作基础培训教程2主要内容1.网页的工作机制2.HTML语言3.JavaScript语言4.利用网页编辑器制作网页源码网：从零开始－JSP动态网页制作基础培训教程31.网页的工作机制上网时，在地址栏中输入的网站的地址，称之为URL（UniformResourceLocator，统一资源定位符）。就像每家每户都有一个门牌号一样，每个网页都有一个Internet地址。当在浏览器的地址栏中输入一个URL或是单击一个超级链接时，URL就确定了要浏览的地址。浏览器通过超文本传输协议（HTTP，HypertextTransferProtocol），将Web服务器上站点的网页代码提取出来，并翻译成漂亮的网页。从零开始－JSP动态网页制作基础培训教程4一个URL例子如：一般由三部分组成:使用的协议，在Web网页中，使用HTTP协议。存放该资源的主机IP地址或者域名（有时也包括端口号，如8080）。主机资源的具体地址（如目录和文件名）。第一部分与第二部分之间用“://”隔开，第二部分与第三部分之间用“/”隔开，第二部分和第三部分有时可以省略。从零开始－JSP动态网页制作基础培训教程5对于JSP网页，JSP文件在Tomcat服务器中编译时，服务器内部究竟做了些什么呢？或者说JSP网页的执行过程是怎样的？当客户端向服务器发出请求时，JSP服务器（如Tomcat）就会将响应的JSP文件转换成一个Servlet，服务器在转换时，如果发现jsp文件有错误，这种转换过程就会停止，并向浏览器发出错误信息。如果没有错误，则编译转换得到Servlet代码，并加载到内存中，最后将结果返回到客户端（浏览器）。由于JSP程序在第一次执行后，会被编译成Servlet的类文件，之后这个Servlet会常驻于内存，所以第一次执行jsp文件时速度相对较慢，而以后的响应速度都是比较快的。从零开始－JSP动态网页制作基础培训教程62.HTML语言1、注释HTML注释的格式如下：!--comment--2、HTML文本的基本结构htmlhead…/headbody…/body/html从零开始－JSP动态网页制作基础培训教程7其中，html…/html、head…/head、body…/body都是标记，标记由一对尖括号及其标记符组成，没有反斜杠“/”的是开始标记，有反斜杠的是结束标记。每个HTML文件是以html标记开头，而以/html标记结束。书上有一个实例：Html脚本演示效果从零开始－JSP动态网页制作基础培训教程83、文字格式标记①设置标题：一共有6种格式的标题，它们显示的是不同大小的标题文字。实例“sample2.html”的脚本如下：htmlheadtitle标题标记/title/headbodyh1标题1/h1h2标题2/h2h3标题3/h3h4标题4/h4h5标题5/h5h6标题6/h6/body/html演示效果从零开始－JSP动态网页制作基础培训教程9②设置字体：fontface=?size=?color=?…/font③其他字体标记：b加粗/bi斜体/iu下划线/us删除线/sem倾斜/emstrong加强显示/strongfontface=楷体_GB2312size=5big放大显示/big/fontfontface=楷体_GB2312size=5small缩小显示/small/font从零开始－JSP动态网页制作基础培训教程104、文字版面标记①换行标记：br②段落标记：p…/p③对齐标记：center居中对齐/centerpalign=left居左对齐/ppalign=right居右对齐/p换行标记例子对齐标记例子从零开始－JSP动态网页制作基础培训教程115、创建表格表格是由行和列组成，用来显示多条数据，它包括标题、表头、行、单元格等部分。①table…/table：表格标记表示整个表格。width=75%表示表格占整个页面宽度的75%。border=1表示表格的边框为1像素。align=center表示表格居中对齐。cellpadding=2表示单元格的大小。cellspacing=0表示单元格之间没有间隙。bgcolor=#CCCCCC属性指定表格的背景颜色。②caption…/caption标记:标题标记用来设置表格的标题，它可以使用align、valign等属性。从零开始－JSP动态网页制作基础培训教程12③th…/th标记:表头标记它有align、background、colspan、rowspan、valign等属性。④tr…/tr标记:行标记它表示表格的一行，具有align、background、colspan、rowspan、valign等属性。⑤td…/td标记:单元格标记，或者列标记每一行中有若干个单元格。它具有align、background、colspan、rowspan、valign等属性。从零开始－JSP动态网页制作基础培训教程13表格的作用并不限于显示多行数据，在实际的网页制作中，常常使用表格来格式化页面，在页面中创建一个表格，设定无边框等属性，使用户表面上看起来好像没有表格，我们用该表格将页面划分为几个区域，并设置每个区域的大小，然后分别设计每个区域表格例子从零开始－JSP动态网页制作基础培训教程146、设计表单form…/form表单标记：formaction=URLmethod=get|postname=onReset=onSubmit=target=_blank_self|_parent|_top……/form从零开始－JSP动态网页制作基础培训教程15①action:用于设定处理表单数据程序URL的地址。②method：指定数据传送到服务器的方式。一共有两种方式：get和post。当method为get方式时，将输入的数据追加在action指定的地址后面，并传送到服务器。当method为post方式时，则将输入的数据按照HTTP协议中post传输方式传送到服务器。③name：用于指定表单的名称。④onReset和onSubmit：主要针对Reset按钮和Submit按钮，分别设置在按下这两个按钮之后所要执行的程序。⑤target：指定输入数据结果显示在哪个窗口。从零开始－JSP动态网页制作基础培训教程16在表单中有：input表单输入标记、select…/select下拉菜单标记、textarea…/textarea多行文本输入标记等。表单例子从零开始－JSP动态网页制作基础培训教程177、其他标记①超文本链接标记：ahref=…/a②图像标记：IMG…/IMGsrc和dynsrc:分别表示图像文件和视频文件的地址（URL）。height、width:分别表示插入的图像的高度和宽度。vspace、hspace:分别表示插入的图像上下、左右空白区域的大小。align:表示插入的图像与周围文字的对齐。border:指定插入的图像的边框宽度。从零开始－JSP动态网页制作基础培训教程183.JavaScript语言1、简介JavaScript是一种解释性的脚本语言，采用在HTML文本中嵌入小程序段的方式，开发过程非常简单。JavaScript可以直接对用户或者客户的输入做出响应，而不需要经过Web服务器程序，这减少了客户浏览器与服务器之间的通信量，提高了速度。JavaScript是一种与平台无关的解释性脚本语言，依赖于浏览器，而与操作系统无关，只要计算机能运行浏览器，而且该浏览器支持JavaScript，就可以执行JavaScript脚本。从零开始－JSP动态网页制作基础培训教程19JavaScript与Java的区别：1.JavaScript与Java都是与平台无关的语言，它们都具有很强的实用性。2.两者处理方式不同。Java程序必须经过编译，形成独立的字节码，然后在相应的Java虚拟机上执行，正由于Java虚拟机的存在，才使Java能够实现跨平台。JavaScript脚本是嵌入在HTML文本中，不需要编译，通过浏览器逐行解释执行。3.在Java程序中，如果需要某个变量，在使用之前必须进行声明，而JavaScript不必事先声明就可以使用变量。从零开始－JSP动态网页制作基础培训教程204.在Java程序中，如果需要某个变量，在使用之前必须进行声明，而JavaScript不必事先声明就可以使用变量。5.JavaScript是一种嵌入语言，它通过在HTML文本中使用标记：script…/script来插入JavaScript小程序。而在HTML文本中使用标记：Applet……/Applet来调用Java的类（class）文件。6.JavaScript是一种脚本语言，学习起来比Java简单得多从零开始－JSP动态网页制作基础培训教程212、数据类型常见的数据类型一共有4种：①number:数字类型，包括整数和浮点数。整数可以为正整数、0或者负整数，浮点数可以包括小数点，如8.33，或者“E”（也可为“e”，科学计数法中表示10的幂），如7E-2等。②string:字符串类型，字符串数据应加上单引号或者双引号，例如“hello”。③object:对象类型，这是JavaScript的重要组成部分，将在后面的小节中介绍。④boolean:布尔类型，可以为true和false两个值。从零开始－JSP动态网页制作基础培训教程22JavaScript中的数据也分为常量和变量。对变量的数据类型要求不太严格，可以不必声明每一个变量的类型。使用var关键字来声明一个变量。JavaScript区分大小写，即变量Orange与orange不一样。变量名称的长度不受限制，但是要遵循以下规则:第一个字符必须为字母、下划线（_），或者美元符号（$）。紧接着的字符可以是字母、数字、下划线（_），或者美元符号（$）。变量名不能为保留字。从零开始－JSP动态网页制作基础培训教程233、保留字与其他编程语言一样，JavaScript也有一些保留字，这些保留字不可以用作变量、函数名、对象名等,如abstract、boolean、break、int等。4、常用语句函数定义语句function函数名称(参数){函数执行部分return表达式}从零开始－JSP动态网页制作基础培训教程24条件语句if(条件){语句1}else{语句2}如果条件成立，则执行语句1，否则执行语句2。从零开始－JSP动态网页制作基础培训教程25分支语句switch(expression){caselabel1:语句1;caselabel2:语句2;caselabel3:语句3;……default:语句n;}如果表达式expression的值与任何一个label都不匹配，将执行default后面的语句n。从零开始－JSP动态网页制作基础培训教程26循环语句for语句：for(变量初始化;条件;更新变量){语句}for…in语句：for(变量in对象或数组){语句}while语句：while(条件){语句}从零开始－JSP动态网页制作基础培训教程275、对象JavaScript是基于对象的语言,常见对象：String对象:字符串对象,只有一个属性：length属性，表示字符串中包含的字符数目。但String对象具有多种方法，如big()、fon