网站开发实训-03_第1页
网站开发实训-03_第2页
网站开发实训-03_第3页
网站开发实训-03_第4页
网站开发实训-03_第5页
已阅读5页，还剩146页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

网站开发实训刘佳办公室：8-403电话箱：liujia120103@163.com课件发送地址：kejiankejian2010@163.com密码：222222（6个2）第3章HTML简介

3.1HTML概述3.1.1HTML的发展历程1．HTML的诞生2．HTML的版本发展3．HTML的未来4．学习HTML的意义

3.1.2一个简单的HTML实例【例3-1】用HTML制作一个简单的网页。3.1.3HTML的基本概念要了解HTML语言，先来熟悉一下HTML中的一些基本概念。1．标记在HTML中用于描述功能的符号称为“标记”，它是用来控制文字、图像等显示方式的符号。标记在使用时必须用“<>”括起来，标记有单标记和双标记之分。1）单标记所谓“单标记”是指只需单独使用就能完整地表达意思的标记。这类标记的语法是：<标记名称>。2）双标记所谓“双标记”是指由“始标记”和“尾标记”两部分构成，必须成对使用的标记。其中始标记告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标记告诉Web浏览器到这里结束该功能。始标记前加一个斜杠（/）即成为尾标记。双标记的语法是：<标记>内容</标记>，其中“内容”是指要被这对标记施加作用的部分。2．标记属性许多单标记和双标记的始标记内可以包含一些属性，其语法是：<标记名称属性1属性2属性3…>，各属性之间无先后次序，属性也可省略（即取默认值）。例如单标记<HR>表示在文档当前位置画一条水平线，一般是从窗口中当前行的最左端一直画到最右端，它可以带这么一些属性：<HRsize="3"align="LEFT"width="75%">。其中，size属性定义线的粗细，属性值取整数，缺省值为1；align属性表示对齐方式，可取LEFT（左对齐，默认值），CENTER（居中），RIGHT（右对齐）；width属性定义线的长度，可取相对值（由一对""号括起来的百分数，表示相对于整个窗口的百分比），也可取绝对值（用整数表示的屏幕像素点的个数，如width="300"），默认值是100%。3．注释语句和其他计算机语言一样，HTML语言也提供了注释语句。注释语句的格式为：<！--注释文-->，“<！--”表示注释开始，“-->”表示注释结束，中间的所有内容表示注释文。注释语句可以放在任何地方，注释内容不在浏览器中显示出来，仅供设计人员阅读方便。3.1.4HTML的基本结构HTML网页文件主要由文件头和文件体两部分内容构成。其中，文件头是对文件进行一些必要的定义，文件体是HTML网页的主要部分，它包括文件所有的实际内容。下面是HTML网页的基本结构。<HTML>HTML文件开始<HEAD>文件头开始文件头</HEAD>文件头结束<BODY>文件体开始文件体</BODY>文体结束</HTML>HTML文件结束在HTML网页文件的基本结构中主要包含以下几种标记。1．HTML文件标记<HTML>和</HTML>标记放在网页文档的最外层，表示这对标记间的内容是HTML文档。<HTML>放在文件开头，</HTML>放在文件结尾，中间嵌套其他标记。2．HEAD文件头部标记文件头用<HEAD>和</HEAD>标记，该标记出现在文件的起始部分，标记内的内容不在浏览器中显示，主要用来说明文件的有关信息，如文件标题、作者、编写时间、搜索引擎可用的关键词等。

在HEAD标记内最常用的标记是网页主题标记——TITLE标记，它的格式为：<TITLE>网页标题</TITLE>。网页标题是提示网页内容和功能的文字，它将出现在浏览器的标题栏中，一个网页只能有一个标题，并且只能出现在文件的头部。3．BODY文件主体标记文件主体用<BODY>和</BODY>标记，它是HTML文档的主体部分，网页正文中的所有内容包括文字、表格、图像、声音和动画等都包含在这对标记对之间。它的格式为：<BODYbackground=“image-URL”bgcolor=“color”text=“color”link=“color”alink=“color”vlink=“color”leftmargin=“value”topmargin=“value”>…</BODY>。3.1.5HTML的语法规则HTML语言应遵循以下的语法规则。（1）HTML文件以纯文本形式存放，扩展名为“*.HTM”或“*.HTML”。（2）HTML标记不区分大小写。（3）多数HTML标记可以嵌套，但不可以交叉。（4）HTML文件一行可以写多个标记，一个标记也可以分多行书写，不用任何续行符号。（5）HTML源文件中的换行、回车符和空格在显示效果中是无效的。显示内容如果要换行必须用<BR>标记，换段用<P>标记，<P>表示段落开始，</P>表示段落结束。页面中的空格是通过代码控制的，一个半角空格使用一个 表示，多个空格只需使用多次即可。与空格的表示方法有些相似，一些特殊符号是凭借特殊的符号码来表现。通常由“&”前缀，加上字符对应的名称，再加上后缀“；”而组成。如书中表3-1所示列出了一些常见的HTML特殊符号的表示方法。（6）网页中所有的显示内容都应该受限于一个或多个标记，不应有游离于标记之外的文字或图像等，以免产生错误。3.2HTML的文本格式标记在“<BODY>…</BODY>”标记对之间直接输入文字就可以显示在浏览器窗口中，但是要制作出真正实用的网页，还必须对输入的文字进行适当的修饰。3.2.1标题格式标记功能：用于定义文章内章节标题的显示格式。格式：<Hnalign=“对齐方式”>标题内容</Hn>。属性：n表示标题字号的级别，可以是1～6之间的任意整数，数字越小，字号越大。align表示水平对齐方式，取值可以为LEFT（左对齐）、RIGHT（右对齐）、CENTER（居中对齐）、BOTTOM（位于底端）和TOP（位于顶部）。说明：用该标记实现文章标题的效果有限，通常用FONT标记实现文章标题丰富多彩的效果。【例3-2】标题格式标记的应用。3.2.2文字格式标记功能：设置网页中普通文字的显示效果。格式：<FONTface=“字体”size=“字号”color=“颜色”>文字</FONT>。属性：face表示文字的字体，如“黑体”表示黑体，“宋体”表示宋体。size表示字号，用来设定文字的大小，其值为1~7的整数，值越大，字越大；若数字前面加上“+”或“—”号，则表示相对基准字号的大小，如基准字号为3号，则+3表示6号字。基准字号用如下标记定义：<BASEFONTsize=“基准字号”>，其中“基准字号”也是1~7之间的整数。color用来设定文字的颜色，颜色的取值是十六进制RGB颜色码或HTML语言给定的颜色常量名。【例3-3】文字格式标记的应用。3.2.3字型设置标记功能：设置文字的风格，如黑体、斜体、带下划线等，这是一组标记，它们可以单独使用，也可以混合使用产生复合修饰效果。常用的标记有以下一些：<B>…</B>：文字以粗体显示。<I>…</I>：文字显示为斜体。<U>…</U>：显示下划线。<STRIKE>…</STRIKE>：删除线。<BIG>…</BIG>：使文字大小相对于前面的文字增大一级。<SMALL>…</SMALL>：使文字大小相对于前面的文字减小一级。<SUP>…</SUP>：使文字成为前一个字符的上标。<SUB>…</SUB>：使文字成为前一个字符的下标。<BLINK>…</BLINK>：使文字显示为闪烁效果。<TT>…</TT>：以等宽体显示西文字符。<CITE>…</CITE>：输出引用方式的字体，通常是斜体。<EM>…</EM>：强调文字，通常用斜体加黑体。<STRONG>…</STRONG>：特别强调的文字，通常也是斜体加黑体。注：有些标记的效果必须在动态环境下才能显示，例如<BLINK>标记。

【例3-4】字型设置标记的应用。3.2.4段落标记功能：设置文章段落的开始和结束。浏览器在解释HTML文档时，会自动忽略文档中的回车、空格以及其他一些符号，所以在文档中输入回车，并不意味着在浏览器内将看到一个不同的段落，当需要在网页中插入新的段落时，可以使用段落标记，它可以将标记后面的内容另起一段。格式：<Palign=“水平对齐方式”>…</P>。属性：align是水平对齐方式，取值可以为LEFT（左对齐）、RIGHT（右对齐）和CENTER（居中对齐）。3.2.5强制换行标记功能：另起一行显示文字。格式：<BR>说明：这是一个单标记，与段落标记在显示效果上都是另起一行书写，但它们的不同之处是：段落标记的行距要宽。在<BR>使用上还有一定的技巧，如果把<BR>加在<P></P>标记对的外边，将创建一个大的回车换行，即<BR>前边和后边文本的行与行之间的距离比较大，若放在<P></P>的里边则<BR>前边和后边文本的行与行之间的距离将比较小。【例3-5】段落标记和强制换行标记的应用。3.2.6预排格式标记功能：保留文字在纯文字编辑器中的格式，原样显示，不受前面的文字格式和段落格式的影响。格式：<Pre>预排格式的文本</Pre>。说明：若用其他文本编辑器编好了一段文本，如果把它放进网页文件，常常需要加许多标记才能达到原来的显示效果，否则浏览器会自动忽略文档中的回车、空格以及其他一些符号。如果在文本开头加上<Pre>，在末尾加上</Pre>，那么中间就不用加其他标记了，这时中间的回车换行符等就起作用了，可以原样显示。【例3-6】预排格式标记的应用。3.2.7插入水平线标记功能：在页面上画横线，可用于页面上内容的分割。格式：<HRwidth=“value1”size=“value2”align=“value3”color=“color1”noshade>。属性：width用来设置水平线的宽度长度，value1可以是点数，如50、100、200等，窗口改变时，横线宽度不变；也可以是相对窗口的百分比，如50%、100%,默认是100%。size用来设置水平线的厚度，value2的值可以是绝对点数，也可以是（相对长度的）百分比，默认高度为1。align用来设置水平线的对齐方式，value3的值可以是LEFT（居左）、RIGHT(居右)、CENTER（居中），默认是居中。color用来设置水平线的颜色，颜色的取值是十六进制RGB颜色码或HTML语言给定的颜色常量名。noshade属性不用赋值，而是直接加入标记即可使用，它表示加入一条没有阴影的水平线(不加入此属性水平线将有阴影)。

3.2.8文本缩排标记功能：使用缩排标记，可以实现页面文字的段落缩排，实现多次缩排可以使用多次缩排标记。格式：<Blockquote>文本</Blockquote>。

【例3-7】文本缩排标记的应用。3.2.9列表标记分段排列出一组级别相同的项目称为列表。如果在每段前面加上一个相同的符号，则称为无序列表；如果每段前面加上一个序号，则称为有序列表。1．无序列表功能：设置无序列表。格式：<ULtype=“加重符号类型”><LItype=“加重符号类型”>列表项目1<LItype=“加重符号类型”>列表项目2……</UL>。

属性：在无序列表的开始和结束处，分别是<UL>和</UL>标记，每一项列表条目之前必须加上<LI>标记。type属性表示在每个项目前显示加重符号的类型，共有三种选择：type=“disc”时，列表符号为“●”（实信圆），type=“circle”时，列表符号为“○”（空心圆），type=“square”时，列表符号为“■”（实心方块）。<UL>和<LI>标记都可以定义type参数，使得在一个列表中，不同的列表项目可以用不同的列表符号，但一般情况下不要这样设置。

【例3-8】无序列表标记的应用。2．有序列表功能：设置有序列表。格式：<OLtype=“序号类型”start=“起始号码”><LItype=“序号类型”>列表项目1<LItype=“序号类型”>列表项目2……</OL>。

属性：在有序列表的开始和结束处，分别是<OL>和</OL>标记，每一项列表条目之前必须加上<LI>标记。type属性表示在每个项目前显示的序号类型，其值可以为1（阿拉伯数字）、A（大写英文字母）、a（小写英文字母）、I（大写罗马字母）、i（小写罗马字母）。start用于设置编号的开始值，默认值为1，<LI>标记设定该条目的编号，其后的条目将以此作起始数目逐渐递增。说明：无序列表和有序列表可以嵌套，产生缩进的、有层次的列表项目。【例3-9】有序列表标记的应用。【例3-10】无序列表和有序列表标记的应用对比。3．定义列表功能：用于需要对列表条目进行简短说明的场合。格式：<DL><DT>列表条目1<DD>条目1的说明<DT>列表条目2<DD>条目2的说明……</DL>。属性：在定义列表的开始和结束处，分别是<DL>和</DL>标记，每一项列表条目之前必须加上<DT>标记，用<DD>标记定义的条目说明文字自动向右缩进。

【例3-11】定义列表标记的应用。3.2.10文字滚动标记功能：在页面中制作文字滚动的效果。格式：<MARQUEEbehavior=“value”bgcolor=“color”direction=“value”height=“value”width=“value”loop=“value”scrollamount=“value”scrolldelay=“value”hspace=“value”vspace=“value”>滚动文字</MARQUEE>。属性如下。（1）behavior：设置文字滚动方式。共有三种滚动方式供选择：behavior=“alternate”时，文字将交替进行滚动；behavior=“scroll”时，文字将循环往复滚动；behavior=“slide”时，文字将只进行一次滚动。（2）bgcolor：为滚动文字添加背景颜色。（3）direction：设置文字滚动的方向，value的取值可以为up、down、left和right四种，分别表示滚动文字的方向向上、向下、向左和向右。

（4）height和width：设置文字滚动的区域，取值为点数或相对于窗口的百分比。（5）loop：设置文字滚动的循环次数。默认值为-1，-1表示无限次循环次数。（6）scrollamount：调整文字滚动的速度，数值越大速度越快。（7）scrolldelay：设置在每一次滚动的间隔产生一段时间的延迟，数值越大延迟越长。（8）hspace和vspace：设置文字滚动的水平垂直空间。

【例3-12】文字滚动标记的应用。

3.3HTML的表格标记表格可以将文本和图像按一定的行和列规则进行排列，以便更好地表示长信息，有利于快速查找信息。表格内的格子称为单元格。表格标记对于制作网页是很重要的，现在很多网页都使用多重表格，主要是因为表格不但可以固定文本或图像的输出，而且还可以任意的进行背景和前景颜色的设置，使页面有很多意想不到的效果，使页面更加整齐美观。表格标记的构成如下：

功能：建立基本表格。格式：<TABLEsummary=“文字”bgcolor=“color1”background=“Image-URL”border=“n”bordercolor=“color2”width=“x或x%”height=“x或x%”align=“LEFT/RIGHT/CENTER”><CAPTIONalign=“TOP/BOTTOM/LEFT/RIGHT”>表题（表格说明）</CAPTION><TR><TH>表头1</TH><TH>表头2</TH>……….<TH>表头n</TH></TR><TR><TD>表项1</TD><TD>表项2</TD>……….<TD>表项n</TD></TR><TR><TD>表项1</TD><TD>表项2</TD>……….<TD>表项n</TD></TR>……</TABLE>。属性如下。（1）<TABLE></TABLE>标记对用来创建一个表格。①summary：对表格格式或内容的简要说明，它不在网页上显示，相当于表格的注释。②bgcolor：设置表格的背景颜色，取值同BODY标记中的颜色属性。③background：设置表格的背景图像，取值为图像的URL地址。④border：设置表格线的宽度（粗细），n取整数，单位为像素数，n=0表示无线。⑤bordercolor：设置表格线的颜色，取值同BODY标记中的颜色属性。⑥width：设置表格宽度，取值为点数或相对于窗口的百分比。⑦height：设置表格高度，取值为点数或相对于宽度的百分比。⑧align：设置表格在页面中的相对位置，取值为LEFT、RIGHT或CENTER，分别表示居左、居右或居中。

（2）<CAPTION>…</CAPTION>表示对表格标题的说明，如“奥运会男子足球比赛时间表”等。align表示标题相对表格的位置，取值为LEFT、RIGHT、CENTER、TOP或BOTTOM分别表示标题在表格上部左边、表格上部右边、表格上部居中、表格上面或表格底部。（3）<TR>…</TR>定义行，该标记中的内容显示在一行，此标记对只能放在<TABLE></TABLE>标记对之间使用，而在此标记对之间加入文本将是无用的，因为在<TR></TR>之间只能紧跟<TD></TD>标记对才是有效的语法；<TD></TD>标记对用来创建表格中一行中的每一个格子，此标记对也只有放在<TR></TR>标记对之间才是有效的，输入的文本也只有放在<TD></TD>标记对中才有效。（4）<TH>…</TH>用来设置表格头，表头的每一列需用一个<TH>标记，通常是黑体居中文字。（5）<TD>…</TD>用来定义表格内容的一列，与<TH>的区别是内容不加黑显示。说明：（1）<TABLE>中bgcolor、background、align、height、width等属性可以放在TD标记中，作为单元格的属性。（2）一行的开始表示前一行的结束，一列的开始表示前一列的结束，所以<TR>、<TH>、<TD>均可以作单标记使用。（3）<TH>标记还可以用于每行的第一列，设置列标题。（4）<CAPTION>、<TH>、<TD>标记之间可以嵌套其他格式标记，如<P>、<FONT>等。（5）单元格内容可以是文字，也可以是图像。

（6）表格可以嵌套，通过表格嵌套可以产生复杂的表格。（7）<TR>还有align和valign属性。align是水平对齐方式，取值为LEFT(左对齐)、CENTER(居中)、RIGHT(右对齐)；而valign是垂直对齐方式，取值为TOP(靠顶端对齐)、MIDDLE(居中间对齐)或BOTTOM(靠底部对齐)。<TD>还有width和nowrap属性，width是单元格的宽度，单位用绝对像素值或总宽度的百分比；nowrap表示禁止表格单元格内的内容自动换行。另<TR>、<TH>、<TD>中还可以使用rowspan和colspan属性实现单元格的合并，rowspan设置一个表格单元格跨占的行数(缺省值为1)，rowspan=n表示将n行作为一行；colspan设置一个表格单元格跨占的列数(缺省值为1)，colspan=n表示将n列作为一列。

【例3-13】表格标记单元格合并属性的应用。【例3-14】表格标记的简单应用。【例3-15】表格标记的复杂应用。3.4HTML的图像与多媒体标记在网页中加入图像和多媒体元素可以使网页更加生动活泼。3.4.1图像标记再简单朴素的网页如果只有文字而没有图像将失去许多活力，图像在网页制作中是非常重要的元素，HTML语言提供了<IMG>标记来处理图像的输出，当然用<IMG>标记还可以播放视频，下面也顺便介绍一下。

1．<IMG>的图像标记功能功能：在当前位置插入图像。格式：<IMGsrc=“image-URL”alt=“简单说明”longdesc=“详细说明”width=“x”height=“y”border=“边框长度”hspace=“x”vspace=“y”align=“对齐方式”>。属性如下。（1）src：设置要加入的图像文件的URL地址，通常图像格式为gif或jpg。（2）alt：设置图像文件的替代说明，当图像无法显示时，显示“简单说明”。（3）longdesc：设置图像的详细说明。（4）width：设置图像的宽度，可以为点数或相对窗口宽度的百分比。（5）height：设置图像的高度，可以为点数或相对窗口高度的百分比。

（6）border：设置图像外围边框宽度，其值为正整数。（7）hspace：设置水平方向空白（图像左右留多少空白）。（8）vspace：设置垂直方向空白（图像上下留多少空白）。（9）align：设置在页面中的位置，可以为LEFT，RIGHT或CENTER。说明：图像的宽度和高度指图像显示时的大小，与图像的真实大小无关。<IMG>标记并不是真正地把图像加入到HTML文档中，而是给标记对的src属性赋值，这个值是图像文件的文件名，当然包括路径，这个路径可以是相对路径，也可以是网址。实际上就是通过路径将图像文件嵌入到HTML文档中。设置图像文件地址时用到的路径一般建议使用相对路径，所谓相对路径是指所要链接或嵌入到当前HTML文档的文件与当前文件的相对位置所形成的路径。假如HTML文件与图像文件(文件名假设是logo.gif)在同一个目录下，则可以将代码写成<IMGsrc=“logo.gif”>；假如图像文件放在当前的HTML文档所在目录的一个子目录(子目录名假设是images)下，则代码应为<IMGsrc=“images/logo.gif”>；假如图像文件放在当前的HTML文档所在目录的上层目录(目录名假设是home)下，则相对路径就必须是准网址了，即用“../”表示网站，然后在后边紧跟文件在网站中的路径，假设home是网站下的一个目录，则代码应为<IMGsrc=“../home/logo.gif”>，若home是网站下的目录king下的一个子目录，则代码应该变为<IMGsrc=“../king/home/logo.gif”>了。【例3-16】图像标记的应用。2．<IMG>的视频标记功能利用<IMG>还可以变相的插入视频，下面简单介绍一下该功能。功能：在网页中加入视频信息，格式一般为*.AVI。格式：<IMGsrc=“image-URL”dynsrc=“avi-URL”loop=“n”start=“开始时间”controlsloopdelay=“时间间隔”>。属性如下。（1）scr：设置一幅静态图像的URL地址，在未载入.AVI文件时，先在.AVI的播放区域显示该图像。（2）dynsrc：设置视频文件存放的路径和文件名。

（3）loop：设置视频文件播放的次数，如果其值为INFINITE，则表示反复播放直到浏览者离开该网页。（4）start：设置何时开始播放视频文件，它有两个属性值fileopen和mouseover。fileopen是指在链接到含本标记的页面时开始播放，mouseover是指将鼠标移动到.AVI播放区时开始播放，默认值为fileopen。另外，当鼠标在AVI播放区单击时，也可使浏览器开始播放。（5）controls：在视频窗口下附加Windows的AVI文件播放控制条。（6）loopdelay：设置两次播放的间隔时间，单位是毫秒。此外，还有IMG的常见属性，如width、height、align等，也可以使用。

3.4.2背景音乐标记功能：在网页中加入声音，声音文件格式可以为*.wav或*.mid。格式：<BGSOUNDsrc=“声音文件的URL地址”loop=“value”>。属性：src指明声音文件的URL地址。loop控制播放次数，取-1或INFINITE时，声音将一直播放到浏览者离开该网页为止。3.4.3多媒体标记功能：在页面中放置如SWF动画（即Flash动画）、MP3音乐、电影等多种多媒体内容。格式：<EMBEDsrc=“file_URL”height=“value”width=“value”hidden=“hidden_value”autostart=“auto_value”loop=“loop_value”></EMBED>属性如下。（1）src：指明多媒体文件所在的路径，可以插入的常见的多媒体文件包括SWF动画、MP3音乐、MPEG格式的视频和AVI格式的视频。

（2）height和width：设置多媒体播放的区域，取值为点数或相对于窗口的百分比。（3）hidden：用于控制播放面板的显示和隐藏。当hidden=“True”时，隐藏面板；当hidden=“False”时，显示面板。（4）autostart：用于控制多媒体内容是否自动播放。当auto=“True”时，自动播放；当auto=“False”时，不自动播放。（5）loop：用于控制多媒体内容是否循环播放。当loop=“True”时，无限次循环次数；当loop=“False”时，仅播放一次。3.5HTML的超链接标记超链接是网页页面中最重要的元素之一，是一个网站的灵魂。一个网站是由多个页面组成的，页面之间依靠超链接确定相互的导航关系，超链接使得网页的浏览非常方便。功能：建立超链接。格式：<Ahref=“file-URL”target=“value”>显示的文本或图像</A>。属性如下。（1）href：设置要链接到的目标的URL地址。（2）target：指定打开链接的目标窗口。当target=“＿self”时，表示在原窗口显示链接页面；当target=“＿blank”时，表示在新开窗口显示链接页面；target=“＿parent”时，表示在上一级窗口中打开，一般使用分帧的框架会经常使用；当target=“＿top”时，表示在浏览器的整个窗口中打开，忽略任何框架。默认时指在原窗口中打开链接。

【例3-17】超链接标记的应用。3.6HTML的表单标记表单是实现动态网页的一种主要的外在形式，是HTML页面与浏览器端实现交互的重要手段。表单的主要功能是收集信息，具体说是收集浏览者的信息。例如在网上要申请一个电子信箱，就必须按要求填写完成网站提供的表单页面，其主要内容是姓名、年龄、联系方式等个人信息。

表单信息处理的过程为：当单击表单中的提交按纽时，输入在表单中的信息就会从客户端的浏览器上传到服务器中，然后由服务器中的有关表单处理程序（ASP、CGI等程序）进行处理，处理后或者将用户提交的信息储存在服务器端的数据库中，或者将有关的信息返回到客户端浏览器中，这样网页就具有了交互性。这里只介绍如何使用HTML的表单标记来设计表单。1．表单标记<FORM>表单是网页上的一个特定区域，这个区域由<FORM></FORM>标记对来定义，这一步有两方面的作用。第一，限定表单的范围。其他的表单对象，都要插入到<FORM></FORM>表单标记对之中才有效。单击提交按钮时，提交的也是表单范围之内的内容。第二，携带表单的相关信息，例如处理表单的脚本程序的位置、提交表单的方法等。这些信息对于浏览者是不可见的，但对于处理表单却有着决定性的作用。格式：<FORMname="form＿name"method="method"action="url"enctype="value"target="target＿win">…</FORM>。属性如下。（1）name：设置表单的名称。

（2）method：定义处理程序从表单中获得信息的方式，其取值为GET或POST。GET方式表示处理程序从当前HTML文档中获取数据，但通过这种方式传送的数据量是有所限制的，一般限制在1KB以下。POST方式与GET方式相反，它表示当前的HTML文档把数据传送给处理程序，传送的数据量要比使用GET方式的大的多。（3）action：用来定义表单处理程序（ASP、CGI等程序）的位置（相对地址或绝对地址）。如：<FORMaction=“/counter.cgi”>，当用户提交表单时，服务器将执行网址/上的名为counter.cgi的CGI程序。（4）enctype：设置表单资料的编码方式。（5）target：设置返回信息的显示窗口。2．输入标记<INPUT>输入标记<INPUT>是表单中最常用的标记之一。该标记用来定义一个输入区，可在其中输入信息，此标记必须放在<FORM></FORM>标记对之间。格式：<INPUTname="field＿name"type="type＿name">。属性如下。（1）name：设置输入区域的名称。服务器就是通过调用某一输入区域名字来获得该区域数据的。（2）type：设置输入区域的类型。常用的type属性值有10种，下面分别介绍。

①文本域TextText用来设定单行的输入文本区域。格式：<INPUTtype=“Text”maxlength=“value”size=“value”value=“field＿value”>其中：maxlength为文本域的最大输入字符数；size为文本域的宽度（以字符为单位）；value设置文本域的初始默认值。②密码域Password在表单中还有一种文本域的形式为密码域，输入到文本域中的文字均以星号“*”或圆点显示。格式：<INPUTtype="Password"maxlength="value"size="value">其中：maxlength为密码域的最大输入字符数；size为密码域的宽度。③文件域File文件域可以让用户在域的内部填写自己硬盘中的文件路径，然后通过表单上传，这是文件域的基本功能。如在线发送E-mail时常见的附件功能。文件域的外观是一个文本框加一个浏览按钮，用户既可以直接将要上传给网站的文件的路径写在文本框内，也可以单击浏览按钮，在自己的电脑中找到要上传的文件。格式：<INPUTtype="File">④复选框Checkbox复选框能够让浏览者进行项目的多项选择，一般以一个方框表示。格式：<INPUTtype=“Checkbox”checkedvalue=“value”>其中：checked表示此项被默认选中；value表示选中项目后传送到服务器端的值。⑤单选框Radio单选框能够让浏览者进行项目的单项选择，以一个圆框选择。格式：<INPUTtype=“Radio”checkedvalue=“value”>其中：checked表示此项被默认选中；value表示选中项目后传送到服务器端的值。⑥普通按钮Button普通按钮主要是用来配合程序（如JavaScript脚本）的需要来进行表单处理的。格式：<INPUTtype=“Button”value=“Button＿text”>其中：value值代表显示在按钮上面的文字。⑦提交按钮Submit单击提交按钮后，可以实现表单内容的提交。格式：<INPUTtype="Submit"value="Button＿text">⑧重置按钮Reset单击重置按钮后,可以清除表单的内容,恢复默认的表单内容设定。格式：<INPUTtype=“Reset”value=“Button＿text”>其中：value值代表显示在按钮上面的文字。⑨图像域IMAGE图像域是指可以用在提交按钮上的图片，这幅图片具有按钮的功能。如果网页使用了较为丰富的色彩，或稍微复杂的设计，再使用表单默认的按钮形式往往会让人觉得单调，甚至会破坏整体的美感。这时，就可以使用图像域来创建和网页整体效果相统一的图像提交按钮。格式：<INPUTtype=“IMAGE”src=“Image＿URL”>其中：src设置图片的路径。⑩隐藏域Hidden隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到浏览器。格式：<INPUTtype="Hidden">

【例3-18】表单输入标记的综合应用。

3．菜单和列表标记<SELECT>和<OPTION>假设现在要在表单中添加这样一项内容：浏览所在的城市。这里不说全国的城市，只说省会以上的城市，就有几十个。如果按上面讲过的单选按钮的形式，将这些城市全部罗列在网页上，将是一件不堪设想的事情。于是，在表单的对象中出现了菜单和列表。说到底，菜单和列表主要是为了节省网页的空间而产生的。菜单是一种最节省空间的方式，正常状态下只能看到一个选项，单击按钮打开菜单后才能看到全部的选项；列表可以显示一定数量的选项，如果超出了这个数量，会自动出现滚动条，浏览者可以通过拖动滚动条来观看各选项。通过<SELECT>和<OPTION>标记可以设计页面中的菜单和列表效果，此标记对必须放在<FORM></FORM>标记对之间。格式：<SELECTname="name"size="value"multiple><OPTIONvalue="value"selected>选项一<optionvalue="value">选项二…</select>。<SELECT>标记用来定义菜单和列表，属性如下。（1）name：设置菜单和列表的名称。（2）size：设置显示的选项数目。（3）multiple：该属性不用赋值可直接加入到标记中，加入此属性后列表框就成了可多选的了。若没有加入multiple属性，显示的将是一个弹出式的列表框。

<OPTION>标记用来指定菜单和列表中的一个选项，它放在<SELECT></SELECT>标记对之间。属性如下。（1）value：该属性用来给<OPTION>指定的那一个选项赋值，这个值是要传送到服务器上的，服务器正是通过调用<SELECT>区域名字的value属性来获得该区域选中的数据项。（2）selected：指定初始默认的选项。

【例3-19】表单菜单和列表标记的应用。4．文本框标记<TEXTAREA><TEXTAREA></TEXTAREA>表示创建一个可以输入多行的文本框，可以在其中输入更多的文本，此标记对放在<FORM></FORM>标记对之间。格式：<TEXTAREAname="name"rows="value"cols="value"></TEXTAREA>。属性如下。（1）name：设置文本框的名称。（2）rows：设置文本框的行数，以字符数为单位。（3）cols：设置文本框的列数，以字符数为单位。

【例3-20】表单文本框标记的应用。3.7HTML的框架标记框架的运用就是把浏览器窗口划分成几个子窗口，每个子窗口可以调入各自的HTML文档形成不同的页面，也可以按照一定的方式组合在一起完成特殊的效果。框架通常的使用方法是在一个框架中放置目录并设置链接，点击链接，内容显示在另一个框架中；或者有时一个网页的不同部分由不同的人员制作，可以每人完成一个子窗口，然后利用框架技术将它们合并在一起形成一个完整的页面。

1．框架集标记<FRAMESET>框架主要包括两个部分，一个是框架集，另一个就是框架。框架集是在一个文档内定义的一组框架结构的HTML网页。框架集定义了在一个窗口中显示的框架数、框架的尺寸、载入到框架的网页等。而框架则是指在网页上定义的一个显示区域。在使用了框架集的页面中，页面的<BODY>标记被<FRAMESET>标记所取代，然后通过<FRAME>标记定义每一个框架。功能：定义分割窗口，用来定义主文档中有几个框架并且各个框架是如何排列的。格式：<FRAMESETcols="value，value，…"rows="value，value，…"framespacing="value"bordercolor="Color＿value">…</FRAMESET>。属性如下。（1）cols：左右分割窗口（用“，”分割，value为定义各个框架的宽度值，单位可以是百分数、绝对像素值或星号(“*”)，其中星号表示剩余部分）。（2）rows：上下分割窗口（用“，”分割，value为定义各个框架的宽度值，单位可以是百分数、绝对像素值或星号(“*”)，其中星号表示剩余部分）。（3）framespacing：设定框架集的边框宽度。（4）bordercolor：设定框架集边框颜色。框架集标记应用如书上的表3-2所示。2．框架标记<FRAME>每一个框架都有一个显示的页面，这个页面文件称为框架页面。通过<FRAME>标记可以定义框架页面的内容，<FRAME>标记放在<FRAMESET></FRAMESET>之间。功能：定义某一个具体的框架。格式：<FRAMEsrc=“File＿NAME”name=“Frame＿NAME”scrolling=“value”noresize>…</FRAME>。

属性如下。（1）src：设置框架显示的文件路径。（2）name：定义此框架的名字，这个名字是供超文本链接标记<Ahref=“”target=“”>中的target属性用来指定链接的目标HTML文件将显示在哪一个框架中。框架的命名有一定的规则，框架名称必须是单个单词，可以使用下划线（＿），但不允许使用连字符（-）、句号（。）和空格。框架名称必须以字母开始。框架名称区分大小写。（3）scrolling：设定滚动条是否显示，值可以是yes(显示)、no(不显示)或auto(若需要则会自动显示,不需要则自动不显示)。（4）noresize：禁止改变框架的尺寸大小。

3．不支持框架标记<NOFRAMES>格式：<NOFRAMES>…</NOFRAMES>功能：<NOFRAMES></NOFRAMES>标记对放在<FRAMESET></FRAMESET>标记对之间，用来在那些不支持框架的浏览器中显示文本或图像信息。

【例3-21】框架标记的综合应用。3.8CSS3.8.1CSS概述CSS是英文CascadingStyleSheet的缩写，称为“层叠样式表”或“级联样式表”，它是用来控制一个文档中某一文本区域外观的一组格式属性。CSS样式可以定义在HTML文档中的标记里，也可以在外部附加文档作为外加文档。这样，一个样式表就可以用于多个页面，甚至整个站点，当CSS样式有所更新或被修改之后，所有应用了该样式表的文档都会被自动更新，所以CSS具有更好的易用性和扩展性。

概括一下，CSS有以下特点：（1）可以将格式和结构分离；（2）可以以前所未有的能力控制页面布局；（3）可以制作体积更小、下载更快的网页；（4）可以将许多网页同时更新，比以前更快更容易；（5）浏览器的界面更友好。3.8.2CSS的基本语法CSS样式表的基本语法为：HTML标志{标志属性：属性值；标志属性：属性值；标志属性：属性值；……}。在编写CSS样式表时要注意以下问题：（1）在使用样式表的过程中，经常会有几个标志用到同一属性，例如规定HTML页面中凡是粗体字、斜体字、1号标题字均显示为红色，按照语法方式应书写为：B{color：red}I{color：red}H1{color：red}显然这样书写十分麻烦，可以采用一种简洁明了的方式写成：B¸I¸H1{color：red}用逗号分隔各个HTML标志，把三行代码合并成一行。（2）同一个HTML标志，可以定义多种属性，例如把从H1~H6各级标题定义为红色黑体字，带下划线，则应写为：H1¸H2¸H3¸H4¸H5¸H6{color：red﹔text–decoration：underline﹔font–family：＂黑体＂}（3）一种样式在一个页面中需要出现很多次，这种情况会经常发生，例如网页中需要经常出现红色的文本，而又不希望每次给文本加上一个样式，可以定义如下样式：.red{color:red;}。在页面设计中，一旦需要出现红色文本，只需要通过名称的指派就可以使当前对象中的文本应用样式，例如<pclass="red">…</p>。（4）在CSS中，注释以“/*”开始，以“*/”结束，注释里面的内容对于浏览器来说是没有意义的。3.8.3CSS的实现方式CSS的实现方式有3种。1.在HEAD内实现用这种实现方式的CSS也叫内部样式表(InternalStyleSheet)，它是写在HTML的<head></head>里面的，只对所在的网页有效。内部样式表要用到Style这个标记，写法如下：<Styletype="text/css">┅┅</Style>例如：<Styletype="text/css">H1{font-family:"黑体";color:red}</Style>其中，<Style>和</Style>之间的是样式的内容。type一项表示使用的是text中的层叠样式表书写的代码。{}前面的是样式类型和名称，{}中的是样式的属性。上述代码定义了<H1>标记使用的字体和颜色。【例3-22】内部样式表的应用。2.在BODY内实现用这种实现方式的CSS也叫内嵌样式(InlineStyle)，它是在BODY中实现，主要是在标记中引用，只对所在的标记有效。例如要让H3标记的字体的大小为10pt，可以使用下面的语法：<h3style="font-size:10pt">，这样的写法虽然直观，但是无法体现出CSS的优势，因此并不推荐使用。

【例3-23】内嵌样式的应用。3.在文件外实现用这种实现方式的CSS也叫外部样式表(ExternalStyleSheet)，如果很多网页需要用到同样的样式，可以将样式写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式的网页里引用这个CSS文件。外部样式表调用格式是：<linkhref="style.css"rel="stylesheet"type="text/css">。

【例3-24】外部样式表的应用。4．3种CSS的实现方式的比较样式的优先级依次是内嵌样式、内部样式表、外部样式表。使用外部样式表，相对于内嵌样式和内部样式表，有以下优点：（1）样式代码可以复用。一个外部CSS文件，可以被多个网页共用。（2）便于修改。如果要修改样式，只需要修改CSS文件，而不需要修改每个网页。（3）提高网页显示的速度。如果样式写在网页里，会降低网页显示的速度，如果网页引用一个CSS文件，这个CSS文件一般已经在缓存区(其它网页早已经引用过它)，网页显示的速度就比较快。

3.9HTML综合实例

【例3-25】用HTML语言编写如图3-25所示的一个简单网站的首页。3.10其他网页设计语言简介除了HTML，与网页设计相关的程序语言主要有以下几种。1．XML语言2．VRML语言3．CSS语言4．浏览器Script脚本语言5．服务器端的Script脚本语言6．DHTML语言第2章创建本地虚拟站点准备工作2.1站点管理器2.2定义新站点2.3创建文件夹和空白页面2.4站点管理器的其他功能2.52.1准备工作2.1.1了解网站的服务群体2.1.2确定网站的主题2.1.3画出结构草图2.1.4确定网站命名规则2.1.1了解网站的服务群体作为网站的设计者，首先要了解网站的服务群体。网站的服务群体包括两个方面：拥有者和访问者。拥有者可能是公司、学校、医院、政府或个人等，网站的设计者必须了解他们的目的以及如何达到他们的目的；同时还要考虑访问者，这是网站的生存条件。使网站易于访问，除了鲜明的主题、漂亮的外观、丰富的内容外，还要注意创建清晰的导航，使访问者通过单击鼠标就能够看到想要看的信息。只有把上述内容体现在网站的设计理念中，所创建的网站才会是一个成功的网站。2.1.2确定网站的主题不论制作何类网页，主题的确定一般应遵循以下几方面的原则。（1）网站的名称要切题、有特色、好记。（2）题材要专而精。2.1.3画出结构草图画结构图时一般要参考以下3个因素。（1）首页：首页一般包括网站的名称及标记、各分支的导航按钮、内容要点提示、电子邮件、地址等内容。（2）分支页面：分支页面的内容要相对独立，切忌重复。（3）不要遗漏内容。2.1.4确定网站命名规则文件的命名一般遵循以下4个原则。（1）汉语拼音。（2）拼音缩写。（3）英文缩写。（4）英文原义。2.2站点管理器

2.3定义新站点

通过定义站点可以设置是直接在服务器端编辑，还是采用在本地计算机中存放网页文件的根目录并设置与远程服务器进行数据传递的方式等。定义站点就像是为一个即将开始的项目命名，并做好基础工作，使各项工作按部就班有序进行。2.4创建文件夹和空白页面2.4.1创建文件夹2.4.2创建首页文件2.4.3在站点地图中新建文件2.4.4在文件列表窗口中新建文件2.4.1创建文件夹网站内每个分支的所有文件被统一存放在单独的文件夹内，根据包含文件的多少，又可以细分到子文件夹里。图像文件、数据库文件都分别存放于特定的文件夹里。总之，合理地使用文件夹来管理网站内的文件，可以使网站有条不紊，易于维护管理。2.4.1创建文件夹2.4.2创建首页文件2.4.3在站点地图中新建文件2.4.4在文件列表窗口中新建文件2.5站点管理器的其他功能2.5.1站点地图布局2.5.2保存站点地图2.5.1站点地图布局2.5.2保存站点地图小结

本章主要介绍了设计网站的一些准备工作及与站点管理有关的各项功能的使用，按步骤定义了一个新站点，然后在站点地图中创建了各分支页面。如果能够得到一个与事先画出的结构草图结构相一致的站点地图，就说明准备工作是成功的，否则要对照结构草图查找问题。单元2制作基本页面操作演练1.2技术提升1.3操作准备1.1考核评价1.4操作准备1.1操作准备1.1操作准备1.1操作准备1.1操作准备2.1操作演练1.2操作演练1.2操作演练1.2操作演练1.2操作演练1.2操作演练2.2技术提升1.3技术提升1.3技术提升2.3考核评价1.4考核评价2.4网页中的基本组成元素有文字、图像和动画等，网站中的基本页面主要包括文本网页、图文混排网页和、文混排网页等。本单元通过制作文本网页、图文混排网页和表文混排网页，学会新建网页文档、设置网页的页面属性、在网页中输入与编辑文本、对网页文本进行格式化处理、添加编辑列表、插入与编辑图像、插入与设置表格等操作。【教学导航】教学目标（1）学会新建网页文档和设置网页的页面属性（2）学会在网页中输入文字、编辑文本、设置文本属性（3）学会在网页中插入空格、文本换行符和特殊字符（4）学会在网页中添加与编辑项目列表、编号列表和定义列表（5）学会在网页中插入与编辑图像、设置图像属性（6）熟悉制作图文混排网页的技巧（7）学会正确地插入表格，并合理地设置表格的属性（8）学会单元格的合并、拆分、插入和删除等操作（9）学会正确地设置表格中行和列的属性（10）学会正确设置表格、单元格的背景图像和背景颜色（11）学会正确地在表格中输入文字、插入图像并定位（12）了解网页中文本、列表、图像等网页元素样式属性的定义（13）了解网页中Div标签的插入方法，了解网页中CSS样式的简单应用（14）了解在网页中插入Flash动画的方法【2.1操作准备】1．创建所需的文件夹，拷贝所需的资源。2．创建站点。3．熟悉新建网页文档的方法。【2.2操作演练】【任务2-1】新建网页文档0201.html与设置页面属性【任务描述】（1）新建一个网页文档，保存在文件夹“2-1”中，命名为“0201.html”。（2）网页的“外观”属性设置要求如下所示。网页的“页面字体”设置为“宋体”。“大小”设置为“12px”；“文本颜色”设置为“#333”，“背景颜色”设置为“#ccf2f1”；“左边距”和“右边距”设置为“30px”，“上边距”和“下过距”设置为“10px”。（3）网页的“标题”属性设置要求如下所示。网页的标题字体设置为“黑体”，标题1的大小为“24px”，颜色为“#0000ff”；标题2的大小为“18px”，颜色为“#ff00ff”；标题3的大小为“14px”，颜色为“black”。（4）网页的“标题/编码”属性设置要求如下所示。网页的标题设置为“标准快递-配送方式-帮助中心-易购网”，文档类型为“XHTML1.0Transitional”，编码为“简体中文(GB2312)”。【任务实施】1．创建网页文档且保存2．打开【页面属性】对话框3．设置“外观”属性（1）在【页面属性】对话框左边“分类”列表中选择“外观（CSS）”。（2）设置页面字体。（3）设置页面字体大小。从字体大小列表框中单击选择12，其单位为“像素(px)”。（4）设置网页的文本颜色。（5）设置网页的背景颜色。（6）设置页面边距。4．设置“标题”属性（1）打开【页面属性】”对话框，左边“分类”列表中选择“标题”。（2）在“标题字体”列表框中选择“黑体”，如果字体下拉列表框中没有列出所需的字体，可以单击列表框中的最后一项“编辑字体列表…”，添加所需的字体。（3）在“标题3”的“大小”列表框中选择“14”，单位默认为“像素(px)”，颜色文本框中输入“black”。5．设置“标题/编码”属性（1）打开【页面属性】对话框，左边“分类”列表中选择“标题/编码”。（2）在“标题”文本框中输入“标准快递-配送方式-帮助中心-易购网”。（3）在“文档类型”列表框中选择“XHTML1.0Transitional”。（4）在“编码”列表框中选择“简体中文(GB2312)”，将网页的文字编码设置成中文。6．保存网页的属性设置单击“标准”工具栏中的【保存】按钮或【全部保存】按钮，保存网页的属性设置。【任务2-2】在网页中输入与编辑文本【任务描述】（1）在网页0201.html中输入如图2-12所示的多个标题和多行文本。图2-12网页0201.html中的文本内容（2）将网页中的文本标题“标准快递收费标准”和“服务说明”设置为“标题3”。（3）将网页中第2行的文字“标准快递”设置为粗体。网页0201.html的浏览效果如图2-13所示。图2-13网页0201.html的浏览效果【任务实施】1．在网页0201.html中输入文本（1）确定文字输入位置（2）输入标题文本（3）输入空格和文本（4）插入特殊字符（5）保存所输入的文本2．编辑网页中的文本在网页中输入的文本与Word一样，也能进行编辑，常见的文本编辑操作有：（1）拖动鼠标选中一个或多个文字、一行或多行文本，也可以选中网页中的全部文本。（2）按BackSpace键或Delete键实现删除文本操作。（3）将光标移动到需要插入文本的位置，输入新的文本。（4）实现复制、剪切、粘贴等操作。（5）实现查找与替换操作。（6）实现撤消或重做操作。

3．格式化网页中的文本（1）显示【属性】面板。（2）设置网页文本标题的格式属性。（3）设置网页中第2行的文字“标准快递”为粗体。（4）保存对网页文本的格式设置。4．浏览网页效果

按快捷键F12，网页的浏览效果如图2-13所示。【任务2-3】在网页中添加与编辑列表【任务描述】（1）新建1个网页0202.html，在该网页中输入多行文字，且设置其格式。（2）将网页中“新手指南”的相关内容设置为项目列表。（3）将网页中“配送方式”的相关内容设置为定义列表。网页0202.html的浏览效果如图2-20所示。图2-20网页0202.html的浏览效果【任务实施】1．创建网页文档且进行保存。2．在网页0202.html中输入文本且进行编辑。3．设置文本格式。选择网页0202.html中的第1行文字“帮助信息helpinfo”，将其设置为“标题3”，然后将第2行文字“新手指南”设置为“标题4”。4．设置项目列表。选中网页中第3行（会员注册）至第8行中的文字（会员协议），单击菜单命令【格式】→【列表】→【项目列表】，如图2-22所示，将所选中的文本设置为项目列表。5．设置定义列表。选中网页中的第10行至第14行的项目列表文字，在【文本】插入工具栏中单击【dd定义说明】按钮，将所选中的文本设置为“定义说明”。6．保存网页与浏览网页效果。保存网页0202.html，然后按快捷键F12，网页的浏览效果如图2-20所示。【任务2-4】在网页中插入与编辑图像【任务描述】（1）新建1个网页0203.html.。（2）设置网页0203.html的背景图像为“02bg.gif”。（3）在网页0203.html中输入必要的文字。（4）在网页0203.html中插入图像logo.jpg，且设置其属性：宽为183px，高为57px，

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论