第3 章脚本语言

本章主要内容：

1.HTML

2.CSS

3.javaScript

3.1 HTML

3.1.1 HTML简介

HTML（Hyper Text Markup Language）即超文本标记语言或超文本链接标示语言，是一种用来制作超文本文档的简单标记语言，它不是一种真正的编程语言，只是一种标记符。

3.1.2 HTML基本标签

例3-1 HTML页面简单示例(sample.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>欢迎来到HTML世界</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    这是我的第一个HTML网页!
    <br>
    <font face="楷体_GB3212" size="2">欢迎!</font>
</body>
</html>

代码中出现的几种标签

(1)单标签

某些标签只需单独使用就能完整地表达意思，控制网页效果，这类标签的语法是：

<标签>……

<br>，它表示换行，<hr>？

(2) 双标签

标签成对使用，由一个开始标签和一个结束标签构成。开始标签告诉Web浏览器从此处开始执行该标签所代表的功能，而结束标签告诉Web浏览器在这里结束该功能，结束标签的形式是在开始标签前加上一个斜杠。语法：

<标签>内容</标签>

(3)标签属性

在单标签和双标签的开始标签里，还可以包含一些属性，以达到个性化的效果。

其语法格式是：

<标签属性1 属性2 属性3……>

各属性之间无先后次序，属性也可省略（即取默认值）。

HTML的基本标签

1.页面结构标签

HTML文档分为文档头和文档体两部分。在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示在网页中的各种正文信息。通常由3对标签来构成一个HTML文档的框架。

（1）<html></html >

这个标签对告诉浏览器这个文件是HTML文档。<html>标志用于HTML文档的最前边，用来标识HTML文档的开始，</html>放在HTML文档的最后边，用来标识HTML文档的结束。

（2）<head></head>

这个标签对中的内容是文档的头部信息，说明一些文档的基本情况，如文档的标题等，其内容不会显示在网页中。在此标签对之间可使用<title></title>、<script></ script >等描述HTML文档相关信息的标签对。

（3）<body></body>

这个标签对中的内容是HTML文档的主体部分，可包含<p></p>、<h1></h1>、<br>、<hr>等标签，它们所定义的文本、图像等将会在网页中显示出来。

2.页头标签

<title></title>标签对用来设定网页标题，浏览器通常会将标题显示在浏览器窗口的标题栏左边。<title></title>标签对只能放在<head></head>标签对之间。

3.标题标签

在HTML文档中，<hX></hX>标签可以定义不同显示效果的标题，X表示标题的级数，取值范围为1~6，X越小，标题字号越大。

<hX>可以使用属性align，用于设置标题文字的对齐方式，其取值如下：

left：左对齐。

right：右对齐。

center：居中对齐。

未设置该属性时，默认值是？

例3-2 使用标题标签title.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>标题标签使用</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    这一行文字不是标题<br>
    <h1 align ="center">一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
</html>

4. 段落标签

<p></p>标签用来创建一个新的段落，在此标签对之间加入的文本将按照段落的格式显示在浏览器上。

<p>标签可以有多种属性，例如align属性控制其内容的对齐方式；clear属性控制图文混排方式，其取值如下：

left：下一段显示在左边界处的空白区域。

right：下一段显示在右边界处的空白区域。

center：下一段的左右两边都不许有其它内容。

为了防止文档出错，尽量不要省略结尾标记</p>。

5.预定格式标签

在编辑文档时，如果希望将来浏览网页时仍能保留在编辑工具中已经排好的形式显示内容，可以使用<pre></pre>标签对。使用该标签对时，默认字体为10磅。

例3.3 使用预定格式票签

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>预定格式标签使用</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    床前明月光
    疑是地上霜
    举头望明月
    低头思故乡
    <pre>
    兰陵美酒郁金香
    玉碗盛来琥珀光
    但使主人能醉客
    不知何处是他乡
    </pre>
</body>
</html

6.格式排版标签

（1）<br>

该标签强制文本换行，但不会在行与行之间留下空行。如果把<br>加在<p></p>标签对的外边，将创建一个大的回车换行，即<br>前边和后边的文本的行与行之间的距离比较大；

若放在<p></p>的里边则<br>前边和后边的文本的行与行之间的距离将比较小。

2）<hr>

该标签在网页中加入一条横跨网页的水平线，具有多种属性用于设置水平线的宽度、长度及显示效果等。

size属性：设置水平线的粗细，默认单位是像素。

width属性：设置水平线的宽度，默认单位是像素，也可以使用对屏幕的百分比表示。

noshade属性：该属性不用赋值，而是直接加入标签即可使用，它用来取消水平线的阴影（不加入此属性水平线默认有阴影）。

align属性：设置水平线的对齐方式。

color属性：设置水平线的颜色。

例如：<hr align="center" width ="600" size ="9" color ="blue">

7. 文字格式标签

<font></font>标签对通过设置<font>属性来控制文字的字体、大小、样式和颜色，各属性功能如下：

face属性：设置字体样式。

size属性：设置字体大小，值为整数，分为7个级别，默认字体大小为3。

color属性：设置字体颜色。

8.注释标签

在编写HTML文件时，为提高文件的可读性，可以使用标签对编写注释文字，其语法如下：



注释内容不会在浏览器中显示

3.1.3 列表

列表是一种规定格式的文字排列方式，用于列举内容。常用的列表分为有序列表、无序列表和自定义列表。

1.有序列表

有序列表是指各列表项按一定的编号顺序显示，列表用<ol>开始，以</ol>结束，每一个列表项用<li></li>标签定义，其语法如下：

<ol>

<li>列表项1</li>

<li>列表项2</li>

……

</ol>

在<ol>中可以使用type、start属性？。type属性用于设置编号的种类，其取值如下：

l：编号为数字，默认值。例如：1，2，3，……

A：编号为大写英文字母。例如：A，B，C，……

a：编号为小写英文字母。例如：a，b，c，……

I：编号为大写罗马字符。例如：Ⅰ，Ⅱ，Ⅲ，……

i：编号为小写罗马字符。例如：ⅰ，ⅱ，ⅲ，……

例3.4 使用有序列表

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>有序列表使用</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    Java方向：
    <ol type ="A">
        <li>Java程序设计</li>
        <li>数据库技术</li>
        <li>JSP程序设计</li>
    </ol>
</body>
</html>

2. 无序列表

无序列表指各列表项之间没有顺序关系，列表项显示时前面有一个项目符号。无序列表用<ul>开始，以</ul>结束，每一个列表项同样也用<li></li>标签定义，其语法如下：

<ul>

<li>列表项1</li>

<li>列表项2</li>

……

</ul>

在<ul>、<li>中都可以使用type属性。

type属性取值如下：

disc：实心圆点，默认值。

circle：空心圆点。

square：实心正方形。

3.使用无序列表

3.1.4多媒体和超链接

1. 插入图像

使用<img>标签可以为网页添加.gif、.jpg、.png等格式的图像。语法格式：

<img src=“”属性=“”….>主要属性如下：

src：指定图像的源文件路径，可以使用相对路径、绝对路径或URL。

width：指定图像的宽度，单位为像素。

height：指定图像的高度，单位为像素。

hspace：指定图像水平方向的边沿空白，以免文字或其他图片过于贴近，单位为像素。

vspace：指定图像垂直方向的边沿空白，单位为像素。

border：指定图像边框厚度。

align：当文字与图像并排放置时，指定图像与文本行的对齐方式，其属性值可取top（与文本行顶部对齐）、center（水平居中对齐）、middle（垂直居中对齐）、bottom（底部对齐，默认值）、left（图像左对齐）、right（图像右对齐）。

alt：这是用以描述该图像的文字，图像不能显示时将显示该属性值；当鼠标移至图像上时，将该属性值作为提示信息显示。

例3-6插入图像

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>插入图像</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>

    小鸭！

<center>

<img src ="image/xy.gif" alt="小鸭" width ="100" height ="100" align ="center">

</center>

</body>

</html>

2. 插入视频

语法格式：<img src=“” dynsrc=“”属性=“ ”>。

标签常用属性如下：

dynsrc：指定视频的源文件路径。

loop：指定视频循环播放次数。值为-1或infinite时，表示无限次循环播放。

loopdelay：指定两次播放的时间间隔。

start：指定何时开始播放视频。其属性值可取fileopen（默认值，即在链接到含该标签的页面时开始播放）、mouseove（把鼠标移到播放区域之上时才开始播放）

controls：指定在视频窗口下附加播放控制条。该属性直接添加，不用赋值。

例3-7 插入视频

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>插入视频</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    backkom熊 <img dynsrc="image/Backkom.wmv" start="mouseover" loop="3">
</body>
</html>

鼠标移到播放区的效果

3.插入背景音乐

使用<bgsound>标签可以在网页中添加.wav、.mid、.mp3等格式的背景音乐。语法格式：

<bgsound src=“” loop=“ 1”>

主要属性如下：

balance：指定音乐的左右均衡。

delay：指定播放延时。

loop：指定音乐循环播放次数。值为-1或infinite时，表示无限次循环播放。

src：指定音乐源文件的路径。

volume：指定音量

例3-8 插入背景音乐

   <h2 align="center">笔记</h2>
   <img align="left" src="image/美女周笔畅.jpg" width="600" height="100" alt="歌手.周笔畅" >
   <bgsound src="image/笔记.mp3" loop="1">

4. 插入超链接

创建超链接就是在当前页面与其它页面间建立链接，使用户可以从一个页面直接跳转到其它的页面、图像或服务器。

格式为：

<a href="资源地址">超链接文本及图像</a>

其中，<a></a>标签对用来创建超链接，<a>的主要属性有：

href：指定链接地址。若是链接到网站外部，必须为URL地址；若是链接到网站内部页面，只需指明该页面的绝对路径或相对路径。

target：指定显示链接目标的窗口。

3.1.5 表格

表格是一种能够有效地描述信息的组织方式，由行、列、单元格组成，可以很好地控制页面布局，所以在网页中应用非常广泛。

许多网站都用多重表格来构建网站的总体布局，固定文本或图像的输出，还可以任意进行背景和前景颜色的设置。

1.<table>

2. <tr>

3. <th> 表格第一列的标题</th>

4. <th> 表格第二列的标题</th>

5. …

6. </tr>

7. <tr>

8. <td> 表格第一行的第一个单元格内容</td>

9. <td> 表格第一行的第二个单元格内容</td>

10. …

11. </tr>

12. <tr>

13. <td> 表格第二行的第一个单元格内容</td>

14. <td> 表格第二行的第二个单元格内容</td>

15. …

16. </tr>

17. …

18.</table>

1. table常用属性

1.border：设置表格边框的宽度，若为0表示边框不可见，单位为像素。

2.cellspacing：设置单元格边框到表格边框的距离，单位为像素。

3.cellpadding：设置单元格内文字到单元格边框的距离，单位为像素。

4.width：设置表格宽度。其值可为整数，单位为像素，如：100表示100像素；也可以是相对页面宽度的相对值，如：20%表示表格宽度为整个页面宽度的20%。

5.height：设置表格高度，取值方式与width一致。

6.bgcolor：设置表格背景色。可以是十六进制代码，也可以是英文字母，

7.bordercolor：设置表格边框颜色。

8.align：设置表格在水平方向的对齐方式，其值可为left、right、center。

9.valign：设置表格在垂直方向的对齐方式，其值可为top、middle、baseline。

2.<tr>常用属性

1.bordercolor：设置该行的外边框颜色。

2.bgcolor：设置该行单元格的背景颜色。

3.height：设置该行的高度。

4.align：设置该行各单元格的内容在水平方向的对齐方式，其值可为left、right、center。

5.valin：设置该行各单元格的内容在垂直方向的对齐方式，其值可为top、middle、bottom。

3.<td>常用属性

1.colspan：设置单元格所占的列数，默认值为1。

2.rowspan：设置单元格所占的行数，默认值为1。

3.background：设置单元格背景图像。

4.width：设置单元格宽度。

例3-9 创建表格

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>创建表格</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    <table border="1" width="80%" bordercolor="blue" cellpadding="2">
    <tr height ="50" valign="middle">
    <th width="33%" colspan="2">Java方向</th>
    <th width="36%" colspan="2">软件测试</th>
    <th width="36%" colspan="2">.NET方向</th>
   </tr>
   <tr align="center">
    <td width="16%">Java程序设计</td>
    <td width="16%">数据库技术</td>
    <td width="17%">Java程序设计</td>
    <td width="17%">数据库技术</td>
    <td width="17%">C#程序设计</td>
    <td width="17%">数据库技术</td>
   </tr>
   <tr align="center">
    <td width="16%">JSP程序设计</td>
    <td width="16%">JavaEE技术</td>
    <td width="17%">JSP程序设计</td>
    <td width="17%">软件测试理论</td>
    <td width="17%">ASP程序设计</td>
    <td width="17%">ADO.NET</td>
    </tr>
    </table>
</body>
</html>

3.1.6 框架

在进行网站整体结构布局时，框架也是经常被使用的一种标签，主要用来分割窗口和插入浮动窗口，使同一个浏览器窗口同时显示多个网页，如果能有效的运用将有助于提高网页的浏览效率。

1.框架结构文件格式

1.<html>

2. <head>

3. <title>……</title>

4. </head>

5. <noframes>……</noframes>

6. <frameset>

7. <frame src="url">

8.…

9. <frameset>

10. <frame src="url">

11.…

12. </frameset>

13. </frameset>

14.</html>

2.框架结构基本标签

1）<noframes></noframes>

该标签对中的内容显示在不支持框架的浏览器窗口中。标签对中的内容可以是浏览器太旧，无法显示Frame功能的提示性语句，也可以是没有Frame语法的普通版本的HTML文档。这样，不支持Frame功能的浏览器，便会自动显示没有Frame语法的网页。

在此标签对之间应先紧跟<body></body>标签对，然后才可以使用其它没有Frame语法的普通标签。

2）<frameset></frameset>

该标签对用来定义一个框架结构容器，即用来定义网页被分割成几个子窗口，各个子窗口是如何排列的。

<frameset>常用属性包括：

rows：在垂直方向将浏览器窗口分割成多个子窗口，即浏览器中所有子窗口从上到下排列，同时设置每个子窗口所占的高度。该属性值可以是百分数（子窗口高度相对页面高度的相对值）、整数（绝对像素值）或星号(“*”)，其中星号代表那些未说明高度的空间，如果同一个属性中出现多个星号则将剩下的未被说明高度的空间平均分配。各个子窗口高度之间用逗号分隔。

cols：在水平方向将浏览器窗口分割成多个子窗口，即浏览器中所有子窗口从左到右排列，同时设置每个子窗口所占的宽度。该属性取值方式与rows一致。

border：设置子窗口边框宽度。

frameborder：设置子窗口是否显示边框。

onload：设置框架被载入时引发的事件。

onunload：设置框架被卸载时引发的事件。

<frame>标签放在<frameset></frameset>之间，用来定义框架结构中某一个具体的子窗口。常用属性如下：

1.src：设置该子窗口中将要显示的HTML文件地址，取值可以是url地址，也可以是相对路径或绝对路径。

2.name：设置子窗口的名字。

3.scrolling：指定子窗口是否显示滚动条，取值可以是“yes”（显示）、“no”（不显示）或“auto”（根据窗口内容自动决定是否显示滚动条）。

4.noresize：指定窗口不能调整大小，该属性直接加入标签中即可使用，不需赋值。

src和name这两个属性必须赋值

3.target属性

在框架结构子窗口的HTML文档中如果含有超链接，当用户点击该链接时，目标网页显示的位置由target属性指定，若没有指定则在当前子窗口打开。

target属性常用格式如下：

<a href="目标网页地址" target="显示目标网页的子窗口名字">超链接文字</a>

例如：框架中定义了一个子窗口main，在main中显示jc.htm网页，则代码为：

<frame src="jc.htm" name="main">，

若jc.htm中有一个超链接，在点击该链接后，网页new.htm将要显示在名为main的子窗口中，则代码为：

<a href="new.htm" target="main">需要链接的文本</a>。

例3-10 框架结构使用(framesetTag.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>框架使用</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<frameset cols="70%,*" frameborder="yes" border="10">
    <frameset rows="60%,*" frameborder="yes">
        <frame src="top.html" name="top" scrolling="auto" noresize>
        <frame src="bottom.html" name="bottom" scrolling="no" noresize>
    </frameset>
    <frame src="right.html" name="right" scrolling="no" noresize>
        <noframes>
            对不起，您的浏览器版本太低！
        </noframes>

</frameset>
</html>

3.1.7 表单

表单在网页中用来供用户填写信息，以实现服务器获得用户信息，使网页具有交互功能。

1. 表单标签

<form action="url" method="get|post" name="value" onsubmit ="function" onreset="function" target="window"></form>

action属性：

设置服务器上用来处理表单数据的处理程序地址，处理程序可以是JSP程序、CGI（Common Gateway Interface，通用网关接口）程序、ASP.NET程序等，该属性值可以是URL地址也可以是电子邮件地址。

例如：action="http://localhost/sample/ShopCart.jsp"，表示当用户提交表单后，将调用服务器上的JSP页面ShopCart.jsp来处理用户的输入。

另外，采用电子邮件地址的格式是：action="mailto:接收用户输入信息的邮件地址"。

例如：action="mailto:youremail@zzuli.edu.cn"，表示把用户的输入信息发送到电子邮件地址youremail@zzuli.edu.cn。

method属性

设置处理程序从表单中获得信息的方式，取值可为get或post。

get方法将表单中的输入信息作为查询字符串附加在action指定的地址后（中间用“？”隔开）传送到服务器。查询字符串使用key="value"的形式定义，如果有多个域，中间用“&”隔开，如：http://localhost/sample/ShopCart.jsp？flowerid="0169"&count="16"，问号后面的即为查询字符串。get方法在浏览器的地址栏中以明文形式显示表单中各个表单域的值，对数据的长度有限制

post方法将表单中用户输入的数据进行包装，按照HTTP传输协议中的post方式传送到服务器，且对数据的长度基本没有限制，目前大都采用此方式。

name属性：设置表单的名字。

onsubmit、onreset属性：设置在单击了“submit”或“reset”按钮后要执行的脚本函数名。

target属性：设置显示表单内容的窗口名。

HTML对表单的数量没有限制，但一个页面中如果有太多的表单不易于阅读，因此需合理设置。

2. 表单域

1）单行输入域

<input>标签用来定义单行输入域，用户可在其中输入单行信息。主要属性如下：

type属性：设置输入域的类型，取值如表3-1所示。

1.name属性：设置输入域的名字。

2.value属性：设置输入域的默认值。

3.align属性：设置输入域位置，可取值left（靠左）、right（靠右）、middle（居中）、top（靠上）、bottom（靠底）。

4.onclick属性：设置按下按钮后执行的脚本函数名。

2）多行输入域

<textarea></textarea>标签对用来定义多行文本输入域，主要属性如下：

1.name属性：设置输入域名字。

2.rows属性：设置输入域的行数。

3.cols属性：设置输入域的列数。

4.wrap属性：设置是否自动换行，属性值可取off（不自动换行）、hard（自动硬回车换行，换行标记一同被传送到服务器）、soft（自动软回车换行，换行标记不会被传送到服务器）。

3）选择域

<select></select>标签对用来建立一个下拉列表，<option>标签用来定义下拉列表中的一个选项，用户可以从列表中选择一项或多项。

①<select></select>主要属性：

1.name属性：设置下拉列表的名字。

2.size属性：设置下拉列表中选项个数，默认值为1。

3.multiple属性：表示下拉列表支持多选。

②<option>主要属性：

1.selected属性：表示当前选项被默认选中。

2.value：设置当前选项的值，在该项被选中之后，该项的值将被送到服务器。

3。表单按钮

button></button>标签对用于定义提交表单内容给服务器的按钮，主要属性有type和accesskey。

1.type属性：设置按钮类型，属性值可取button（一般按钮）、reset（复位按钮）、submit（提交按钮）。他们与<input>中同名的属性具有相同的功能。

2.accesskey属性：设置按钮热键，即按下Alt键的同时按下该属性值所对应得键便可以快速定位到该按钮。

例3-11 表单使用(formTag.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>表单使用</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    <form name="form1" method="post" action ="register.jsp">
        <h1 align ="left" >注册</h1>
        <br>
        <p>用户名：<input type ="text" name="username"></p>
        <p>密码：<input type ="password"name="userpwd1"></p>
        <p>确认密码：<input type ="password"name="userpwd2"></p>
        <p>密码提示问题：<input type="text" name="textfield"></p>
        <p>密码回答问题：<input type="text" name="textfield"> </p>
         <p>真实姓名：<input type="text" name="textfield"></p>
        <p>性别：<input type ="radio" name ="usersex" value="男">男
        <input type ="radio" name ="usersex" value="女">女
        <p>出生日期：
        <select name="select" size="1">
            <option selected>1989</option>
            <option>1990</option>
            <option>1991</option>
            <option>1992</option>
            <option>1993</option>
            <option>1994</option>
            <option>1995</option>
            <option>1996</option>
            <option>1997</option>
        </select>
        年
        <select name="select" size="1">
            <option selected>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
            <option>11</option>
            <option>12</option>
        </select>
        </p>
        <p>证件类型：
        <select name="select">
        <option value="xsz">学生证
        <option value="sfz" selected>身份证
        <option value="jgz">军官证
        </select>
        </p>
        <p>证件号码：<input type ="text" name="userid"></p>
        <p><input type ="submit" name="submit" value ="提交">
        <input type ="reset" name="reset" value ="取消">
        </p>
    </form>
</body>
</html>

3.2 CSS

3.2.1 CSS简介

对于任何Web网站的开发通常都包含两方面的内容，即站点的外观设计和站点的功能实现，而成功的网站应该在这两方面保持平衡，既设计美观，又方便实用。

站点的外观设计包括页面和控件的外观样式、背景色、前景色、字体、网页布局等，如果通过HTML的各种标签及其属性实现满足要求的外观，编码实在是太复杂、太臃肿了，而CSS可以助你

一臂之力

CSS（Cascading Style Sheets，级联样式表）是一种设计网页样式的工具，借助CSS的强大功能，网页将在你丰富的想象力下千变万化。

CSS是W3C为弥补HTML在显示属性设定上的不足而制定的一套扩展样式标准，其重新定义了HTML中文字显示样式，并增加了一些新的概念，如类、层等，可以实现对文字重叠、定位等。

3.2.2 CSS样式表定义

定义样式表的方法有三种：

1. 通过HTML标签定义样式表

（1）引用样式的对象{标签属性:属性值；标签属性:属性值；标签属性:属性值；……}

（2）

“标签属性：属性值”，这是一一对应的，每个属性与属性值对之间用分号隔开。

背景颜色属性background-color；而在脚本中，对象属性则连写成backgroundColor，第二个单词首字母大写，如有三个单词则第三个单词首字母也要大写，

注意，在Javascript中是严格区分大小写的。

例如，h1,h2{text-align:center;color:blue}

2. 使用id定义样式表

在HTML页面中id选择符用来对某个单一元素定义单独的样式，定义id选择符要在id名称前加上一个“#”号。使用id定义样式表的基本语法如下：

#id名称{标签属性:属性值；标签属性:属性值；标签属性:属性值；……}

例如：#sample{font-family:宋体;font-size:60pt}，

<p id=sample>段落文本</p>。

3.使用class定义样式表

（1）标签名.类名{标签属性:属性值；标签属性:属性值；标签属性:属性值；……}

例如：h1.center{text-align:center}，该center类的样式只能用在<h1>标签上。

（2）.类名{标签属性:属性值；标签属性:属性值；标签属性:属性值；……}

例如：.text {font-family: 宋体;color: red;}

<p class ="text">段落文本</p>，

3.2.3 在HTML中加入CSS的方法

1. 嵌入式样式表

<p style=“color:red;font-size:10pt”>我爱我的祖国</p>

这个样式表只是让当前的<p></p>标签对中的文字为红色，字体大小为10pt

2. 内联式样式表

例3-12 内联式样式表的使用（style1.html）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>内联式样式表使用</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
　       <!--
　　       p{font-family:宋体;font-size:9pt;color:blue;text-decoration: underline}
　　       h2{font-family:宋体;font-size:13pt;color:red}
　       -->
    </style>
    </head>
    <body>
        <form name="form1" method="post">
        <h2>网页使用内联式样式表，本标题字体大小为13磅，字体颜色为红色</h2>
        <p>本段文字字体大小为9磅，颜色为蓝色</p>
        </form>
    </body>
</html>

3.外联式表样

3.2.5 css基本属性

1. 字体属性

属性名	属性含义	属性值
font-family	字体名称	任意字体名称
font-style	字体风格	normal(普通)、itaic(斜体)、oblique（倾斜）
font-variant	字体变形	normal(普通)、small-caps（小型大写字母）
font-weight	字体加粗	normal(普通)、bold(一般加粗)、bolder(重加粗)
font-size	字体大小	绝对大小:xx-samll 相对大小:large 长度：单位为pt,例如15pt 百分比：嵌套标签内文本字体的大小相对于外层票签字体大小的值.例如:200%表示嵌套标签内文本字体大小
font	字体属性的略写	【字体风格\|\|字体变形\|\|字体加粗】字体大小[/行高]字体名称例如:font:italic bold 12pt/14pt times,serif 指定为bold(粗体)和italic(斜体),times或serif字体，大小为12pt,行高为14pt

2.颜色和背景属性

属性名	属性含义	属性值
color	前景色	颜色名称:aqua、black、blue、fuchsia、gray、green lime、maroon、navy、olive RGB值：R代表红色,G代表绿色，B代表蓝色数值16进制：以#开头，例如:#336699
background-color	背景色	颜色名称、RGB值、十六进制值，同color属性
background-image	背景图案	none:不用图形作背景 URL：提供图形文件的url地址
background-repeat	背景图片是否重复排列	repeat:垂值和水平重复，默认值 repeat-x:水平重复;repeat-y:崔值重复 no-repeat:不重复
background-attachment	背景是否滚动	scroll:元素背景图片跟元素一起滚动 fixed:背景图片固定
background-position	背景图片位置	top、left、right、bottom、center等

3.文本属性

表3-4 文本属性

属性名	属性含义	属性值
letter-spaceing	字母之间的间距
word-spacing	单词之间的间距
text-decoration	文字的装饰样式
vertical-align	文本垂直方向对齐方式
text-transform	文本转换方式
text-align	文本水平对齐方式
text-indent	文本首行缩行方式
line-height	文本行高

4.分级属性

属性名	属性含义	属性值
display	是否显示	block:在元素的前和后都会有换行，默认值 inline: 在元素的前后都不会有换行 list-item：与block相同，但增加了目录项标记 none:没有显示
white-space	处理空白方式
list-style-type	项目编号类型
list-style-image	列表项前的图案
list-style-position	列表项第二行起始位置
list-style	分级属性略写

5.鼠标属性

属性值	含义	属性值	含义
auto	鼠标按照默认的状态根据页面上的元素自行改变样式	n-resize	箭头朝上方
crosshair	精确定位+字	se-resize	箭头朝右下方
default		sw-resize	箭头朝左下方
hand		s-resize
move		w-resize
e-resize	箭头朝右方	text	文本I形
ne-resize	箭头朝右下方	wait	等待
nw-resize	箭头朝左上方	help	帮助

3.3 javaScript脚本语言

3.3.1 javascript简介

1. 什么是javascript

javascript是一种基于对象和事件驱动，并具有安全性能的脚本语言，使用实验室的目的是与HTM、java脚本语言(java小程序)一起实现在一个web页面中链接多个对象

，与web客户交互作用，从而可以开发客户端的应用程序。它是通过嵌入在标准的html语言中实现的，它的出现弥补了HTML语言的缺陷。

2.javascript与java的区别

下面对两种语言间的异同作如下比较：

（1）基于对象和面向对象

Java是完全面向对象的语言；JavaScript是基于对象的脚本语言。

　　（2）解释和编译

　　两种语言在其浏览器中执行的方式不一样。Java的源代码在传递到客户端执行之前，必须经过编译，因而客户端上必须具有相应平台上的仿真器或解释器，它可以通过编译器或解释器实现独立于某个特定的平台编译代码的束缚。JavaScript是一种解释性编程语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户编由浏览器解释执行。

　　（3）强变量和弱变量

　　两种语言所采用的变量是不一样的。Java采用强类型变量检查，即所有变量在编译之前必须作声明。JavaScript中的变量是弱类型的，即变量在使用前不需作声明。

　　（4）代码格式不一样

Java的格式与HTML无关，其代码以字节形式保存在独立的文档中。　而JavaScript的代码是一种文本字符格式，可以直接嵌入HTML文档中，并且可动态装载。

　　（5）嵌入方式不一样

　　在HTML文档中，通过不同的标签标识两种编程语言，JavaScript使用<script>...</script>标签，而Java使用<applet>...</applet>标签。

（6）静态联编和动态联编

Java采用静态联编，即Java的对象引用必须在编译时进行，以使编译器能够实现强类

型检查。JavaScript采用动态联编，即JavaScript先编译，再在运行时对对象引用进行

检查。

3.3.2语言基础知识

1. javaScript代码的加入

如果在声明的框架的网页中插入，就一定要在<frameset>之前插入，否则不会运行。

例3-14 javascript简单实例(js.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>JavaScript实例</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
    <script language="JavaScript">
    document.write("<h2>JavaScript的第一个网页！</h2>");
    document. close();
    </script>
  </body>
</html>

说明

1.document.write():文档对象的输出函数，其功能是将括号中的字符或变量值输出到窗口。document.close():将输出关闭

2.分号”;”是javascript语句结束符。

3.javascript区分大小写

2.基本数据类型

有四种基本数据类型：数值（整数和实数）字符串（用””号括起来的字符或数值）、布尔型(用true或false表示)空值。

3.常量

1.整型常量

2.实型常量

3.布尔常量

4.字符型常量

5.未定义(undefined)。变是定义后没有赋初值，变量的值便是undefined

6.空值(null)。null表示什么也没有，如果试图引用没有定义的变量，则返回一个null值

4.变量

（1）var 定义变量，但不赋初值，使用时再赋值

例如:

var smaple ;

此时变量sample的值是undefined

（2）用var赋初值

（3）变量不事先定义，而是在使用是时通过变量赋值来定义变量同时确定变量类型

5.运算符

算术运算符、关系远算符、逻辑运算符、位运算符、赋值运算符。

除此之外，javascript还有一引起特殊运算符

1.字符串连接运算符“+”

2.delete:删除对象

3.typeof：返回一个可以标识类型的字符串

4.void:函数无返回值

6.控制语句

1.if

else

2. if

3.switch(表达式)

{

case 常量 1：语句

case 常量 2：语句

}

4.跳出语句

break：跳出并结束本层循环

continue：跳出并结束本层的本次循环，开始一下次循环

7.函数

使用函数前必须先定义，然后再在脚本中调用。javascript中支持的函数分为两大类：一类是javascript预定义函数，另一类是用户自定义函数

1 函数定义

function 函数名(参数集合)

{

函数体

return 表达式;

}

2.预定义函数

1. eval 函数:对包含数字表达式的字符串求值

eval(参数)

如果参数是数字表达式字符串，那么对表达式求值;如果该参数代表一个或多个javascript语句，则执行这些语句;eval还可以把一个日期从一种格式转换为数值表达式

2. number和string函数：用来将一个对象转换为一个数字或字符串。

3.parseint和parsefloat函数。用来将字符串参数转换为一个数值

3.3.3 javascript对象

javascript中可以使用以下几种对象：

1.内置对象，例如：Date、math、string

2.用户自定义的对象

3.由浏览器根据页面内容自动提供的对象

4.服务器上固有的对象

但javascript没有提供继承，重载等面向对象语言所必须具有的功能，所以它只是基本面向对象的语言

1.创建对象

首先需定义一个类，然后再为该类创建一个实例，定义类用关键字funtion

function 类名（类中属性的值的集合）

{

属性定义、赋值

方法定义

}

创建对象使用关键字new,格式为

对象实例名= new 类名(参数表);

例如，定义类person,它所属性包括name,age,sex,depart,则

function person(name,age,sex,depart)

{

this.name=name

this.age=age;

this.sex=sex;

this.depart=depart;

}

然后再创建该类对象sample,语句如下

sample =new person(“peter”,22,”female”,”person department”)

2.引用对象属性

引用对象属性的语法为

对象名.属性名

3.引用对象方法

引用对象方法的语法为

对象名.方法名

4.删除对象

删除对象用delete老实巴交算符

5.内置对象

下面介绍几种内置对铜须

（1）string对象。即字符串对象，用于处理或格式化文本字符串，以确定和定位子串。

属性: length

方法: charAt(positon):返回该字符串第position位的字符

indexof(substring[,startpos]):返回字符串中第startpos位开始的第一个子串。

lastindeof(substring[,startpos]):从startpos开始从后边往前查找第一个substring出现的位置。

split(字符串分隔符集合)：返回一个数组，该数组的值是按”字符串分隔符”从原字符串对象中分离开来的子串。

substring:返回原字符串的子串

toLowerCase()：大写变小写字符串

toupperCase(): 小写变大写

（2）array对象。array对象即数组对象，是一个对象集合，里边的对象可以是不同数据类型的，数组的每一个成员对象都有一个下标，用来表示它在数组中的位置

创建数组有两种方法: arrname=new array(element0,element1…..elementN);

arrname=new array(arrlength)

除了在创建数组时给它赋值处，也可以直接通过数组名加下标的方法给数组元素赋值，例如:

arr= new array(6);

arr[0]=”sample”;

属性：length:

方法:

.join(分隔符)用法:返回一个字符串，该字符串把数组中的各个元素串起来，用分隔符置于元素与元素之间。

.reverse()用法:返回将原数组元素顺序反转后的新数组。

.sort()：返回排序后的新数组。

（3）math对象： Math对象即算术对象，提供常用的数学常量和数字函数

（4）date对象即日期对象

6.文档对象

文档对象是指在网页文档里划分出来的对象，在javascript中文档对象主要有window、document、location、navigator、screen和history等

（1）navigator对象。navigator对象即浏览器对象，包含了当前使用浏览器的版本信息

例3-15 navigator对象使用(navigator.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>navigator对象使用</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script language="JavaScript">
        document.write("浏览器是：" + navigator.appName+"<br>");
        document.write("浏览器的版本是：" + navigator.appVersion+"<br>");
        document.write("浏览器所处操作系统是：" + navigator.platform+"<br>");
        if (document.javaEnabled==true)
            document.write("你的浏览器允许使用Java");
        else
            document.write("你的浏览器不允许使用Java");
    </script>
</head>
<body>

</body>
</html>

(2)screen对象。screen对象即屏幕对象，包含了当前用户的屏幕设置信息

1 width属性返回屏幕的宽度，单位为像素。
2. HEIGTH 属性返回屏幕的高度，单位为像素
3. colorDepth属性返回当前颜色：-1 （黑白、8（256色）、16（增强色）、24/32（真彩色）
（3）window对象。window对象即窗口对象，它是所有对象的父对象，可以在javascript应用程序中创建多个窗口，而一个框架页面也是一个窗口
1.open(对象)：该方法用来创建一个窗口，其中参数表提供有窗口的尺寸内容以及是否有按扭条、地址框等属性。
2.close(对象)：窗口对象胆名.clse（）用来关闭指定的窗口
3.alert（字符串）:该方法弹出一个只包含确定按钮的对话框，并显示字符串的内容，同是整个文档的读取、script的运行暂停，直到用户单击确定按钮
4.confirm(字符串)：该方法弹出一个包含“确定”和”取消“按钮的对话框，并显示字符串的内容，同时整个文档的读取、script的运行暂停，等待用户选择
5.prompt(字符串【，初值】)
6.blur()和focus(),使窗口失去或得到焦点
例3-16 window对象使用(window.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>window对象使用</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script language="JavaScript">
    alert("window对象使用");
    </script>
   </head>
</html>

运行结果

（4）history 对象。history对象即历史对象明，包含浏览器的浏览历史

（5）location对象。location对象即地址，它描述的是一个窗口对象所打开页面的URL地址信息

1.protocol属性返回地址的协议，取值为http\https\file等

2.hostname属性返回地址的主机名

3.reload()方法强制窗口重载当前文档

4.replace()方法从当前历史记录装载指定的URL

（6）document对象。document对象即文档对象，它描述当前窗口或指定窗口对象从<head>到</body>的文档信息

1.open()

2.write()

3.clear()

4.close()

3.3.4 javascript事件

<body…onload=”alerert(欢迎你!)” onunload=’alert(‘bye!’)’>;

经常引发的事件如下:

1. onfocus:窗口获得焦点时引发,应用于windows对象.

2. onload:文档全部载入时引发,应用于window对象,写在<body>标签中

3.onmousedown鼠标在对象上按下时引发,应用于button对象\link对象

4.onmouseout:鼠标在进入对象时引发,就用于link对象

5.onmouseover:鼠标在进入对象时引发,应用于link对象

6.onmouseup:鼠标在对象上按下后弹起时引发,应用button对象

7.onreset:重置按钮被单击时引发,应用于form对象

8.onresize:窗口被调整时引发window对象

9.onsubmit:提交,应用于form对象

10.onunload 卸载文档时引发,应用于window对象,写在<body> 标签中

posted @ 2014-02-18 09:11 elite_2012 阅读(514) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

第3 章 脚本语言

第3 章脚本语言