《HTML语言初级教学》由会员分享，可在线阅读，更多相关《HTML语言初级教学（89页珍藏版）》请在金锄头文库上搜索。
1、第2章 HTML语言基础,内容提要,本章首先介绍HTML的发展历史 然后介绍HTML的基本框架 详细介绍HTML的各种常用标记：文字标记、图片标记、超级链接标记，等等 介绍CSS的基本使用方法，如何让CSS与HTML协同工作 介绍JavaScript中的变量、数组、表达式、运算符、流程控制语句 JavaScript的函数、内置对象、浏览器对象的层次和DOM模型的建立和使用,2.1 HTML语言概述,要把信息发布到全球，就必须要使用能够被大众接受的语言，也就是使用一种大多数计算机能够识别的语言。 在Internet上，通常使用的发布语言是HTML 。,案例名称：HTML网页框架 程序名称：2-0
2、1.htm,HTML页面的基本结构,HEAD头元素,案例名称：HTML网页框架 程序名称：2-02.htm我的第一页面,2.2 HTML的常用标记,HTML的常用标记有一些共同特点：都放在BODY标记里面。 常用的标记有字体标记、图片标记、超级链接、列表、表格和表单等.,2.2.1 字体标记,案例名称：使用字体标记 程序名称：2-03.htm本书的特色是以案例为主,全书有30个完整的案例,2.2.2 图片标记,案例名称：使用图片标记和 基本语法： 程序名称：2-04.htm,2.2.3 超级链接,案例名称：使用超级链接和 基本语法： 链接文字内容 程序名称：2-05.htm其他文件上一个页面位
3、于北京的清华大学,2.2.4 列表,有序号列表标识和; 无序号列表标识和.每个列表项前使用. 案例名称：使用有无序列表 程序名称：2-06.htm有序列表热爱祖国热爱人民无序列表热爱祖国热爱党,2.2.5 table标记的使用,是表格的基本标记。代表表格的行，代表表格的列。,案例名称：基本表格 程序名称：2-07.htm第一行第一列第一行第二列 第二行第一列第二行第二列 第三行第一列第三行第二列,表格的灵活应用 ROWSPAN:单元格的垂直跨越 COLSPAN：单元格的水平跨越,案例名称：跨行和跨列 程序名称：2-08.htm跨两行跨两列10001000300020004000,Cellpad
4、ding和Cellspacing属性,Cellpading的意思是单元格的边距,指的 是字与单元格边框的距离。Cellspacing的意思是单元格间距,指的是 单元格之间的距离。,案例2-1：表格的样式 和之间：存放要强调的文字,案例名称：表格的样式 程序名称：StyleTable.htm序号 大学 师资评分 学生评分 设备评分 , 1清华大学100100 1002北京大学10010097,2.3 表单,表单的功能是收集用户信息实现系统与用 户交互。比如E-mail信箱的注册页面就是一 个十分典型的表单页面。表单信息的处理过程如下：当单击表单中 的提交按钮时，表单中的信息就会上传到服 务器中，
5、然后由服务器端的应用程序（例如 CGI，ASP，PHP，JSP等）进行处理，处理 后将用户提交的信息存储在服务器端的数据 库中，或者将有关信息返回到客户端浏览器 上。,2.3.1 表单头及其属性,1.标识:设定不单的起止位置,并指定处理表单数据程序的URL地址以及表单数据的提交方法,语法如下:,2.标识 标识：作用是为用户提供信息请求入口。语法如下：基本属性有：(1)name属性：定义输入表单的名称(2)type属性：确定表单的类型。基本表单类型有：text:单行文本输入。password:密码输入，用星号表示。hidden:隐藏按钮checkbox:000复选框radio:单选框,submi
6、t:表单提交按钮，作用是将表单数据提交到服务器。 reset:表单复位按钮，作用是清除撤销或更改表单数据。 file:文件插入按钮 image:图像按钮 Button：普通按钮,案例名称：表单的基本使用方法 程序名称：2-10.htm用户名： 密码： ,2.3.2 表单中常用控件,在常用的表单制作过程中，经常遇到的是按钮制作、输入元素的制作等。常见的表单控件包括文本框、文本域、密码框、多选框、单选框和下拉列表框，等等。,2.3.3 块级元素 案例名称：使用块级元素 程序名称：2-12.htm I am a layer! I am a Span! ,2.4 JavaScript编程技术,Java
7、Script是一种Script脚本语言，所谓的脚本语言就是可以和HTML语言混合使用的语言。VBScript也是Script语言中的一种，但是VBScript只有微软的浏览器Internet Explore（IE）才能完全支持。而JavaScript则不管是什么浏览器都可以运行，这也是JavaScript的一个优点。,JavaScript是一种高级的脚本描述性语言，并不需要依赖于特定的机器和操作系统，所以说它是独立于操作平台的。JavaScript 1.0最初是在Netscape Navigator 2.0及Netscape LiveWire 1.0上实现的，目前JavaScript的版本是J
8、avaScript 1.2。,从本质上说JavaScript和Java没有什么联系，但是同时作为语言，可以从三个角度来区别。 （1）JavaScript是解释型的语言，当程序执行的时候，浏览器一边解释一边执行。而Java是编译型的语言，必须经过编译才能执行。 （2）代码格式不一样，Java代码经过编译后成为二进制文件，而JavaScript是纯文本的文件。,（3）在HTML中的嵌入方式不一样。Java 可以通过小应用程序嵌入HTML文件，而 JavaScript可直接写入一个文本文件或HTML 文件中。,网页中引入JavaScript 案例名称：第一个JavaScript程序 程序名称：2-2
9、4.htm document.write(“这是以JavaScript输出的!“) ,变量与数组,变量和数组是JavaScript的基础，JavaScript和C语言属于同一语系，许多基本语法一样。不管是在JavaScript中还是在其他程序语言中，最基本的概念是变量。 JavaScript定义变量只有一个关键字“var”，在JavaScript中定义一个用户名变量的语法为：“var strUserName;”。,变量,案例名称：使用变量 程序名称：2-25.htmvar strWelcome = “欢迎您！“;var iCounter = 10;iCounter = iCounter + 1
10、;document.write(strWelcome);document.write(iCounter);,变量命名需要遵守以下六个规则,（1）变量命名必须以一个英文字母或是下划线为开头，也就是变量名第一个字符必须是A到Z或是a到z之间的字母或是“_”。 （2）变量名长度在0255字符之间。 （3）除了首字符，其他字符可以使用任何字符、数字及下划线，但是不可以使用空格。 （4）不可以使用JavaScript的运算符号，例如：+，等。 （5）不可以使用JavaScript用到的保留字，例如：sqrt（开方），parseInt（转换成整型）等。 （6）在JavaScript中，变量名大小写是有所区
11、别的，例如：变量s12和S12是不同的两个变量。,声明数组,用new和Array关键字，new代表建立一个新的对象，Array是JavaScript内置的一个对象 由于JavaScript区分大小写，所以Array的首字母必须是大写。,使用数组,案例名称：使用数组 程序名称：2-26.htmvar arrUserName = new Array(2);arrUserName0 = “Bill“;arrUserName1 = “Bob“;document.write(arrUserName0);document.write(“);document.write(arrUserName1);docu
12、ment.write(“);,表达式与运算符,程序主要功能是运算，例如加、减、乘、除等基本操作。 算术运算符主要提供加、减、乘、除等操作，计算机中没有通常的乘号，用“*”代替。取余操作用“%”，,案例名称：算术运算符 程序名称：2-27.htmdocument.write(3*2);document.write(“);document.write(3/2);document.write(“);document.write(3%2);/取余数,逻辑运算符,逻辑运算符包括：与运算符“&”、或运算符“|”和取反运算符“！”,案例名称：逻辑运算符 程序名称：2-28.htmdocument.write
13、(true,字符串运算符的使用方法,案例名称：字符串运算符 程序名称：2-29.htmvar strHello = “网页编程“;var strResult = “你好，“;strResult += strHello;/等价于：strResult = strResult + strHello;document.write(strResult);,条件表达式,案例名称：条件表达式 程序名称：2-30.htma = (43) ? 5 : 7;b = (4“);document.write(b);,控制语句之条件语句,JavaScript提供的语句可以分为以下4大类。（1）条件和分支语句：Ifels
14、e语句，switch语句。 （2）循环语句：for语句，dowhile语句， break语句和continue语句。 （3）对象操作语句：new，this和with。 （4）注释语句：“/”或“/* */”。,if语句,案例名称：if语句 程序名称：2-31.htmvar iHour = 13;if (iHour ,switch语句,案例名称：switch语句 程序名称：2-32.htmvar val = “;var i = 5;switch(i)case 3:val = “三“; break;case 4:val = “四“; break;case 5:val = “五“; break;de
15、fault:val = “不知道“;document.write(val); ,流控制语句之循环语句,循环语句包括：for语句、while语句，循环控制转移语句continue和break语句。for语句的基本语法如下。 for (初始化部分；条件部分；更新部分) 语句块 ,for 语句,案例名称：for 语句 程序名称：2-33.htmvar iSum = 0;for(var i = 0; i ,while 语句,案例名称：while 语句 程序名称：2-34.htmvar iSum = 0;var i = 0;while( i,break语句,案例名称：break语句 程序名称：2-35.
16、htmfor(i = 1; i “);,continue语句,案例名称：continue语句 程序名称：2-36.htmfor(i = 1; i “);,JavaScript函数,函数在定义时并没有被执行，只有函数被调用时，其中的代码才真正被执行。为了实现函数的定义和调用，JavaScript语句提供了两个关键字：function和return。JavaScript函数的基本语法如下：function 函数名称（参数表） 语句块; ,函数定义和调用,案例名称：函数定义和调用 程序名称：2-37.htmfunction getSqrt(iNum)var iTemp = iNum * iNum;document.write(iTemp);getSqrt(8);,函数的返回值,案例名称：函数的返回值 程序名称：2-38.htmfunction f(y)var x = y * y;return x;for(x = 0; x “);,
