HTML+CSS+JS 入门基础.ppt

《HTML+CSS+JS 入门基础.ppt》由会员分享，可在线阅读，更多相关《HTML+CSS+JS 入门基础.ppt（142页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、目录1.HTML/CSS/JavaScript先睹为快2.HTML3.CSS4.JavaScript1.1HTML代码未使用css，JavaScript的html网页未使用css，JavaScript的html网页这是一个未使用css，JavaScript的html网页使用记事本即可编写HTML代码，扩展名是html或htm。使用浏览器就可以查看其效果。1.2CSS代码使用了css的html网页h2font-size:50pfont-size:20;font-style:italic使用了css的html网页这是一个使用了css的html网页1.3JavaScript代码使用了css和Java

2、Script的html网页h2font-size:50pfont-size:20;font-style:italicalert(这是JavaScript起的作用);使用了css和JavaScript的html网页这是一个使用了css和JavaScript的html网页1.4HTML、CSS、JavaScript的角色HTML：超文本标记语言。是网页设计的主要语言。无论网页是否包括动画、多媒体、图形等各种复杂的元素，其基本架构都是HTML.CSS：层叠样式表。是目前唯一的网页排版样式标准，弥补了HTML在网页格式化方面的不足，帮助用户对页面的布局加以更多的控制。JavaScript用于开发Int

3、ernet客户端应用程序，实现了一种实时、动态、交互的页面功能。它的出现使静态的HTML页面逐渐本客户端可做出响应的动态页面所取代。可以在HTML语言中直接编写CSS和JavaScript代码，也可以独立编写。扩展名分别是.css和.js2HTML1:HTML简介2:基本标记3:列表list4:表格table5:表单form6:框架frame7:层div2.1.1HTML概念HTMLHyperTextMarkupLanguage超文本标识语言是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档HTML文档：*.htm或*.html文件名区分大小写浏览HTML文件的

4、工具:浏览器例：NetscapeNavigator,MicrosoftIE,MazillaFireFox2.1.2HTML文档的编写方法1.手工直接编写记事本等，存成.htm.html格式，要求用户必须掌握HTML2.使用可视化HTML编辑器Frontpage、Dreamweaver等,容易产生废码2.1.3HTML文档结构myfirstpageThisismyfirsthomepage!这是我的第一张网页！2.1.3HTML文档结构标记(签)是HTML语言的基本部分，比如、。大多数标记总是成对出现，每一对标记一般都有一个开始的标记并且结束的标记总是在开始的标记前加一个斜杠。属性：HTML标记

5、有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。myfirsthomepage注意：标记不区分大小写。例都可以标记中不要有空格，否则浏览器无法识别。例错误任何空格和回车在代码中无效。插入空格和回车分别用和 属性的值可以用双引号引起来，也可以不引，最好引起来各属性之间无先后次序，属性也可省略（即取默认值）2.1.3HTML文档结构-head(title)标记出现在文档的开头部分。与之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。1:标记定义HTML文档的标题。与之间的内容将显示在浏览器窗口的标题栏。2.1.3HTML文档结构-head(meta)2:

6、标记标记定义网页的一些相关信息，例文件的关键字，作者，网页过期时间等，这些信息不会在浏览器的文档窗口显示用来标记搜索引擎在搜索你的页面时所取出的关键词。用来标记文档的作者。用来标记你的页面的解码方式。用来自动刷新网页2.1.3HTML文档结构-(head)meta编写一个网页，要求3秒钟后自动跳转到北软教育首页。myfirstpage三秒钟后本网页将自动跳转到北软教育首页2.1.3HTML文档结构-body表明是HTML文档内容主体部分。在与之间，通常都会有很多其它标记；这些标记和标记属性构成HTML文档的主体部分。自身属性主要有：1)bgcolorbgcolor属性标志HTML文档的背景颜色

7、。如：bgcolor=#CCFFCC。2)backgroundbackground属性标志HTML文档的背景图片。可以使用的图片格式为gif,jpg如：background=“images/bg.gif。3)texttext属性标志HTML文档的正文文字颜色。如：text=“#FF6666”。text定义的颜色将应用于整篇文档。2.1.3HTML文档结构-body颜色颜色名和RGB值黑色Black=”#000000”银色Silver=”#c0c0c0”Silver=”#c0c0c0”红色Red=”#ff0000”Red=”#ff0000”蓝色Blue=”#0000ff”Blue=”#0000f

8、f”白色White=”#White=”#ffffffffffff”黄色Yellow=”ffff00”Yellow=”ffff00”绿色Green=”#00ff00”Green=”#00ff00”海蓝色Aqua=”#00ffff”Aqua=”#00ffff”2.2基本HTML标记1.标题标记2.文字标记3.段落级标记4.字符级标记5.水平标尺标记6.HTML注释6.超级链接7.图像标记8.移动的文字2.2.1标题标记可显示六种大小的标题，即到，为最大，为最小HTML简介HTML简介HTML简介HTML简介HTML简介HTML简介HTML简介2.2.2文字标记文字属性标记1.文字颜色.#=RRGG

9、BB16进制数码2.文字字体.#=客户端可获得的字体3.文字大小.#=1,2,3,4,5,6,7等2.2.3.段落级标记段落标记(paragraph)换行符标记预格式化标记：HTML的段落与段落之间有一定的空隔。如果不希望出现空隔而只想换行的话，就要用到另一个元素，即元素。利用标记对网页中文字段落进行预格式化，在输入过程中，按键盘上的回车键，就可以生成一个段落。即浏览器会以文本输入格式显示用三种标记分别实现登鹳雀楼的显示2.2.4字符级标记常用字符级标记倾斜文本粗体文本下划线文本删除线文本强调文本居中显示文本空格标记 2.2.5水平线标记水平线：设定线宽：设定线长：设定对齐方式#=l

10、eft,right：设定线的颜色2.2.6HTML注释HTML文档可以插入注释。不但便于对程序排错，也使其他人更易读懂自己的代码HTML注释的格式为：源码依然存在，不会被浏览器所解释注释语句的特点是仅用于程序中某一句或一段语句的作用说明，浏览器在执行过程中将忽略掉注释语句的内容，对其视而不见。2.2.7超级链接超级链接是用锚元素定义的在元素下，有元素属性href,href的属性值为一个URL地址如：指向学院的超级链接如：普通超级链接如：普通超级链接开一个新的(浏览器)窗口(TargetWindow).2.2.7超级链接超级链接的路径绝对路径：指文件的完整路径，包括协议，主机地址等，一般用于网站

11、的外部链接。http:/ 第一季度第一季度第二季度第二季度 一月一月二月二月三月三月四月四月五月五月六月六月1000550240150027651240 30002430250012509003400 2.5.1表单formHTML表单是HTML页面与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。在HTML里，我们可以定义表单，并且使表单与CGI或ASP等服务器端的表单处理程序配合。我们在网页设计课程中不会涉及程序编制。表单是网页上的一个特定区域。这个区域是由一对元素定义的。2.5.2表单举例设计一个注册表单，输入姓名，年龄，密码，密码确认，电子邮件，性别，爱好，身份，个人

12、简历，单击提交按钮提交，单击重置按钮重置。姓名，年龄，电子邮件：text密码，密码确认：password性别：radio爱好：checkbox身份：select个人简历：textarea提交按钮：submit重置按钮：reset2.5.2表单举例2.5.2表单举例姓名密码密码确认性别男女年龄电子邮件爱好体育音乐美术身份学生教师解放军个人经历请输入个人简历2.5.2表单举例2.5.2表单举例姓名密码密码确认性别男女年龄2.5.2表单举例电子邮件爱好体育音乐美术身份学生教师解放军个人经历请输入个人简历2.5.3表单基本语法1.表单的基本语法:.action属性：用来定义表单处理程序（一个ASP、J

13、SP等程序）的位置(相对地址或绝对地址)。method定义表单结果从浏览器传送到服务器的方法，一般有两种方法：get、post。GET有数据量限制，POST无以上限制,以文件形式传输2.5.3表单基本语法2.文本框的基本语法:?文本框的名字*默认值*长度?最大输入字符数3.密码框的基本语法：数据以圆点形式显示，提高密码安全性2.5.3表单基本语法3.复选框的基本语法:在一个表单里的所有多选框可以有一个或多个被选中。/默认选中4.单选框的基本语法:一个表单里的所有变量名相同的单选框只能够有一个被选中。/默认选中各个选项的name必须一样才能达到预期效果5.标准按钮的基本语法:2.5.3表单基本语

14、法6.提交按钮和重置按钮的基本语法:7.图象域的基本语法:：相当于漂亮的submit按钮。8.隐藏域的基本语法隐藏域在网页中对用户是不可见的，用户单击提交按钮提交表单时，隐藏域的信息也被一起发送到服务器。2.5.3表单基本语法9.文本区域的基本语法:.10.下拉菜单的基本语法音乐美术体育2.5.3表单基本语法TYPE此属性指定表单元素的类型。可用的选项有TEXT、PASSWORD、CHECKBOX、RADIO、SUBMIT、RESET、FILE、HIDDEN和BUTTON。默认值为TEXT。NAME此属性指定表单元素的名称。例如，如果表单上有几个文本框，可以按照名称来标识它们-TEXT1、TE

15、XT2或用户选择的任何名称。VALUE此属性是可选属性，它指定表单元素的初始值SIZE此属性指定表单元素的显示长度。用于文本输入的表单元素即输入类型是TEXT或PASSWORD的MAXLENGHT此属性用于指定在TEXT或PASSWORD表单元素中可以输入的最大字符数。默认值为无限的CHECKED此属性是一个Boolean属性，指定按钮是否是被选中的。当输入类型为RADIO或CHECKBOX时，使用此属性。SRCSRC=URL。当使用IMAGE作为输入类型时使用此属性，它用于标识图像的位置。2.6.1框架举例2.6.1框架举例框架的嵌套框架的嵌套2.6.2框架简介框架是一种在一个网页中显示多个

16、网页的技术，通过超级链接可以为框架之间建立内容之间的联系，从而实现页面导航。在网页文件中，框架常用于网页的布局。框架的基本结构分为框架集frameset和框架frame两个部分。使用框架集的页面的标记将被标记替代，然后在利用标记去定义框架结构。每个框架frame由一个单独的HTML页面组成。框架支持嵌套。当一个框架集中既有左右分割，又有上下分割是，就要用到框架嵌套。2.6.2framset基本语法框架由一对定义有两个属性：rows和colsrows定义上下分割的框架的大小；cols定义左右分割的框架的大小；在定义大小时，rows和cols可使用相对大小或以百分比为单位2.6.2frame基本语

17、法的属性src：在本框架里显示的网页的URL。frameborder：是否显示边框name：定义该框架的名字。这个名字可以被一些网页元素引用，如被元素引用。noresize：框架在浏览器里不可以被调整大小。scrolling：是否显示滚动条。yes,no,auto2.6.2frame基本语法left.html:快乐的生活在当前框架中打开超链接页面默认就是在当前框架页中打开,也可以采用target=“_self”在指定框架中打开超级链接页面target=“name”新开窗口打开链接页面target=“_blank”跳出整个框架集target=“_parent”2.7.1图层图层也是网页制作中用于

18、定位元素或布局的一种技术，图层比表格的布局更加灵活，它能够将层中的内容摆放到浏览器的任意位置，放入到层中的HTML元素包括：文字、图像、动画甚至是图层。一个网页中可以使用多个层，层与层之间可以重叠，在网页制作中，使用层可以将网页中的任何元素布局到网页的任意位置，同时可以以任何方式重叠。可以想象在word文档中不同图片之间的上下左右位置和前后重叠关系。图层也可以实现嵌套的功能。嵌套图层最主要的特点就是可以保证子层永远位于父层之上。2.7.2图层举例将元素分组第一层这是第一部分内的一个段落元素第一层的内容。该部分之外第二部分这是第二部分内的一个段第一层的内容。2.7.3图层属性讲解基本语法/设置图

19、层背景色./图层的具体内容3.1CSS的作用CSS是CascadingStyleSheets(层叠样式表)的简称.,是一系列格式规则，它们控制网页内容的外观。css简单来说就是用来美化网页用的。使用CSS样式可以非常灵活并更好地控制确切的网页外观，从精确的布局定位到特定的字体和样式。即使不改动HTML，只是通过添加不同的CSS规则，就可以得到各种不同样式的网页。可以通过简单的更改CSS文件,改变网页的整体表现形式,从而减少我们的工作量,所以她是每一个网页设计人员的必修课.CSS可以嵌入到html文档中，也可以单独文件形式存在，扩展名是.css3.1CSS的作用当样式定义在外部文件中时，一个样式

20、表可以用于多个页面，甚至整个工作点，因此具有更好的易用性和扩展性。总的来说，CSS可以完成下列工作：（1）弥补HTML对网页格式化功能的不足，如段落间距、行距等。（2）设置字体变化和大小。（3）设置页面格式的动态更新。（4）进行排版定位。CSS的特点（1）控制页面中的每一个元素（精确定位）。（2）对HTML语言处理样式的最好补充。（3）把内容和格式处理相分离，减少工作量。3.2样式表规则CSS的样式规则css样式规则由两部分组成：选择器和声明。选择器是样式名称（如TR或P）。声明是用于定义样式元素。pfont-style:italic;font-weight:bold;color:limegr

21、een .water color:blue 用法：用法：用法：用法：RuleSelector property:value;property:value;.规则选择器规则选择器声明声明属性属性属性值属性值3.3样式表中的选择器1：简单选择器(仅描述元素，而不考虑该元素在文档结构中的位置)1.1HTML选择器-选择器是HTML标记的名称1.2类选择器使用HTML元素的CLASS属性1.3ID选择器使用HTML元素的ID属性2：上下文选择器(引用元素的上下文)3.3样式表中的选择器1.1：HTML选择器示例选择器示例h1,h2,h3,h4,h5,h6color:greenPfont-style:i

22、talic;font-weight:bold;color:red测试HTML选择器这些选择器使用HTML元素的名称唯一区别是删除了尖括号。3.3样式表中的选择器1.2：类选择器示例：类选择器示例.watercolor:blue;text-align:rightp.dangercolor:red;text-align:center测试CSS测试水测试危险无样式3.3样式表中的选择器1.3：ID选择器示例ID选择器#controlcolor:red这是火焰的颜色这是火焰的颜色本段没有应用样式3.3样式表中的选择器所有的HTML标签都可以作为类选择器。省略HTML标记的类选择器是最常用的CSS方法，

23、使用这种方法，可以很方便的在任意元素上套用预先定义好的类样式HTML页面中ID参数指定了某个单一元素，ID选择器用来对这个单一元素定义单独的样式。由于ID选择器局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。ID是先给某个元素定义标签，再给它定义样式；class是先定义好一种样式，再套给多个元素。用多个相同ID“一般情况下”也能正常显示。但是当你需要用JavaScript通过id控制这个元素时(如div)，那就会出现错误3.3样式表中的选择器2：上下文选择器示例：上下文选择器示例acolor:red;font-size:20tableacolor:green;font-size

24、:25tablea:hovercolor:blue北软教育北软教育北软教育3.3样式表中的选择器2：上下文选择器示例：上下文选择器示例上下文选择器BODYcolor:blue;background:lavender;font-family:Arial;ULcolor:redulacolor:green;font-size:15芒果桔子苹果芒果桔子苹果3.4在HTML中引用样式表1：使用Style元素2：使用Style属性3：使用Link元素3.4在HTML中引用样式表1：使用：使用Style元素元素STYLE元素应插入文档的元素部分中，所有规则都放置在开始标记和结束标记之间。显示页面时，只有嵌

25、入了STYLE元素的文档会受到影响 H1 color:maroon;P color:hotpink;font-family:Arial;3.4在HTML中引用样式表2：使用：使用Style属性属性style属性用于将样式表应用于单个元素。直接将在HTML标记里加入style参数，而style参数的内容就是CSS的属性和值。本段应用了内嵌样式本段以默认样式显示。您能发现本行中的不同之处吗？3.4在HTML中引用样式表3：使用：使用Link元素链入外部样式表元素链入外部样式表链入外部样式表是把样式表保存为一个样式表文件，然后在页面中用标记链接到这个样式表文件，这个标记必须放到页面的区内设置属性。3

26、.5样式表属性类型CSS属性值字体属性font-familyArial，serif，宋体font-sizeSmall，medium，large或直接指定字体大小font-stylenormal,italicfont-weightnormal,bold,lighter,100,200文本属性text-alignleft,right,center,justifytext-indent度量或%text-decorationnone,blink,underline,overline,line-throughtext-transformnone,capitalize,uppercase,lowercas

27、evertical-alignBaseline,super,sub,top,text-top,middle-bottom,text-bottomword-spacing度量letter-spacing度量3.5样式表属性类型CSS属性值框属性borderNone,solid,double,ridge,inset,outset,groove,dotted dashedborder-style同上border-width度量，thick，medium，thinborder-color#RRGGBB，颜色名称margin-top度量或%Margin-left度量或%定位属性top度量width度量或

28、%height度量或%left度量颜色属性color#RRGGBB，颜色名称background-color#RRGGBB，颜色名称，transparentbackground-imageurlbackground-repeatrepeat,repeat-x,repeat-y,no-repeatJavaScriptJavaScript概述JavaScript基本语法JavaScript事件JavaScript对象4.1.1JavaScript先睹为快举例举例在在HTML页面中显示页面中显示“你好你好,欢迎学习欢迎学习JavaScript！”创建交互式的网页创建交互式的网页允许用户以适当的格式输

29、入数据；使用弹出窗口为用户显示信息等控制浏览器的行为控制浏览器的行为 设置页面的背景颜色；在状态栏显示信息等4.1.1JavaScript先睹为快用HTML代码实现在页面中显示“你好,欢迎你学习JavaScript!”1、在、在HMTL中嵌入中嵌入JavaScriptdocument.write(你好，欢迎你学习JavaScript！)2、链接、链接JavaScript文件文件链接JavaScript代码test.js文件要显示的内容如下：document.write(你好，欢迎你学习JavaScript！)4.1.1JavaScript先睹为快functioncheckPw()fm=docu

30、ment.form1;if(fm.pw2.value!=fm.pw1.value)alert(密码不符，请重新输入);document.form1.pw2.select();elsealert(谢谢你，+fm.name.value);姓名：输入密码：重新输入：4.1.1JavaScript先睹为快document.bgColor=green;document.fgColor=whitefunctionmOver(object,msg)status=msg;object.color=red;object.face=华文楷体;functionmOut(object)status=谢谢指向;obje

31、ct.color=blue;object.face=黑体;Javapro技术学习网4.1.2什么是JavaScriptJavaScript是由Netscape（网景）公司研发出来的一种在它的Navigator浏览器上执行的程序语言。JavaScript是一种基于对象(object-based)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java 脚本语言（Java小程序）一起实现在一个Web页面中连接多个对象，与Web客户交互作用,从而可以开发客户端的应用程序等。它是通过嵌入或调入到标准的HTML语言中实现的。它的出现弥补了HTML语

32、言只能制作静态网页的缺陷，它是Java与HTML折衷的选择 4.1.3JavaScript的基本特点1、脚本编写语言脚本语言是一种简单的程序，这些程序是由一些ASCII字符构成，可以使用任何一种文本编辑器编写。一些程序语言（如C、C+、Java等）都必须经过编译，将源代码编译成二进制的可执行文件之后才能运行，而脚本语言不需要事先编译，只要有一个与其相适应的解释器就可以执行。脚本语言是指在web浏览器内有解释器解释执行的编程语言，每次运行程序的时候，解释器会把程序代码翻译成可执行的格式。4.1.3JavaScript的基本特点2、基于对象的语言面向对象有三大特点（封装，继承，多态）却一不可通常“

33、基于对象”是使用对象，但是无法利用现有的对象模板产生新的对象类型，也就是说“基于对象”没有继承的特点。没有了继承的概念也就无从谈论“多态”。现在的很多流行技术都是基于对象的，它们使用一些封装好的对象，调用对象的方法，设置对象的属性。但是它们无法让程序员派生新对象类型。他们只能使用现有对象的方法和属性。4.1.3JavaScript的基本特点3、简单性它是一种基于Java基本语句和控制流之上的简单而紧凑的设计,从而对于学习Java是一种非常好的过渡。它的变量类型是采用弱类型，并未使用严格的数据类型。vara,b,c;a=123;b=“abc”;a=b;4.1.3JavaScript的基本特点4、

34、安全性JavaScript不能访问本地的硬盘，不能将数据存入到服务器上，不能对网络文档进行修改和删除，而只能通过浏览器实现信息浏览或动态交互5、跨平台性JavaScript依赖于浏览器本身，与操作平台无关，只要计算机上安装了支持JavaScript的浏览器（装有JavaScript解释器），JavaScript程序就可以正确执行。4.1.3JavaScript的基本特点6、动态性（交互性）JavaScript可以直接对客户输入在客户端做出响应，实现人机交互，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。事件驱动：在网页中执行了某种操作的动作，被称为“事件”(Even

35、t)，比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。4.1.3JavaScript的基本特点JavaScript的局限性各种浏览器支持JavaScript的程度是不一样的，支持和不完全支持JavaScript的浏览器在浏览同一个带有JavaScript脚本的网页时，效果会有一定的差距，有时甚至会显示不出来。当把JavaScript的一个设计目标设定为“Web安全性”时，就需要牺牲JavaScript的一些功能。这时，纯粹的JavaScript将不能打开、读写和保存用户计算机上的文件。它有权访问的唯一信息就是它所嵌入的那个Web主页中的信息，简言之，J

36、avaScript将只存在于它自己的小小世界-Web网页里。4.1.4JavaScript的作用交互式操作表单验证网页特效Web游戏服务器脚本开发等4.1.5其他脚本语言JScript:Microsoft公司在Netscape公司发布的JavaScript的基础上，也开发了自己的JavaScript规范，叫JScriptECMAscript:国际上通用的标准化版本的JavaScript，是未来JavaScript的发展方向VBScript：Microsoft开发的VB家族的成员，与JavaScript运行原理相同。但是，目前只有IE浏览器支持VBScript注意：JavaScript也有服务器

37、端和客户端两种形式，客户端JavaScript就是指把JavaScript解释器嵌入到web浏览器中，这是迄今为止最为普通的JavaScript，一般提到的JavaScript都是指客户端JavaScript4.1.6JavaScript和Java的区别Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发；Java的前身是Oak语言。JavaScript是Netscape公司的产品，是为了扩展NetscapeNavigator功能而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言，它的前身是LiveScript；4.1.6JavaScri

38、pt和Java的区别JavaScript是脚本语言，是一种基于对象（ObjectBased）和事件驱动（EventDriver）的编程语言。因而它本身提供了非常丰富的内部对象供设计人员使用。不支持继承和多态。Java是面向对象的，即Java是一种真正的面向对象的语言，即使是开发简单的程序也必须设计对象。支持封装、继承和多态。4.1.6JavaScript和Java的区别JavaScript与Java在浏览器中执行的方式不一样。JavaScript是一种解释性编程语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户端，即JavaScript语句本身随Web页面一起下

39、载下来，由浏览器解释执行。Java的源代码在传递到客户端执行之前，必须经过编译，因而客户端上须具有相应平台上的解释器，传到客户端的是编译后的字节码。4.1.6JavaScript和Java的区别两种语言所采取的变量是不一样的。Java采用强类型变量检查，即所有变量在编译之前必须声明为某一指定类型。如:intx=1234;Strings=“abcd”;JavaScript中是弱类型变量。统一采用var声明，可赋各种数据类型值。vara,b,c;a=123;b=“abc”;a=b;4.1.6JavaScript和Java的区别Java是一种与HTML无关的格式，必须通过像HTML中引用外媒体那么进

40、行装载，其代码以字节代码的形式保存在独立的文档中。在HTML文档中，Java使用.来标识。JavaScript的代码是一种文本字符格式，可以直接嵌入或间接调入到HTML文档中，并且可动态装载。编写HTML文档就像编辑文本文件一样方便。在HTML文档中，JavaScript使用.来标识4.1.7在网页中加入JavaScript在HTML中加入JavaScript代码，必须将JavaScript代码放在与标签之间。/JavaScript语言代码；JavaScript语言代码;.JavaScript中的注释语句两种：单行注释/.与多行注释/*/。可以利用HTML注释语句“”标记JavaScript代

41、码，让那些老浏览器不执行这些JavaScript代码4.1.7在网页中加入JavaScript一个HTML文档中可以出现多个标签。JavaScript代码的出现次序就是JavaScript的执行次序。标签可出现在HTML文档的任何位置，但一般放在内部，可以早于部分执行JavaScript除了可以直接嵌入HTML文件中，也可以独立存在与HTML文件之外。可以通过设置标签中src属性来指定外部JavaScript文件的地址。4.1.8JavaScript的执行方式1直接执行在与标签中的JavaScript代码，只要不是放置在函数中的，都是属于直接执行的JavaScript代码。2与事件结合调用Ja

42、vaScript可以支持很多事件，比如说单击鼠标左键、按下键盘、移动鼠标等等。与事件结合，可以调用执行JavaScript的函数。4.2.1数据类型数值型：整数和浮点数统称为数值。例如85或3.1415926等。字符串型：由0个,1个或多个字符组成的序列。在JavaScript中，用双引号或单引号括起来表示，如“您好”、学习JavaScript等。逻辑（布尔）型：用true或false来表示。空（null）值：表示没有值，用于定义空的或不存在的引用。要注意，空值不等同于空字符串或0。未定义（undefined）值：它也是一个保留字。在两种情况下可能得到一个未定义的值，一种是根本不存在的对象，另

43、一种就是虽然已经声明，但却没有赋值。4.2.1数据类型null是一个特殊的数据类型，其所代表的意思为“空”。需要注意，这个“空”并不代表是0或空字符串。数字0代表的是数字，是数字型的数据；空字符串代表的是长度为0的字符串，是字符串类型的数据。而null代表没有值，不是一个有效的数字、字符串，也不是数组、对象和函数，什么数据类型都不是。undefined也是一个特殊的数据类型，只有定义了一个变量但没有为该变量赋值、使用了一个并未定义的变量、或者是使用了一个不存的对象的属性时，JavaScript才会返回undefined。除了以上五种基本的数据类型之外，JavaScript还支持复合数据类型，复

44、合数据类型包括对象和数组两种。4.2.2变量JavaScript中的变量是没有类型或者说是弱类型的，这就意味着在JavaScript中的变量可以是任何一种数据类型。1变量定义在JavaScript声明一个变量时，可以使用以下方式实现：varup,down,left,right;/大小写敏感也可以直接给它赋值，如下：x=3;2变量的作用范围当在一个函数之外定义一个变量，那这个变量就叫做全局变量。全局变量可用于当前所有的文档。在函数内部定义的变量则叫做局部变量，它只作用于函数内部。4.2.2变量使用变量注意事项：2.6.4.1重复定义变量：后者覆盖前者2.6.4.2变量必须要先声明后使用：否则出错

45、。2.6.4.3给未声明的变量赋值：可以2.6.4.4引用未赋值的变量：undefinedvarx;/声明一个为赋值的变量，它的值是undefined。alert(i);/使用未声明的变量将引发错误。d=123;/给未声明的变量赋值，将创建该变量。4.2.3常量1整型常量整型常量整型常量可以使用十六进制、八进制和十进制表示其值。2浮点数常量浮点数常量有小数和指数两种表示方式，如3.1415926、-3.1E12、1e12和2E-12。3字符串常量字符串常量字符串是由单引号（）或双引号（“）括起来的字符序列。其中字符序列的个数可以是零个或多个。单引号所括起来的字符序列里可以包括双引号，而双引号所

46、括起来的字符序列里也可以包含单引号。4.2.3常量4布尔常量布尔常量布尔类型只有两种值：true和false。5数组常量数组常量数组常量是零或更多表达式的列表，它包含在一对方括号内。使用数组常量来创建一个数组时，它的元素和长度由所指定的值进行初始化。例如下面常量有3个元素，其长度为3。apple=fruit,China,vitamin不必在数组常量中指定所有的元素。如果在一行中输入两个逗号，它会自动为没有指定的元素留出空间，如下例所示：God=Belial,Angel“该数组包含两个元素值和一个空元素，要注意的是，如果把逗号放到数组的最后，那它将会被忽略不计。4.2.4运算符算术运算符赋值运算

47、符关系运算符逻辑运算符位运算符条件运算符其他运算符4.2.4运算符var x=11;var y=5;with(document)write(x=11,y=5);write(x+y 是是,x+y);write(x-y 是是,x-y);write(x*y 是是,x*y);write(x/y 是是,x/y);write(x%y 是是,x%y);write(+x 是是,+x);write(-y 是是,-y);4.2.4运算符var x=5;/x 是数值是数值5var y=5;/y 是字符串是字符串5var z=6;/x 是数值是数值6with(document)write(x=5,y=5,z=6);w

48、rite(x=y 吗？吗？,x=y);write(x=y 吗？吗？,x=y);write(x!=y 吗？吗？,x!=y);write(x!=y 吗？吗？,x!=y);write(x=z 吗？吗？,x=z);write(y=z 吗？吗？,y=z);/类型自动转换类型自动转换4.2.4运算符var t=true;var f=false;with(document)write(true&true 的结果是的结果是,t&t);write(true&false 的结果是的结果是,t&f);write(false&true 的结果是的结果是,f&t);write(false&false 的结果是的结果是,

49、f&f);write(true&(1=1)的结果是的结果是,t&(1=1);write(false&A 的结果是的结果是,f&A);write(A&false 的结果是的结果是,A&f);write(true&A 的结果是的结果是,t&A);write(A&true 的结果是的结果是,A&t);write(A&B 的结果是的结果是,A&B);4.2.5控制结构if表达式Switchwhile循环do-while循环for循环breakcontinue4.2.6函数functionJavaScript函数分为系统函数和自定义函数自定义函数定义方法function函数名(参数1,参数2)retur

50、n返回值;无论是否有返回值，都无需指定返回值类型。JavaScript中可通过arguments.Length来检查参数的个数在JavaScript中对象事件的处理通常由函数(function)担任。4.2.6函数functionfunctioncheckPassword(testObject)if(testObject.value.length4)alert(密码长度不得小于四);testObject.focus();testObject.select();请输入密码：4.2.6函数functionfunctioncheck()if(document.forms0.elements0.val