1.html/css/javascript 先睹为快 2.html 3.css 4.javascript

目录• 1.HTML/CSS/JavaScript 先睹为快

• 2.HTML

• 3.CSS

• 4.JavaScript

1.1 HTML 代码

• <html>• <head>• <title> 未使用 css ， JavaScript 的 html 网页 </title>• </head>• • <body>• <h2> 未使用 css ， JavaScript 的 html 网页 </h2>• <hr>• <p> 这是一个未使用 css ， JavaScript 的 html 网页• </body>• </html>

• 使用记事本即可编写 HTML 代码，扩展名是 html 或 htm 。• 使用浏览器就可以查看其效果。

1.2 CSS 代码

• <html>• <head>• <title> 使用了 css 的 html 网页 </title>• <style type="text/css">• h2{ font-size:50}• p{font-size:20;font-style:italic}• </style>• </head>• • <body>• <h2> 使用了 css 的 html 网页 </h2>• <hr>• <p> 这是一个使用了 css 的 html 网页• </body>• </html>

1.3 JavaScript 代码• <html>• <head>• <title> 使用了 css 和 JavaScript 的 html 网页 </title>• <style type="text/css">• h2{ font-size:50} p{font-size:20;font-style:italic}• </style>• <script type="text/JavaScript">• alert(" 这是 JavaScript 起的作用 ");• </script>• </head>• • <body>• <h2> 使用了 css 和 JavaScript 的 html 网页 </h2>• <hr>• <p> 这是一个使用了 css 和 JavaScript 的 html 网页• </body>• </html>

1.4 HTML 、 CSS 、 JavaScript 的角色

• HTML ：超文本标记语言。是网页设计的主要语言。无论网页是否包括动画、多媒体、图形等各种复杂的元素，其基本架构都是 HTML.

• CSS ：层叠样式表。是目前唯一的网页排版样式标准，弥补了 HTML 在网页格式化方面的不足，帮助用户对页面的布局加以更多的控制。

• JavaScript 用于开发 Internet 客户端应用程序，实现了一种实时、动态、交互的页面功能。它的出现使静态的 HTML 页面逐渐本客户端可做出响应的动态页面所取代。

• 可以在 HTML 语言中直接编写 CSS 和 JavaScript 代码，也可以独立编写。扩展名分别是 .css 和 .js

2 HTML

• 1:HTML 简介• 2: 基本标记

• 3: 列表 list• 4: 表格 table• 5: 表单 form

• 6: 框架 frame• 7: 层 div

2.1.1 HTML 概念

• HTML

Hyper Text Markup Language 超文本标识语言是一种用来制作超文本文档的简单标记语言。

用 HTML 编写的超文本文档称为 HTML 文档 HTML 文档： *.htm 或 *.html 文件名区分大小写

浏览 HTML 文件的工具 : 浏览器例： Netscape Navigator ,Microsoft IE,Mazilla FireFox

2.1.2 HTML2.1.2 HTML 文档的编写方法文档的编写方法

1. 手工直接编写记事本等，存成 .htm .html 格式，要求用户必须掌握 HT

ML

2. 使用可视化 HTML 编辑器 Frontpage 、 Dreamweaver 等 , 容易产生废码

2.1.3 HTML 2.1.3 HTML 文档结构文档结构

<html>

<head>

<title> my first page </title>

</head>

<body bgcolor="blue">

<p align="center">This is my first homepage!

<hr size=7 width="75%" color="red">

<p align="right"> 这是我的第一张网页！ </body>

</html>

2.1.3 HTML 2.1.3 HTML 文档结构文档结构• 标记 ( 签 ) 是 HTML 语言的基本部分，比如 <html> 、 <head> 、 <bod

y> 、 <hr> 、 <p> 。大多数标记总是成对出现，每一对标记一般都有一个开始的标记并且结束的标记总是在开始的标记前加一个斜杠。

• 属性： HTML 标记有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。

<p align=right color=red >my first homepage</p> <hr size=7 align=center width="75%" color="red" >

• 注意：标记不区分大小写。例 <html><HTML> 都可以标记中不要有空格，否则浏览器无法识别。例 < title> 错误任何空格和回车在代码中无效。插入空格和回车分别用 <br> 和属性的值可以用双引号引起来，也可以不引，最好引起来各属性之间无先后次序，属性也可省略（即取默认值）

2.1.3 HTML 2.1.3 HTML 文档结构文档结构 -head(titl-head(title)e)

• <head> 标记出现在文档的开头部分。 <head> 与 </head> 之间的内容不会在浏览器的文档窗口

显示，但是其间的元素有特殊重要的意义。

1:<title>

<title> 标记定义 HTML 文档的标题。 <title> 与 </title> 之间的内容将显示在浏览器窗口的标题

栏。

2.1.3 HTML 2.1.3 HTML 文档结构文档结构 -head(met-head(meta)a)

2:<meta> 标记 <meta> 标记定义网页的一些相关信息，例文件的关键字，作

者，网页过期时间等，这些信息不会在浏览器的文档窗口显示

<meta name="keywords" content="study,computer"> 用来标记搜索引擎在搜索你的页面时所取出的关键词。

<meta name="author" content=“liukl"> 用来标记文档的作者。 <meta http-equiv="Content-Type" content="text/html;charset=gb2312"> 用来标记你的页面的解码方式。 <meta http-equiv="refresh" content="5;URL=http://www.enet.com.cn"> 用来自动刷新网页

2.1.3 HTML 2.1.3 HTML 文档结构文档结构 -(head)meta-(head)meta• 编写一个网页，要求 3秒钟后自动跳转到北软教育首页。

• <html>• <head>• <title>my first page</title>• <meta http-equiv="refresh" content="3;URL=http://www.softedu.or

g">• </head>• <body>• <p align=“center”>三秒钟后本网页将自动跳转到北软教育首页 <

/p>• </body>• </html>

2.1.3 HTML 2.1.3 HTML 文档结构文档结构 -body-body

• <body> 表明是 HTML 文档内容主体部分。在 <body> 与 </body> 之间，通常都会有很多其它标记；这些标记和标记属性构成 HTML 文档的主体部分。

• <body> 自身属性主要有： 1)bgcolor

bgcolor 属性标志 HTML 文档的背景颜色。如： bgcolor="#CCFFCC" 。 2)background

background 属性标志 HTML 文档的背景图片。可以使用的图片格式为 gif,jpg

如： background=“images/bg.gif" 。 3)text

text 属性标志 HTML 文档的正文文字颜色。如： text=“#FF6666” 。text 定义的颜色将应用于整篇文档。

2.1.3 HTML 2.1.3 HTML 文档结构文档结构 -body-body

颜色颜色名和 RGB 值黑色 Black=”#000000”

银色 Silver=”#c0c0c0”Silver=”#c0c0c0”

红色 Red=”#ff0000”Red=”#ff0000”

蓝色 Blue=”#0000ff”Blue=”#0000ff”

白色 White=”#ffffff”White=”#ffffff”

黄色 Yellow=”ffff00”Yellow=”ffff00”

绿色 Green=”#00ff00”Green=”#00ff00”

海蓝色 Aqua=”#00ffff”Aqua=”#00ffff”

2.2.2 基本 HTML 标记• 1. 标题标记 <h#>• 2. 文字标记 <font>• 3.段落级标记 <p><br>• 4.字符级标记• 5.水平标尺标记 <hr>• 6.HTML 注释 • 6. 超级链接 <a>• 7. 图像标记 <img>• 8.移动的文字 <marquee>

2.2.2.1 标题标记• 可显示六种大小的标题，即 <H1>到 <H6> ， <H1>

为最大， <H6> 为最小 <HTML>

<HEAD><TITLE>HTML 简介 </TITLE>

</HEAD> <BODY>

<H1>HTML 简介 </H1> <H2>HTML 简介 </H2> <H3>HTML 简介 </H3> <H4>HTML 简介 </H4> <H5>HTML 简介 </H5> <H6>HTML 简介 </H6>

</BODY></HTML>

2.2.2 2.2.2 文字标记文字标记• 文字属性标记

1. 文字颜色 • <font color=#> ... </font>• #=RRGGBB 16 进制数码

2. 文字字体• <font face=“#”> ... </font>

#= 客户端可获得的字体3. 文字大小

• <font size=#> ... </font> • #=1, 2, 3, 4, 5, 6, 7 等

2.2.2.3.段落级标记

• 段落标记 (paragraph) <p>• 换行符标记 <br>• 预格式化标记 <pre> ：

• HTML 的段落与段落之间有一定的空隔。• 如果不希望出现空隔而只想换行的话，就要用到另一个元素，

即 <br> 元素。• 利用 <pre> 标记对网页中文字段落进行预格式化，在输入过

程中，按键盘上的回车键，就可以生成一个段落。即浏览器会以文本输入格式显示

• 用三种标记分别实现登鹳雀楼的显示

2.2.2.4 字符级标记• 常用字符级标记

<i>倾斜文本 </i> <b>粗体文本 </b> <u>下划线文本 </u>

<s>删除线文本 </s> <em>强调文本 </em> <center>居中显示文本 </center>

• 空格标记

2.2.2.5 水平线标记• 水平线

<hr size = #> ：设定线宽 <hr width=#> ：设定线长 <hr align=#> ：设定对齐方式 #=left, right

<hr color=#> ：设定线的颜色

• <hr size=7 align=center width="75%" color="red">

2.2.2.6 HTML 注释

• HTML 文档可以插入注释。不但便于对程序排错，也使其他人更易读懂自己的代码

• HTML 注释的格式为：

• 注释语句的特点是仅用于程序中某一句或一段语句的作用说明，浏览器在执行过程中将忽略掉注释语句的内容，对其视而不见。

2.2.2.7 超级链接超级链接是用锚元素 <a> 定义的 • 在 <a> 元素下，有元素属性 href,href 的属性值为

一个 URL地址如： <a href="http://www.enet.com.cn/eschool">指向学院的超级链接 </a>

如： <a href="top.htm">普通超级链接 </a>如： <a href="../pic/left.htm">普通超级链接 </a>

• 开一个新的 ( 浏览器 ) 窗口 (Target Window)

<a href="URL" target=“_blank"> ... </a>

2.2.2.7 超级链接

超级链接的路径• 绝对路径：指文件的完整路径，包括协议，主机地址等，一

般用于网站的外部链接。 http://www.sina.com/sports/index.html http://127.0.0.1:8080/digitalhome/a.jpg

• 相对路径：指相对于当前文件的路径，它包含了从当前文件指向目的文件的路径，一般用于网站的内部链接。

相对位置如何输入同一目录输入要链接的文档名链接上一目录先输入 ../ ，再输入目录名链接下一目录先输入目录名，后加 /

http://www.sina.com/sports/index.html

http://127.0.0.1:8080/digitalhome/a.jpg

2.2.2.8 图像标记• <img src=“ 图片名称” >

<img> 的基本属性是 src 属性， src 的属性值为所引用的图片的 URL地址。 src 属性是必须的。 src 的 URL 可以是绝对地址，也可以是相对地址 <img src="sample.jpg" width=100 height=100 > width指定宽度， height指定高度。它们的属性值可以是象素，也可以是 % 。

• 定义图片替代文本的方法是： <img src=“ 图片名称” alt=“ 这是一张图片” > 替代文本有两个作用：

• 提示：若图片下载成功，把鼠标放在图片上，会出现提示文本。• 替代：若图片下载不成功，在图片位置出现替代文本。

• 图片的对齐方式 <img src=“sample.jpg” align=“#” > #=left,right,top,middle,bottom

2.2.2.8 图像标记

• HTML 文档中的图片

• GIF （ Graphics Interchange Format ）图像 (.GIF) 支持无损压缩只支持 256 色

• JPEG （ Joint Photographic Experts Group ）图像 (.JPG) 有损压缩，但这个损失是剔除一些视觉上不易察觉的部分。通常用来保存超过 256 色的图片文件

• PNG （ Portable Network Graphics ）新兴的网络图片格式，结合了 gif 和 jpeg 的优点。可以将图片文件以最小的方式压缩而不造成图片失真支持 48bit 的色彩。

2.2.2.8 图像标记• 图像的超级链接

图像的超级链接是指整个图像的超级链接，当点击图像的任何部分时，都会打开这个超级链接。定义默认超级链接的方法是：

<a href=“http://www.enet.com.cn/eschool”><img src="sample.jpg" ></a>

• 图像的热区链接热区就是在图片中特意划分出一个热点区域。当点击

图象的热区时，才会打开这个超级链接。需要使用 map 标记指定热区。

2.2.2.9 移动的文字1. 基本语法

<marquee> ... </marquee>

2. 文字移动属性(1) 方向： direction=# #=left, right,up,down(2) 方式： behavior=# #=scroll(循环 ), slide(只走一次 ), alternate( 来回走 )(3)循环 : loop=# #= 次数；若未指定则循环不止 (infinite) (4)速度 : scrollamount=#(5)延时 : scrolldelay=#

2.3.1 无序列表

• 无序列表由 <ul> 和 <li> 元素定义的 :

<ul><li>sports</li><li>food </li><li>drink </li><li>friends </li></ul>

• 无序列表的默认符号是圆点。 <ul> 元素有 type 属性，通过定义不同的 type 属性可以改变列表的项目符号。目前， type 属性的属性值有： disc(圆 ) 、circle （圆圈）、 square （方块）

• 支持嵌套定义

2.3.2 有序列表• 有序列表由 <ol> 和 <li> 定义 :

<ol> <li> sports</li> <li> drink</li> <li> friends</li></ol>

• <ol> 元素也有自己的 type 属性， type 属性的属性值有 1 、 A 、a 、 I 、 i 等。例如，我们以 A 、 B 、 C…… 作为列表的编号

• <ol> 元素还可以定义列表的起始编号，如我们希望列表的第一个编号为 5 ，而不是 1 ，则需要定义 <ol> 元素的 start 属性

• 支持嵌套定义

2.4.1 表格的基本结构<table> 定义表格

<tr><th> 定义表头 </th>

</tr><tr> 定义表行

<td>…</td> 定义单元格</tr>……..<tr> 定义表行

<td>…</td> 定义单元格</tr>

</table>

2.4.1 表格的基本结构

• <table> 元素：定义一个表格。每一个表格只有一对 <table> 和 </table> ，一张页面中可以有多个表格。

• <tr> 元素：定义表格的行，一个表格可以有多行，所以 <tr>对于一个表格来说不是唯一的。

• <td> 元素：定义表格的一个单元格。每行可以有不同数量的单元格，在 <td> 和 </td> 之间是单元格的具体内容。

• 需要注意的是：上述的三个元素必须、而且只能够配对使用。缺少任何一个元素，都无法定义出一个表格。

• <th> 元素：定义表格的表头行，一个表格只能有一个表头行或者没有，所以 <th> 对于一个表格来说是唯一的或没有。

2.4.2 表格的属性

• 表格的属性

width 属性：指定表格或某一个表格单元格的宽度。单位可以是 % 或者象素。

height 属性：指定表格或某一个表格单元格的高度。单位可以是 % 或者象素。

border 属性：表格边线粗细bgcolor 属性：指定表格或某一个单元格的背景颜色。background 属性：指定表格或某一个单元格的背景图片。

其属性值为一个 URL地址align 属性：指定表格或某一个单元格里的内容（文本、

图片等）的对齐方式 (left,center,right) 。

2.4.3 单元格的属性• 单元格属性

valign 属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包括：

top ：顶端对齐； middle ：居中对齐； bottom ：底端对齐 ; baseline ：相对于基线对齐 ;align 属性：指定某一个单元格里的内容（文本、图片

等）的水平对齐方式（ left,center,right ）colspan ：属性值表示当前单元格跨越几列 rowspan ：属性值表示当前单元格跨越几行

2.4.4 行的属性• 行属性

1 、 valign 属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包

top ：顶端对齐； middle：居中对齐；bottom ：底端对齐。 baseline ：相对于基线对齐。

2 、 align 属性：指定表格或某一个单元格里的内容（文本、图片等）的水平对齐方式 (left,center,right)

3 、 height 属性：指定表格中某一行的高度。单位可以是 % 或者象素

2.4.5 表格的嵌套

• 在 <td> </td> 之间插入表格，实现表格嵌套<table border=3><tr><td><table border=1><tr><td>导航列表 </td></tr><tr><td> 计算机 </td></tr><tr><td>政治 </td></tr><tr><td>军事 </td></tr><tr><td> 法律 </td></tr></table></td><td>正文内容</td></tr></table>

2.4.5 表格的作用

• 表格是用于在 HTML 页面上设计数据和图像布局的常用工具，可使用表格来组织数据，控制页面布局

• 制作网页时，为了以一定的形式将网页中的信息组织起来，同时使网页便于阅读和页面美观，需要对页面的版式进行设计或进行页面布局。而表格能将网页分成多个任意的矩形区域，表格是网页制作中是常用的一种简单布局工具。

• 表格的作用一般只是控制文本和图像的显示，而不显示表格的边框

2.4.6 表格举例<TABLE BORDER = 2 BGCOLOR = lavender > <TR> <TH ALIGN = CENTER COLSPAN = 3> 第一季度 </TH>

<TH ALIGN = CENTER COLSPAN = 3> 第二季度 </TH> </TR>

<TR><TD> 一月 </TD><TD> 二月 </TD><TD> 三月 </TD><TD> 四月 </TD><TD> 五月 </TD><TD> 六月 </TD>

</TR><TR>

<TD>1000</TD><TD>550</TD><TD>240</TD><TD>1500</TD><TD>2765</TD><TD>1240</TD>

</TR>

<TR><TD>3000</TD><TD>2430</TD><TD>2500</TD><TD>1250</TD><TD>900</TD><TD>3400</TD>

</TR></TABLE>

2.5.1 表单 form

• HTML 表单是 HTML 页面与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。

• 在 HTML里，我们可以定义表单，并且使表单与CGI 或 ASP 等服务器端的表单处理程序配合。我们在网页设计课程中不会涉及程序编制。

• 表单是网页上的一个特定区域。这个区域是由一对 <form> 元素定义的。

2.5.2 表单举例

• 设计一个注册表单，输入姓名，年龄，密码，密码确认，电子邮件，性别，爱好，身份，个人简历，单击提交按钮提交，单击重置按钮重置。

姓名，年龄，电子邮件： text 密码，密码确认： password 性别： radio 爱好： checkbox 身份： select 个人简历： textarea 提交按钮： submit 重置按钮： reset

2.5.2 表单举例

2.5.2 表单举例

• <form action="" method="post" name="register" >• 姓名 <input type="text" name="name" value="lkl" disabled><br>• 密码 <input type="password" name="pwd"><br>• 密码确认 <input type="password" name="confirm"><br>• 性别 <input type="radio" name="sex" value="1" checked>男• <input type="radio" name="sex" value="2" >女 <br>• 年龄 <input type="text" name="age"><br>• 电子邮件 <input type="text" name="email"><br>• 爱好 <input type="checkbox" name="aihao" value=1checked> 体育• <input type="checkbox" name="aihao“ value=2>音乐• <input type="checkbox" name="aihao“ value=3>美术 <br>• 身份 <select name="id">• <option value="1">学生• <option value="2" selected>教师• <option value="3">解放军• </select><br>• 个人经历 <textarea rows="4" cols="50" >请输入个人简历 </textarea><br>• <input type=submit name="submit" value="提交 "> • <input type=reset name="reset" value=" 重置 "> • </form>

2.5.2 表单举例

2.5.2 表单举例• <form action="" method="post" name="register" >• <table>• <tr>• <td>姓名 </td>• <td><input type="text" name="name" value="lkl" disabled></td>• </tr>• <tr>• <td>密码 </td>• <td><input type="password" name="pwd"></td>• </tr>• <tr>• <td>密码确认 </td>• <td><input type="password" name="confirm"></td>• </tr>• <tr>• <td> 性别 </td>• <td><input type=“radio” name=“sex” value=“1” checked=“checked”>男 • <input type="radio" name="sex" value="2" >女 </td>• </tr>• <tr>• <td>年龄 </td>• <td><input type="text" name="age"></td>• </tr>•

2.5.2 表单举例• <tr>• <td>电子邮件 </td>• <td> <input type="text" name="email"></td>• </tr>• <tr>• <td> 爱好 </td>• <td> <input type="checkbox" name="aihao" value=1 checked> 体育• <input type=“checkbox” name=“aihao” value=2>音乐 • <input type="checkbox" name="aihao“ value=3>美术 </td>• </tr>• <tr>• <td>身份 </td>• <td> <select name="id">• <option value="1">学生 <option value="2" selected>教师 <option value="3">解放军• </select></td>• </tr>• <tr>• <td> 个人经历 </td>• <td> <textarea rows="4" cols="50" >请输入个人简历 </textarea></td>• </tr>• <tr align=center>• <td colspan=2 ><input type=submit name="submit" value="提交 ">• <input type=reset name="reset" value=" 重置 "></td>• </tr>• </table>• </form>

2.5.3 表单基本语法

1. 表单的基本语法 :

<form action="url" method=* name=?>...

<input type=submit> <input type=reset></form> action 属性：用来定义表单处理程序（一个 ASP 、 JSP 等程序）的位置 ( 相对地址或绝对地址 ) 。

method 定义表单结果从浏览器传送到服务器的方法，一般有两种方法： get 、 post 。

GET 有数据量限制， POST 无以上限制 , 以文件形式传输

2.5.3 表单基本语法2. 文本框的基本语法 :

<input name=? type=text value=** size=*** maxlength=?? >

? 文本框的名字** 默认值*** 长度?? 最大输入字符数

3.密码框的基本语法：数据以圆点形式显示，提高密码安全性<input name=? type=password size=*** maxlength=??>


3. 复选框的基本语法 : 在一个表单里的所有多选框可以有一个或多个被选中。<input name=? type=checkbox value=？ checked> // 默认选中

<input name=? type=checkbox value=？ >

4. 单选框的基本语法 : 一个表单里的所有变量名相同的单选框只能够有一个被选中。 <input type=radio name=sex value=**> <input type=radio name=sex value=** checked> // 默认选中各个选项的 name 必须一样才能达到预期效果

5. 标准按钮的基本语法 : <input name=? type=button value=？ >


6.提交按钮和重置按钮的基本语法 :<input type="submit" value="提交 " name=“B1">

<input type="reset" value=" 重写 " name=“B2">

7. 图象域的基本语法 : ：相当于漂亮的 submit按钮。 <input name=? type=image src=? width=? height=?>

8. 隐藏域的基本语法隐藏域在网页中对用户是不可见的，用户单击提交按钮提交

表单时，隐藏域的信息也被一起发送到服务器。 <input name=? type=hidden value=？ >

2.5.3 表单基本语法9. 文本区域的基本语法 :

<textarea name=* rows=** cols=**> ... </textarea>

10.下拉菜单的基本语法 <select name="爱好 ">

<option value=1 selected >音乐 <option value=2 >美术 <option value=3> 体育

</select>


TYPE 此属性指定表单元素的类型。可用的选项有TEXT、 PASSWORD、 CHECKBOX、 RADIO、 SUBMIT、 RESET、 FILE、 HIDDEN和 BUTTON 。默认值为 TEXT。

NAME 此属性指定表单元素的名称。例如，如果表单上有几个文本框，可以按照名称来标识它们 - TEXT1 、 TEXT2 或用户选择的任何名称。

VALUE 此属性是可选属性，它指定表单元素的初始值 SIZE 此属性指定表单元素的显示长度。用于文本输入的表单元素即输入

类型是 TEXT 或 PASSWORD 的 MAXLENGHT 此属性用于指定在 TEXT 或 PASSWORD 表单元素中可以输入的最

大字符数。默认值为无限的 CHECKED 此属性是一个 Boolean 属性，指定按钮是否是被选中的。当输入类

型为 RADIO 或 CHECKBOX 时，使用此属性。 SRC SRC="URL" 。当使用 IMAGE 作为输入类型时使用此属性，它用于

标识图像的位置。

2.6.1 框架举例<frameset rows=30%,20%,*> <frame src="left1.html" name=1 scrolling=yes> <frame src=" left4.html" name=2 > <frame src="left5.html" name=3 > </frameset>

<frameset cols=300,200,*> <frame src= "left.html" name = 1 noresize> <frame src= "left2.html" name= "2"> <frame src="right.html" name= "3"></frameset>

2.6.1 框架举例

• 框架的嵌套

<frameset rows="150,*">　 <frame src="top.html" frameborder=1 name="1" noresize> 　 <frameset cols="200,*">　 <frame src="left.html" frameborder=1 name="2" noresize> 　 <frame src="right.html" frameborder=1 name="3" noresize> 　 </frameset>

</frameset>

2.6.2 框架简介

• 框架是一种在一个网页中显示多个网页的技术，通过超级链接可以为框架之间建立内容之间的联系，从而实现页面导航。

• 在网页文件中，框架常用于网页的布局。

• 框架的基本结构分为框架集 frameset 和框架 frame两个部分。

• 使用框架集的页面的 <body> 标记将被 <frameset> 标记替代，然后在利用 <frame> 标记去定义框架结构。

• 每个框架 frame 由一个单独的 HTML 页面组成。

• 框架支持嵌套。当一个框架集中既有左右分割，又有上下分割是，就要用到框架嵌套。

2.6.2 framset 基本语法

<frameset rows=“#,#,#”><frame src="url"><frame src="url"><frame src="url">

</frameset>

框架由一对 <frameset> 定义<frameset> 有两个属性： rows 和 colsrows 定义上下分割的框架的大小；cols 定义左右分割的框架的大小；在定义大小时， rows 和 cols 可使用相对大小或以百分比为单位

2.6.2 frame 基本语法

• <frame> 的属性 <frame src="left.html" frameborder=1 name="2" noresize scrolling=yes>

src ：在本框架里显示的网页的 URL 。 frameborder ：是否显示边框name ：定义该框架的名字。这个名字可以被一些网页元

素引用，如被 <a> 元素引用。noresize ：框架在浏览器里不可以被调整大小。scrolling ：是否显示滚动条。 yes, no, auto

2.6.2 frame 基本语法

<frame src="left.html" frameborder=1 name="2" ><frame src="right.html" frameborder=1 name="3">

left.html:

<a href=“left1.html” target=3> 快乐的生活 </a>

在当前框架中打开超链接页面默认就是在当前框架页中打开 , 也可以采用 target=“_self”

在指定框架中打开超级链接页面 target=“name”

新开窗口打开链接页面 target=“_blank”

跳出整个框架集 target=“_parent”

2.7.1 图层

• 图层也是网页制作中用于定位元素或布局的一种技术，图层比表格的布局更加灵活，它能够将层中的内容摆放到浏览器的任意位置，放入到层中的 HTML 元素包括：文字、图像、动画甚至是图层。

• 一个网页中可以使用多个层，层与层之间可以重叠，在网页制作中，使用层可以将网页中的任何元素布局到网页的任意位置，同时可以以任何方式重叠。

• 可以想象在 word 文档中不同图片之间的上下左右位置和前后重叠关系。

• 图层也可以实现嵌套的功能。嵌套图层最主要的特点就是可以保证子层永远位于父层之上。

2.7.2 图层举例• <HTML>• <HEAD>• <TITLE> 将元素分组 </TITLE>• </HEAD>• <BODY BGCOLOR=lavender>• <DIV id = "Layer1" style="position:absolute; left:25px; top:27px; width:360px; height:315px; z-ind

ex:1; background-color:aqua; " >• <font color=red>• <H1> 第一层 </H1>• <P> 这是第一部分内的一个段落元素 </P>• <P> 第一层的内容。 </P>• <P>该部分之外 </P>• <H2> 第二部分 </H2>• <P> 这是第二部分内的一个段 </P>• <P> 第一层的内容。 </P>• </font>• </DIV>• </BODY>• </HTML>

2.7.3 图层属性讲解• 基本语法• <DIV id = “Layer1” // 图层名称• style=“position:absolute; // 定位方式 (absolute/relativ

e)• left:25px; // 设置图层左边距• top:27px; // 设置图层顶端间距• width:360px; // 设置图层宽度• height:315px; // 设置图层高度• z-index:1; // 设置图层的叠放层次。• background-color:aqua; “ > // 设置图层背景

色• ………….. // 图层的具体内容• </DIV>

3.1 CSS 的作用• CSS 是 Cascading Style Sheets( 层叠样式表 ) 的简称 ., 是一系列格式规则，它们控制网页内容的外观。 css 简单来说就是用来美化网页用的。

• 使用 CSS 样式可以非常灵活并更好地控制确切的网页外观，从精确的布局定位到特定的字体和样式。

• 即使不改动 HTML ，只是通过添加不同的 CSS规则，就可以得到各种不同样式的网页。

• 可以通过简单的更改 CSS 文件 ,改变网页的整体表现形式 ,从而减少我们的工作量 , 所以她是每一个网页设计人员的必修课 .

• CSS 可以嵌入到 html 文档中，也可以单独文件形式存在，扩展名是 .css

3.1 CSS 的作用

• 当样式定义在外部文件中时，一个样式表可以用于多个页面，甚至整个工作点，因此具有更好的易用性和扩展性。

• 总的来说， CSS 可以完成下列工作：（ 1 ）弥补 HTML 对网页格式化功能的不足，如段落间距、行距等。（ 2 ）设置字体变化和大小。（ 3 ）设置页面格式的动态更新。（ 4 ）进行排版定位。

• CSS 的特点（ 1 ）控制页面中的每一个元素（精确定位）。（ 2 ）对 HTML 语言处理样式的最好补充。（ 3 ）把内容和格式处理相分离，减少工作量。

3.2 样式表规则• CSS 的样式规则

css 样式规则由两部分组成：选择器和声明。选择器是样式名称（如 TR 或 P ）。声明是用于定义样式元素。

• p{font-style:italic; font-weight:bold; color:limegreen}

.water { color:blue }

用法：用法：RuleSelector {property:value;property: value; ... }

用法：用法：RuleSelector {property:value;property: value; ... }

规则选择器规则选择器声明声明属性属性属性值属性值

3.3 样式表中的选择器• 1 ：简单选择器 (仅描述元素，而不考虑该元素在文档结

构中的位置 )1.1 HTML选择器 --选择器是 HTML 标记的名称1.2 类选择器—使用 HTML 元素的 CLASS 属性1.3 ID选择器—使用 HTML 元素的 ID 属性

• 2 ：上下文选择器 ( 引用元素的上下文 )

3.3 样式表中的选择器

• 1.1 ： HTML 选择器示例• <HTML>• <HEAD>• <STYLE TYPE="text/css">• h1, h2, h3, h4, h5, h6 { color: green } • P{font-style:italic; font-weight:bold; color:red} • </STYLE>• </HEAD>• <Body>• <h2>测试 HTML选择器 </h2>• <p> 这些选择器使用 HTML 元素的名称唯一区别是删除了尖括号。 </P>• </BODY>• </HTML>

• 1.1 ： HTML 选择器示例• <HTML>• <HEAD>• <STYLE TYPE="text/css">• h1, h2, h3, h4, h5, h6 { color: green } • P{font-style:italic; font-weight:bold; color:red} • </STYLE>• </HEAD>• <Body>• <h2>测试 HTML选择器 </h2>• <p> 这些选择器使用 HTML 元素的名称唯一区别是删除了尖括号。 </P>• </BODY>• </HTML>


• 1.2 ：类选择器示例

• <HTML>• <HEAD>• <STYLE TYPE="text/css">• .water { color:blue; text-align:right}• p.danger { color:red; text-align:center}• </STYLE>• </HEAD>• <BODY> • <h2 class=water>测试 CSS</h2>• <P class=water>测试水 </P>• <P class=danger>测试危险 </P>• <P> 无样式 </P>• </BODY>• </HTML>


• 1.3 ： ID选择器示例

• <HTML>• <HEAD>• <TITLE>ID选择器 </TITLE>• <STYLE TYPE="text/css">• #control {color:red}• </STYLE>• </HEAD>• <BODY>• <P id="control"> 这是火焰的颜色 </P>• <P> 本段没有应用样式 </P>• </BODY>• </HTML>

• 1.3 ： ID选择器示例

• <HTML>• <HEAD>• <TITLE>ID选择器 </TITLE>• <STYLE TYPE="text/css">• #control {color:red}• </STYLE>• </HEAD>• <BODY>• <P id="control"> 这是火焰的颜色 </P>• <P> 本段没有应用样式 </P>• </BODY>• </HTML>

3.3 样式表中的选择器• 所有的 HTML 标签都可以作为类选择器。

• 省略 HTML 标记的类选择器是最常用的 CSS 方法，使用这种方法，可以很方便的在任意元素上套用预先定义好的类样式

• HTML 页面中 ID参数指定了某个单一元素， ID选择器用来对

这个单一元素定义单独的样式。由于 ID选择器局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。

• ID 是先给某个元素定义标签，再给它定义样式； class 是先定义好一种样式，再套给多个元素。

• 用多个相同 ID“ 一般情况下”也能正常显示。但是当你需要用JavaScript通过 id 控制这个元素时 ( 如 div) ，那就会出现错误


• 2 ：上下文选择器示例• <style type="text/css">• a{color:red;font-size:20}• table a{color:green;font-size:25}• table a:hover{color:blue}• </style>• <body>• <a href="http://www.softedu.com">北软教育 </a>• <table>• <tr>• <td><a href="http://www.softedu.com">北软教育 </a></td>• <td>北软教育 </td>• </tr>• </table>• </body>

• 2 ：上下文选择器示例• <style type="text/css">• a{color:red;font-size:20}• table a{color:green;font-size:25}• table a:hover{color:blue}• </style>• <body>• <a href="http://www.softedu.com">北软教育 </a>• <table>• <tr>• <td><a href="http://www.softedu.com">北软教育 </a></td>• <td>北软教育 </td>• </tr>• </table>• </body>


• 2 ：上下文选择器示例• <HTML>• <HEAD>• <TITLE>上下文选择器 </TITLE>• <STYLE TYPE="text/css">• BODY{color:blue;background:lavender;font-family:Arial;}• UL {color:red } • ul a{color:green; font-size:15}• • </STYLE>• <HEAD>• <BODY>• <UL><LI><a href="">芒果 </a><LI>桔子 <LI>苹果 </UL>• <OL><LI>芒果 <LI>桔子 <LI>苹果 </OL>• </BODY>• </HTML>

• 2 ：上下文选择器示例• <HTML>• <HEAD>• <TITLE>上下文选择器 </TITLE>• <STYLE TYPE="text/css">• BODY{color:blue;background:lavender;font-family:Arial;}• UL {color:red } • ul a{color:green; font-size:15}• • </STYLE>• <HEAD>• <BODY>• <UL><LI><a href="">芒果 </a><LI>桔子 <LI>苹果 </UL>• <OL><LI>芒果 <LI>桔子 <LI>苹果 </OL>• </BODY>• </HTML>

3.4 在 HTML 中引用样式表• 1 ：使用 Style 元素

• 2 ：使用 Style 属性

• 3 ：使用 Link 元素

3.4 在 HTML 中引用样式表• 1 ：使用 Style 元素

• STYLE 元素应插入文档的 <HEAD> 元素部分中，所有规则都放置在开始标记和结束标记之间。显示页面时，只有嵌入了 STYLE 元素的文档会受到影响

<head><STYLE TYPE="text/css">

H1 {color:maroon;}

P {color:hotpink; font-family:Arial;}

</STYLE>

</head>

<head><STYLE TYPE="text/css">

H1 {color:maroon;}

P {color:hotpink; font-family:Arial;}

</STYLE>

</head>

3.4 在 HTML 中引用样式表• 2 ：使用 Style 属性

• style属性用于将样式表应用于单个元素。直接将在 HTML标记里加入 style 参数，而 style 参数的内容就是 CSS的属性和值。

<BODY>

<P style = "color:aqua;font-Style:italic;">

本段应用了内嵌样式 <BR>

<P>本段以默认样式显示。 <BR>

<P>您能发现本行中的<SPAN style = "color:red">不同之处 </SPAN>吗？</BODY>

<BODY>

<P style = "color:aqua;font-Style:italic;">

本段应用了内嵌样式 <BR>

<P>本段以默认样式显示。 <BR>

<P>您能发现本行中的<SPAN style = "color:red">不同之处 </SPAN>吗？</BODY>

3.4 在 HTML 中引用样式表• 3 ：使用 Link 元素－－链入外部样式表

• 链入外部样式表是把样式表保存为一个样式表文件，然后在页面中用<link> 标记链接到这个样式表文件，这个 <link> 标记必须放到页面的<head> 区内

<HTML>

<HEAD><TITLE>设置属性 </TITLE>

<LINK rel=stylesheet href="stylesmine.css" type="text/css" >

</HEAD>

<BODY>

。。。。。。。。。。。。。。。。。。。。</BODY>

</HTML>

<HTML>

<HEAD><TITLE>设置属性 </TITLE>

<LINK rel=stylesheet href="stylesmine.css" type="text/css" >

</HEAD>

<BODY>

。。。。。。。。。。。。。。。。。。。。</BODY>

</HTML>

3.5 样式表属性

类型 CSS属性值

字体属性

font-family Arial， serif，宋体…font-size Small， medium， large…或直接指定字体大小font-style normal, italic…font-weight normal, bold, lighter, 100, 200…

文本属性

text-align left, right, center, justifytext-indent 度量或%text-decoration none, blink, underline, overline, line-throughtext-transform none, capitalize, uppercase, lowercasevertical-align Baseline, super, sub, top, text-top, middle-bottom,

text-bottomword-spacing 度量letter-spacing 度量

3.5 样式表属性

类型 CSS属性值

框属性

border None, solid, double, ridge, inset, outset, groove, dotted dashed

border-style 同上border-width 度量， thick， medium， thinborder-color #RRGGBB，颜色名称margin-top 度量或%Margin-left 度量或%

定位属性

top 度量width 度量或%height 度量或%left 度量

颜色属性

color #RRGGBB，颜色名称background-color #RRGGBB，颜色名称， transparentbackground-image urlbackground-repeat repeat, repeat-x, repeat-y, no-repeat

JavaScript

• JavaScript 概述• JavaScript 基本语法• JavaScript 事件• JavaScript 对象

4.1.1 JavaScript 先睹为快

• 举例

• 在 HTML 页面中显示“你好 , 欢迎学习 JavaScript ！”

• 创建交互式的网页允许用户以适当的格式输入数据；使用弹出窗口为用户显示信息等

• 控制浏览器的行为设置页面的背景颜色；在状态栏显示信息等

4.1.1 JavaScript 先睹为快

• 用 HTML 代码实现在页面中显示“你好 ,欢迎你学习 JavaScript!”

• 1 、在 HMTL 中嵌入 JavaScript　　　 <SCRIPT type="text/JavaScript“ > 　　 document.write("你好，欢迎你学习 JavaScript ！ ") 　　 </SCRIPT>　　　

• 2 、链接 JavaScript 文件　 <html>　　 <head> 　　 <title>链接 JavaScript 代码 </title>　　 </head>

<body>　　 <SCRIPT type="text/JavaScript“ src="test.js" >　　 </SCRIPT>　　 </body>

</html>

　　 test.js 文件要显示的内容如下：　 document.write("你好，欢迎你学习 JavaScript ！ ")

4.1.1 JavaScript 先睹为快• <Script type="text/JavaScript">• function checkPw() {• fm = document.form1;• if (fm.pw2.value != fm.pw1.value) {• alert("密码不符，请重新输入 ");• document.form1.pw2.select();• }• else• alert("谢谢你， "+fm.name.value);• }• </Script>

• <BODY onLoad=document.form1.name.focus()>• <FORM NAME="form1">• 姓　　名： <INPUT TYPE="text" NAME="name"><BR>• 输入密码： <INPUT TYPE="password" NAME="pw1"><BR>• 重新输入： <INPUT TYPE="password" NAME="pw2"><BR>• <INPUT TYPE="button" VALUE="填好了 " onClick=checkPw()>　• <INPUT TYPE="reset" VALUE=" 重填 ">• </FORM>• </BODY>

4.1.1 JavaScript 先睹为快• <Script type="text/JavaScript">• document.bgColor="green";• document.fgColor="white"• function mOver(object,msg){• status = msg;• object.color = "red";• object.face = "华文楷体 ";• }

• function mOut(object){• status = '谢谢指向 ';• object.color = "blue";• object.face = "黑体 ";• }• </Script>• <Body>• <FONT STYLE="cursor:hand" • onClick="location='http://www.Javapro.com.cn/'" • onMouseOver="mOver(this,' 最棒的 java学习网站 ');" • onMouseOut="mOut(this)">Javapro技术学习网 </FONT>• </Body>

4.1.2 什么是 JavaScript

• JavaScript 是由 Netscape （网景）公司研发出来的一种在它的 Navigator 浏览器上执行的程序语言。

• JavaScript是一种基于对象 (object-based) 和事件驱动 (Event Driven)并具有安全性能的脚本语言。

• 使用它的目的是与 HTML超文本标记语言、 Java 脚本语言（ Java小程序）一起实现在一个Web页面中连接多个对象，与Web客户交互作用 ,从而可以开发客户端的应用程序等。

• 它是通过嵌入或调入到标准的 HTML语言中实现的。它的出现弥补了 HTML语言只能制作静态网页的缺陷，它是 Java与 HTML折衷的选择

4.1.3 JavaScript 的基本特点• 1 、脚本编写语言

脚本语言是一种简单的程序，这些程序是由一些 ASCII字符构成，可以使用任何一种文本编辑器编写。一些程序语言（如 C 、 C++ 、 Java 等）都必须经过编译，将源代码编译成二进制的可执行文件之后才能运行，而脚本语言不需要事先编译，只要有一个与其相适应的解释器就可以执行。

脚本语言是指在 web 浏览器内有解释器解释执行的编程语言，每次运行程序的时候，解释器会把程序代码翻译成可执行的格式。

4.1.3 JavaScript 的基本特点• 2 、基于对象的语言

面向对象有三大特点（封装，继承，多态）却一不可通常“基于对象”是使用对象，但是无法利用现有的

对象模板产生新的对象类型，也就是说“基于对象”没有继承的特点。没有了继承的概念也就无从谈论“多态”。

现在的很多流行技术都是基于对象的，它们使用一些封装好的对象，调用对象的方法，设置对象的属性。但是它们无法让程序员派生新对象类型。他们只能使用现有对象的方法和属性。

4.1.3 JavaScript 的基本特点

• 3 、简单性

它是一种基于 Java 基本语句和控制流之上的简单而紧凑的设计 , 从而对于学习 Java 是一种非常好的过渡。

它的变量类型是采用弱类型，并未使用严格的数据类型。 var a,b,c;

a=123; b=“abc”; a=b;


• 4 、安全性

JavaScript 不能访问本地的硬盘，不能将数据存入到服务器上，不能对网络文档进行修改和删除，而只能通过浏览器实现信息浏览或动态交互

• 5 、跨平台性

JavaScript依赖于浏览器本身，与操作平台无关，只要计算机上安装了支持 JavaScript 的浏览器（装有 JavaScript解释器）， JavaScript 程序就可以正确执行。


• 6 、动态性（交互性）

JavaScript 可以直接对客户输入在客户端做出响应，实现人机交互，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。

事件驱动：在网页中执行了某种操作的动作，被称为“事件” (Event) ，比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。


• JavaScript 的局限性

各种浏览器支持 JavaScript 的程度是不一样的，支持和不完全支持 JavaScript 的浏览器在浏览同一个带有 JavaScript脚本的网页时，效果会有一定的差距，有时甚至会显示不出来。

当把 JavaScript 的一个设计目标设定为“Web安全性”时，就需要牺牲 JavaScript 的一些功能。这时，纯粹的 JavaScript 将不能打开、读写和保存用户计算机上的文件。它有权访问的唯一信息就是它所嵌入的那个 Web 主页中的信息，简言之， JavaScript 将只存在于它自己的小小世界 ----Web 网页里。

4.1.4 JavaScript 的作用

• 交互式操作

• 表单验证

• 网页特效

• Web游戏

• 服务器脚本开发等

4.1.5 其他脚本语言

• JScript :Microsoft 公司在 Netscape 公司发布的 JavaScript的基础上，也开发了自己的 JavaScript规范，叫 JScript

• ECMAscript:国际上通用的标准化版本的 JavaScript ，是未来 JavaScript 的发展方向

• VBScript ： Microsoft 开发的 VB家族的成员，与 JavaScript运行原理相同。但是，目前只有 IE 浏览器支持 VBScript

• 注意： JavaScript 也有服务器端和客户端两种形式，客户端JavaScript 就是指把 JavaScript解释器嵌入到 web 浏览器中，这是迄今为止最为普通的 JavaScript ，一般提到的 JavaScript 都是指客户端 JavaScript

4.1.6 JavaScript 和 Java 的区别

• Java 是 SUN公司推出的新一代面向对象的程序设计语言，特别适合于 Internet 应用程序开发； Java 的前身是 Oak 语言。

• JavaScript 是 Netscape公司的产品，是为了扩展Netscape Navigator 功能而开发的一种可以嵌入Web 页面中的基于对象和事件驱动的解释性语言，它的前身是 Live Script；


• JavaScript 是脚本语言，是一种基于对象（ Object Based ）和事件驱动（ Event Driver ）的编程语言。因而它本身提供了非常丰富的内部对象供设计人员使用。不支持继承和多态。

• Java 是面向对象的，即 Java 是一种真正的面向对象的语言，即使是开发简单的程序也必须设计对象。支持封装、继承和多态。


• JavaScript 与 Java 在浏览器中执行的方式不一样。

• JavaScript 是一种解释性编程语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户端，即 JavaScript 语句本身随Web 页面一起下载下来，由浏览器解释执行。

• Java 的源代码在传递到客户端执行之前，必须经过编译，因而客户端上须具有相应平台上的解释器，传到客户端的是编译后的字节码。


• 两种语言所采取的变量是不一样的。

• Java采用强类型变量检查，即所有变量在编译之前必须声明为某一指定类型。如 : 　　 int x=1234;　　 String s=“abcd”;

• JavaScript 中是弱类型变量。统一采用 var声明，可赋各种数据类型值。

　 var a,b,c; a=123; b=“abc”; a=b;

4.1.6 JavaScript 和 Java 的区别• Java 是一种与 HTML 无关的格式，必须通过像 H

TML 中引用外媒体那么进行装载，其代码以字节代码的形式保存在独立的文档中。在 HTML 文档中， Java 使用 <applet>...</applet> 来标识。

• JavaScript 的代码是一种文本字符格式，可以直接嵌入或间接调入到 HTML 文档中，并且可动态装载。编写 HTML 文档就像编辑文本文件一样方便。在 HTML 文档中， JavaScript 使用 <Script>...</Script> 来标识

4.1.7 在网页中加入 JavaScript

• 在 HTML 中加入 JavaScript 代码，必须将 JavaScript代码放在 <script> 与 </script> 标签之间。

<Script Language ="JavaScript“>// <Script type=“text/JavaScript“//> JavaScript 语言代码；JavaScript 语言代码 ; ....</Script>

• JavaScript 中的注释语句两种：单行注释 //…. 与多行注释 /*……*/ 。

• 可以利用 HTML 注释语句“ ” 标记 JavaScript 代码，让那些老浏览器不执行这些 JavaScript代码

4.1.7 在网页中加入 JavaScript

• 一个 HTML 文档中可以出现多个 <script> 标签。 JavaScript 代码的出现次序就是 JavaScript 的执行次序。

• <script> 标签可出现在 HTML 文档的任何位置，但一般放在 <head> 内部，可以早于 <body> 部分执行

• JavaScript除了可以直接嵌入 HTML 文件中，也可以独立存在与 HTML 文件之外。可以通过设置 <script>标签中 src 属性来指定外部 JavaScript 文件的地址。

4.1.8 JavaScript 的执行方式• 1 直接执行

在 <script> 与 </script> 标签中的 JavaScript

代码，只要不是放置在函数中的，都是属于直接执行的 JavaScript 代码。

• 2 与事件结合调用 JavaScript 可以支持很多事件，比如说单击鼠

标左键、按下键盘、移动鼠标等等。与事件结合，可以调用执行 JavaScript 的函数。

4.2.1 数据类型• 数值型：整数和浮点数统称为数值。例如 85 或 3.1415926 等。

• 字符串型：由 0 个 ,1 个或多个字符组成的序列。在 JavaScript中，用双引号或单引号括起来表示，如“您好”、‘学习 JavaScript’ 等。

• 逻辑（布尔）型：用 true 或 false 来表示。

• 空（ null ）值：表示没有值，用于定义空的或不存在的引用。要注意，空值不等同于空字符串 "" 或 0 。

• 未定义（ undefined ）值：它也是一个保留字。在两种情况下可能得到一个未定义的值，一种是根本不存在的对象，另一种就是虽然已经声明，但却没有赋值。

4.2.1 数据类型• null 是一个特殊的数据类型，其所代表的意思为“空”。需要注意，这个“空”并不代表是 0 或空字符串。数字 0代表的是数字，是数字型的数据；空字符串代表的是长度为 0 的字符串，是字符串类型的数据。而 null 代表没有值，不是一个有效的数字、字符串，也不是数组、对象和函数，什么数据类型都不是。

• undefined 也是一个特殊的数据类型，只有定义了一个变量但没有为该变量赋值、使用了一个并未定义的变量、或者是使用了一个不存的对象的属性时， JavaScript才会返回 undefined 。

• 除了以上五种基本的数据类型之外， JavaScript 还支持复合数据类型，复合数据类型包括对象和数组两种。

4.2.2 变量

• JavaScript 中的变量是没有类型或者说是弱类型的，这就意味着在 JavaScript 中的变量可以是任何一种数据类型。

• 1．变量定义在 JavaScript声明一个变量时，可以使用以下方式实现： var up,down,left,right; // 大小写敏感也可以直接给它赋值，如下： x=3;

• 2．变量的作用范围当在一个函数之外定义一个变量，那这个变量就叫做全局变量。全

局变量可用于当前所有的文档。在函数内部定义的变量则叫做局部变量，它只作用于函数内部。

4.2.2 变量

• 使用变量注意事项：2.6.4.1 重复定义变量：后者覆盖前者2.6.4.2 变量必须要先声明后使用：否则出错。2.6.4.3 给未声明的变量赋值：可以2.6.4.4 引用未赋值的变量： undefined

var x; //声明一个为赋值的变量，它的值是 undefined 。 alert(i) ; // 使用未声明的变量将引发错误。 d=123; //给未声明的变量赋值，将创建该变量。

4.2.3 常量

• 1 ．整型常量整型常量可以使用十六进制、八进制和十进制表示其值。

• 2 ．浮点数常量有小数和指数两种表示方式，如 3.1415926 、 -3.1E12 、

1e12 和 2E-12 。

• 3 ．字符串常量字符串是由单引号（‘）或双引号（“）括起来的字符

序列。其中字符序列的个数可以是零个或多个。单引号所括起来的字符序列里可以包括双引号，而双引

号所括起来的字符序列里也可以包含单引号。

4.2.3 常量

• 4 ．布尔常量布尔类型只有两种值： true 和 false 。

• 5 ．数组常量数组常量是零或更多表达式的列表，它包含在一对方括号内。

使用数组常量来创建一个数组时，它的元素和长度由所指定的值进行初始化。例如下面常量有 3 个元素，其长度为 3 。

apple=["fruit","China","vitamin"] 不必在数组常量中指定所有的元素。如果在一行中输入两个逗号，它会自动为没有指定的元素留出空间，如下例所示：

God=["Belial",,"Angel“] 该数组包含两个元素值和一个空元素，要注意的是，如果把逗

号放到数组的最后，那它将会被忽略不计。

4.2.4 运算符

• 算术运算符• 赋值运算符

• 关系运算符• 逻辑运算符

• 位运算符• 条件运算符

• 其他运算符

4.2.4 运算符

• <Script>• var x = 11; • var y = 5;• with (document) {• write("x = 11, y = 5");• write("<LI>x + y 是 ", x + y);• write("<LI>x - y 是 ", x - y);• write("<LI>x * y 是 ", x * y);• write("<LI>x / y 是 ", x / y);• write("<LI>x % y 是 ", x % y);• write("<LI>++ x 是 ", ++ x);• write("<LI>-- y 是 ", -- y);• }• </Script>

4.2.4 运算符

• <Script>• var x = 5; //x 是数值 5• var y = '5'; //y 是字符串 5• var z = 6; //x 是数值 6• with (document) {• write("x = 5, y = '5', z = 6");• write("<LI>x == y 吗？ ", x == y);• write("<LI>x === y 吗？ ", x === y);• write("<LI>x != y 吗？ ", x != y);• write("<LI>x !== y 吗？ ", x !== y);• write("<LI>x <= z 吗？ ", x <= z);• write("<LI>y <= z 吗？ ", y <= z);• // 类型自动转换• }• </Script>

4.2.4 运算符

• <Script>• var t = true;• var f = false;• with(document) {• write("<OL><LI>true && true 的结果是 ", t && t);• write("<LI>true && false 的结果是 ", t && f);• write("<LI>false && true 的结果是 ", f && t);• write("<LI>false && false 的结果是 ", f && f);• write("<LI>true && (1==1) 的结果是 ", t && (1==1));• write("<LI>false && 'A' 的结果是 ", f && 'A');• write("<LI>'A' && false 的结果是 ", 'A' && f);• write("<LI>true && 'A' 的结果是 ", t && 'A');• write("<LI>'A' && true 的结果是 ", 'A' && t);• write("<LI>'A' && 'B' 的结果是 ", 'A' && 'B');• }• </Script>

4.2.5 控制结构

• if 表达式• Switch

• while循环• do-while循环• for循环

• break• continue

4.2.6 函数 function

• JavaScript函数分为系统函数和自定义函数

• 自定义函数定义方法function 函数名 (参数 1,参数 2…){< 语句块 >return [返回值 ];}

• 无论是否有返回值，都无需指定返回值类型。

• JavaScript 中可通过 arguments .Length 来检查参数的个数• 在 JavaScript 中对象事件的处理通常由函数 (function)担任。


• <Script>• function checkPassword(testObject) {• if (testObject.value.length < 4) {• alert("密码长度不得小于四 ");• testObject.focus();• testObject.select();• }• }• </Script>

• <Body>• 请输入密码：• <INPUT TYPE="text" onBlur="checkPassword(this)">• </Body>

4.2.6 函数 function• <script type="text/javascript">• function check()• {• if(document.forms[0].elements[0].value.length<4)• {alert("密码长度小于 4");• document.forms[0].elements[0].focus();• document.forms[0].elements[0].select();• }• else• {//document.location.href="http://www.baidu.com";• //document.URL="http://www.sina.com";• document.forms[0].action="http://www.softedu.org";• document.forms[0].method="post";• document.forms[0].submit();• }• }• </script>

• <body>• <form action="" name="form1">• <input type="text" name="pwd" onblur="check()">• </form>• </body>


• 系统函数

• eval()函数的主要作用是将字符串表达式转换成数字。• parseInt()函数是把字符串值转换成数字。• parseFloat()函数是把字符串值转换成浮点数。

• 在 JavaScript 中，如果对非数字型变量进行数值运算，如两个字符串相除，将会返回 NaN 。 NaN 所代表的是“ Not a Number” 的意思。在 JavaScript 中在进行数值运算时，可以先使用 isNaN()函数来判断变量是否为数字型变量。如果该参数返回 true ，说明该变量为非数字型变量，否则说明该变量为数字型变量。


• <Script>• with (document) {• write("<LI>eval('12.34*10') 是 ", eval("12.34*10"));• write("<LI>eval('12*(3+4)') 是 ", eval("12*(3+4)"));• write("<LI> eval('12.34abc1.2')", eval("12.34abc1.2"));• write("<LI> ");• write("<LI>parseInt('0x11') 是 ", parseInt("0x11"));• write("<LI>parseInt('1234') 是 ",parseInt("1234"));• write("<LI>parseInt('12abc') 是 ", parseInt("12abc"));• write("<LI>parseInt('12.34*10') 是 ", parseInt("12.34*10"));• write("<LI>parseInt('abc123') 是 ", parseInt("abc123"));• write("<LI> ");• write("<LI>parseFloat('12.34*1.2') 是 ", parseFloat("12.34*1.2"));• write("<LI>parseFloat('12.34e10') 是 ", parseFloat("12.34e10"));• write("<LI>parseFloat('12abc') 是 ", parseFloat("12abc"));• write("<LI>parseFloat('2.1e4abc') 是 ", parseFloat("2.1e4abc"));• write("<LI>parseFloat('xyz123') 是 ", parseFloat("xyz"));• }• </Script>


• <script type="text/JavaScript">• function add()• {• var sc1=document.fm.chj1.value; var sc2=document.fm.chj2.value;• if(sc1=="") sc1=0; if(sc2=="") sc2=0;• if(isNaN(sc1)) sc1=0; if(isNaN(sc2)) sc2=0;• document.fm.chj3.value=parseInt(sc1)+parseInt(sc2);• }• </script>

• <form action="" name=fm>• 平时成绩 <input type=text name= chj1 ><br>• 期末成绩 <input type=text name= chj2 ><br>• 总成绩 <input type=text name= chj3 disabled><br>• <input type=button value="提交 " onclick=add()>• </form>

4.3.1 JavaScript 事件类型

• 主要有以下三类事件

• 鼠标事件单击事件 onClick 和双击事件 onDbClick鼠标移进事件 onMouseOver 和鼠标移出事件 onMouseOut鼠标按下事件 onMouseDown 和鼠标松开事件 onMouseUp

• 键盘事件键盘按下事件 onKeyDown 和键盘松开事件 onKeyUp键盘按下事件 onKeyPress若按下键不放 , onKeyDown 不触发 ,onKeyPress持续触发

4.3.1 JavaScript 事件类型• HTML 事件

载入页面事件 onLoad卸载页面事件 onUnload改变事件 onChange选中事件 onSelect 获得焦点事件 onFocus失去焦点事件 onBlur提交事件 onSubmit重置事件 onReset

4.3.2 onload 和 onunload 事件

• <script type="text/JavaScript">• function loadform(){• alert(" 页面装载中，请稍候 .....");• }• function unloadform(){• confirm("真的要退出页面，请单击确定 ");• }• </script>

• <body onload="loadform()" onunload="unloadform()">• <a href="test.htm">调用 </a>• </body>

4.3.3 onchange 和 onselect 事件

• <html>• <head>• <title> onchange 和 onselect 事件 </title>• </head>• <body>• <input type="text" value="请单击“• onchange=‘alert(“你改变了该数据 ")' • onselect="alert('你选择了该数据 ') " >• </body>• </html>

4.3.4 onBlur 和 onFocus 事件• onFous 事件是一个聚焦事件 ,当得到输入焦点时 , onFou

s调用的程序就会执行

• onBlur 事件是一个失焦事件 ,当光标移开当前对象时 ,onBlur调用的程序就会执行

• <Body>• <INPUT TYPE="button" value="请单击 " • onBlur="alert('谢谢使用 ')" • onfocus="alert('欢迎使用 ')">• </Body>

4.3.5 事件举例

• <script type="text/JavaScript">• function check(){• var nameDiv = document.getElementById("nameerror");• var pwdDiv = document.getElementById("pwderror");• var name=document.register.name.value;• var pwd=document.register.pwd.value;• if(name!="lkl")• nameDiv.innerHTML = "姓名错误 ";• else if (pwd != "lkl")• {nameDiv.innerHTML = "";• pwdDiv.innerHTML = "密码错误 ";}• else• { document.register.action="http://www.softedu.org";• document.register.submit();}• }• </script>

4.3.5 事件举例

<form method="post" name="register" > <table>

<tr> <td>姓名 </td> <td><input type="text" name="name" ></td> <td><div id=nameerror ></div></td>

</tr> <tr>

<td>密码 </td> <td><input type="password" name="pwd"></td> <td><div id=pwderror ></div></td>

</tr> <tr align=center> <td colspan=2 > <input type=button value="提交 " onclick=c

heck()></td> </tr></table>

</form>

4.4.1 JavaScript 对象系统

• 浏览器内部对象窗口对象 (window) ：代表当前打开的浏览器窗口浏览器对象 (navigator) ：管理浏览器基本信息文档对象 (document) ：代表当前打开窗口中的文档位置对象 (location) ：代表当前打开窗口的 URL历史对象 (history) : 代表当前打开窗口的前进后退记录

• JavaScript 内部对象DateStringMath

4.4.2 DOM 文档对象模型

DOM 将相关元素组织包装起来，提供给程序人员使用，可降低开发难度。DOM 是属于浏览器的， JavaScript及其他的脚本都可以调用。

上图是 NetScape 的 DOM ， IE 的 DOM 内容更多。

4.4.3 window 对象

• window 对象是 DOM 的顶级对象，代表当前打开的浏览器窗口。

• 可以省去以 window 起始而直接使用 window 对象的属性和方法。

• 窗口对象的属性status selfopener closedhistory navigatordocument location

4.4.3 window 对象

• 窗口对象的方法

• open(参数表 ) 方法创建一个新的窗口，其中参数表提供有窗口的主要特性和文档及窗口的命名。

• close() 方法关闭一个窗口

• alert() 方法创建一个具有 OK按钮的警告框。

• confirm() 方法创建一个具有 OK 和 Cancel按钮的确认框。

• prompt() 方法创建具有输入信息的提示框，允许用户在对话框中输入信息，并可使用默认值，其基本格式如下 prompt（“提示信息”，默认值）。

4.4.3 window 对象• first.html

• <html>• <head>• <title> 将元素分组 </title>• <script type="text/JavaScript">• window.open("second.html","sec","height=150");• document.write(window.closed);• </script>• </head>• <body >• </body>• </html>

4.4.3 window 对象

• second.html

• <script type="text/JavaScript">• function changeColor(color)• {window.opener.document.bgColor=color;}• </script>• <body>• 选择你喜欢的颜色• <input type=button value="蓝色 " onclick=changeColor("blue")>• <input type=button value="绿色 " onclick=changeColor("green")>• <input type=button value=" 关闭父窗口 " onclick=opener.close()>• <input type=button value=" 关闭自己 " onclick=self.close()><br>• 移动窗口位置• 输入 x坐标 <input type=text name=x>输入 y坐标 <input type=text name=y>• <input type=button value="提交 " onclick=opener.moveTo(x.value,y.value)>• </body>

4.4.4 document 对象

• 文档对象 (document) ：代表当前打开窗口中的文档

• 文档对象的方法 fgColorbgColorurl

• 文档对象的方法write() 和 writeln() ：二者都用于向浏览器窗口输出文本。document.getElementById()document.getElementsByName()document.getElementsByTagName()

4.4.4 document 对象

• <html><head><script type="text/JavaScript">document.write(“<h1>欢迎您 ");var test=window.prompt("请输入数据 :");document.write(test+" ，这是 JavaScript输入输出的例子 </h1>");</script></head></html>

• 输入 :window.prompt(“提示信息 ", 预定输入信息 );• 输出 :document.write() 方法和 document.writeln() 方法• window.alert() 方法

4.4.5 form 对象• 在 JavaScript 中访问表单对象可由两种方法实现：

<form name="fm1">.....</form><form name="fm2">.....</form><form name="fm3">.....</form>

• 1:通过表单名访问表单在表单对象的属性中首先必须指定其表单名，而后就可以

通过下列标识访问表单如： document.fm1 document.fm2 document.fm3

• 2:通过 forms[] 数组来访问表单　 forms[] 数组是由浏览器环境自动提供的，数组下标是由

0 开始的。无论是否指定表单名都可以使用该方法。如 document.forms[0] document.forms[1] document.forms[2]

4.4.5 form 对象• 表单对象 form 的属性：

name ：表单的名称 target ：窗体被送往的位置action ：提交到的地址method ：提交的方式，如 get 或 post

• 表单对象 form 的方法：submit( ) ：提交表单 reset( ) ：重填表单

4.4.5 form 对象

• <html>• <head>• <title>验证表单元素 </title>• <script language="JavaScript">• function submits(){• document.firstForm.action="show.html";• document.firstForm.submit();• }• </script>• </head>• <body>• <form name=firstForm>• <input type="button" onClick="submits()" value="跳转 ">• </form>• </body>• </html>

4.4.5 form 对象• 表单中的基本元素由按钮、单选按钮、复选按钮、提交按钮、重置按钮、文本框等组成。

• 可通过 elements[] 数组或它的名称访问表单中元素。

• 举例：假定 myform 表单包括一个叫 pwd 的 text型文本框元素，它是表单的第４个元素，则可访问： document.myform.elements[3].value 或 document.myform.pwd.value

4.4.5 form 对象

• <Script type="text/JavaScript">• function checkPw() {• fm = document.form1;• if (fm.pw2.value != fm.pw1.value) {• alert("密码不符，请重新输入 "); }• else• alert("谢谢你， "+fm.name.value);• }• </Script>• <FORM NAME="form1">• 姓　　名： <INPUT TYPE="text" NAME="name"><BR>• 输入密码： <INPUT TYPE="password" NAME="pw1"><BR>• 重新输入： <INPUT TYPE="password" NAME="pw2"><BR>• <INPUT TYPE="button" VALUE="填好了 " onClick=checkPw()>　• </FORM>• </BODY>

4.4.6 location 和 navigator 对象

• 浏览器对象 (navigator) ：管理浏览器基本信息，• 位置对象 (location) ：代表当前打开窗口的 URL

<script type="text/JavaScript">document.write("<br> 主机名 :"+location.hostname);document.write("<br> 端口名 :"+location.port);document.write("<br> 主机名 + 端口名 :"+location.host);document.write("<br>当前文档 URL:"+location.href);document.write("<br>");document.write("<br> 浏览器名称 :"+navigator.appName);document.write("<br> 浏览器版本 :"+navigator.appVersion);document.write("<br>操作系统 :"+navigator.platform);document.write("<br> 是否启用 java:"+navigator.javaEnabled());</script>

4.4.7 有关对象操作语句• for...in 语句

• 格式如下： for （对象属性名 in 已知对象名） { ……..}

• 说明：该语句的功能是用于对已知对象的所有属性进行操作的控制循环。

它是将一个已知对象的所有属性反复置给一个变量，而不是使用计数器来实现的。

该语句的优点就是无需知道对象中属性的个数即可进行操作。

4.4.7 有关对象操作语句

• <script type="text/JavaScript">• arr1=new Array("java","html/css/JavaScript","jsp/servlet","struts/hiberna

te/spring");• //arr1=["java","html/css/JavaScript","jsp/servlet","struts/hibernate/sprin

g"];

• for(i=0;i<arr1.length;i++)• document.writeln(arr1[i]+"<br>")

• for(prop in arr1)• document.write(arr1[prop]+"<br>");

• for(prop in location)• document.write(prop+"<br>");• </script>

4.4.7 有关对象操作语句• with 语句

• 使用该语句的意思是：在该语句体内，任何对变量的引用被认为是这个对象的属性，以节省一些代码。with object{...}所有在 with 语句后的花括号中的语句，都是在后面 object对象的作用域的。


• <Script>• var x = 5; //x 是数值 5• var y = '5'; //y 是字符串 5• var z = 6; //x 是数值 6• with (document) {• write("x = 5, y = '5', z = 6");• write("<LI>x == y 吗？ ", x == y);• write("<LI>x === y 吗？ ", x === y);• write("<LI>x != y 吗？ ", x != y);• write("<LI>x !== y 吗？ ", x !== y);• write("<LI>x <= z 吗？ ", x <= z);• write("<LI>y <= z 吗？ ", y <= z);• // 类型自动转换• }• </Script>

4.4.7 有关对象操作语句• this 关键字

• this 是对当前的引用，在 JavaScript 由于对象的引用是多层次，多方位的，往往一个对象的引用又需要对另一个对象的引用，而另一个对象有可能又要引用另一个对象，这样有可能造成混乱，最后自己也不知道现在引用的那一个对象，为此 JavaScript提供了一个用于将对象指定当前对象的语句 this 。


• <form onreset="this.submit.disabled=1"• onsubmit="this.submit.disabled=1" >• 会员编号：• <input type="text" name="name"• onKeyup="this.form.submit.disabled=0"><br>• 会员密码：• <input type ="password" name="password" size="20"><br>• <input type ="submit" name="submit"• disabled="disabled">• <input type ="reset" value=" 重置 " >• </form>

1.html/css/javascript 先睹为快 2.html 3.css 4.javascript

Documents