1.2 熟悉HTML_网页设计与网站建设从入门到精通-QQ阅读男生玄幻网

书名：网页设计与网站建设从入门到精通
作者名：龙马高新教育
本章字数：2666字
更新时间：2021-03-27 00:21:10

1.2 熟悉HTML

网站是由各个网页组成的，而HTML又是网页主要的组成部分。所以要学习网站怎样建设，必须从HTML语言学起。

先简单的介绍一下HTML语言。HTML是一种标记语言，在网页的编辑中用于标识网页中的不同元素。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。或许有些使用过一般网页编辑软件的读者会说：“不懂HTML语言也能编辑出一个非常优秀的网页来”，确实是这样的，如使用Macromedia Dreamweaver就能做到。但是要成为一个真正的网页编程高手，一定要了解HTML语言的基本结构。在本节中将讲解HTML的基础知识以及网页相关知识，这些内容的学习和掌握是一个网页设计高手成长的必经之路。

1.2.1 我的第一个HTML页面

一个HTML文件的后缀名是．htm或者是．html。我们使用文本编辑器就可以编写HTML文件。和一般文本的不同的是，一个HTML文件不仅包含文本内容，还包含一些Tag，中文称“标记”。

现在让我们亲自写一个HTML文件来大体看看网页的结构吧。

打开记事本，新建一个文件，输入以下代码，然后将这个文件存成myfirst.html。

<html>
<head>
<title>欢迎光临</title>
</head>
<body>
<! --下面是网页内容-->
这是我的第一个HTML页面<b>这些文件是加粗的</b>
</body>
</html>

双击文件，系统会自动使用浏览器打开它，可以看到它的效果。上面各个代码的含义如下。

① HTML这个文件的第一个Tag是<html>，这个标记告诉你的浏览器，这是HTML文件的头。文件的最后一个Tag是</html>，表示HTML文件到此结束。

② 在<head>和</head>之间的内容，是头部信息。头部内的信息通常是不显示出来的，一般在浏览器里看不到。但是这并不表示这些信息没有用处。比如，可以在Head信息里加上一些关键词，有助于搜索引擎搜索到网页。

③ 在<title>和</title>之间的内容，是这个文件的标题。可以在浏览器最顶端的标题栏看到这个标题。

④ 在<body>和</body>之间的信息，是正文。

⑤ 在<b>和</b>之间的文字，用粗体表示。<b>顾名思义，就是bold（加粗）的意思。

从上面的例子我们可以看出HTML文件有以下这些特点。

① HTML文件看上去和一般文本类似，但是它比一般文本多了Tag，如<html>, <b>等。通过这些Tag，可以告诉浏览器如何显示这个文件。

② Tag以“<”开始，以“>”结束。

③ Tag通常是成对出现的，如<body></body>。

④ HTML的Tag不区分大小写。比如，<HTML>和<html>其实是相同的。

⑤ 注释由开始标记“<! --”和结束标记“-->”构成，注释内容不在浏览器窗口中显示。

1.2.2 HTML元素的属性

HTML元素用Tag表示，它可以拥有属性，属性用来扩展HTML元素的能力。比如，可以使用一个bgcolor属性，使得页面的背景色成为红色，就像这样：

<body bgcolor="red">

属性通常由属性名和值成对出现，就像这样：name="value"。上面例子中的bgcolor就是name, red就是value。属性值一般用双引号标记起来。

属性通常是附加给HTML的开始标记，而不是结束标记。

1.2.3 BODY属性的设置

BODY标记作为网页的主体部分，有很多内置属性，这些属性用于设置网页的总体风格。主要属性见下表。

在上述属性中，各个颜色属性的值有两种表示方法：一种是使用颜色名称来指定，如红色、绿色和蓝色分别用red、green和blue表示；另一种是使用十六进制RGB格式表示，表示形式为color＝"#RRGGBB"或color＝"RRGGBB"，其中RR是红色、GG是绿色、BB是蓝色，各颜色分量的取值范围为00—FF。例如，#00FF00表示绿色，#FFFFFF表示白色。

背景图片属性值是一个相对路径的图片文件名。例如<body backgroud＝"bg.gif">中bg.gif是背景图片的名字，这个实际是带相对路径的图片文件名字。例如，你做的这个页面放在d:\myweb\，而背景图片的位置放在d:\myweb\images\，那么就需要这样写了：<body backgroud＝"images\bg.gif">。

1.2.4 字体属性的应用

1．标题字体

<h#>文字</h#>

其中# =1,2,3,4,5,6。

例如，<h1>你好，欢迎光临</h1>

用于设置文档中的标题，<H1>到<H 6>标题标记会自动将字体加粗，并在文字上下空一行。

2．字体的大小

<font size=#>文字</font>。

其中#=1, 2, 3, 4, 5, 6, 7 or +#, -#

例如，<font size=7>你好，欢迎光临</font>

3．字体的修饰

粗体：<b>文字</b>

斜体：<i>文字</i>

下画线：<u>文字</u>

删除线：<strike>文字</strike>

闪烁：<blink>文字</blink>

增强：<strong>文字</strong>

强调：<em>文字</em>

4．字体颜色

指定颜色<font color=#>文字</font>

例如，红色文字可以表示为：<font color=red>文字</font>或者<font color=#ff0000>文字</font>。

1.2.5 在网页中插入图像

大量采用在网页设计中的图像，网页的美感大多来自精心处理的图像。可使用IMG标记在网页中插入一个图像。以下为IMG标记最常用的4个属性。

● SRC属性：给出图像文件的URL地址，图像可以是JPEG文件、GIF文件或PNG文件。

● AIT属性：给出图像的简单文本说明，这段文本将在浏览器不能显示图像或图像或者加载时间过长时显示。

● HEIGHT属性：设置图像的高度，所用单位可以是像素或百分数。

● WIDTH属性：设置图像的宽度。

|提示|

如果只给出了高度或宽度，则图像将按比例进行缩放。

1.2.6 表格的使用

表格在网页设计中有着广泛的应用，它不仅可作为信息的一种表示形式，还常用于页面设计中的布局与定位。

1．表格的创建

表格一般由若干行和若干列的单元格组成，表格上面可以有一个标题，表的第一行称为表头。与表格相关的标签如下。

● <table>：界定表格，最常用的属性是border，定义边界线的粗细。

● <tr>：定义表格的一行。

● <td>：定义单元格。

2．表格的常用属性

续表

|提示|

<TD>ALIGN和VALIGN属性将会覆盖任何为整个一行指定的排列方式。

以下代码将创建一个2行2列的表格。

<table width="540" height="249" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="204">这是第一行第一列</td>
<td width="336" align="center">这是第一行第二列，居中</td>
</tr>
<tr>
<td>这是第二行第一列</td>
<td valign="bottom">这是第二行第二列，文字居于底部</td>
</tr>
</table>

代码运行效果如下图所示。

1.2.7 框架的使用

框架网页将浏览器上的视窗分成不同区域，在每个区域中都可以独立显示一个网页，也就是所谓的分割窗口。框架网页通过一个或多个FRAMESET和FRAME标记来定义。 FRAMESET表示框自集，FRAME代表一个框架。在框架网页中，将FRMAESET标记置于HEAD之后，以取代BODY的位置，还可以使用noframes标记给出框架不能被显示时的替换内容。

以下代码是创建一个包含有2个框架的页面，并在框架中各自放入不同网站的首页，效果如下图所示。

<HTML>
<HEAD>
<TITLE>框窗实作</TITLE>
</HEAD>
<FRAMESET COLS="500, *" >
  <FRAME SRC="http://www.sohu.com" NAME="1">
  <FRAME SRC="http://www.163.com" NAME="2">
</FRAMESET>
</HTML>

示例解释：

● COLS="500, ＊" ：垂直切割成2个画面，一个为500像素，另一个为余下的宽度。你也可以切成三个，如COLS="300, ＊,100"。

● SRC="http://www.sohu.com"：设定此框架中要显示的网页名称。每个框架一定要对应一个网页，否则就会产生错误，这里将搜狐首页面置入左框架中。

● NAME="1"：设定这个框架的名称，这样才能指定框架来作连结。

常见的框架结构包括上方固定、下方固定、右侧固定、左侧固定四种基本框架，代码如下。

上方固定：

<frameset rows="80, *" frameborder="no" border="0" framespacing="0">
<frame src="test1.htm" name="topFrame" scrolling="No" noresize="noresize" title="topFrame" />
<frame src="test2.htm" name="mainFrame" title="mainFrame" />
</frameset>

下方固定：

<frameset rows="*,80" frameborder="no" border="0" framespacing="0">
<frame src="test1.htm" name="mainFrame" title="mainFrame" />
<frame src="test2.htm" name="bottomFrame" scrolling="No" noresize="noresize"title="bottomFrame" />
</frameset>

右侧固定：

<frameset cols="*,80" frameborder="no" border="0" framespacing="0">
<frame src="test1.htm" name="mainFrame" title="mainFrame" />
<frame src="test2.htm" name="rightFrame" scrolling="No" noresize="noresize"title="rightFrame" />
</frameset>

左侧固定：

<frameset cols="80, *" frameborder="no" border="0" framespacing="0">
<frame src="test1.htm" name="leftFrame" scrolling="No" noresize="noresize"title="leftFrame" />
<frame src="test2.htm" name="mainFrame" title="mainFrame" />
</frameset>

其他诸如上方固定右侧嵌套、右侧固定上方嵌套等都是由这几个基本型构成。

1.2.8 表单的使用

留言版就是一个表单运用很好的例子。表单通常必须配合脚本或后台程序来运行才有意义。本单元纯粹以介绍各式表单为主，在本书的后面章节我们将介绍如何将表单与程序相结合。

以下是常用表单及属性的代码示例及相应的效果。

1.2.9 超链接的使用

没有链接，WWW将失去存在的意义。文件链接是超链中最常用的一种情形，基本语法格式如下。

<a href="字符串" target="字符串" title="字符串’>文本</a>

其中各属性描述如下。

① href：该属性是必选项，用于指定目标端点的url地址。

② target：该属性是可选项，用于指定一个窗口或框架的名称。目标文档将在指定窗口或框架中打开。如果省略该属性，则在超链所处的窗体或框架中打开目标文档。

③ title：该属性也是可选项，用于指定鼠标移到超级链接所显示的标题文字。

建立一个百度的超链接如下。

<a href="http://www.baidu.com">百度</a>

1.3 熟悉JavaScript语言

想要学好网页设计，JavaScript语言的熟练应用必不可少，下面简单介绍。

1.3.1 JS简介及特点

JavaScript是一种基于对象和事件驱动，并具有安全性能的脚本语言。有了JavaScript，可使网页变得生动。使用它的目的是与HTML超文本标识语言、Java脚本语言一起实现在一个网页中链接多个对象，与网络客户交互作用，从而可以开发客户端的应用程序。它是通过嵌入或调入在标准的HTML语言中实现的。

JavaScript具有以下特点。

① JavaScript是动态的，它可以直接对用户或客户输入作出响应，无须经过Web服务程序。

② JavaScript是一种脚本语言，它本身提供了非常丰富的内部对象供设计人员使用。

③ JavaScript是一种可以嵌入Web页面中的解释性编程语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户，由浏览器解释执行。

④ JavaScript中变量声明，采用其弱类型。即变量在使用前不需作声明，而由解释器在运行时检查其数据类型。

⑤ JavaScript的代码是一种文本字符格式，可以直接嵌入HTML文档中，并且可动态装载。编写HTML文档就像编辑文本文件一样方便。

⑥ JavaScript使用 <script>...</script> 来标识。

1.3.2 JS的数据类型和变量

JavaScript有六种数据类型。主要的类型有number、string、object以及Boolean类型，其他两种类型为null和undefined。

● String字符串类型：字符串是用单引号或双引号来说明的（使用单引号来输入包含引号的字符串）。

● 数值数据类型：JavaScript支持整数和浮点数。整数可以为正数、0或者负数；浮点数可以包含小数点，也可以包含一个 “e”（大小写均可，在科学记数法中表示“10的幂”），或者同时包含这两项。

● Boolean类型：可能的Boolean值有true和false。这是两个特殊值，不能用作1和0。

● Undefined数据类型：一个为undefined的值就是指在变量被创建后，但未给该变量赋值以前所具有的值。

● Null数据类型：null值就是没有任何值，什么也不表示。

● object类型：除了上面提到的各种常用类型外，对象也是JavaScript中的重要组成部分。

在JavaScript中变量用来存放脚本中的值，在需要用这个值的地方就可以用变量来代表，一个变量可以是一个数字，文本或其他一些东西。

JavaScript是一种对数据类型变量要求不太严格的语言，所以不必声明每一个变量的类型。变量声明尽管不是必须的，但在使用变量之前先进行声明是一种好的习惯。可以使用var语句来进行变量声明。例如，var men = true; // men中存储的值为Boolean类型。

变量命名：JavaScript是一种区分大小写的语言，因此将一个变量命名为computer和将其命名为Computer是不一样的。

另外，变量名称的长度是任意的，但必须遵循以下规则。

① 第一个字符必须是一个字母（大小写均可），或一个下画线(_)或一个美元符 ($)。

② 后续的字符可以是字母、数字、下画线或美元符。

③ 变量名称不能是保留字。

1.3.3 JS的语句及语法

JavaScript所提供的语句分为6个大类，分别是变量声明赋值语句、函数定义语句、条件和分支语句、循环语句、对象操作语句和注释语句。

1．变量声明，赋值语句

变量简单地说就是指那些没有固定值，可以改变的数。在使用一个变量之前，首先要声明这个变量，在JavaScript中使用var关键字声明变量。

语法如下： var变量名称 [=初始值] 。

通常我们可以一次声明一个变量，如：

Var a;

也可以一次声明多个变量，如：

Var a, b, c;

还可以在声明变量的同时给变量赋一个初始值，如：

var a = 32 //定义b是一个变量，且有初值为32。

|提示|

变量名可以是任意长度，但必须符合下列规则。

① 变量名的第一个字符必须是英文字母，或者是下画线符号。

② 变量名的第一个字母不能是数字。其后的字符，可以是英文字母、数字或下画线符号。

③ 变量名不能是JavaScript的保留字。

2．条件和分支语句

if...else条件语句：条件语句通俗的讲就是根据你想要满足的条件进行的判断，在满足你想要的条件时执行什么语句，当不满足你想要的条件时执行什么语句。条件语句是所有程序语言中最基本的语句之一。

if...else语句完成了程序流程块中分支功能：如果其中的条件成立，则程序执行紧接着条件的语句或语句块；否则程序执行else中的语句或语句块。

用法如：

if (result == true)
      {
      response = "你答对了！"
      }else{
      response = "你错了！"
      }

switch分支语句：分支语句简单的说就是选择语句，根据一个变量的不同取值选择不同的处理方法。

用法如：

Switch (score){
Case 50:
  Result="悲哀呀，你挂科了";
  Break;
Case 60:
  Result="很幸运，你勉强通过";
 Break;
Case 70:
  Result="不错，还需要加油呀";
 Break;
Case 80:
  Result="还能更进一步吗？";
 Break;
Case 90:
  Result="高手呀，佩服佩服";
 Break;
}

Break关键词用来跳出分支语句，如果判断score为50，接着执行result="悲哀呀，你挂科了"，直接跳出switch语句，不再进行下面的条件判断。

|提示|

当分支条件比较少时，if ...else与switch都可以使用，在分支条件较多时使用switch最为有效。

3．循环语句

循环语句是指实现重复计算或操作的语句，循环语句也是高级语言中常用语句之一。在JavaScript中常用循环语句有for, for … in , while, do while。

for语句用于在执行次数一定的情况下，语法如下。

for (变量=开始值；变量<=结束值；变量=变量+步进值)
    {
      需要反复执行的语句．..
 }

只要变量小于结束值，循环体就被反复的执行。如：

var i=0
for (i=0; i<=10; i++)
{
document.write("已运行次数：" + i)
document.write("<br />")
}

for...in语句与for语句有一点不同，它循环的范围是一个对象所有的属性或是一个数组的所有元素。语法如下。

for (变量in 对象或数组)
{
要执行的语句．..
}

如：

var i
var sz = new Array()
sz[0] = "11"
sz[1] = "12"
sz[2] = "13"
for (x in sz)
{
document.write(sz[i] + "<br />")
}

while语句所控制的循环不断地测试条件，如果条件始终成立，则一直循环，直到条件不再成立。语法如下。

while (变量<=结束值)
  {
要执行的语句．..
}
如：
var i=0
while (i<=10)
{
document.write("已运行次数： " + i)
document.write("<br />")
i=i+1
}

Do...while语句与while语句很相似，在判断之前先执行一次语句，然后判断是否符合指定条件，当条件符合时候接着再执行语句，如：

var i=0
do
{
document.write("已运行次数：" + i)
document.write("<br />")
i=i+1
}
while (i<0)

|提示|

do...while语句至少执行一次，而while语句则不然，当指定条件不成立时候，语句不被执行。

1．函数定义语句

函数是一组随时随地可以调用的语句，用来实现程序的功能和方法。在JavaScript中，函数用关键词function定义，语法如下。

function 函数名称 （函数所带的参数）
        {
            函数执行部分
          }

return语句将结束函数并返回后面表达式的值，return语句的语法为：“return表达式”函数结束时可以没有return语句，但是只要遇到return语句函数就结束。函数的定义和调用如下。

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
function getSqrt(x)
{
var y=x * x;
document.write(y);
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
getSqrt(8);
</SCRIPT>
</BODY>
</HTML>

程序定义了一个函数，该函数没有返回值。每次调用就会将相应的内容显示到浏览器上。

2．对象操作语句

JavaScript是一种基于对象的编程的语言，它为我们提供了丰富的对象，这就需要我们懂得如何去操作这些对象，这就是对象操作语句。常用对象操作语句有with、new和this。

With语句起到这样的作用，如果你想使用某个对象的许多属性或方法时，只要在with语句的（）中写出这个对象的名称，然后在下面的执行语句中直接写这个对象的属性名或方法名就可以了。语法如下。

with (对象名称)
{
执行语句
}
如：
with(document)
{
  write("文档的标题是 ： \"" + title + "\".");
  write("文档的URL是： " + URL);
  }

其中title和url就是document的两个属性。

new语句是一种对象构造器，可以用new语句来定义一个新对象。语法如下。

新对象名称＝ new真正的对象名

例如，我们可以这样定义一个新的日期对象： var curr＝ new Date()，然后，变量curr就具有了Date对象的属性。

this运算符总是指向当前的对象。

3．注释语句

注释语句就是在程序的开始或中间，对程序进行说明的语句。在程序的后继维护开发中，注释语句起到非常重要的作用。注释语句有单行注释（//）和多行注释(/＊＊/)，如：

//这是单行注释

/＊这可以多行注释．.. ＊/

1.3.4 JS的对象及其属性和方法

在对象操作语句中我们了解了对象这个概念，JavaScript为我们提供了一些非常有用的常用内部对象和方法。用户不需要用脚本来实现这些功能。这正是基于对象编程的真正目的。在实际工作中，我们经常用到这些对象方法。熟练灵活地运用这些对象方法，能给我们的工作带来很大的便利。

在实际工作中我们频繁使用的对象有字符串、数组、日期和时间。

1．字符串对象String

字符串很容易理解，就是一些字符的集合。如s=“this is a string”，这就代表s为字符串变量，而“this is a string”是一串字符。字符串对象有以下属性和方法。

（1）获取字符串长度length属性

如：

var a=' ';
a.length;                            //返回0
var b ='javascript';
b.length;                            //返回10

（2）截取字符串substring方法

substring方法可以接受两个参数来指定截取范围，当第二个参数被省略时，默认截取到字符串的结尾。如：

var a = ' this is a string ';
var b=a.substring(2,4);        //b='is'
var c=a.substring(2);    //c='is a string'

（3）字符串替换replace方法

replace方法可以将字符串中指定的内容替换成新的内容并返回一个新的字符串。如：

var a= ’我要建网站’;
var b=a.replace(’要’, ’学习’);                   //b= ’我学习建网站’

从例子中我们看到replace方法有2个参数，第一个为需要被替换的子字符串，第二个为替换的内容。当执行replace方法时，程序会在字符串中查找所有与第一个参数相符的片段，并替换为第二个参数指定的内容。如：

Var a = 'this is a string ';
Var b=replace(' is' , 'aa '); //b= 'thaa aa a string'

（4）大小写转换toLowerCase和toUpperCase

在程序处理过程中，有时候需要对字符串进行变大写或变小写，比如，比较两个字符串是否相等。toLowerCase是把所有字母转为小写，相应的toUpperCase是把所有字符转为大写。如：

Var a= 'This is a string ';
Var b=a.tolowercase(); //b='this is a string'
Var c=a.touppercase(); //c='THIS IS A STRING'

2．数组对象Array

数组同字符串对象一样，是一种数据类型，通过数组可以把若干变量有序地组织起来，也是最常用的数据类型之一。它有两种创建方式，其一通过数组直接进行创建；其二通过Array关键词进行创建。如：

var a = [123,44 , '3',22]; //直接创建数组
var b= new Array(6); //6个元素的数组

数组常用的属性方法有获取数组的长度、添加数组中的元素。同字符串一样，数组也是通过length函数获取长度的。如：

Var a=['1', '2', '3', '4', '5'];
Var b=a.length    //b=5

向数组中添加数据使用unshift关键字操作。如：

Var a=['1', '2', '3', '4', '5'];
a.unshift(0);         //a=[0,1,2,3,4,5]

|提示|

在JavaScript语言中，数组中值的数据类型可以不一致，这一点与其他语言有区别。

3．日期和时间对象Date

对时间的处理是程序设计中经常需要做的事情。在JavaScript中，时间由Date对象表示，一个Date对象表示一个日期和时间值。Date对象提供了丰富的方法来对这些值进行操作。日期和时间类型通过Date关键字进行创建。如：

var now = new Date(); //返回的是一个表示当前时间的对象

日期和时间对象有很多常用属性和方法。

● getFullYear()：返回对象中的年份部分，用四位数表示。

● getMonth()：返回对象中的月份部分（从0开始计算）。

● getDate()：返回对象所代表的一月中的第几天。

● getDay()：返回对象所代表的一周中的第几天。

● getHours()：返回对象中的小时部分。

● getMinutes()：返回对象中的分钟部分。

● getSeconds()：返回对象中的秒部分。

● getMilliseconds()：返回对象中的毫秒部分。

● getTime()：返回对象的内部毫秒表示。

使用起来都是一样的，如：

var now = new Date();
var curryear=now. getFullYear() //返回当前年份curryear='2012'

|提示|

对象只是一种特殊的数据。

1.3.5 JS的事件处理

事件是浏览器响应用户交互操作的一种机制，JavaScript的事件处理机制可以改变浏览器响应用户操作的方式，这样就开发出具有交互性并易于使用的网页。

浏览器为了响应某个事件而进行的处理过程，叫作事件处理。

事件定义了用户与页面交互时产生的各种操作，例如单击超级连接或按钮时，就产生一个单击（click）操作事件。浏览器在程序运行的大部分时间都等待交互事件的发生，并在事件发生时，自动调用事件处理函数，完成事件处理过程。

事件不仅可以在用户交互过程中产生，而且浏览器自己的一些动作也可以产生事件，例如，当载入一个页面时，就会发生load事件，卸载一个页面时，就会发生unload事件等。

归纳起来，必须使用的事件有三大类。

① 引起页面之间跳转的事件，主要是超链接事件。

② 事件浏览器自己引起的事件。

③ 事件在表单内部同界面对象的交互。

界面事件包括Click（单击）、MouseOut（鼠标移出）、MouseOver（鼠标移过）和MouseDown（鼠标按下）等。

1．单击事件

鼠标单击事件是常见的事件，语法非常简单：“onclick=函数或是处理语句”。如：

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="BUTTON" VALUE="单击" ONCLICK="alert(’鼠标单击’)">
</FORM>
</BODY>
</HTML>

当鼠标单击按钮的时候，自动弹出一个对话框，显示的结果如下图所示。

2．处理下拉列表

下拉列表是常用的一种网页元素，一般利用ONCHANGE事件来处理。如：

<HTML>
<HEAD>
</HEAD>
<BODY>
<SELECT NAME="selAddr" SIZE="1" ONCHANGE="func()">
<OPTION SELECTED VALUE="郑州">郑州</OPTION>
<OPTION VALUE="洛阳">洛阳</OPTION>
<OPTION VALUE="开封">开封</OPTION>
</SELECT>
<SCRIPT LANGUAGE="JavaScript">
function func()
{
alert("你选择了" + selAddr.value);
}
</SCRIPT>
</BODY>
</HTML>

每个下拉列表的OPTION项都有一个VALUE值，读出来的是VALUE属性的值。执行的结果如下图所示。