《《Internet技术与应用教程（第二版）》-刘兵-电子教案 第10章》由会员分享，可在线阅读，更多相关《《Internet技术与应用教程（第二版）》-刘兵-电子教案 第10章（99页珍藏版）》请在金锄头文库上搜索。
1、第十章 网页制作语言,学习要点： HTML语言基本知识 JavaScript脚本语言,第10章 网页建立与维护,10.1 网页的制作语言,10.2 网页脚本语言JavaScript,退出,10.1.1 HTML 语言的结构,10.1.3 超文本链接指针,10.1.2 构成网页的基本元素,10.14在HTML文件中使用图像,10.1.6 表单的应用,10.1.5 框架结构的使用,10.1.7 HTML中的表格,10.1 网页的制作语言,返 回,HTML（超文本标记语言）是一种描述文档结构的标注语言，它使用一些约定的标记对WWW上的各种信息进行标注。 HTML的优点是其跨平台性。 HTML文件是标
2、准的ASCII文件，且其后缀名为htm或html的文件。,10.1.1 HTML 语言的结构,从结构上讲，HTML文件由元素（element）组成。绝大多数元素是“容器”， 即它有起始标记和结尾标记。元素的起始标记叫做起始链接签（start tag），元素结束标记叫做结尾链接签（end tag）。 在起始链接签和结尾链接签中间的部分是元素体。 每一个元素都有名称和可选择的属性，元素的名称和属性都在起始链接签内标明。,10.1.1 HTML 语言的结构,下面是一个标准的HTML文件, 武汉工业学院 这是一HTML的测试文件 ,标记用来给网页命名，网页的名称写在与标记之间,10.1.2 构成网页的
3、基本元素,1标记,到标题元素有6种，用于表示文章中的各种题目。字体大小到顺序减小。,2标记,源文件,3预格式化文本标记,源文件,HTML的输出是基于窗口的，因而HTML文件在输出时都是要重新排版的，若确实不需要重新排版的内容，可以用通知浏览器。,4和标记,源文件,用于强制换行。 表示一个段落的开始。一般可不用。,5 标记,标记使文本加粗； 标记使文本倾斜； 标记给文本加下划线； 标记给文本加删除线； 标记使文本字体加重。,6标记,用来修改字体和颜色。其中： COLOR属性指定文字颜色，颜色的表示可以用6位十六进制代码，如； SIZE属性指定相对尺寸。 另外， 如果用户想要设置网页的背景色和文字
4、颜色，可以将标记扩充为： ,10.2.3 超文本链接指针,1 统一资源定位器URL,统一资源定位器（Uniform Resource Locator）是文 件名的扩展。一个URL包括了以上所有的信息。它的 构成为： protocol:/ machine.name:portdirectoryfilename,2 建立一个链接,（1）链接到其它站点 在HTML文件中用链接指针指向一个目标。其基本格式为： zzz 其中zzz可以是文字或图片并显示在网页中。另外，href中的h表示超文本，而ref表示“访问”或“引用”的意思。例如： 武汉工业学院,标识一个目标的方法为： . NAME属性将放置该标记的
5、地方标记为“KKK”，KKK是一个全文唯一的标记串 做好标记后，可以用下列方法来指向它。 转向下一处 ,（2）同一个文件中的链接,10.2.4 在HTML文件中使用图像,1在HTML文件中显示图像,在HTML网页中加图像是通过标记实现的，它有几个较为重要的属性。其中： SRC属性：指明图形的URL地址； HEIGHT属性：决定图形的高度； WIDTH属性：决定图形的宽度； BORDER属性：决定边框线的宽度，0-表示无边框； ALT属性：指明图像显示的备用文本；,源文件,2在HTML文件中利用图像建立链接,如果在链接标记和的中间放置一个标记，这个图像将会成为一个可击点，产生一个链接。例如： 当
6、用户单击这个图像后，浏览器就会显示“default.asp”这个文件的内容了。,8.2.5 框架结构的使用,框架内容的HTML语法为： ,框架结构标记主要有两个属性：ROWS和COLS，它们可以将浏览器页面分为N行M列，, 武汉工业学院 ,SRC属性： 指定框架单元的URL源。 NAME属性 ： 为该框架单元起个标识名，主要用来为将来改变框架内容提供入口。 SCROLLING属性 设置框架是否使用滚动务。有YES、NO和AUTO三个值，分别表示强制使用滚动条，禁止使用滚动条和自动判断使用滚动条。,标记有以下主要属性：,10.2.6 表单的应用,HTML提供的表单是用来将用户数据从浏览器传递给W
7、eb服务器的。 实现在服务器端的操作有许多种方式，其中ASP（动态服务网页）的方式就是一种，它可以通过ADO方式与多种数据库相连。 ASP（Active Server Page）程序是负责处理HTML文件与运行在服务器端的程序之间的数据交换。,1. 什么是表单,表单就是为Internet网络用户在浏览器上建立一个交互接口，使Internet网络用户可以在这个接口上输入自己的信息，然后使用提交按钮，将Internet网络用户的输入信息传送给Web服务器。 在表单的开始标记中带有两个属性：ACTION和METHOD。书写表单的HTML格式如下 ,2. 表单的标记,FORM标记有以下主要属性： （1
8、）ACTION属性：是用来指出在服务器端激活的程序例如： 当用户点击“提交”按钮以后，Web服务器上的“login.asp”将接收用户输入的信息，以登记用户信息。,2. 表单的标记,（2）METHOD属性是用来说明从客户端浏览器将Internet网络用户输入的信息传送给Web服务器时所使用的方式，它有两种方式：POST和GET。,2. 表单的标记,下面是INPUT标记的标准格式： 其中TYPE属性是用来说明提供给用户进行信息输入的类型是什么。其取值如下： TYPE = “TEXT” 表示在表单中使用单行文本框 = “PASSWORD” 表示在表单中为用户提供密码输入框 = “RADIO” 表示
9、在表单中使用单选按钮 = “CHECKBOX” 表示在表单中使用多选按钮 = “SUBMIT” 表示在表单中使用提交按钮 = “RESET” 表示在表单中使用重置按钮,3HTML中的INPUT标记,用一个例子说明文字输入和密码输入的制作。,（1）文字输入和密码输入, 这是个测试页 请输入您的真实姓名: 您的主页的网址: 密码: ,（2）复选框（Checkbox） 和 单选框（Radio Button）, 这是个测试页 选择一种你喜爱的水果: 香蕉 草莓 橘子 选择你所喜爱的运动: 足球 篮球 排球 ,（3）按钮的制作,其典型的格式： 。 其典型的格式： ,（4）HTML中的SELECT标记,
10、武汉工业学院 请从下面课程中选择几门选择课: 网络技术 书法 音乐欣赏 现代文学 多媒体技术 ,10.2.7 HTML中的表格,下面看一个表格的例子,从这个例子可以看出一个表格有一个标题（Caption），它表明表格的主要内容，并且一般位于表的上方；表格中由行和列分割成的单元叫做“表元”（Cell），它又分为表头（用TH标记来表示）和表数据（用TD标记来表示）；表格中分割表示的行列线称为“框线”（B order）。,一个表格的基本框架如下所示： ,1表格的标记,（1）TABLE标记,BORDER属性，指定围绕表格的框的宽度（只能用像素）。 CELLSPACING属性，指定框线的宽度 CELLP
11、ADDING属性，用于设置表元内容与边框线之间的间距。 ALIGN属性用来控制表格本身在页面上的对齐方式。 WIDTH属性，用来设置表格的宽度，可以以像素为单位，也可用占浏览器窗口的百分比来定义。,TABLE标记有以下五种属性：,（2）CATION标记,CATION标记用来标注表格标题的。如： 表格标题强调 . ,（3）TR标记,例如，要使表行中各单元的内容水平方向右对齐、垂直方向居中对齐，可使用如下源代码： ,（4）TH标记,TH标记用来表示一个表行中的各个单元。,例如 登记照 表示这个表项标题将横跨三个表项的位置； 登记照 表示这个表项标题将纵跨三个表项的位置； 另外每个表元还可以设置其背
12、景颜色。例如 登记照,2表格使用实例,下面就给出一个具体的实例, 表格综合实例 大奖赛登记表 报名号 757 性别 女 姓名 江小丽 , 推荐单位 宇宙公司 ,下面就给出一个具体的实例, 推荐单位 宇宙公司 ,10.2.1 JavaScript的基础知识,10.2.2 JavaScript语言,10.2.3 JavaScript中的函数,10.2.4 JavaScript的事件,10.2 网页脚本语言 JavaScript,10.2.5 JavaScript中的对象,返 回,10.2.1 JavaScript的基础知识,脚本语言是针对HTML语言不能很好地解决动态交互这个缺点而引入的，它能对W
13、eb页面中的元素进行控制。 目前比较流行的脚本语言有二种： 网景公司（Netscope）的JavaScript 微软公司（Microsoft）的VBScript。,1 什么是脚本语言,JavaScript的编程工作复杂与否和HTML文档所提供的功能大小密切相关，下面用一个简单的例子来介绍它的编程特点 。,3一 个 简 单 的 例 子,HTML HEADTITLEThis is a test/TITLE /HEAD BODY 你好 SCRIPT LANGUAGE=“JavaScript“ document.write “Hello，JavaScript! “ /SCRIPT /BODY /HTM
14、L,JavaScript源代码被嵌在一个HTML文档中，而且它可以出现在文档头部（HEAD节）和文档体部 (BODY节 )。SCRIPT标记的一般格式为： SCRIPT LANGUAGE=“JavaScript“ !- JavaScript语 句 串 - /SCRIPT 为了使老版本的浏览器（即Navigator2.0版以前的浏览器）避开不识别的“JavaScript语句串”，用JavaScript编写的源代码可以用注解括起来，即使用HTML的注解标记!-，而Navigator2.x可以识别放在注解行中的JavaScript源代码。 说明：SCRIPT标记可声明一个脚本程序，LANGUAGE属
15、性声明该脚本是一个用JavaScript语言编写的脚本。在和之间的任何内容都视为脚本语句，会被浏览器解释执行。在JavaScript脚本中，用“/”作为行的注释标注。,10.2.2 JavaScript语言,在JavaScript中，数据类型是十分宽松的，程序员在声明变量时可以不指定该变量的数据类型，JavaScript会自动地按照需要来分配适当的数据类型。这一点和JAVA或C+是截然不同的。JavaScript有以下几种基本的数据类型：,1JavaScript数据类型,（1）数字类型 如: 34，3.14表示为十进制数； 034表示为八进制数，用十进行表示其值为28； 0x34表示为十六进制
16、数，用十进行表示其值为52。 （2）字符串类型 如：“Hello!“；,（3）逻辑值类型 其取值仅可能是“真”或“假”，用 True或False来表示。 （4）空值 当你定义一个变量后未赋初值时，则该变量为空值。例如： var ch1; /此时ch1就为空值，它不属于任何一种数据类型。,它的定义要求与C语言相仿，例如以字母或下划线开始 ，变量不能是保留字（如int，var等），不能使用数字作为变量名的第一个字母等等。但它的定义方法与C语言有很大的差别。 C语言的变量定义格式为： int a=1; float f1=3.14 而JavaScript的变量定义格式: Var 变量名； 或者 Var 变量名=初始值； JavaScript 并不是在定义变量时来说明变量的数据类型，而是在给变量赋初始值时来确定该变量的数据类型；JavaScript对
