第2章-HTML语言和JavaScript语言.ppt
《第2章-HTML语言和JavaScript语言.ppt》由会员分享,可在线阅读,更多相关《第2章-HTML语言和JavaScript语言.ppt(60页珍藏版)》请在三一文库上搜索。
1、1,第2章 HTML语言和JavaScript语言,2,主要内容,1.网页的工作机制 2.HTML语言 3.JavaScript语言 4.利用网页编辑器制作网页,3,1.网页的工作机制,上网时,在地址栏中输入的网站的地址,称之为URL(Uniform Resource Locator,统一资源定位符)。就像每家每户都有一个门牌号一样,每个网页都有一个Internet地址。 当在浏览器的地址栏中输入一个URL或是单击一个超级链接时,URL就确定了要浏览的地址。浏览器通过超文本传输协议(HTTP,Hypertext Transfer Protocol),将Web服务器上站点的网页代码提取出来,并翻
2、译成漂亮的网页。,4,一个URL例子如: http:/127.0.0.1:8080/ch1/SimpleJSP.jsp 一般由三部分组成: 使用的协议,在Web网页中,使用HTTP协议。 存放该资源的主机IP地址或者域名(有时也包括端口号,如8080) 。 主机资源的具体地址(如目录和文件名)。 第一部分与第二部分之间用“:/”隔开,第二部分与第三部分之间用“/”隔开,第二部分和第三部分有时可以省略。,5,对于JSP网页,JSP文件在Tomcat服务器中编译时,服务器内部究竟做了些什么呢?或者说JSP网页的执行过程是怎样的? 当客户端向服务器发出请求时,JSP服务器(如Tomcat)就会将响应
3、的JSP文件转换成一个Servlet,服务器在转换时,如果发现jsp文件有错误,这种转换过程就会停止,并向浏览器发出错误信息。如果没有错误,则编译转换得到Servlet代码,并加载到内存中,最后将结果返回到客户端(浏览器)。由于JSP程序在第一次执行后,会被编译成Servlet的类文件,之后这个Servlet会常驻于内存,所以第一次执行jsp文件时速度相对较慢,而以后的响应速度都是比较快的。,6,HTML (HyperText Markup Language,超文本标记语言)不是程序设计语言,而是一组标记,便于网页设计人员把文本、图像、动画等制作成有一定效果的网页,资源间通过超链接联结成为一个
4、有机的整体。 HTML文件的基本结构包括文件头(Head)和文件体(Body)两大部分,头部为浏览器提供所需的描述信息,主体则包含待显示的内容。 HTML文本由浏览器解释并还原出页面效果,2. HTML语言,HTML标记是用尖括号标识的字符串,尖括号中的英文名叫标记名(如),标记名与左边的“标记可定义字体、字号和字的颜色等。,7,1、HTML文本的基本结构 ,大部分HTML标记是成对出现,不带“/”的叫起始标记,带有“/”的叫结束标记。标记的属性参数一般写在起始标记内。起始标记和结束标记间的对象称为标记体,标记的效果作用在标记体上,例如: JSP程序设计 当一个标记对没有标记体时,称之为空标记
5、,此时可用简写式来表示,即:在起始标记的“”字符前加上“/”,并把结束标记省略不写。如: ,8,9,标记表示HTML文件从此处开始,到标记结束,这对标记处在最外层,网页的内容写在此标记内。每个HTML文件是以标记开头,而以标记结束。如下实例:,Html脚本,演示效果, 标记表示此处是HTML文档的文件头。文件头内部的信息一般不会在浏览器的正文区显示。此标记对内可以插入其它标记,如网页标题标记。 标记表示此处是网页的主体,一般不能省略,标记体的内容在浏览器正文区中显示,例如文字、图片和超链接等。,10,11,2、排版标记 注释 HTML注释的格式如下:,注释在HTML文件中的作用是对网页中的代码
6、作说明,可以放在网页中的任何位置。注释内容会返回到客户端浏览器上,但不显示。在IE浏览器中,通过菜单【查看】【查看源文件】,可以看到注释。,标记 标记对用于标识一个段落,两个相邻的段落间有一空行的间隔。在DreamWeaver8的设计视图模式中,输入文字后按键,会自动产生标记。 标记 这个标记没有结束标记,表示换行。在DreamWeaver8的设计视图中,输入文字后按+组合键,会自动产生标记。标记和都能换行,但换行后,上下两行的间距比较小,标记换行后,上下两行有一空行的间距。,12,13,对齐标记: 居中对齐 居左对齐 居右对齐,换行标记例子,对齐标记例子,14,3、文字格式标记 设置标题:一
7、共有6种格式的标题,它们显示的是不同大小的标题文字。实例“sample2.html”的脚本如下: 标题标记 标题1 标题2 标题3 标题4 标题5 标题6 ,演示效果,15,设置字体: 其他字体标记: 加粗 斜体 下划线 删除线 倾斜 加强显示 放大显示 缩小显示,size属性用于设置字号,HTML中定义了7种字号,1号最小,7号最大,如:。字号也可以用“磅”(px)表示。 color属性用于设置文本的颜色,color有三种方法来设定颜色,第一种方法是用颜色名称,第二种方法用红、绿和蓝色百分比的RGB值来设定,第三种方法是用十六进制的颜色代号来设定颜色。 如: 颜色设定 颜色设定 颜色设定,1
8、6,4、创建表格,在网页中,表格主要分成排版表格和数据表格两种。 排版表格在浏览器中不显示边线,仅供排版、布局用。 数据表格在浏览器中显示边线或背景色,用于列表显示数据。,18,表格是由行和列组成,用来显示多条数据,它包括标题、表头、行、单元格等部分。 :表格标记 表示整个表格。width=“75%“表示表格占整个页面宽度的75%。border=“1“表示表格的边框为1像素。align=“center“表示表格居中对齐。cellpadding=“2“表示单元格的大小。cellspacing=“0“表示单元格之间没有间隙。bgcolor=“#CCCCCC“属性指定表格的背景颜色。 标记:标题标记
9、 用来设置表格的标题,它可以使用align、valign等属性。,19,标记:表头标记 它有align、background、colspan、rowspan、valign等属性。 标记:行标记 它表示表格的一行,具有align、background、colspan、rowspan、valign等属性。 标记:单元格标记,或者列标记 每一行中有若干个单元格。它具有align、background、colspan、rowspan、valign等属性。,20,、间的嵌套关系为:, . . . ,间如果有n对标记,表示此表格有n行。 表示一行中的一列,一般写在内。,21,在实际的网页制作中,常常使用表
10、格来格式化页面,在页面中创建一个表格,设定无边框等属性,使用户表面上看起来好像没有表格,我们用该表格将页面划分为几个区域,并设置每个区域的大小,然后分别设计每个区域,表格例子,上机1:用DW8制作一个4行4列的细线数据表格,表格宽400像素,边线粗细为1个像素,边线颜色为红色,并把下列数据填充上去。,表单是系统和用户交互的手段之一。用户在表单中填写数据,提交后,表单中的数据传递给后台程序处理,实现了客户端和服务器的交互。 标记表示表单的开始和结束。在表单标记中可以存放各种表单元素,如文本域、按钮等。一个表单元素相当于一个变量,它的取值相当于变量的取值。 标记中的id为表单的ID名,用于在当前网
11、页中标识表单,在当前网页中此ID名应该唯一。,23,5、设计表单,24, ,25,action: 用于设定处理表单数据程序URL的地址。 method:指定数据传送到服务器的方式。一共有两种方式:get和post。当method为get方式时,将输入的数据追加在action指定的地址后面,并传送到服务器。当method为post方式时,则将输入的数据按照HTTP协议中post传输方式传送到服务器。 用GET方式提交表单数据的优点是速度快,缺点是变量值会在浏览器的地址栏中显示,并且URL的长度有限制,一次所能提交的数据量有限。 如果用POST方式提交表单数据,表单数据按“变量名=变量值”的形式存
12、放在HTTP请求报头尾部的数据体中,表单数据不会显示在URL中。,name:用于指定表单的名称。 onReset和onSubmit:主要针对Reset按钮和Submit按钮,分别设置在按下这两个按钮之后所要执行的程序。 target:指定输入数据结果显示在哪个窗口。,在表单中有: 表单输入标记、下拉菜单标记、多行文本输入标记等。,27,文本域标记 文本域表单的常见用法如: 标记表示此标记是写入标记,存储用户写入的信息。标记中的id和name属性为文本域的ID名,type属性表示此写入标记的类型,value属性存储文本域的值。,28,多行文本框用文本区域表单元素实现,它的HTML标记使用格式如下
13、: 内容 name属性是文本区域的名字。由于多行文本框可以输入较多的内容,所以把写入的内容存储在标记体中。,单选按钮 在实际应用中的“性别”信息一般通过单选按钮采集,用户在给定的“男”和“女”两个选项中选择其中一个,相应的HTML代码如:,复选按钮 在实际应用的“爱好”信息一般通过复选按钮采集,用户在列出的多个爱好中作出选择,可以选零个,也可以全选,相应的HTML代码如:,隐藏表单域 隐藏表单域是不可视的表单元素,用于存储隐含信息,例如将用户的登录信息存储在隐藏表单域中,用户提交表单后,隐藏表单域中的信息也会被提交给服务器。它的HTML标记类似于:,32,列表表单元素 列表表单元素预先把一组可
14、供选择的数据存储在列表中,以下拉菜单或列表的形式供用户在其中选择,其中name是选项的提示文字,value才是选项的值。它的HTML标记形如:, 公司员工 在校学生 公务员 ,33,文件域表单元素 文件域表单由一个文本域和一个按钮组成,单击按钮后会激活一个文件选择对话框,从本地磁盘中选择一个文件,被选中文件的路径及文件名自动填写在文本域中。上传文件时,需要用到文件域。文件域的HTML标记形如:,34,上机2:用DW8设计一个会员注册的页面,如图,表单例子,35,7、其他标记 超文本链接标记: href属性值为目标资源的URL,如果是空链接,则URL写为“#”。 图像标记: src和dynsrc
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML 语言 JavaScript
链接地址:https://www.31doc.com/p-2252234.html