HTML语言

 

1.  认识HTML常用标记,理解其常用属性。

2.  掌握HTML常用标记的用法。

3.  熟悉使用HTML制作较简单的网页。

 

 

绚丽多彩的网页是由HTML语言将各种元素有机组合而成的,是纯文本格式的,可以使用任何一种文本编辑软件(如写字板、记事本等)来实现。但考虑到网页内容的复杂性和网页开发的高效性,网页制作中一般不会直接书写HTML语句,而通过一些专用的开发软件来制作。这些软件能自动生成HTML语句以及可视化工作界面,大大减少了人工编写的工作量,制作过程直观明了。Dreamweaver就是这样一款很好的网页开发软件。



※任务分析

该任务通过一个简单的网页实例来认识HTML文件的基本结构和HTML语言的基本语法。任务实例如图3-1所示。网页背景颜色为深红色,文本颜色为白色。

◆图3-1  HTML语言书写的一个简单网页

※相关知识

一.什么是HTML语言

HTMLHyper Text Markup Language,超文本标记语言)是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档,通常它的扩展名为“.html”或“.htm”。

二.HTML基本语法

HTML语言是通过各种标记来标识文档的结构和文字、图形、动画、声音、表格、链接等信息的。HTML的标记总是放在一对尖括号<>中,它有两种形式:单标记和双标记。

1.单标记

单独使用就可以表达语意的标记。

语法:<标记>

如,换行标记  <br>

2.双标记

双标记必需成对出现,由“始标记”和“尾标记”两部分组成。“尾标记”是在“始标记”前加一个斜杠(/)。

语法:<标记> …… </标记>

如,段落标记  <p>  ……  </p>

3.标记属性

为了使呈现的页面更加美观,除了使用标记,还可以使用标记的属性对标记之间的内容进行修饰,其语法为:

<标记 属性1=""  属性2=""  属性3="……>

如,<body bgcolor="#880000" text="#FFFFFF">

属性是可以省略的,省略时即取默认值。各个属性之间无先后次序,但是各属性间必须用空格隔开,属性的值用英文半角的双引号括起来。

4.文档的结构

HTML文档通常由包含在<html>标记和</html>标记之间的头部和正文两大部分构成,基本结构如下:

其中:

<html>……</html>表示文档的开头和结尾,在文档的最外层,文档中的所有信息都是都包含在这一对标签中。

<head>……</head>html文档的头部,这一对标签中的内容用于说明网页文件的标题(<title>……</title>)和其他公共的属性,是不显示在浏览器窗口中的。

<body>……</body>这对标记之间的内容是浏览器窗口中显示的内容。

5.文档的属性

<body>标记对应网页的主体部分,其标记属性就是页面的属性。如bgcolorbackgroundtext等。

bgcolor="颜色"                               设置文档背景色

background="图像文件的路径/图像文件的名字"   设置文档背景图像文件

text="颜色"                                  设置文档文字默认颜色

HTML中,色彩的表示方法有两种:一种是用英文单词来表示的,如“red”、“blue”等几种常用颜色。另一种是用16进制的红(R)、绿(G)、蓝(B),即数字0-9和字母A-F来表示的,如“#FF0000”(红色)。

※任务实施

1.使用“我的电脑”或“资源管理器”在我们已经创建的example站点(mwmw文件夹),创建一个新文件夹,命名为exam

2.打开Windows记事本程序。输入如下HTML语句:

<html>

<head>

<title>3-1</title>

</head>

<body bgcolor="#880000" text="#FFFFFF">

这是一个简单的例子

</body>

</html>

3.保存此文件到exam文件夹中,命名为ex01.html

4.打开mwmw文件夹中的exam文件夹,双击ex01.html网页文件,在浏览器中可以观察到其效果与图3-1相同。

※任务拓展

使用Dreamweaver的代码视图,制作如站点首页(index.html)效果相同的网页。操作如下:

1)运行Dreamweaver CS3,打开站点example

2)在exam文件夹中新建一个空白的网页文件,取名为ex02.html

3)单击文档工具栏中的按钮,切换到代码视图。

4)删除其中原有的语句,输入如下语句:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>每味美味酒店</title>

</style>

</head>

<body background="images/bg.jpg">

<div align="center">

<img src="images/top01.jpg" width="800" height="70">

<br>

<img src="images/index.jpg" width="800" height="427">

<p><a href="home.html">点击进入……</a></p>

</div>

</body>

</html>

 

5)保存文件,并浏览。

仔细观察网页,可以看到此网页与index.html大致相同。细节上的不同是由于本案例中没有对HTML标记设置相应的样式。随着学习的进行,我们对HTML熟悉以后这种问题是会迎刃而解的。

 



※任务分析

该任务结合“优秀员工评比的通知”网页,介绍页面标记的使用方法。任务实例如图3-2所示。

◆图3-2  优秀员工评比的通知

※相关知识

一.标题标记

格式:<h#>……</h#>

其中,“#”的取值范围为1-6。取1时为一级标题,字体最大;取6时为六级标题,字体最小。

作用:设置文档的各级标题。

常用属性:align,用于定义标题的对齐方式,默认值为“左对齐”,属性值如表3-1所示。

3-1  标题标记的align属性

属性值

功能

示例

left

左对齐

<h2 align="left">二级标题左对齐</h2>

center

居中对齐

<h2 align="center">二级标题居中对齐</h2>

right

右对齐

<h2 align="rigth">二级标题右对齐</h2>

二.版面格式标记

1.说明标记

格式:<!——说明的文字——>

作用:为文档加上说明,但是不显示在网页页面中。

2.段落标记

格式:<p>或者<p>……</p>

作用:使标记后的内容另起一段,并加一个空白行。

常用属性:align,用于定义段落的对齐方式。取值方式如表3-1所示。

3.换行标记

格式:<br>

作用:使标记后的内容换一行显示,但是不换段落。

4.字体标记

格式:<font>……</font>

作用:设置标记间内容的字体、大小、颜色等格式。

常用属性:如表3-2所示。

3-2  字体标记的常用属性

常用属性

功能

示例

face

字体

<font face="宋体">文本</font>

size

大小,取值范围为1-7

<font size="1">文本</font>

color

颜色

<font color="red">文本</font>

title

当鼠标指向文本时,出现的信息

<font title="标记">文本</font>

5.字体修饰标记

作用:设置标记间内容的粗体、斜体、下划线等特殊效果,

字体修饰标记的功能如表3-3所示。

3-3  字体修饰标记

标记

功能

示例

<b>……</b>

<strong>……</strong>

粗体

<b>字体加粗显示</b>

<i>……</i>

斜体

<i>字体斜体显示</i>

<u>……</u>

下划线

<u>字体加下划线显示</u>

<s>……</s>

<strike>……</strike>

删除线

<strike>字体加删除线显示</strike>

<big>……</big>

字体加大

<big>字体加大显示</big>

<small>……</small>

字体缩小

<small>字体缩小显示</small>

<sup>……</sup>

上标

<sup>字体变上标显示</sup>

<sub>……</sub>

下标

<sub>字体变下标显示</sub>

<em>……</em>

强调

<em>字体强调显示</em>

6.文本居中对齐标记

格式:<center>……</center>

作用:设置居中对齐方式。功能与<p>等标记中的属性align="center"相同。

7.水平线标记

格式:<hr>

作用:在文档中插入一根水平线。

常用属性:如表3-4所示。

3-4  水平线标记的常用属性

常用属性

功能

示例

align

水平线对齐方式

若省略属性值,则默认为居中对齐

<hr align="right">

color

水平线的颜色

<hr color="#666666">

size

水平线的宽度,单位默认为像素

<hr size="5">

width

水平线的长度,单位为像素或百分比

(百分比指的是占页面宽度的比例)

<hr width="95%">

noshade

水平线无阴影

<hr noshade color="red">

8.特殊符号

作用:在文档中显示特殊符号。

各种特殊符号的字符名称如表3-5

3-5  特殊符号

字符名称

显示结果

&nbsp

空格

&lt

小于号(<

&gt

大于号(>

&quot

双引号("

&times

乘号(×)

&copy

版权所有(©

&reg

已注册(®

三.项目符号标记

格式:

<ul>

<li>列表项1</li>

……

<li>列表项n</li>

</ul>

作用:列表分为有序列表和无序列表两类。

有序列表:它的主要标记有<ol>……</ol><li>……</li>。其中,标记<ol>……</ol>放在外层,标记<li>……</li>放在内层用于区分每个列表项。列表效果如图3-3所示。

 

◆图3-3  有序列表的样式

无序列表:即项目符号,它的主要标记有<ul>……</ul><li>……</li>。其中,标记<ul>……</ul>放在外层,标记<li>……</li>放在内层用于区分每个列表项。列表效果如图3-4所示。

◆图3-4  无序列表的样式

常用属性:标记<ol>……</ol><ul>……</ul>的主要属性为type,取值如表3-6、表3-7所示。

3-6  项目符号<ol>标记的属性

属性值

功能

decimal

数字(默认值)

lower-roman

小写罗马数字

upper-roman

大写罗马数字

upper-alpha

小写字母

upper-alpha

大写字母

3-7  项目符号<ul>标记的属性

属性值

功能

disc

实心圆点(默认值)

circle

空心圆

square

实心小方块

四.图像标记

格式:<img>

作用:在文档中插入图像文件,其中插入的图像文件的格式可以是:.JPG.GIF.PNG

常用属性:如表3-8所示。

网页中常用的文件类型:

JPG文件:是真彩位图图像的压缩格式,与其它真彩图像格式相比占用的数据量较少,便于网络传输。其显示质量与压缩率有关。网页制作中JPG图像的压缩率在60%-80%左右较好。

PNG文件:是专门针对Web的一种无损压缩图像格式文件,其压缩比较大,同时还支持透明背景和动态效果。

GIF文件:这类文件所表示的图片颜色数最多为256种,可仿真彩色。图像所占用的数据量较少,是网页中常用的图片类型之一。分为静态GIF(图片)和动态GIF(动画)。

3-8  图像标记的属性

常用属性

功能

示例

src

指定插入图像文件的路径和名称

<img src="imgage/1.jpg">

align

对齐方式,属性值:leftrighttopmiddlebottom

<img src="imgage/1.jpg" left="middle">

alt

当鼠标指向图像时,显示的文本。

<img src="imgage/1.jpg" left="middle" alt="文本">

width

指定图像的宽度,单位为像素。

<img src="imgage/1.jpg" width="200" height="150" border="2">

height

指定图像的高度,单位为像素。

border

指定图像的边框,默认为0,即无边框。

hspace

指定图像左右两边与其他对象之间的距离,单位为像素。

<img src="imgage/1.jpg" hspace="15" vspace="15">

vspace

指定图像上下两端与其他对象之间的距离,单位为像素。

※任务实施

1运行Dreamweaver CS3,打开站点example

2.新建一个文件夹article,在此文件夹中新建一个空白的网页文件notice.html。切换到代码视图。

3.删除其中原有的语句,输入如下语句:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>企业活动</title>

</head>

 

<body style="margin-left:2px; margin-top:2px; margin-right:2px; margin-bottom:2px; font-family:宋体;">

<center>

<p><img src="../images/dhh.jpg" width="100" height="95"></p>

<h1>关于2010年度优秀员工评比的通知</h1>

<hr width="90%" size="2">

</center>

<p>&nbsp;&nbsp;&nbsp;&nbsp;2010年度优秀员工表彰大会定于2011年元月一日上午九点进行,要求参加评比的员工有2010年工作总结。评比内容如下:</p>

<h2>评比标准:</h2>

<ul>

<li>工作具体表现(50%)(包括工作成绩、工作创新及工作结果)</li>

<li>工作态度(30%)(包括工作认识、理论学习、精神状态、是否积极进取)</li>

<li>工作纪律(10%)(包括积分情况、制度遵守情况及违规违章情况)</li>

<li>团队精神(10%)(与其他员工合作配合情况)</li>

</ul>

<h2>评比程序:</h2>

<ol>

<li>被评比人在元旦前缴2010年个人工作总结。</li>

<li>大会发言角逐,其他员工依据上述五个标准评分,获最高分的员工胜出。</li>

<li>评比类别分为二类:酒店类评10名,后勤类评4名。</li>

</ol>

<h2>奖励措施:</h2>

<p> &nbsp;&nbsp;&nbsp;&nbsp;凡被评为2010年度优秀员工的,由公司领导颁发奖状、奖品并合影留念,<font style="color: #FF0000;font-weight: bold;">载入公司发展大事记</font></p>

<p align="right">每味美味餐饮连锁有限公司<br>

20101215</p>

</body>

</html>

4.认识并分析网页文件中所使用的标记及其属性。

5.保存此网页文件,并浏览。网页效果如图3-2所示。

 

 

 



※任务分析

任务2中的通知网页结构过于单调,在网页中增加一些相关元素后就会有较好的显示效果,如图3-5所示。为了使得这些增加的内容和原先的通知内容有机结合、统一布局,使用表格是一种可取的方法。

◆图3-5  美化布局的优秀员工评比的通知

※相关知识

一.几种表格标记

表格中的主要标记有以下五种:

1.表格标记

格式:<table>……</table>

作用:标志表格的开始和结束。

常用属性:如表3-9所示。

3-9  <table>标记的常用属性

常用属性

功能

Width

表格宽度,单位为像素或百分比。

Height

表格高度,单位为像素或百分比。

align

表格的对齐方式,属性值:leftrightcenter,默认为左对齐。

border

表格边框的宽度,单位为像素默认值为0,即无边框。

bordercolor

表格边框颜色。

bgcolor

表格的背景颜色。

background

表格的背景图像。

cellspacing

单元格与单元格之间的间距,单位为像素。

cellpadding

单元格内容与单元格边框的距离,单位为像素

2.表格标题标记

格式:<caption>……</caption>

作用:用于设置表格的标题,该标记可省略。

3.行标记

格式:<tr>……</tr>

作用:表格中的一行。

常用属性:如表3-10所示。

3-10  <tr>标记的常用属性

常用属性

功能

align

行中内容的水平对齐方式,属性值:leftrightcenter,默认为左对齐。

valign

行中内容的垂直对齐方式,属性值:topmiddlebottom,默认为居中对齐。

height

行高,单位为像素或百分比。

title

当鼠标指向该行是,显示的文字。

bgcolor

背景颜色。

bordercolor

边框颜色。

nowrap

设定行中所有单元格中内容不能自动换行。

4.单元格标记

格式:<td>……</td>

作用:表示表格中的一个普通单元格,但是该标记必须放在<tr>标记中。

常用属性:如表3-11所示。

3-11  <td>标记的常用属性

常用属性

功能

align

单元格内容的水平对齐方式。

属性值:leftrightcenter,默认为左对齐。

valign

单元格内容的垂直对齐方式。

属性值:topmiddlebottom,默认为居中对齐。

width

单元格的宽度。

height

单元格的高度。

bgcolor

单元格的背景颜色。

bordercolor

单元格的边框颜色。

nowrap

设定单元格中内容不能自动换行。

rowspan

单元格所占的行数,用于合并单元格。

colspan

单元格所占的列数,用于合并单元格。

5.表头单元格标记

格式:<th>……</th>

作用:表示表格中的表头单元格,该标记也必须放在<tr>标记中,但是该标记可以省略。

常用属性:同<td>标记的常用属性,如表3-11所示。

注:如果<td>标记中属性值与<th>标记中的属性值冲突时,以<td>标记中属性值为主。

二.合并单元格

在建立表格时,常常需要一些不规则的表格,那么就需要使用<td>标记中的rowspan属性和colspan属性来实现。其中colspan是横向合并,rowspan是纵向合并。

3-7所示的表格就图3-6表格通过合并单元格后得到的。图3-7中的A2单元格是纵向合并(设置rowspan="2"得到的,B3C2单元格都是横向合并(分别设置colspan="2"colspan="3"得到的。

          

     ◆图3-6  原始表格                        ◆图3-7  合并单元格后的表格

在进行单元格合并时要注意一下几点:

①整个表格中,每行的列数和是相同的。

②如果在某行中使用了colspan属性,即在该行中横向合并。例如:colspan="2",则从当前单元格向右合并2个两个单元格,那么在当前行<tr>标记中就要少包含一个<td>标记,以此类推。

③如果在某列中使用了rowspan属性,即在该列中纵向合并。例如:rowspan="2",则从当前单元格向下合并2个两个单元格。那么在下一行中,就少包含一个单元格,即下一行的<tr>标记中要少写一个<td>标记,以此类推。

※任务实施

1运行Dreamweaver CS3,打开站点example的中article文件夹中的notice.html文件。

2.切换到代码视图。

3.在原有的语句,进行如下补充:

其中带下划线部分的内容与任务2中的相应内容相同,主体中与任务2中内容相同的部分语句不再列出,读者自行理解。

<html>

<head>

<meta_http-equiv="Content-Type"_content="text/html;_charset=utf-8"_/>

<title>企业活动</title>

</head>

 

<body background="../images/bg.jpg" style="margin-left:2px; margin-top:2px; margin-right:2px; margin-bottom:2px; font-family:宋体;">

<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">

<tr>

<td><img src="../images/top.jpg" width="1000" height="70" /></td>

</tr>

<tr>

<td height="34" bgcolor="#336600">

<font color="#FFFFFF">您现在所处位置:每味美味酒店 &gt; 企业活动 &gt; 关于2010年度优秀员工评比的通知</font>

</td>

</tr>

<tr>

<td height="10" valign="top">

<center>

<p><img src="../images/dhh.jpg" width="100" height="95"></p>

<h1>关于2010年度优秀员工评比的通知</h1>

<hr width="90%" size="2">

</center>

<p>&nbsp;&nbsp;&nbsp;&nbsp;2010年度优秀员工表彰大会定于2011年元月一日上午九点进行,要求参加评比的员工有2010年工作总结。评比内容如下:</p>

<h2>评比标准:</h2>

<ul>

<li>工作具体表现(50%)(包括工作成绩、工作创新及工作结果)</li>

<li>工作态度(30%)(包括工作认识、理论学习、精神状态、是否积极进取)</li>

<li>工作纪律(10%)(包括积分情况、制度遵守情况及违规违章情况)</li>

<li>团队精神(10%)(与其他员工合作配合情况)</li>

</ul>

<h2>评比程序:</h2>

<ol>

<li>被评比人在元旦前缴2010年个人工作总结。</li>

<li>大会发言角逐,其他员工依据上述五个标准评分,获最高分的员工胜出。</li>

<li>评比类别分为二类:酒店类评10名,后勤类评4名。</li>

</ol>

<h2>奖励措施:</h2>

<p> &nbsp;&nbsp;&nbsp;&nbsp;凡被评为2010年度优秀员工的,由公司领导颁发奖状、奖品并合影留念,<font style="color: #FF0000;font-weight: bold;">载入公司发展大事记</font></p>

<p align="right">每味美味餐饮连锁有限公司<br>

20101215</p>

</td>

</tr>

<tr>

<td height="80" align="center" bgcolor="#336600">

<font color="#FFFFFF">版权所有 Copyright(C)2009-2011 ××市“每味美味”餐饮酒店</font>

</td>

</tr>

</table>

</body>

</html>

4.认识并分析网页文件中所使用的标记及其属性。

5.保存网页文件并浏览。网页效果如图3-5所示。

 



※任务分析

创建超链接是HTML语言中一个重要的部分,网站是有多个网页构成的,每个网页之间就是通过超链接将他们连接在一起,可以互相访问。

为站点example中的首页文件index.html设置超链接,鼠标单击“点击进入…… ”文本串即可在当前窗口中打开下一级网页文件(home.html)。如图3-8圆圈部分所示。

◆图3-8  设置超链接的站点首页

“点击进入…… ”文本串称为链接的载体,home.html网页文件是超链接的目标地址。home.html网页将在下一个任务中制作。

※相关知识

一.超链接标记

格式:<a>……</a>

作用:通过点击网页中的文本、图像等对象连接到其他的网页、图像或文件等。

常用属性:如表3-12所示。

3-12  超链接标记的属性

常用属性

功能

示例

href

链接文件的地址,可以是本机上的位置,也可以是网址。

<a href="1.jpg">图片</a>

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

target

链接的目标窗口,属性值:_blank_parent_self_top

<a href="1.jpg" target="_blank">图片</a>

title

鼠标指向链接时,显示的文本。

<a href="1.jpg" title="图片1">图片</a>

其中,target属性值可取以下四种之一:

_blank:在新窗口中打开。

_parent:在上一级窗口中打开。

_self:在当前窗口打开,为默认值。

_top:在浏览器的整个窗口中打开,会删除所有框架。

二.绝对路径和相对路径

在文档中引用对象(如:图像、网页)时,需要给出该对象的位置,即路径。这个路径可以是本机上的资源,也可以是网络上的资源。

HTML有两种路径:绝对路径和相对路径。

1.绝对路径

完整的描述文件位置的路径就是绝对路径。

如,F:/mwmw/image/top.jpg或者http://www.baidu.com

2.相对路径

与文档保存位置相对的位置叫相对路径。

在使用相对路径时,需注意:

①如果网页文档和引用的文件在同一个文件夹中,直接写引用文件的文件名。

如:在当前站点中有index.html文件和home.html文件。当网页文档index.html的超链接中引用home.html时,可以直接写<a href="home.html">

②如果引用的文件在网页文档的下级文件夹中,直接写文件夹的路径即可。

如:在当前站点中有文件夹images,在images中有图像文件top01.jpg,当网页文档index.html中引用top1.jpg时,可以写<img src="image/top01.jpg">

“../”来表示网页文档的上一级文件夹,“../../”表示网页文档的上上级的文件夹,以此类推。

如:在当前站点中有文件夹article,在此文件夹中有notice.html文件。则,此网页文件中要引用images文件夹中的top.jpg文件,可以写<img src="../top.jpg">

※任务实施

1运行Dreamweaver CS3,打开站点example的中index.html文件。

2.切换到“代码”视图。

3.在文档偏后的位置找到下列语句:

<p><span class="STYLE1">点击进入……</span> </p>

修改成:

<p><span class="STYLE1"><a href="home.html">点击进入……</a></span> </p>

4.保存文件,并浏览网页。鼠标点击“点击进入……”时,会产生页面跳转。

由于home.html文件尚未制作,跳转会出现错误提示。如图3-9所示。这是正常现象。当我们在项目4中将home.html文件制作好之后,这个超链接就正常了。

◆图3-9  超链接的出错提示

 

 



※任务分析

表单是网页上的一个特定的区域,是用户交互的控件集合,相当于一个容器,其中可以包含按钮、文本框,下拉框等,表单在HTML页面中发挥了重要作用,利用表单可以收集用户端提交的信息,是联系用户和站点拥有者的重要桥梁,是实现交互的重要手段。

3-10所示是本教材参考实例(mark.html)——“在线预订”中的一个订单界面。该界面通过表单对象与用户进行交互,接受用户数据。本任务通过分析此表单中的对象来认识其相应的标记在HTML语言中的用法。

表单的设计使用可视界面比较容易,本任务中不要求使用HTML语句的方式来设计表单。

◆图3-10  通过网页下订单的表单界面

注:由于表单对象的内容(值)需要传递到相应的服务器,由服务器的相关程序来处理,故在静态网页制作中,我们只能设计表单的界面效果,而不能处理用户数据。表单的具体使用方法应通过学习动态网页知识来理解和掌握。

※相关知识

一.表单

格式:<form>……</form>

作用:标志表单的开始和结束,在<form></form>之间,可以使用<form>以外的任何HTML标记,这使表单变得非常灵活。

常用属性:如表3-13所示。

3-13  <form>标记的常用属性

常用属性

功能

action

用于定义表单处理的信息的位置。

method

用于定义将表单结果从浏览器传送到服务器的方法,有两种:getpost,默认的提交方式为get,但是该方法不能用于传递大于1kb的信息,常用到的是post方法,它可以隐藏信息。

target

指定服务器返回时所显示的目标窗口,属性值:_blank_parent_self_top

title

当鼠标指向表单时,显示的内容

二.常用的表单标记

3-14  表单中主要元素

元素

控件

功能

text

文本框:用于接收用户输入的文本。

Button

普通按钮:响应用户鼠标点击。

Submit

提交按钮:提交表单数据到相应的处理程序。

Reset

重置按钮:清空表单的内容,恢复到初始状态。

Radio

单选按钮:一组选项中只能选择一项。

Checkbox

复选框:一组选项中可以选择多项。

Select

下拉式菜单:从下拉列表中选择项。

Textarea

多行文本框:又称为文本域,用于接收用户输入的多行文本。

表单中的各元素通过以下标记来输入:

1<Input>标记

表单的不同类型的元素是通过设定属性TYPE="表单类型"

⑴文本框和密码框

类型分别:type="text"——文本框,type="password"——密码框。

常用的属性见下表:

3-15  <input>的常见属性

属性

功能

name

设定文本框的名称。

size

设定文本框显示的宽度(字符数)。

value

设定文本框的初始值。

maxlength

设定文本框可输入字符串的最大长度。

align

文本框的对齐方式,属性值:topmiddlebottomrightleft

例如,下面这段语句对应图3-11所示的效果。

用户名:<input type="text" name="t1" size="20">

<p>&nbsp;&nbsp;码:<input type="password" name="t2" size="20">

◆图3-11  文本框和密码框

⑵按钮

按钮分为:普通按钮、提交按钮、复位按钮。

普通按钮:type="buttom"单击后执行设定的代码。

提交按钮:type="submit"当用户单击这个按钮后,用户的输入信息即被传送到服务器。

重置按钮:type="reset"当用户单击这个按钮后,用户输入的信息全部清除,用户重新输入信息。

常用的属性如表3-16所示。

3-16  <input>的常见属性

属性

功能

name

设定按钮的名称。

value

设定按钮上要显示的文字。

align

文本框的对齐方式,属性值:topmiddlebottomrightleft

⑶单选框

类型为type="radio",单选框是好将多个选项让使用者选择,一次只能选一个。常见的属性如下:

3-17  <input>的常见属性

属性

功能

name

设定单选框的名称。

value

设定单选框中用于选择的选项。

checked

设定默认选择项。

align

文本框的对齐方式,属性值:topmiddlebottomrightleft

例如,下面这段语句对应图3-12所示的效果。

&nbsp;&nbsp;别:

<input type="radio" name="r1" value="radio" checked="checked">

<input type="radio" name="r2" value="radio2">

◆图3-12  单选框

④复选框

类型为type="checkbox",复选框是将多个选项让使用者选择,一次能选多个。

常见的属性如表3-18所示。

3-18  <input>的常见属性

属性

功能

name

设定复选框的名称。

value

设定复选框中用于选择的选项。

checked

设定默认选择项。

maxlength

设定复选框可输入的最大长度。

align

文本框的对齐方式,属性值:topmiddlebottomrightleft

例如,下面这段语句对应图3-13所示的效果。

爱好:

<p><input type="checkbox" name="c1" >上网

<input type="checkbox" name="c2" >运动

<input type="checkbox" name="c3">看书

<input type="checkbox" name="c4">看电视

 

3-13  复选框

2<select>……</select>标记

<option>……</option>标记结合使用,用于产生一个下拉式列表框。

常见的属性如表3-19所示。

3-19  <select>的常见属性

属性

功能

name

设定下拉列表框名称。

size

设定下拉列表框的选项个数。默认为1,如果为大于1,则有多个选项。

Multiple

设置是否能够多选。

<option>标记的常见属性为:Selected,用于设定选项被默认选中的初始状态。

例如,下面这段语句对应图3-14所示的效果。

<select name="s2" size="3">

<option selected>说明1</option>

<option>说明2</option>

<option>说明3</option>

</select>

◆图3-14  下拉列表框

3<textarea>……</textarea>标记

有时候我们希望使用者输入比较多的文字,此时,文本框就不能满足用户的需求,需要一个可以输入大量文字的元件,即文本域。

文本域常见的属性如表3-20所示。

3-20  <textarea>的常见属性

属性

功能

name

设定文本域的名称。

wrap

设定文本域中的换行模式,属性值:off,不自动换行;virtual,当按下Enter键时视为换行,physical,自动换行。

cols

设定文本域的行数。

rows

设定文本域的列数。

例如,下面这段语句对应图3-15所示的效果。

评论:

<p>

<input type="radio" name="r1" value="radio">好评

<input type="radio" name="r2" value="radio2">中评

<input type="radio" name="r3" value="radio3">差评

<p>

<textarea name="t3" cols="25" rows="5"></textarea>

◆图3-15  文本域控件

※任务实施

1运行Dreamweaver CS3,打开教学参考资源站点的中mark.html文件。

2.切换到拆分视图。

3.逐点认识表单对象的HTML标记及其使用方法。

 

更多的表单对象,请自行分析。

熟练使用表单对象有助于我们今后的静态网页的布局和动态网页表单运用。





参照任务3方法制作如图3-16所示的网页。网页保存到练习文件夹exercise中,所用的图片在教材的“素材”文件夹下的exercise/activities/images中。

HTML代码可参照exercise/activities中的notice.html文件。

◆图3-16  巩固练习的网页


一.填空题

1.用HTML编写的超文本文档称为HTML文档,通常它的扩展名为________________

2HTML的标记总是放在___________中,它有两种形式:_____________________

3HTML文档分成_________________________两个部分,其中________部分是显示在浏览器标题栏的内容,____________部分是显示在浏览器中的内容。

4<body>标记中常用的属性有_______________________________,分别用于设定文档的______________________________________

5.对文字进行修饰时,<b>……</b>之间的内容显示为_____________<i>……</i>之间的内容显示为_____________<u>……</u>之间的内容显示为_____________

6.可以在HTML文档中插入一些特殊的符号,插入空格使用的特殊符号为_____________

7.在文档中插入图像文件,其中插入的图像文件的格式可以是:_____________

8.在建立表格时,需要使用_______属性来实现横向合并和______属性来实现纵向合并。

9.在HTML代码中,表单对象都添加在____________________之间。

10.表单的作用是收集用户信息,并将其提交到____________,从而实现与客户的交互。

二.选择题

1.以下正确的超链接的标记是(    )

A<a href="">           B<a src="">

C<a href=""> </a>      D<src> </src>

2.如果想将段落中的文本居中,可以使用的标记是(    )

A<p align=left>        B<p align=middle>

C<p align=right>       D<p align-=center>

3.设置图像的边框为3,下面表示中正确的是(    )

A<img border="3"> <img>      B<img border="3">

C<p border="3"> </p>           D)不能设置

4.可以设置页面背景颜色的属性是(    )

Abgcolor       Bbackground       Cforecolor        Dcolor

5.单元格的标记是(    )。

A<table> </table>  B<tr> </tr>   C<td> </td>       D<th> </th>

三.简答题

1.什么是HTML语言?

2.页面布局的标签主要有哪些(不少于4个)?

3.表格标签主要有哪些?

4.超链接标签的主要属性有哪些?

5.写出常用的表单标签名称。