1.1 JavaScript与HTML_JavaScript脚本特效编程给力起飞-QQ阅读男生武侠网

书名：JavaScript脚本特效编程给力起飞
作者名：苟英等编著
本章字数：6276字
更新时间：2020-08-28 21:33:53

1.1 JavaScript与HTML

可能很多人不知道World Wide Web，但是大多数人都知道WWW。你要上网？那好，请输入“www.xxxx.com”。HTML正是让Web走进千家万户的功臣，而JavaScript则是嵌入其中的精灵。

1.1.1 HTML 5

HTML全称为HyperText Mark-up Language，是在SGML规范下定义的一个描述性语言。不同于C++或Java之类的程序语言。基本上，开发者只要明白了各种标签的用途和用法，就算学懂了HTML。HTML的格式非常简单，而且可以使用任何文本编辑器编写——只要能将文件另存为ASCII纯文本格式即可，比如“记事本”。

HTML语言作为如今编程应用最为广泛的语言之一已经发展到第5代，即HTML5。HTML5标准的出现不仅给这门标记语言带来了新的生命力，更是近十年来Web开发标准的一次飞跃。

当你打开一个网页，看着网页上的动画、绚烂的文字、飘忽不定的广告、层层叠叠的菜单，你是否羡慕过做出这些东西的人？是否幻想过有一天你也能做出这样多姿多彩的网页？答案是肯定的。其实这些都是JavaScript的功劳，它最早由Netscape公司与Sun公司合作开发，最早叫LiveScript，当然它还有诸如JScript、ECMAScript等的名号，不过最让人熟知的还是JavaSript。

听上去像是Java的近亲是不是？不过，它们的确没有什么血缘关系。这个名字的来历其实是因为跟风，当时Java大行其道，因此Netscape在Navigator 2中支持运行Java applet时，将LiveScript也改名为JavaScript，希望以此借用Java的声势——尽管JavaScript和Java是非常不同的语言。

在JavaScript出现之前，Web浏览器不过是一种能够显示超文本文档的软件的基本部分，看到的网页也大多是枯燥的文本。而在JavaScript出现之后，网页的内容的可交互性得到了显著的改善，人们也开始越来越多地将JavaScript脚本加入到网页中，让网页越来越漂亮。

HTML文件的基本架构如下：

<html>
<head><title>我的第一个网页</title></head>
<body>
网页的内容，很多标签都作用于此
</body>
</html>

■ 整份文件处于标签<html>与</html>之间。<html>用以声明这是HTML文件，让浏览器认出并正确处理此HTML文件。

■ 可把以上代码写入记事本中，保存为.html的文件类型，使用浏览器（IE）打开即可。

■ 文件分两部分，<head>至</head>称为开头，<body>至</body>称为主体。

■ 基本上两者各有适用的标签，如<title>只可出现于开头部分。

■ 开始的<head>部分用以承载如标题之类的重要信息，只有<body>部分的正文会被显示，所以大部分标签都会运用于<body>正文部分。

■ ■ <title>所标示的是文件的标题，会出现于浏览器顶部，每页有明确的标题是必需的。

■ <html>、<head>、<title>和<body>都属于文件标签。

1.1.2 HTML常用标签

一、图片

在网络技术刚刚兴起的时候，网页还仅仅只有文本内容，非常枯燥。而今天的网页可以说是丰富多彩，主要的区别之一就在于今天的网页有了图像。所以图像在网页设计中是非常重要的。

1.图片标签

在网页中可以使用<img />标签插入图片，<img />标签的语法如下：

<img src="图片路径" 属性1="值1" 属性2="值2"…… />

或者

<img src="图片路径" 属性1="值1" 属性2="值2"…… >
</img>

在使用<img />标签之前先来了解一些相关的知识。

（1）图像格式

在HTML页面中可以插入图像，网页常用的图像格式有JPEG和GIF两种。

JPEG（Joint Photographic Experts Group）是特别为照片图像设计的文件格式。JPEG支持数百万种色彩。JPEG是质量有损耗的格式，这意味着在压缩时，一些图像数据丢失了，这降低了最终文件的质量，然而，图像数据被抛弃得很少，不会在质量上有非常明显的不同。

GIF（图形交换格式）是网页图像中很流行的格式。虽然它仅包括256种色彩，但GIF提供了出色的、几乎没有丢失的图像压缩，并且GIF可以包含透明区域和很多动画。它靠水平扫描像素行找到固定的颜色区域进行压缩，然后减少同一区域中的像素数量。因此GIF通常适用于卡通、图形、Logo、带有透明区域的图形、动画等。

（2）属性介绍

页面中插入图片可以起到美化的作用，插入图片的标签只有一个，那就是<img />标签。插入图片的时候，仅仅使用<img />标签是不够的，需要配合其他的属性来完成，如表1-1所示。

表1-1 <img />标签的属性

结合前面介绍的图片格式和<img />标签属性，通过例1-1来帮助大家掌握<img/>标签的使用。

例1-1

//……
<body>
    鲸鱼是生活在海洋中的哺乳动物，是海洋中的巨无霸！
    <img src="images/2_1_jy.jpg" width="330"/>
</body>
</html>

例1-1中，在网页中通过img标签插入了一张图片，并通过标签的width属性设置了图片的显示宽度为330px（像素），其运行效果如图1-6所示。

图1-6 img标签的使用

2. 图文混排

图文混排是制作精美页面常用的功能之一，通过将适当的图像与文字有效地排列组合在一起，可以大大丰富版面，在很大程度上提高版面的可视性。纵观富有说明力与艺术性的出版物，基本上采用的都是图文混排的页面编排手法。

图文混排是指当文字和图片在一起时，他们的排列方式通过图片的align属性设置，一般有如下几种值：

■ left：表示图片在文字的左边显示。

■ right：表示图片在文字的右边显示。

■ top：表示文字和图片的顶端对齐。

■ bottom：表示文字和图片的底端对齐。

■ middle：表示文字和图片中部对齐。

如例1-2所示，是将图片的align属性设置为right，表示图片在页面的右边显示，即使将<img />标签放在文本内容的前面，图片也将在文字的右边显示，当设置align属性为middle时，文字和图片的顺序不会改变，但是文字和图片的中部会对齐。

例1-2

<html>
<head>
    <title>图文混排</title>
</head>
<body>
    <img src="images/2_1_jy.jpg" width="100" align="right"/>
    鲸鱼是生活在海洋中的哺乳动物，是海洋中的巨无霸！
    </pre><hr>
    <img src="images/2_2_kt.jpg" width="150" align="middle"/>
    鲸鱼是……
</body>
</html>

例1-2的运行效果如图1-7所示。

图1-7 图文混排

二、超链接

超链接在本质上属于一个网页的一部分，它是一种允许同其他网页或站点之间进行连接的元素。各个网页链接在一起后，才能真正构成一个网站。所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。

按照链接路径的不同，网页中超链接一般分为以下三种类型：

■ 内部链接——单击该超链接连接到同一网站的另外一个页面。

■ 锚点链接——单击该超链接连接到同一页面的某一个位置。

■ 外部链接——单击该超链接连接到其他网站上的某一个页面。

按照使用对象的不同，网页中的链接又可以分为：

■ 文本超链接——建立在文本上的超链接。

■ 图像超链接——建立在图片上的超链接。

■ E-mail链接——超链接的目标是打开邮件发送。

■ 锚点链接——超链接的目标是在同一个页面之内。

■ 多媒体文件链接——超链接的目标是多媒体文件。

■ 空链接——超链接没有目标。

1. 超链接对象

超链接是一种对象，它以特殊编码的文本或图形的形式来实现链接，如果单击该链接，则打开一个新的网页，其语法如下：

<a href="" target="">……</a>

href表示超链接的目标路径，href的值一般有三种形式：

■ 绝对URL的超链接。URL（Uniform Resource Locator）就是统一资源定位符，简单地讲就是网络上的一个站点、网页的完整路径，如http://www.baidu.com。

■ 相对URL的超链接。如将自己网页上的某一段文字或某标题链接到同一网站的其他网页上面去。

■ 同一网页的超链接，这种超链接又叫做书签或者锚标记。

target属性表示链接网页在什么地方显示，该属性将在第4章表单控件中做详细的讲解，这里暂时不做讲解。

创建a.html和b.html页面，并将它们保存在相同的目录下，a.html中使用文本超链接。

a. html

//……
<body>
    <a href="b.html">鲸鱼的介绍</a>
</body>
</html>

b. html

//……
<body>
    鲸鱼是生活在海洋中的哺乳动物，是海洋中的巨无霸！
    <img src="images/2_1_jy.jpg" width="330"/>
</body>
</html>

打开a页面的运行效果如图1-8所示。

图1-8 超链接的使用（一）

当单击 “鲸鱼的介绍”超链接时，看到如图1-9的结果，也就是b页面的效果。

图1-9 超链接的使用（二）

超链接还可以分为动态超链接和静态超链接。动态超链接指的是可以通过改变HTML代码来实现动态变化的超链接。例如，可以实现将鼠标移动到某个文字链接上时，文字就会像动画一样动起来或改变颜色的效果；也可以实现将鼠标移到图片上时，图片就产生反色或朦胧的效果，等等。而静态超链接，顾名思义，就是没有动态效果的超链接。

2. 锚标记

锚标记的作用是链接到同一页面的某一个段落，它的语法和超链接的语法几乎是一样的，只是src属性的书写有些变化，其锚标记的定义语法如下：

<a name="锚标记名称">文本内容</a>

锚标记的使用语法如下：

<a href="#锚标记名称">文本内容</a>

通过语法可以看出，锚标记的使用需要先使用<a>标签和name属性定义一个锚标记，然后使用<a>标签的href属性去链接，如在例1-3中设置了段落的选择。

例1-3

//……
<body>
    <a name="第一章">第一章</a>为“锚”标记。
      <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
    <p>
        除了链接到另一个HTML文件，也可以在一篇文章内随心所欲地链接。
        <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
        这和前面两种稍有不同，需要先做出一个“锚”标记，即链接的目标地，
        <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
        再做到“锚”的链接。到“锚”的链接与平常相同。
      </p>
      <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
      <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
    <a href="#第一章">从这里可链接到第一章</a>
</body>
</html>

运行例1-3中的代码，并将滚动条拖到底端时，会看到如图1-10的效果。

图1-10 锚标记的使用（一）

当单击“从这里可链接到第一章”超链接时，可以发现页面显示的内容回到了顶端定义锚标记的地方，如图1-11所示。

图1-11 锚标记的使用（二）

3. 外部链接

外部链接是指超链接的目标是当前网站之外的页面路径，其语法格式和超链接的语法格式完全相同，比如需要在页面中使用Google的搜索功能，可以像例1-4这样编写代码。

例1-4

//……
<body>
    <img src="images/2_shulink.jpg" /><hr>
    <a href="www.google.cn">使用google搜索信息</a>
</body>
</html>

运行效果如图1-12所示。

图1-12 外部链接的使用

当单击“使用google搜索信息”超链接时，将打开目标页面Google，如图1-13所示。

4. 邮件链接

上网的时候经常会发现一些网上有一个超链接叫“联系站长”，当单击此超链接的时候，会打开操作系统自带的邮件发送软件，这就是邮件链接，它的使用语法如下：

<a href="mailto:邮箱地址">文本内容</a>

如例1-5中就使用了邮件链接。

图1-13 单击外部链接结果

例1-5

<html>
<head>
<title>邮件链接</title>
</head>
<body>
    <img src="images/2_shulink.jpg" /><hr>
    <a href="mailto:parddu@163.com">联系站长</a>
</body>
</html>

运行效果如图1-14所示。

图1-14 邮件链接的使用

当单击“联系站长”超链接时，会运行如图1-15所示的程序，用于发送邮件。

图1-15 单击邮件链接发送邮件

三、图片热点

图片热点是指将一个图片按区块链接到多个地址，通常用map标签制作图片热点，实现图片热点时分为定义和使用，其语法分别如下：

定义语法：

<map name="热点名" id="Map">
    <area shape="rect" coords="x1,y1,x2,y2" href="url" target="" title="提示信息"/>
</map>

使用语法：

<img src="图片" width="500" height="301" usemap="#Map"/>

在上面的语法中使用<map></map>标签定义热点，<map></map>标签的name表示为热点取名，id为该热点的唯一表示，在<img />标签中使用usemap属性引用热点id，在usemap的属性值中首先使用“#”表示通过id查找热点对象。

在<map></map>标签内必须有<area />子标签，用于定义图片的什么区域作为热点，<area />标签常用的属性如下：

■ shape：用于设置热点区域的形状，常用的值有circle（圆形）、rectangle（矩形）、polygon （多边形，也称为自定义）。

■ coords：用于设置热点形状的边界坐标，其参数个数取决于shape属性的值，如：

当shape="rect"时，表示热点形状为矩形，则coords="x1,y1,x2,y2"，表示热点是从横坐标为x1、纵坐标为y1的位置，到横坐标为x2、纵坐标为y2的位置区域内。

当shape="circle"时，表示热点形状为圆形，则coords="x,y,r"，表示热点区域的范围是以横坐标为x、纵坐标为y的点为圆心，以r为半径的圆。

当shape="ploy"时，表示热点为无规则的多边形，则coords="x1,y1,x2,y2,x3,y3,x4,y4……"。

每一对“x,y”坐标都定义了多边形的一个顶点（“0,0”是图像左上角的坐标）。定义三角形至少需要三组坐标，高维多边形则需要更多数量的顶点。多边形会自动封闭，因此在列表的结尾不需要重复第一个坐标来闭合整个区域。

定义三角形至少需要三组坐标，高纬多边形则需要更多数量的顶点。多边形会自动封闭，因此在列表的结尾不需要重复第一个坐标来闭合整个区域。该情况经常使用在地图相关的访问中。

■ href：设置该热点链接的目标路径，和超链接相同。

■ target：设置该热点链接显示位置，和超链接相同。

■ title：设置热点的提示信息。

例1-6演示了图片热点中几种形状的使用，即矩形热点区域、圆形热点区域以及自定义热点区域。

例1-6

//……
<body>
    <img src="images/2_5_1.jpg" border="0" usemap="#Map1"/>
    <map name="Map" id="Map1">
        <area shape="circle" coords="60,60,25" href="锚标记.html" alt="说明1">
    </map>
    <img src="images/2_5_3.jpg" border="0" usemap="#Map2"/>
    <map name="Map" id="Map2">
        <area shape="rect" coords="10,10,70,60" href="锚标记.html" title="提示2"/>
    </map>
    <img src="images/2_5_2.jpg" border="0" usemap="#Map3"/>
    <map name="Map" id="Map3">
        <area shape="poly" coords="35,12,42,71,105,9,94,89,50,74"
            href="锚标记.html" alt="说明3">
    </map>
</body>
</html>

在例1-6中插入了三张图片，并且分别在三张图片上建立了圆形热点、矩形热点以及自定义热点，当把鼠标移动到图片的热点区域的时候，就可以看到相应的提示信息，如图1-16所示。

在图1-16中，当单击图片的热点区域的时候，将跳转到热点的href属性指定的内容。做热点测试的时候，鼠标在图片上出现手状的区域就是热点区域。

图1-16 图片热点的使用

四、列表

HTML的列表是将内容按一定的顺序显示在页面中，当然有的时候内容前面有编号，有的时候内容前面没有编号，有编号的称为有序列表，无编号的称为无序列表，分别由标签<ol></ol>、<ul></ul>加上列表项标签<li></li>实现。

1. 有序列表

有序列表是指列表结构中的列表项有先后顺序的列表形式。从上到下可以有各种不同的序列编号，如1,2,3,4…或a、b、c、d……等，由标签<ol></ol>和列表项标签<li></li>实现，其语法如下：

<ol type="编号类型" start="value">
    <li type="编号类型">第1项
    <li>第2项
    <li>第3项
</ol>

其中type属性用于设置有序列表中列表项前的编号类型，而start属性用于设置起始值。type属性的值可以有很多种，在表1-2中列出了所有的类型。

表1-2 有序列表type的属性值

例1-7中使用有序列表显示各项信息。

<html>
例1-7
<head><title>有序列表的使用</title></head>
<body>
    网页前台技术列表
    <hr size="1">
    <ol type="i" start="2">
        <li>HTML</li>
        <li>CSS</li>
        <li>javascript</li>
        <li type="1">Flex</li>
        <li type="1">JQuery</li>
    </ol>
</body>
</html>

在例1-7中使用了有序列表输出网页前台技术，设置了type类型为“i”，起始值为2，所以将看到运行结果的编号为“ii、iii、iv、v、vi”，但是从运行结果中可以发现“v、vi”被“5、6”替换了，这是因为在列表项上设置了显示类型为数字：

    <li type="1">Flex</li>
    <li type="1">JQuery</li>

也就是说，如果<ol />和<li />上都设置了type属性，那么该列表项的显示将以<li />为准，图1-17就显示了例1-7的效果，“v、vi”被“5、6”替换。

图1-17 有序列表的使用

如果不设置type属性，那么type属性的值默认为“1”；不设置start属性时，start属性的值默认为“1”。

2. 无序列表

无序列表是指列表结构中的列表项没有先后顺序的列表形式。大部分网页应用的列表均采用无序列表，由标签<ul></ul>和列表项<li></li>实现，其语法如下：

<ul type="提示符类型">
    <li>第一项
    <li type="提示符类型">第二项
    <li type="提示符类型">第三项
</ul>

其中的type属性用于设置无序列表前的提示符号，其取值可以是表1-3中所罗列的选项。

表1-3 无序列表的type属性值

例1-8中使用无序列表显示网页开发后台技术，并设置所有的列表项前的提示符为空心圆，设置其中PHP技术为方块。

例1-8

<html>
<head><title>无序列表的使用</title></head>
<body>
    网页后台技术列表
    <hr size="1">
    <ul type="circle">
        <li>J2EE</li>
        <li>ASP.NET</li>
        <li type="square">PHP</li>
        <li>STRUTS</li>
        <li>SPRING</li>
    </ul>
</body>
</html>

例1-8的运行结果如图1-18所示。

图1-18 无序列表的使用

当然，列表不仅仅只有上面讲解的两种，还有<dir></dir>（目录列表）、<dl></dl>（定义列表）、<menu></menu>（菜单列表）。这些列表用途非常广泛，当学习了CSS（样式表）之后，大家可以使用列表和CSS制作出漂亮的菜单。

五、滚动效果

在网页上经常会看到文字和图片可以自上而下滚动，或者从左至右滚动。能够使这些僵硬的文字和图片变得活跃起来的大功臣便是<marquee>标签，其语法是：

<marquee属性1="值1"属性2="值2" ……>
    内容
</marquee>

<marquee />标签的属性如表1-4所示。

表1-4 <marquee />标签的属性

例1-9使用了图片和文本内容的滚动效果。

例1-9

//……
<body>
    <marquee align="middle" direction="down" height="200" width="130" scrollamount=
"2" bgcolor="#999999" >
        <ul type="circle">
            <li>J2EE</li>
            <li>ASP.NET</li>
            <li type="square">PHP</li>
            <li>STRUTS</li>
            <li>SPRING</li>
        </ul>
    </marquee>
    <marquee direction="up" height="200" width="200" scrollamount="4" bgcolor=
"#99FF99" onMouseOver="stop()" onMouseOut="start()" >
        <img src="images/2_10_1.jpg" /><br>
        <img src="images/2_10_2.jpg" /><br>
        <img src="images/2_10_3.jpg" /><br>
        <img src="images/2_10_4.jpg" /><br>
        <img src="images/2_10_5.jpg" /><br>
    </marquee>
</body>
</html>

在例1-9中第一个<marquee />标签滚动的内容是文本，设置内容居中、滚动方向向下。第二个<marquee />标签滚动的内容包含文本和图片以及水平线，滚动的方向向上，同时在里面设置了onMouseOver="stop()"、onMouseOut="start()"，其作用是：当鼠标移动到滚动内容上时，滚动停止（onMouseOver="stop()"），鼠标移出时继续滚动（onMouseOut="start()"）。例1-9运行结果如图1-19所示。

图1-19 滚动运行效果

以上marquee标签的说明中，不是所有的属性都必须使用，但是尝试使用每一个属性会得到意想不到的结果。

1.2.3 将JavaScript脚本嵌入HTML中

一、内部JavaScript

当将JavaScript脚本代码写在HTML文档中时，称为内部JavaScript代码，内部JavaScript代码必须编写在<script></script>标签之内。严格地说，<script></script>可以写在HTML文件中的任何位置，如<html>前、</html>后、<head>中、<body>中，甚至是表格、层内。

内部JavaScript的语法如下：

<html>
<head>
    <title>标题</title>
    <script language="javascript" type="text/javascript">
        javascript代码
    </script>
</head>
</html>

在语法中<script>标签有两个属性，分别是language和type。两个属性都可用来指定<script>标签中的脚本的类型。language属性在HTML和XHTML标准中受到了非议，这两个标准提倡使用type属性。所以language属性和type属性只需要使用一个就可以，建议使用type属性。下面使用内部的JavaScript代码在网页中输出一段文字，实现代码如例1-10所示。

例1-10

<script type="text/javascript">
    document.write("读者您好！<br><br>");
</script>
<html>
<head>
    <title>内部javascript </title>
    <script type="text/javascript">
        document.write("欢迎使用！<hr>");
    </script>
</head>
<body>
</body>
</html>
<script type="text/javascript">
    document.write("阅读愉快！");
</script>

在例1-10中，有三个不同的地方使用了内部JavaScript，当运行时IE浏览器首先会提示是否运行JavaScript脚本程序，此时要选择“允许阻止的内容”命令，如图1-20所示。

图1-20 允许阻止的内容

运行效果如图1-21所示。

图1-21 运行效果

通过示例可以看出，<script>可以放在HTML文档中的任何位置，每个位置的JavaScript都没有区别，在浏览器运行JavaScript代码时，是从上往下执行的。

二、外部JavaScript

在实际开发中使用的JavaScript代码很多，而且重复的也多，为了能让JavaScript代码便于重复使用和维护，经常会将JavaScript写在单独的文件中，这种写法称为外部JavaScript。外部JavaScript代码必须写在后缀名为js的文件中，当某个页面需要使用外部JavaScript代码时，必须导入相应的js文件。

导入外部js文件的语法如下：

<script type="text/javascript" src="url"></script>

这里需要注意的是<script>必须写成实体标签，也就是<script></script>，而不能写成空标签<script/>。下面的示例演示了外部JavaScript的使用。

（1）创建名为1_11.js文件，编写代码如下：

document.write("读者您好！<hr>");

注意外部js不需要写<script>标签。

（2）创建名为1_11.html文件，将该文件保存在与1_11.js相同的目录下，编写代码如下：

<html>
<head>
    <title>外部javascript</title>
    <script type="text/javascript" src="1_11.js"></script>
</head>
<body></body>
</html>

运行结果如图1-22所示。

图1-22 外部JavaScript的使用

在实际开发过程中，有些时候会将内部JavaScript和外部JavaScript结合使用，也就是同一个HTML文档中可以有内部JavaScript也可以有外部JavaScript，当然也可以同时导入多个外部JavaScript文件。