PPT
【文档说明】ASP网站建设技术Chapter0课件1.ppt，共(139)页，1.011 MB，由小橙橙上传
转载请保留链接：https://www.ichengzhen.cn/view-2780.html
以下为本文档部分文字说明：
第1章Web编程基础❖本章重点：1）HTML标记的用法和功能；2）HTML网页的基本结构；3）利用HTML标记符编写简单网页。目录1.1HTML简介1.2HTML常用标记1.3CSS概述1.4加载CSS样式的三种方式1.5CSS与标记对应的三种方式1.1HTML简介❖HT
ML（HyperTextMark-upLanguage）即超文本标记语言，是一种用来在WWW（WorldWideWeb）上表示信息的描述性的标记语言。❖HTML文本是由HTML标记组成的描述性文本，HTML标记可以说明文字、图形、动
画、声音、表格、链接等。❖生成一个HTML文本通常可以通过以下四种方法：（1）利用各种文本编辑器（如Windows记事本）直接使用HTML语言编写。（2）借助一些HTML的编辑工具，如FrontPage、HotDog等。（3）其他格式的文档（
如WORD文档）转换成HTML文本。（4）由Web服务器端实时动态地生成。❖【例1-1】创建一个简单的网页，步骤如下：（1）选择“开始”→“程序”→“附件”→“记事本”命令，打开记事本程序。输入以下HTML代码：
<HTML><HEAD><TITLE>HTML实例</TITLE></HEAD><BODYBGCOLOR="#FFFFFF"><P>这是一个简单的HTML实例</P></BODY></HTML>（2）选
择“文件”菜单下的“保存”命令，打开“保存”对话框，在“文件名”框中输入文件名和文件扩展名（1-1.htm），选择合适的目录，然后单击“保存”按钮。（3）在浏览器中打开运行该文件（1-1.htm），运行结果如图1-1所示。1.2HTML
常用标记❖标记符是HTML语言中一些定义网页内容格式和显示的指令，而标记符的属性用于进一步控制网页内容的显示效果。1.2.1页面基本属性标记不管网页的内容多么丰富、版式多么复杂，网页的基本结构却都是一样的。1．网页的基本结构<HTML><HEAD
><TITLE>文档标题</TITLE></HEAD><BODY>这是HTML文档的主要部分</BODY></HTMl>从本例中我们看到：HTML的结构包括头部（HEAD）、主体（BODY）两大部分，其中
头部描述浏览器所需的信息，而主体则包含页面的具体内容及格式说明。2．语言字符集(Charsets)的信息可在HTML文件中设置MIME字符集信息。您在浏览主页时，最好自己在浏览器的选项菜单内选择相应的语言(languageencoding)。但是如果HTML文件里写明了设置，
浏览器就会自动设置语言选项。尤其是主页里用到了字符实体(entities)，则该主页就应该写明字符集信息。否则，您在浏览该主页时，若未正确设置语言选项，显示将可能混乱。3．背景色彩和文字色彩设置网页的背景色彩和文字
色彩可通过设置BODY标记的属性来实现，具体格式如下：<BODYbgcolor=#text=#link=#alink=#vlink=#>BODY标记各参数的含义见表1-1。4．添加注释由于Web站点需要经常更新，而且制作时往往是几个人合作，所以创建的页面
必须易于维护，而添加注释是增强文件可读性的重要手段。HTML中的注释是由开始标记符<!—和结束标记符-->组成的。这两个标记符中间的内容就是注释的内容，它们不会在浏览器中显示。5．画线在网页中产生分隔线可用<HR>标记来实现，其用法为：<HRwidth=宽度值size=线的高度align=对
齐方式noshade>属性说明：（1）width用于指定分隔线的宽度，宽度值的指定方式有两种，一是用像素点来指定，例如，若要产生宽度为500像素的直线，则实现代码为：<HRwidth=500>另一种方法是用百分比表达，例如，若要产
生宽度是网页宽度的75％分隔线，则实现代码如下：（2）size用于指定直线的高度。例如，要绘制宽度为80％，高度为1的直线，则实现代码如下：<HRwidth="80%"size=1>（3）align指定直线的对齐方式，
取值有Left、Center、Right。（4）noshade指定直线是否有阴影。带有该参数，则直线无阴影。<HR>标记一般用于产生水平分隔线，若要产生竖直线，可将width设置为1，size设置为竖直线的高度值。例如：<HRwidth=1size=500noshade>1.2.2文字属
性标记文字是网页中最主要的页面元素，HTML语言提供了一些用来修饰文字的标记符，可以用它们来设置文字的字体、颜色、大小和样式等属性。1．字体控制主要用于控制文字的字体、大小和颜色，通过<FONT>标记符来实现。其语法格式为：<FONTface="fontnam
e"size="fontsize"color="#RRGGBB">文本</FONT>例如，若要以绿色，宋体４号字输出“HTML实例”，则实现代码为：<FONTface="宋体"Size=4color="#008000">HTM
L实例</FONT>2．标题字号语法格式为：<Hn></Hn>说明：ｎ是1～6的数字，<H1>表示最大的标题，<H6>表示最小的标题。在默认状态下，<Hn>标记符中的文字在浏览器中显示时都是黑体，而且文
字将自动在</Hn>标记符后换行。【例1-2】在网页中分别用六级标题标记符输出一个测试效果的文本。代码如下：<HTML><HEAD><TITLE>标题字体演示</TITLE></HEAD><BODYbgcolor="#
FFFFFF"text="#000000"><H1>这是第一级标题</H1><H2>这是第二级标题</H2><H3>这是第三级标题</H3><H4>这是第四级标题</H4><H5>这是第五级标题</H5><H6>这是第六级标题</H6></BODY></HTM
L>运行结果如下：3．字体效果语法格式为：<B></B><I></I><U></U>说明：使用这些标记符可以设置字体的样式，常用的字体样式标记符见表1-3所示4．分段和换行控制要实现分段或换行，需要通过相应的标记符来实现。（1
）分段标记：对段落的分段使用<P>标记来实现。<P>定义段落的开始，</P>定义段落的结束，通常可以省略不写。单独的一个<P>标记可产生一个空行。（2）换行和禁止换行：换行用标记<BR>来实现，没有对应的结束标记，它指示浏览器
在标记处执行一个换行动作。<BR>是使当前行强行中断而另起一行，新的行与原来的行保持相同的属性，换句话说，新行与原来的行在同一个段落中，而P标记符则是另起一个新的段落。5．预格式化文本语法格式为：<PRE
>文本</PRE>说明：浏览器按照编缉文档时<PRE>和</PRE>标记符之间字符的位置将内容毫无变动的显示出来。换句话说，在HTML文档中写的时候是什么样，浏览器中显示的就是什么样。6．文本的对齐方式语法格式为：<align=#>#=left、right、center例如：<Palig
n=left>左对齐</p><Palign=right>右对齐</p>7．文本的分区显示语法格式为：<DIV>文本内容</DIV>例如：<DIValign=left>此段文本左对齐显示</DIV><DIValign=center>此段文本居中显示</D
IV><DIValign=right>此段文本右对齐显示</DIV>1.2.3超级链接标记具备超级链接能力是HTML的最大优势，利用超级链接可实现由一个页面切换到另一个页面，由一个网站跳转到另一个网站；或跳转到同一网页
的某一个指定位置；或跳转进入指定的电子邮箱。1．定义超链接语法格式为：<A></A>说明：超级链接标记符A主要有以下几个属性：（1）href：定义超级链接所指向的文档的URL。如果指定的文件格式是浏览器支持的格式，例如是网页文件.html格式或者图像文件.jpg格式
，那么浏览器将在窗口中显示相应的文件内容。如果指定的文件格式不是浏览器支持的格式，如zip压缩文件格式，那么浏览器将自动弹出文件下载对话框。（2）target：目标窗口的打开方式，有四个：_top,_blank,_p
arent,_self。（3）name：锚名称。该属性一般在创建页面内超链接时使用。页面上的文字和图像都可以添加超链接。在默认状态下，文字被添加了超链接后会变成蓝色，而且文字下方自动添加下划线；如果是图像添加了超链接，则图像会添加蓝色边框。当鼠标移动到添加了超链接的页面元素
上方时，鼠标指针会变成小手的形状。2．创建页面间的超链接语法格式为<Aherf="URL"></A>说明：在创建页面超链接时，既可以使用相对路径（指向同一网站内的文件），也可以使用绝对路径（指向本站点
以外的文件）。在当前网页创建超链接，链接到“新浪”网站首页。在当前需要设置超级链接的地方，加入以下代码即可，其实现代码为：<Aherf="http://www.sina.com.cn">新浪链接</A>另外，也可用图像作为超链接的标志。例如当前网页用于链接到新浪网站的
图片logo.gif存放在Images目录中，则用图像作为超链接的实现方法为：<Aherf="http://www.sina.com.cn"><imgsrc="Images/logo.gif"></A>利用超
链接还可切换到同一网站的另一个网页，例如在当前网页中有一个名为“关于站长”的菜单项，现要定义一个超链接，以实现当前用户单击时，切换到站长的页面，假设介绍站长的页面文件名为intro.htm，则该超链接的实现方法为：<
Aherf="intro.htm">关于站长</A>3．创建页面内的超链接语法格式为：<Aname="锚点名称"></A>………<Aname="#锚点名称"></A>说明：创建页面内超链接分两步：首先定义锚点，如：<Aname="example"></A>，然后再创建指向锚点的超链接，<A
name="#example"></A>。这两部分在网页中没有先后顺序，但应注意锚点名应惟一，不要重复。若要链接到页面外的锚点处，则链接方法为：<Aname="网页文件名#锚点名称">文本</A>4．指向电子信箱的链接语法格式为：<Aherf="mailto:电子信箱地址">链接文字
</A>说明：创建指向电子信箱的超链接时，属性Herf中使用的mailto协议。该协议后面直接跟一个具体的电子信箱地址。1.2.4图片格式在网页中插入图像使用<IMG>标记来实现，没有对应的结束标记。其用法为：<IMGS
RC="图形文件名"Alt="提示文本"Border="边框宽度"Align="对齐方式">说明：（1）如若在网页的当前位置插入images/flower.jpg图形，边框宽度设置为1，则实现代码为：<IMGSRC="images/flo
wer.jpg"Border="1">（2）Align属性用于设置图像的对齐与布局方式。图像的对齐方式分为两种情况，一种是水平方向的对齐，另一种是垂直方向的对齐。1.2.5列表标记列表是一种常用的组织信息的方
式，HTML也提供了用于实现列表的标记符。HTML语言可以实现以下常用列表：有序列表、无序列表、定义列表。1．有序列表语法：<OL><LI>……</LI><LI>……</LI>……</OL>说明：有序列表符OL包含两个属性：
TYPE和START。使用TYPE属性可以设置列表编号的样式。HTML中有序列表的编号样式有以下几种：1：表示是十进制数，如1，2，3等，该样式是默认样式；a：表示是小写字母，如a,b,c等；A：表示是大写字母，如A,B,C等；i:表示是小写罗马数字，如ⅰ，ⅱ
，ⅲ等；I：表示是大写罗马字母，如Ⅰ，Ⅱ，Ⅲ等。使用START属性可设置列表的起始编号，它定义有序列表的起始数字，通常不必设置。有序列表中的列表项标记符LI也有两个属性：TYPE和VALUE。TYPE意义与OL
标记符中的TYPE属性相同；VALUE属性使用指定一个新的数字序列起始值，使用该属性可以创建一个非连续性的数字序列。【例1-4】一个有序列表的例子，其源代码如下所示：<HTML><HEAD><TITLE>智力问答
</TITLE></HEAD><BODY>把一头大象装进冰箱里总共分几步？<OLTYPE=＂I＂><LI>把冰箱门打开<LI>把大象装进去<LI>把冰箱门关上</OL></BODY></HTML>运行结果如图：2．无序列表语法：<UL><LI>……</LI><LI>……</LI>……</UL
>说明：无序列表的标记符UL只有一个属性TYPE(项目符号样式)，它有三种取值：disc（实心圆）、circle（空心圆）和square（方框）。无序列表中的列表项标记符LI也只有一个属性值TYPE，它的取值与UL标记符中的取值一样，用于控制当前列表项的项目符号样式。【例1-
5】一个无序列表的例子，其源代码如下所示：<HTML><HEAD><TITLE>学生处分</TITLE></HEAD><BODY>在藉学生的处分有几种？<ULTYPE="circle"><LI>通报批评<LI>警告<LI>记过<LI>开除学籍，留校查看<LI>勒令退学</UL></BODY>
</HTML>运行结果如图：3．定义列表语法：<DL><DT>……</DT><DD>……</DD><DT>……</DT><DD>……</DD></DL>说明：DL是英文“definitionlist(定义列表)”的缩写
。开始标记符<DL>和结束标记符</DL>之间的内容就是定义列表的内容。定义列表中的条目是通过术语使用标记符DT和术语定义标记符DD来创建的。【例1-6】一个定义列表的例子，其源代码如下所示：<HTML><HEAD><TITLE>世说新语</TIT
LE></HEAD><BODY><DL><DT>放弃</DT><DD>把握的反面是放弃，选择了一个机会，就等于放弃了其他所有的可能</DD><DT>失恋</DT><DD>不是不在乎，是在乎不起。</DD><DT>离婚</DT><DD>不
是不在乎，是一切还来得及。</DD><DT>幼稚</DT><DD>不要怕人说我们幼稚，这正说明你还年轻，还充满活力。</DD><DT>谣言</DT><DD>这是一种传染病，沉默是最好的疫苗。</DD></DL></BODY></HTML>运行结果如图：1.2.6表格
标记表格是HTML网页的一个非常重要的元素，除了规范数据的输出外，在网页设计中，常常用它来进行版面布局的设计和定位。1．表格的组成表格由表格标题（可省略）、表头和若干表行构成，每一表行又由若干单元格组成。表格的各组成元素如图所示。此处为
表格标题表头表行单元格列标题1列标题2列标题3内容1内容2内容32．定义表格的标记符表格是由多个部分构成的，因此定义表格时，将用到多种标记符，这些标记符是：<TABLE></TABLE>定义表格的开始和结束<CAPTION></CAPT
ION>定义表格标题的开始和结束（可省略）<TR></TR>定义表行的开始和结束，一组<TR>和</TR>产生一个表行<TD></TD>定义单元格的开始和结束，一组<TD>和</TD>产生一个单元格<TH></TH>定义表头单元格的开始和结束，一组<TH>和</TH>产生一个表头单元格在<
TD>和</TD>之间的部分，即为该单元格显示的数据，若该单元格无数据，显示为空，则应表达为<TD> </TD>，其中 在HTML中代表空格。<TH>和</TH>之间的部分，即为表头单元格所显示的数据，该数据以加粗居中方式显示。表头也可以不用<TH></TH>而直接用
<TD></TD>来表示。【例1-7】用HTML标记符产生一个宽度为500像素的2行、３列的表格，单元格内容自定。其代码如下：<TABLEwidth="500"><TR><TD>1</TD><TD>2</
TD><TD>3</TD></TR><TR><TD>4</TD><TD>5</TD><TD>6</TD></TR></TABLE>运行结果如图：3．表格标记符的属性对表格的更详细控制，可通过表格标记符的相关属性来实现。（１）<TABLE>标记的属性<TABLE>标记的属性用于从整
体上控制表格的外观和形状，常用的属性主要有：1）Width、Height属性：该组属性用于设置表格的宽度和高度。其宽度或高度值可用像素表示，也可用百分数表示。例如，若要产生宽度为700，高度为400像素的表格，
则定义方法为：<TABLEwidth=700height=400>若要产生一个宽度为网页宽度的85％的表格，则定义方法为：<TABLEwidth="85％">2）Border属性：定义表格的边线的宽度。若要设置为0或不设置
，则为无边框的表格。若要产生一个宽度为700，边线宽度为1的表格，则定义方法为：<TABLEwidth=700border=1>3）Bgcolor、Bordercolor属性：Bgcolor用于设置整个表格的背景颜色；Bgcolor属性对于<TR>和<TD>标记都有效，作用于
<TR>标记时，用于设置该行的背景色；作用于<TD>标记，则仅设置该单元格的背景颜色。Bordercolor用于设置表格的边线颜色，只有在Border属性设置为非0时有效。4）Background属性：用于设置表格的背景图形。设置表格的背景
图形后，表格的背景颜色失效。例如，若要设置表格的背景图形为images/bg.jpg，则设置方法为：<TABLEwidth=700background="images/bg.jpg">5）Cellpadding、Cellspacing属性：Cellpadding属性用于设
置单元格中的文本与表格边线的间距；Cellspacing用于设置表格的各单元格之间的间距。例如，若要设置单元格间距为1，单元格文本与表格边线的间距为2，则设置方法为：<TABLEcellpadding="2"cellspacing="1">6）Align属性：用于设置
表格在网页中的对齐方式，取值有Left、Center、Right。例如，若要设置表格在网页中居中，则设置方法为：<TABLEwidth="700"align="center">（2）<TR>标记的属性：<TR>标记常用的属性主要有bgcolor和align，分别用于设置该行的背景颜
色和文本的对齐方式。利用<TR>的bgcolor属性，可以实现不同行显示不同的背景颜色。（3）<TD>标记的属性：<TD>标记常用的属性主要有bgcolor、bordercolor、width、height、align和valign，分
别用于设置该单元格的背景颜色、单元格的边框颜色、宽度、高度、单元格文本在水平方向的对齐方式和在垂直方向的对齐方式【例1-8】试用HTML标记符产生图1-8所示的表格，表格宽度为400，各行的行高为24，表格在网页中居中对齐；表头背景颜色为#0000CC，表头文本颜色为#FFFFFF，表格边框宽度
为1边框颜色为#0099CC；各数据项均居中对齐，第1列的宽度为53，第2列的宽度为116，第3列宽度为134，第4列宽度为87。实现的HTML代码为：<TABLEwidth="400"border="1"bordercolor="#0099CC"align="ce
nter"cellspacing="0"><TRbgcolor=#0000CC><THheight="24"width="53"><fontcolor="#FFFFFF">学号</font></TH><THheight="
24"width="116"><fontcolor="#FFFFFF">姓名</font></TH><THheight="24"width="134"><fontcolor="#FFFFFF">出生日期</font></TH><THheight="24"width
="87"><fontcolor="#FFFFFF">住址</font></TH></TR><TRalign="center"><TDheight="24"width="53">001</TD><TDheigh
t="24"width="116">王小明</TD><TDheight="24"width="134">19820206</TD><TDheight="24"width="87">沈阳</TD></TR><TRalign="center"><TDheight="24"width="53">00
2</TD><TDheight="24"width="116">赵爽</TD><TDheight="24"width="134">19831206</TD><TDheight="24"width="87">大连</TD></TR></TABLE>运行结果如图：
4．单元格的合并利用单元格的合并，可以形成不规则的表格。合并的方式有跨列合并和跨行合并两种。（1）跨列合并：跨列合并即是将多列合并成一个单元格，可通过<TD>标记的colspan属性来实现，其用法为：<
TDcolspan=合并的单元格个数>文本</TD>【例1-9】试产生一个2行3列，宽度为400，边线宽度为1的表格，然后将第1行的第2和3两个单元格合并。实现的HTML代码为：<TABLEwidth
="400"border="1"><TR><TD>第1行1列</TD><TDcolspan="2">这是合并后的单元格</TD></TR><TR><TD>第2行1列</TD><TD>第2行2列</TD><TD>第2行3列</TD></TR
></TABLE>❖运行结果如图：（2）跨行合并：行合并通过<td>标记的Rowspan属性来实现，其用法为：<TDrowspan=合并的行数>合并形成的单元格的内容</TD>【例1-10】产生一个3行3列，宽度为400，边线
宽度为1的表格，然后将第1列的第1行和第2行的两个单元格合并。其实现的HTML代码为：<TABLEwidth="400"border="1"><TR><TDrowspan="2"width="220">第1行、第2行合并后的单元格</TD><TDwidth="90">第1行第2列</TD><TDw
idth="90">第1行第3列</TD></TR><TR><TDwidth="90">第2行第2列</TD><TDwidth="90">第2行第3列</TD></TR><TR><TD> </TD><TD> </TD><TD> </TD></TR></TABLE>运行
结果如图：1.2.7表单标记为了提高网页的交互性，收集用户在网页中输入的信息，HTML专门提供了表单，在表单中可以添加使用命令按钮、文本框、密码输入框、复选框、单选框、列表框、组合框等界面对象，以便接收用户输入的数据。利用表单可以集中管理
这些界面对象，并提供提交数据和重置数据的方法。1．表单的定义（1）表单的定义方法在HTML中，表单利用<FORM>和</FORM>标记定义，其用法格式为：<FORMName="表单名"Action="url"Method="
Post|Get"Enctype="MIME类型">……</FORM><FORM>和</FORM>标记间用于定义表单中的界面对象。（2）表单的属性1）Name属性：用于定义表单对象的名称。定义表单对象名后，可方便程序中引用表单中的对象，为可选项。若将表单的对象名定义为thisf
orm，在程序中就可通过以下方式来访问或设置表单中界面对象的值：document.thisform.界面对象名.value表单中界面对象的值由value属性来设置或返回。Document是浏览器提供的一个对象，代表当前页面，可直接访
问。2）Method属性：用于设置表单提交数据的方法，其取值为Post或Get。在后面的章节中会讲到。3）Enctype属性：该属性用于指定表单提交数据时所采用的编码方式，默认的编码方式是“application/x-www-form-urlencoded”，即采用URL编码方式。通常情况
下都应采用这种编码方式，所以Enctype属性通常可以不指定。4）Action属性：该属性用于设置一个接收和处理表单提交数据的脚本程序。即设置将表单数据提交给谁。在ASP应用中，通常设置为某一个ASP页面，另外，也可将表单数据提交给某个指定的电子邮件信箱。
（3）表单的方法表单对象提供有submit和reset方法，分别用于实现表单数据的提交和重置操作。1）submit方法：该方法用于将表单数据提交给action属性指定的脚本程序。功能与表单中的提交命令按钮(submit)等效。例如，若要提交l
ogin表单中的数据，则实现的代码为：document.login.submit();2）reset方法：该方法用于将表单中各个界面对象的值重置为空，或重置为初始状态。在用户填写表单数据时，若需要全部重新填写，则可调用该方法来使表单数据复位。例如，若要使名为log
in的表单数据复位，则实现的代码为：document.login.reset()；2．表单的界面对象表单相当于一个载体，必须在表单中添加界面对象，才能实现传送数据的目的，表单界面对象，通常也称为表单域对象。下面分别介绍表单中可使用的界面对象，以及这些对象的用法和功能。(1)单行文
本域：单行文本域用于产生一个文本输入框，以实现单行数据的输入。定义方法为：<INPUTTYPE="text"Name="文本域名称"Size="宽度"MaxLength="最大字符数"Value="文本域的值">其中，Type和Name属性是必须设置的，其他属性均为可选项。Type属性决
定所产生的界面对象的类型；Name属性用于定义该文本域的名称；Size属性设置文本域的显示宽度是多少个字符宽；MaxLength设置文本域最多可以接收多少个字符；Value属性用于给文本域指定一个初始值。例如，若要定义
一个名为info的表单，在表单中定义一个用于接收用户名的输入框username,输入框的宽度为15，最多可接收12个字符，表单数据提交给userconfirm.asp，则定义方法为：<FORMname="info"Action="userconfirm.asp"M
ethod="Post">用户名<InputType="Text"Name="username"Size="15"MaxLength="12"></FORM>表单中各界面对象的值，均是通过Value属性来存储的，通过访问该属
性，可获得或设置界面对象的值。访问表单中各界面对象的属性的格式为：document.表单名.界面对象名.属性名因此，若要获得info表单中名为username的文本域的值，则获取方法为：document.info.username.value若要设置表单中该文本域的值为training
guest,则设置方法为：document.info.username.value="trainingguset"(2)口令输入框：口令输入框是单行文本域的一种特例，外观上与单行文本域一样，但当用户输入数据时，数据会用“*”替代显示，可防止他人看到用户所输入的真实数据，常用于
密码输入。其定义方法为：<INPUTtype="password"Name="对象名"Size="显示宽度"MaxLength="最大字符数">(3)隐藏表单域：隐藏表单域不会显示出来，用户当然也无法更改其数据。通过隐藏表
单域，可悄悄向服务器发送一些用户不知道的信息。其定义方法为：<InputType="Hidden"Name="对象名"Value="值">(4)多行文本域：多行文本域常用于接收大数据量的场合，可同时显示多行文本，定义方法为：<T
extAreaName="对象名"Rows="行数"Cols="列数"[readonly]>文本</TextArea>readonly为可选项，若选用，则多行文本域变为只读。例如，若要产生一个6行40列的多行文本域，则定义方法为：<Tex
tAreaName="txt"Rows="6"Cols="40"></TextArea>(5)列表框：利用列表框可以提供一些候选项供用户选择，列表框用<select>标记符定义，其定义方法为：<SelectName="对象名"Size="列表的高度"[Multiple]><OptionVal
ue="该列表项的值"[Selected]>列表项文本1</Option><OptionValue="该列表项的值"[Selected]>列表项文本2</Option>……<OptionValue="该列表项的值"[Selected]
>列表项文本n</Option></Select>说明：1）Size属性用于定义列表框的高度，即一次能看到的列表项的数目。若设置为1或不设置,则为下拉式列表框；若要设置为大于或等于2的值，则为滚动式列表框。2）Mutiple为可选项，若选用该参数项，
则允许多项选择。3）<Option></Option>标记用于定义具体的列表项，Value属性用于设置该列表项代表的值，即当用户选中该列表项后，表单所提交的值。Selected为可选项，用于指定默认的候选项，只能有一个
列表项可选用该参数。【例1-11】试分别用下拉式列表框和滚动式列表框显示供用户选择的籍贯。<FORMName="userinfo"Action=""Method="Post"><TABLE><TR><TDWIDTH=200>下拉式列表框</TD><TDWIDTH=200>
滚动式列表框</TD></TR><TR><TDWIDTH=200>籍贯:<SELECTNAME="jg1"><OPTIONVALUE="北京">北京</OPTION><OPTIONVALUE="上海"SELE
CTED>上海</OPTION><OPTIONVALUE="重庆">重庆</OPTION><OPTIONVALUE="四川">四川</OPTION></SELECT></TD><TDWIDTH=200>籍贯:<SELECTNAME="jg1"SIZ
E=4><OPTIONVALUE="北京">北京</OPTION><OPTIONVALUE="上海"SELECTED>上海</OPTION><OPTIONVALUE="重庆">重庆</OPTION><OPTIONVALUE="四川">四川</OPTION></SELECT
></TD></TR></TABLE></FORM>运行结果如图：(6)复选框与单选框：复选框和单选框也是提供候选项的一种方法，复选框允许多选，常用于多项选择；单选框常成组使用，在同一组中只能任选其一，常用于单项选择。1）复选框：复选框用<I
NPUT>标记进行定义，其定义方法为：<InputType="CheckBox"Name="对象名"Value="值"[checked]>选项文本一个<InputType="CheckBox">标记产生一个复选项，有多个候选项，就用多少个<InputType="CheckBox">标记。Val
ue用于设置当用户选中该项后，表单所提交的值。Checked为可选项，若选用该参数项，则该复选项呈选中状态。【例1-12】用复选框的方式提供预设定的爱好，供用户选择。可供选择的爱好有：旅游、玩游戏、阅读、体育、唱歌、听音乐。代码为：<FORMName="userinfo"Action=""Meth
od="Post">爱好：<INPUTTYPE="checkbox"Name="like1"Value="旅游">旅游<INPUTTYPE="checkbox"Name="like2"Value="玩游戏">玩游戏<INPUTTYPE="checkbox"Name="
like1"Value="阅读">阅读<INPUTTYPE="checkbox"Name="like1"Value="体育运动">体育运动<INPUTTYPE="checkbox"Name="like1"Val
ue="唱歌"checked>唱歌、听音乐运行结果如图：2）单选框定义方法：<InputType="radio"Name="对象名"Value="值"[checked]>选项文本单选按钮常成组使用，为了将多个单选钮定义成一组，需要将各选项的Name属性值设置为相同。【例1-13】试用
单选钮为用户提供一组职业选项，以供用户选择。代码如下：<FORMName="userinfo"Action=""Method="Post">您的职业是：<INPUTTYPE="radio"Name="zy"Value="te
acher">教师<INPUTTYPE="radio"Name="zy"Value="student"checked>学生<INPUTTYPE="radio"Name="zy"Value="worker">工人<INPUTTYPE="radio"Name="zy"Value="enginee
r">工程师<INPUTTYPE="radio"Name="zy"Value="programmer">程序员</FORM>运行结果如图：（7）命令按钮：表单中可使用的命令按钮有提交命令按钮、复位命令按钮、普通命令按钮三种，提交命令按钮具有内建的表单提交功能，复位命令按钮内建有重置表单数据的功能
，普通命令按钮不具有内建的行为，需要指定OnClick事件处理函数，才能实现具体的操作。1）提交命令按钮：提交命令按钮用于实现表单数据的提交，功能上与表单对象的submit方法相同。提交命令按钮的定义方法为：<InputType="Submit"Name="对象名"Value=
"按钮标题">例如，若要在表单中定义一个标题为“登录”的提交命令按钮，其定义方法为：<InputType="Submit"Name="cmdlogin"Value="登录">2）复位命令按钮:复位命令按钮的功能与表单对象的reset方法相同。其定义方法为：<InputTy
pe="Reset"Name="对象名"Value="按钮标题">例如，若要在表单中定义一个标题为“重新填写”的命令按钮，其定义方法为：<InputType="Reset"Name="cmdreset"Value="重新填写">3）普通命令按钮：普通命令按钮不具有内建的行为，但可通
过指定事件处理函数，来为命令按钮指定具体的操作，因此通用性更强，另外，普通命令按钮可用在表单中，也可脱离表单而直接使用。其定义方法为：<InputType="Button"Name="对象名"Value="标题"Onclick="事件处理函数或语句">命令
按钮常用的主要是鼠标单击事件（click），可能过Onclick来为其指定事件处理函数或语句，当单击命令按钮时，系统就会自动调用执行所指定的事件处理函数或语句。【例1-14】试在当前页面中设计一名为userinfo的表单，用以收集注
册用户的资料，并将其提交给login.asp页面处理。需收集的信息和界面如图所示实现的HTML代码为：<HTML><HEAD><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><TITLE>用户注册</T
ITLE></HEAD><BODYbgcolor="#FFFFFF"text="#000000"><DIValign="center"><H3>用户注册</H3></DIV><FORMname="form1"method="post"action="user.a
sp"><TABLEalign="center"width="305"border="0"><TR><TDwidth="100"height="26">用户名:</TD><TDwidth="193"height=
"26"><inputtype="text"name="username"size=10></TD></TR><TR><TDwidth="100"height="26">密码</TD><TDwidth="193"height="26
"><inputtype="password"name="userkey1"size=15MaxLength=15></TD></TR><TR><TDwidth="100"height="26">重复密码</TD><TDwidth="193"height="26
"><inputtype="password"name="userkey1"size=15MaxLength=15></TD></TR><TR><TDwidth="100"height="26">性别:</TD><TDwidth="193"height="26"><inputtype="
radio"name="sex"value="男">男<inputtype="radio"name="sex"value="女"checked>女</TD></TR><TR><TDwidth="100"height="26"
>教育水平</TD><TDwidth="193"height="26"><selectname="edu"><OPTIONVALUE="硕士以上">硕士以上</OPTION><OPTIONVALUE="大学本科">大学本科</OPTION>
<OPTIONVALUE="大专">大专</OPTION><OPTIONVALUE="中专以下">中专以下</OPTION></select></TD></TR><TR><TDwidth="100"height="26">电子邮箱</TD><TDwidth="193"height
="26"><inputtype="text"name="email"size=20></TD></TR><TRalign=center><TDcolspan=2height="26"><INPUTTYPE="submit"value="确定"><INPUTTYPE="reset"valu
e="全部重写"></TD>/TR</TABLE></FORM></BODY></HTML>运行结果如图：1.2.8框架标记框架是一种特殊的网页技术,它能够将一个浏览器窗口分割若干区域,使浏览者可以同时看到多个网页的内容。含有框架的网页被称为“框架集网页”，它被框架分隔为多个区域，每个区域单
独显示一个网页。通过使用框架，可以将站点中的网页合理地组织起来，并且为浏览者提供更友好的访问界面。1．框架的定义框架通过以下的标记来实现：<FRAMESET><FRAMEsrc="url"name="framename"><FRAMEsrc="url"name="framen
ame">……<FRAMEsrc="url"name="framename"></FRAMESET><NOFRAMES>***</NOFRAMES>说明：<NOFRAMES>***</NOFRAMES>中的内容显示在不支持框架的浏览器窗口中，因此这里指向一个普通版本的html文件
，以便使用不支持框架浏览器的用户阅读。<FRAMESET>标记符的作用是将窗口分割为若干个子窗口，子窗口的数目取决于嵌套在该标记符中的<FRAME>标记的数目。<FRAMESET>标记符有两个属性，rows表示横
向分框；cols表示纵向分框。可以将窗口横向分成几个部分，也可以分成纵向几个部分，还可以混和分框。<FRAME>标记的属性src和name分别表示该框内要显示的html文件的文件名和该框的名称。2．横向分框横向分框用<
FRAMESETrows=“#,#”>指定，#可以是一个百分数或一个整数。前者规定各框占窗口宽度的百分比，后者指定各框宽度的绝对大小。如果对前者指定了宽度，那么可以将后者指定为“*”，表示剩下的所有宽度都赋予最后一个框。【例1-15】横向
分框实例。上面框架的高度是窗口的10％，下面框架的高度是60像素，而中间框架的高度为剩下的可以显示的高度。源代码如下：<FRAMESETROWS="10%,*,60"><FRAMEsrc="1-15a.htm"n
ame=""><FRAMEsrc="1-15b.htm"name=""><FRAMEsrc="1-15c.htm"name=""></FRAMESET>运行结果如图：3．纵向分框纵向分框用<FRAMESETcols="#,
#">指定。【例1-16】纵向分框实例。中间框架的宽度是300像素，而左边框架的高度为剩余空间的1/5，右边框架的高度为剩余空间的4/5。构造这个框架的源代码如下：<FRAMESETCOLS="*,300,4*"><FRAM
E><FRAME><FRAME></FRAMESET>运行结果如图：4．框架间的关联通常使用框架的目的是在框架间建立这样的联系，将某一框架内的链接对象显示在另一个框中。这样就可以把其中一个框作为输出框，另一个框为选择框。首先，在分框的frame文件中标记各个框，标记的
方法是在<frame>中加入name属性，例如定义左边的框为输出，右边框为索引。<framesrc="main.htm"name=main><framesrc="index.htm"name=index>其次，在index.htm文件中指定输出到哪个框方法是在i
ndex.html文件的超级链接中加入target属性，属性值设置为main。<ahref="*.htm"target="main">就会使得当鼠标单击index.htm中的链接指针，它的输出会显示在左边的框中。
1.3CSS概述CSS是CascadingStyleSheets的简称，一般称为级联式样式表或层叠式样式表。CSS是一种格式化网页元素的标准方法，它通过大量CSS属性扩展了HTML的功能，使Web创作者可以将这些属性应用到整个页面，甚至是整个网站。虽然HTML为网页设计者提供了强大的格式设置功能
，但是它必须在每一个需要设置的位置使用格式设置标记符，而不能为具有一定逻辑含义的内容设置统一的格式，而CSS却能够做到这一点。1.4加载CSS样式的3种方式将CSS添加到HTML中有以下三种常用方法：直接嵌入样式表（HEAD标记内引用）内联样式表（BODY内引用）链接外部样式表（文件外引
用）1.4.1HEAD标记内引用在HTML源文件的HEAD标记符中直接使用style标记符来定义CSS，然后在HTML源文件的BODY标记符内再调用CSS。具体语法格式如下：<HTML><HEAD><TITLE>HEAD内引用
CSS样式</TITLE><STYLE>样式1（定义样式）样式2（定义样式）……样式n（定义样式）</STYLE></HEAD><BODY>调用样式</BODY></HTML>1.4.2BODY内引用将STYLE属性
与HTML标记符BODY中所包含的任何标记符联合使用，这个属性能够将任何数量的CSS声明作为自己的值，而每个声明之间用分号隔开。BODY内引用CSS样式比其他方法更加灵活，但是如果要改变样式就比较麻烦，必须一个一个地改动。由于这种方式与传统的HTML类似，都是针对具体
的每个标记符进行修饰，所以并没有发挥出样式表有利于统一设置样式的优势，因此在实际中的应用相对较少。【例1-18】以下是一个使用BODY内引用样式的例子，其源代码如下：<HTML><HEAD><TITLE>BODY内引用CS
S样式</TITLE></HEAD><BODY><H1STYLE="font-size:xx-large;color:red;font-weight:bolder">新北京新奥运</H1><H2STYLE="color:white
;background-color:blue;text-decoration:underline">绿色奥运人文奥运科技奥运</H2><PSYTLE="text-indent:30px">北京成功申办2008奥运会！</p></BODY></HTML>运行结果如图：1.4.3文件外引用为
了整个网站能够保持一致的样式，我们可以单独创建一个样式表文件（该文件的后缀为.css），在其中定义需要用到的样式，然后在每个HTML文件中都与该样式表文件建立链接，从而在每个HTML文件中都可以调用所链接样式表中的样式。建立链接的标记符是LINK，具体的用法如下所示：<HTML><HE
AD><TITLE>如何将CSS添加到HTML――文件外引用</TITLE><LINK1><LINK2>……<LINKN></HEAD><BODY>应用所链接的样式表中的样式</BODY></HTML>链接标记符LINK必须放置在标记符<HEAD></HEAD>之间,它是单独使用的
标记符,LINK标记符具有以下一些主要属性:（1）rel属性:使用该属性可以设置链接文件和HTML文档之间的关系。在链接样式表文件（.CSS文件）的情况下，该属性的取值永远是“STYLESHEET”。（2）href属性:使用该属性可以设置链接
文件的位置。该属性既可以是相对位置也可以是绝对位置。（3）Type属性:使用该属性可以设置链接文件的类型。CSS文件的类型是text/css。外部样式表文件的内容由样式定义，即样式名称和属性组成。例如，一个单独由p{
margin:2em}组成的文件就可以用作外部样式表。一个HTML文件可以链接多个样式表，如果样式表中的样式有冲突，那么最后应用的样式优先。【例1-19】一个文件外引用链接样式的例子。源代码如下<HTML><HEAD><TITL
E>文件外引用实例</TITLE><LINKrel="stylesheet"href="style.css"type="text/css"></HEAD><BODY><H1>新北京新奥运</H1><H2>绿色奥运人文奥运科技奥运</H2><
P>北京已经成功申办2008年奥运会</P></BODY></HTML>其中与网页处在同一目录下的style.css文件的内容如下所示：H1{font-size:xx-large;color:red;font-weight:bor
der}H2{color:white;background-color:blue;text-decoration:underline}H3{text-indent:30px}显示效果如图:1.5CSS与标记对应的三种方式1.5.1标记选择符可以使用类（class）来为单一HTML标记符创建
多个样式。要想将一个类包含到网页的定义中，可以将一个句点和一个类名称添加到selector后，如下所示：selector.classname{property1:value1;……}在CSS中可以使用任何名称和名类，但是最好使用具有含义的名称。例如，如果网页中有三个地方使用
H2标记符，我们希望不同位置的H2标记符使用不同的颜色，那么可以定义以下样式：H2.color_red{color:red}H2.color_green{color:green}H2.color_blue{color:blue
}然后在网页中需要使用该类的地方用class属性应用这些类，如下所示：<H2class="color_red">红色标题</H2><H2class="color_green">绿色标题</H2><H2class="color_blue">蓝色标题</
H2>如果使用了H2标记符，但没有指定class属性，则不应用所定义的样式，因为标记符样式仅应用于具有相应class属性的标记符。当然，标记符类样式也可以和标记符样式共同使用。【例1-20】如果仍然需要让三个H2标记符中的文本显示不同的颜色，但是又想让它们具有相同大小的文字，此时不
需要将相同的字体大小属性添加到三个H2类样式定义中，而只需要添加一个样式规则来定义所有H2标记符中文字的大小，源代码如下所示：<HTML><HEAD><TITLE>标记选择符类样式</TITLE><STYL
E>H2{font-size:16pt}H2.color_red{color:red}H2.color_green{color:green}H2.color_blue{color:blue}</STYLE></HEAD><BODY><H2>标题</H2><H
2class="color_red">红色标题</H2><H2class="color_green">绿色标题</H2><H2class="color_blue">蓝色标题</H2></BODY></HTML>在浏览器中打开该文件，效果如图1-20所示。
网页中所有H2标记符中包含的文字，不管H2标记符中是否包含class属性，都将是16pt的大小；而包含了class属性的H2标记符，则需要根据属性的定义显示为不同的颜色。1.5.2类选择符实际上，不仅可以为某个或某些标记符定义类，还可以定义能应用于所有标记符的类，即通用
类，此时直接用句点后跟类名就可以了，格式如下：.classname{property:value;……}通用类样式定义好了以后，可以在需要应用该样式的标记符内使用class属性，使其等于所定义的类名，从而使相应标记
符采用所定义的样式。【例1-21】下面是一个使用通用类的例子（不同标记符应用了同一个类样式），其源代码如下所示：<HTML><HEAD><TITLE>类选择符引用实例</TITLE><STYLE>.STYLE{font-style:italic}</STYLE></HEAD><BODY><P
class="style">类选择符</P><H3class="style">类选择符</H3></BODY></HTML>运行结果如图1.5.3ID选择符除了使用.classname的方式定义一个类样式外，还可以使用ID定义样式。要将一个ID包括在样式定义中，应该用一个井号（#）
作为ID名称的前缀，如下所示：#IDname{property:value;……}ID样式定义好了以后，可以在需要应用该样式的标记符内使用ID属性，使其等于所定义的ID名称，从而使相应类的标记符采用所定义的样式。ID属性的用法与CLASS属性的用法完全一样，二者
并没有什么区别，一般情况下使用其中之一即可。【例1-22】下面是一个使用ID样式的例子，其源代码如下：<HTML><HEAD><TITLE>ID选择符引用实例</TITLE><STYLE>.STYLE{font-st
yle:italic}</STYLE></HEAD><BODY><Pid="style">ID选择符</P><H3id="style">ID选择符</H3></BODY></HTML>运行结果如图:1.5.4定义超级链接样式对于A标记符（超链接标记符），可以用类的方
式设置不同类型链接的显示方式。所谓不同类型链接，是指访问过的、未访问过的、激活的、悬停的这四种状态的链接。可以通过指定下列selector之一来设置链接样式：a:link或:link:当超链接未被访问过时，超链接的显示方
式；a:visited或:visited:当超链接已经被访问过时，超链接的显示方式；a:active:active：当超链接当前为被选中状态时，超链接的显示方式；a:hover:hover：当鼠标指针悬停在超链接上时，超链接的显示方式例如，可以使用以下方式更改超链接的颜色显示，而
不需要使用HTML方法（在BODY标记符号中指定LINK等属性）进行设置。:link{color:blue}:visited{color:purple}:active{color:gray}【例1-23】以下是一个使用超链接的例子，
其源代码如下所示：<HTML><HEAD><TITLE>超链接样式实例</TITLE><STYLE>:link{color:blue}:visited{color:purple}:active{color:gray}:hover{color:re
d}a{text-decoration:none}</STYLE></HEAD><BODY><P>没有访问过的<ahref="test1.htm">超链接</a>为蓝色</P><P>访问过的<ahref="test
2.htm">超链接</a>为紫色</P><P>活动的<ahref="test3.htm">超链接</a>为灰色</P><P>鼠标悬停在其上的<ahref="test4.htm">超链接</a>为红色</P></BODY></HTML>运行效果如图:本
章小结❖本章主要讲解了HTML标记的基本概念及其用法和功能；并介绍了CSS样式的概念和加载方式。▪HTML常用标记：❖页面基本属性标记❖文字属性标记❖超链接标记❖图片格式❖列表标记❖表格标记❖表单标记❖框架标记▪CSS样式的三种方式❖HEAD内引用❖BODY内引用❖文件外引用▪
CSS与标记对应的三种方式❖标记选择符❖类选择符❖ID选择符❖定义超链接样式
辽公网安备 21102102000191号
营业执照
