第1章Web基础知识_第1页
第1章Web基础知识_第2页
第1章Web基础知识_第3页
第1章Web基础知识_第4页
第1章Web基础知识_第5页
已阅读5页，还剩70页未读， 继续免费阅读

下载本文档

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

文档简介

第1章

Web基础知识1.1TCP/IP协议1.2Web概述1.3超文本标记语言HTML1.4可扩展标记语言XML1.5XHTML标记语言1.6Web服务器1.1TCP/IP协议1.1.1TCP/IP协议模型TCP/IP代表一个协议集，其中最重要的是TCP协议和IP协议。TCP/IP协议模型如图1.1所示，包含四个层次：应用层、传输层、网络层和物理接口层。应用层传输层网络层物理接口层1.1.2IP地址和DNS域名1.IP地址IP地址是识别Internet网络中的主机及网络设备的唯一标识。每个IP地址通常分为网络地址和主机地址两部分，长度为4个字节，由4个用“.”分隔的十进制数组成，每个数不大于255，如53。2.DNS域名IP地址是连网计算机的地址标识，但对大多数人来说记住很多计算机的IP地址并不是很容易的事。所以TCP/IP协议中提供了域名服务系统(DNS)，允许为主机分配字符名称，即域名。在网络通信时由DNS自动实现域名与IP地址的转换。1.2Web概述Web是一个分布式的超媒体(hypermedia)信息系统，它将大量的信息分布于整个因特网上。Web的任务就是向人们提供多媒体网络信息服务。从技术层面看，Web技术核心有三点：(1)超文本传输(HTTP)协议，实现万维网的信息传输；(2)统一资源定位符(URL)，实现互连网信息的定位统一标识；(3)超文本标记语言(HTML)，实现信息的表示欲存储。1.2.1HTTP协议1.Web的客户机/服务器模型Web客户机和Web服务器的信息传递使用HTTP协议。该模型如图1.2所示。HTTP定义的信息交互处理由以下四步组成：(1)浏览器与Web服务器建立TCP连接；(2)浏览器向Web服务器提出请求；(3)如果请求被接受，则服务器送回响应，在响应中包括状态码和所需的文件；(4)浏览器和Web服务器断开连接。1.2.1HTTP协议2.超文本和超媒体在浏览器主窗口中显示出的Web文档称为Web页面(page)，它是一种超媒体(Hypermedia)信息。超媒体信息的基础是超文本(Hypertext)信息，超文本指的是一种电子文档，其中的文字包含有可以链接到其他段落或文档的超文本链接，即超链接(Hyperlink)，利用超链接可以找到连接在因特网上的任何超文本系统，而超链接可延续，这些超文本系统分布于因特网上的众多主机上，形成庞大的分布式信息系统。1.2.2统一资源定位符URLURL通过定义资源位置的抽象标识来定位网络资源，格式如下：<信息访问方式>://<主机>:<端口号>/<文件路径>其中，<信息访问方式>是访问信息采用的TCP/IP应用协议，最常用的有3种，即http(超文本传输服务)、ftp(文件传输服务)和news(网络新闻服务)。<主机>是网络主机的域名或IP地址，它指出信息存放的主机。<端口号>是信息服务采用的软件端口。<文件路径>是所访问信息的存储路径(通常为虚拟路径而非存储文件的实际路径)。1.3超文本标记语言HTML先看一个Web页面：“学生成绩管理系统”主页面，如图1.3所示。1.3.1HTML文档的基本构成HTML文档的基本结构如下：1.3.2HTML基本标记1.文档头标记(1)HTML标记<Html>…</Html>(2)首部标记<Head>…</Head>(3)标题栏标记<Title>…</Title>(4)描述标记<Meta属性=值…>(5)正文标记<Body></Body>1.3.2HTML基本标记例如：<BodyBackground="images/back05.gif"Text="#ff0000"Link="yellow"ALink="#00ff00">系统许多标记都要用到颜色属性，颜色属性的值有3种表示方法：(1)使用颜色名称来表示。(2)使用十六进制格式数值#RRGGBB来表示(3)RGB(r,g,b)函数表示。1.3.2HTML基本标记表1.1列出了16种标准颜色。颜色名称十六进制值颜色名称十六进制值淡蓝aqua(cyan)#00FFFF海蓝navy#000080黑black#000000橄榄色oliver#080000蓝blue#0000FF紫purple#800080紫红fuchsia(magenta)#FF00FF红red#FF0000灰gray#808080银色silver#C0绿green#008000淡青teal#008080橙lime#00FF00白white#FFFFF褐红maroon#800000黄yellow#FFF001.3.2HTML基本标记2.设置文本格式(1)分段标记 <P属性=值…></P>(2)换行标记<BR>(3)标题标记 <H1属性=值…>…</H1> <H2属性=值…>…</H2> <H3属性=值…>…</H3> <H4属性=值…>…</H4> <H5属性=值…>…</H5> <H6属性=值…>…</H6>(4)对中标记 <Center>…</Center>1.3.2HTML基本标记(5)块标记 <Div属性=值…>…</Div>(6)水平线标记 <Hr属性=值…>(7)字体标记 <Font属性=值…>…</Font>(8)字体标记 <B>…</B>粗体

<I>…</I>斜体 <Big>…</Big>大字体

<Small>…</Small>小字体 <TT>…</TT>固定宽度字体(9)样式标记 <Sup>…</Sup>上标

<Sub>…</Sub>下标 <U>…</U>下划线

<Strike>…</Strike>删除线 <S>…</S>删除线(10)原样显示标记 <Pre>…</Pre>1.3.2HTML基本标记表1.2列出了常用特殊符号的实体名称或数字表示。字符说明字符实体名数字表示字符说明字符实体名数字表示无断行空格

 ；¥元符号¥¥¢美分符号¢¢；§节符号§§£英磅符号££；©版权符号©©®注册符号®®；&“and”符号&&°度°°；<小于符号<<²平方符号²²；>大于符号>>³立方符号³³；€欧元符号€𔚹.3.2HTML基本标记【例1.1】设计如图1.4所示的具有不同文字显示格式和段落控制的页面，相应的HTML文件中包含了文字显示和段落控制标记。1.3.2HTML基本标记源代码如下(Ex1-1.htm)：

<Html><Head><Title>文字显示和段落控制</Title></Head><BodyBackground="image/fallb.jpg"Text="#000000"><Center><H1>一级标题</H1></Center><Hrwidth=90%color=Blue><FontFace="黑体"Size=7Color=Red>这是黑体，大小为7号字，红色</Font><Br><P>这是一个段落<Br><I>这是斜体</I><B>这是粗体</B><U>这是下划线字体</U><Big>这是大字体</Big><Small>这是小字体</Small>这是下标字体<Sub>1</Sub>这是上标字体<Sup>2</Sup><Br><FontFace="楷体"Size=6Color="#FF00FF"><I><B><U>这些标记还可以混合使用</U></B></I></Font></P><PAlign=center>这是另一个段落<Br><B>    以下是转义序列</B><br><小于号；>大于号；&与号；"双引号；例如:a>b</P>以下是一些特殊符号：<Br>    注册符号®<Br>

版权符号©</Body> </Html>1.3.2HTML基本标记3.列表标记(1)有序列表标记<Ol属性=值…> <Li>列表项1 <Li>列表项2 …… <Li>列表项n</Ol>(2)创建无序列表无序列表是一种在各列表项前面显示特殊项目符号的缩排列表，可以使用无序列表标记Ul和列表项标记Li来创建。<Ul> <Li>列表项1 <Li>列表项2 …… <Li>列表项n</Ul>1.3.2HTML基本标记(3)描述性列表 <Dl>…</Dl>是描述性列表标记，它与其子标记<Dt>和<Dd>配合使用，用来控制数据项目的显示，类似于术语及其定义的书写格式。例如： <Dl><Dt>局域网 <Dd>局域网是指将小范围内的数据设备经过通信系统连接起来的计算机网络 </Dl><Dl> <Dt>列表描述项 <Dd>列表项 <Dd>列表项 …… <Dt>列表描述项 ……</Dl>1.3.2HTML基本标记【例1.2】创建如图1.5所示的含有有序列表、无序列表和描述性列表的页面。源代码所示(Ex1-2.htm)。1.3.2HTML基本标记4.图像标记

在网页中插入图像、在网页中播放视频文件。

<Img属性=值…>

常用属性有： Src=图像文件的URL地址

图像可以是JPEG文件、GIF文件或PNG文件。 Alt=图像的简单文本说明

在浏览器下不能显示图像或图像加载时间过长时显示该文本。 Height=显示图像的高度(像素或百分比) Width=显示图像的宽度(像素或百分比)

如果给出了高度或宽度，则图像将按比例进行缩放。 HSpace=与左右相邻对象的间隔(像素) VSpace=与上下相邻对象的间隔(像素) Align=图像不到显示区域大小时的对齐方式1.3.2HTML基本标记当在页面中进行图文混排时，可以使用Align属性设置图像与文本在垂直方向的对齐方式，此时Align属性的取值如下：top：图像与文本顶部对齐。middle：图像与文本中央对齐。bottom：图像与文本底部对齐。也可以在图像的左右绕排文本，此时Align属性的取值如下：left：图像居左文本居右。right：图像居右文本居左。1.3.2HTML基本标记在Img标记中，Dynsrc属性优先于Src属性。如果计算机具有多媒体功能，并且所指定的多媒体文件存在，则播放该多媒体文件；如果计算机没有多媒体功能，或者所指定的多媒体文件不存在，则显示由Src属性指定的图像文件。Start=何时开始播放多媒体文件其取值可以是fileopen或mouseover。Loop=多媒体文件的播放次数(整数)如果不限播放次数，则应将该属性设置为关键字infinite。LoopDelay=两次播放之间的延迟(以毫秒为单位)1.3.2HTML基本标记【例1.3】网页中的多媒体。源代码如下(Ex1-3.htm)：<Html><Head><Title>在网页中的多媒体</Title></Head><Body><PAlign="center"><ImgSrc="Images/njtoday.jpg"Alt="今日南京"HSpace="30"VSpace="30"></P><ImgSrc="Images/nj2014.jpg"Alt="南京2014"Height="250"Width="300"Border="1"Align="left"><ImgDynSrc="Images/Clock.avi"Height="80"Width="80"ControlsLoop="infinite"Start="fileopen"></Body></Html>1.3.2HTML基本标记运行的结果如图1.6所示。1.3.2HTML基本标记(1)创建文件链接文件链接的目标端点是网页文件，该网页文件可以位于当前网页所在的服务器，常用属性如下：Href=目标端点的URL地址(可以包含一个或多个参数)Target=窗口或框架的名称目标文档将在指定的窗口或框架中打开。如果省略该属性，则目标文档将在当前窗口打开。Target属性的取值既可以是窗口或框架的名称，也可以是如下保留字：_blank：未命名的新浏览器窗口_parent：父框架页或窗门中。_self：所在的同一框架或窗口中_top：整个浏览器窗口中，并删除所有框架。Title=指向超链接时所显示的标题文字1.3.2HTML基本标记(2)创建锚点链接若要创建锚点链接，首先在页面中为需要跳转的位置命名，即为该位置上放置一个A标记，并通过Name属性为该位置指定一个名称，但不要在<A>和</A>标记之间放置任何文字。例如：在介绍自己的网页文件me.htm中介绍自己简历的位置如下设置： <P><AName="jl">我的简历：</A></P>创建锚点后，可以使用A标记来创建指向该锚点的超链接。例如：要在同一个页面中跳转到名为“jl”的锚点处，可以使用以下HTML代码： <P><AHref="#jl">点击可见我的简历</A></P>若要在其他页面中跳转到该锚点，则使用以下HTML代码： <P><AHref="me.htm#jl">我的简历</A></P>1.3.2HTML基本标记(3)创建邮件链接通过邮件链接(E-mail链接)可以启动电子邮件客户端程序（如Outlook或FoxMail等），并允许访问者向指定的地址发送邮件。使用A标记创建邮件链接，该标记的Href属性应由3个部分组成：第1部分是电子邮件协议名称mailto，第2部分是电子邮件地址，第3部分是可选的邮件主题，其形式为“subject=主题”。第1部分与第2部分之间用冒号(:)分隔，第2部分与第3部分之间用问号(?)分隔。例如：<AHref="mailto:me@?subject=你好"><B>这里</B></A>可以给我发信<Br>1.3.2HTML基本标记6.使用表格表格由表头、行和单元格所组成，这些元素分别用不同的标记来定义。通过Table标记来定义表格；表格中的每一行通过Tr标记来表示；行中的单元格通过Td或Th标记来定义，其中Th标记定义表格的列标题单元格；表格的标题说明通过Caption标记来定义。

<Table>

<Caption>表格标题文字</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.3.2HTML基本标记【例1.4】创建图1.7所示的课程表。1.3.2HTML基本标记源代码如下(Ex1-4.htm)：<Html><Head><Title>课程表</Title></Head><Body><Center><TableBorder=1CellSpacing=2CellPadding=4><Caption>课程表</Caption><Tr><Th>节次</Th><Th>星期一</Th><Th>星期二</Th><Th>星期三</Th><Th>星期四</Th><Th>星期五</Th></Tr><Tr><Td>1、2</Td><Td>专业英语</Td><Td>操作系统</Td><Td>网络基础</Td><Td>专业英语</Td><Td>数据库</Td></Tr><Tr><Td>3、4</Td><Td>Java程序设计</Td><Td>数据库</Td><Td>实验</Td><Td>Java程序设计</Td><td>操作系统</Td></Tr><Tr><Td>5、6</Td><Td>网络基础</Td><Td>实验</Td><Td>实验</Td><Td>实验</Td><Td>数据库原理</Td></Tr></Table></Center></Body></Html>1.3.2HTML基本标记(1)设置表格的属性Table标记创建表格时，可以设置下列属性：Align=行中单元格的水平对齐方式取值如下： left：左对齐(Td默认值) center：对中(Th默认值) right：右对齐BackGround=表格背景图片的URL地址BgColor=表格的背景颜色Border=表格边框的宽度(像素)，默认值为0。BorderColor=表格边框颜色，Border≠0时起作用。BorderColorDark=3D边框的阴影颜色，Border≠0时起作用。BorderColorLight=3D边框的高亮显示颜色，Border≠0时起作用。CellPadding=单元格内数据与单元格边框之间的间距(像素)CellSpacing=单元格之间的间距(像素)Width=表格的宽度(像素或百分比)1.3.2HTML基本标记(2)设置行的属性表格中的每一行是用TR标记来定义的，可以设置下列属性：Align=行中单元格的水平对齐方式。取值为left(默认值)、center或right。BackGround=作为行的背景图像文件的URLBgColor=行的背景颜色BorderColor=行的边框颜色。只有当Table标记的Border≠0起作用。BorderColorDark=行的3D边框的阴影颜色。只有当Table标记的Border≠0起作用。BorderColorLlight=行的3D边框的高亮颜色。只有当Table标记的Border≠0起作用。VAlign=行中单元格内容的垂直对齐方式其取值如下：top：顶端对齐middle：居中对齐bottom：底端对齐baseline：基线对齐1.3.2HTML基本标记(3)设置单元格的属性表格的单元格通过Td标记来定义，标题单元格也可以通过Th标记来定义。Td标记和Th标记可以设置下列属性：Align=行中单元格的水平对齐方式。取值为left（默认值）、center或right。BackGround=单元格的背景的图像的URLBgColor=单元格的背景颜色。BorderColor=单元格的边框颜色。只有当Table标记的Border≠0起作用。BorderColorDark=单元格的3D边框的阴影颜色。只有当Table标记的Border≠0起作用。BorderColorLight=单元格的3D边框的高亮颜色。只有当Table标记的Border≠0起作用。ColSpan=合并单元格时一个单元格跨越的表格列数。RowSpan=合并单元格时一个单元格跨越的表格行数。VAlign=单元格中文本的垂直对方方式。取值可以是top、middle（默认值）、bottom或baseline。NoWrap：若指定该属性，则避免Web浏览器将单元格里的文本换行。1.3.2HTML基本标记【例1.5】显示如图1.8所示较复杂表格页面，表格的每行列数及每列行数不相同，利用Td标记的ColSpan和RowSpan属性可以对表格的单元格进行灵活的控制。

源代码所示(Ex1-5.htm)。1.3.2HTML基本标记7.表单及其控件标记(1)表单标记

在HTML语言中，表单通过FORM标记来定义。

<Form属性="值"…事件="代码"> …… </Form> Form标记具有以下属性：Name=表单的名称。命名表单后，可以使用脚本语言来引用或控制该表单。 Method=表单数据传输到服务器的方法。其取值如下：post：在HTTP请求中嵌入表单数据get：将表单数据附加到请求该页的URL中1.3.2HTML基本标记Action=接收表单数据的服务器端程序或动态网页的URL地址。Target=目标窗口其取值如下：_Blank：在未命名的新窗口中打开目标文档。_parent：在显示当前文档的窗口的父窗口中打开目标文档。_self：在提交表单所使用的窗口中打开目标文档。_top：在当前窗口内打开目标文档，确保目标文档占用整个窗门。在一个网页中可以创建多个表单，每个表单都可以包含各种各样的控件，例如文本框、单选按钮、复选框、下拉选单以及按钮等。但表单不能嵌套使用。Form标记具有以下事件：OnSubmit=提交表单时调用的事件处理程序OnRest=重置表单时调用的事件处理程序1.3.2HTML基本标记(2)表单输入控件标记<Input属性=值…事件="代码"…>1)单行文本框在表单中添加单行文本框可以获取站点访问者提供的一行信息。创建单行文本框方法如下：

<InputType="text"属性="值"…事件="代码"…>属性Name=单行文本框的名称，通过它可以在脚本中引用该文本框控件。Value=文本框的值DefaultValue=文本框的初始值Size=文本框的宽度(字符数)1.3.2HTML基本标记MaxLength=允许在文本框内输入的最大字符数。用户输入的字符数可以超过文本框的宽度，这时系统会滚动，但输入的字符数不能超过输入的最大字符数。Form=所属的表单（只读）方法Click()：单击该文本框Focus()：得到焦点Blue()：失去焦点Select()：选择文本框的内容事件OnClick=单击该文本框执行的代码OnBlur=失去焦点执行的代码OnChange=内容变化执行的代码OnFocus=得到焦点执行的代码OnSelect=选择内容执行的代码1.3.2HTML基本标记2)密码文本框密码文本框也是一个单行文本框。当站点访问者在这个框中键入数据时，大部分的Web浏览器都会以星号显示密码以不让别人看到输入内容。创建密码文本框方法如下：

<InputType="password"属性="值"…事件="代码"…>3)隐藏域表单中添加隐藏域站点访问者不能看见隐藏域的信息，每一个隐藏域都要有自己的名称和值。当提交表单时，隐藏域的名称和值就会与可见表单域的名称和值一起包含在表单结果中。例如，如果有许多使用相同自定义表单处理程序的表单可以利用独特的名称或数字作为隐藏域的名称来区分各个表单。创建隐藏域方法如下：

<InputType="hidden"属性="值"…>1.3.2HTML基本标记4)复选框表单中添加复选框可以让站点访问者去选择一个或多个选项或不选项。创建复选框方法如下：

<InputType="checkbox"属性="值"…事件="代码"…>选项文本属性Name=复选框的名称Value=选中时提交的值Checked：当第一次打开表单时该复选框处于选中状态。该复选框被选中，值为true，否则为false。该属性是可选的。1.3.2HTML基本标记DefaultChecked：复选框是否定义了Checked属性。若定义了Checked属性，则DefaultChecked为true，否则为false。方法Focus()：得到焦点Blue()：失去焦点Click()：单击该复选框事件OnFocus=得到焦点执行的代码OnBlur=失去焦点执行的代码OnClick=单击该复选框执行的代码1.3.2HTML基本标记5)单选按钮表单中添加单选按钮可以让站点访问者从一组选项中选择其中之一。在一组单选按钮中，一次只能选择一个。创建单选按钮方法如下：<InputType="radio"属性="值"…事件="代码"…>选项文本其属性如下：

Name=单选按钮的名称，若干个名称相同的单选按钮构成一个控件组，在该组中只能选中一个选项。

Value=提交时的值

Checked：当第一次打开表单时该单选按钮处于选中状态。该属性是可选的。单选按钮的方法和事件与复选框相同。1.3.2HTML基本标记6)按钮使用Input标记可以在表单中添加3种类型的按钮：提交按钮、重置按钮和自定义按钮。创建按钮的方法如下：<InputType="submit|reset|button"属性="值"…OnClick="代码">属性Type=submit：创建一个提交按钮。在表单中添加提交按钮后，站点访问者就可以在提交表单时，表单数据（包括提交按钮的名称和值）以ASCII文本形式传送到由表单的Action属性指定的表单处理程序。一般来说，表单中必须有一个提交按钮。

Type=reset：创建一个重置按钮。单击该按钮时，将删除任何已经输入到域中的文本并清除所做的任何选择。但是，如果框中含有默认文本或选项为默认，单击重置按钮将会恢复这些设置值。1.3.2HTML基本标记Type=button：创建一个自定义按钮。在表单中添加自定义按钮时，为了赋予按钮某种操作，必须为按钮编写脚本。Name=按钮的名称Value=显示在按钮上的标题文本事件OnClick=单击按钮执行的脚本代码1.3.2HTML基本标记【例1.6】创建一个如图1.9所示的登录表单，其中包含有文本框、密码框、提交按钮和重置按钮。1.3.2HTML基本标记源代码如下(Ex1-6.htm)：<Html><Head><Title>创建登录表单</Title></Head><Body><Form><TableAlign="center"BgColr="blue"Width="380"> <TrBgColor="#0034FF"> <ThColSpan=2Align=center><FontColor=#FFFFFF>登录表单</Font></Th></Tr><Tr><Td>用户名：</Td> <TdWidth=240Height=50><InputType=textName=unameSize=20></Td></Tr><Tr><Td>密码：</Td> <TdWidth=240Height=50><InputType=passwordName=uklSize=20></Td></Tr><TrAlign=center> <TdWidth=115Align=rightHeight=50><InputType=submitValue="提交"Name="bok"></Td> <TdWidth=241Height=50><InputType=resetValue="重填"Name="bcls"></Td></Tr></Table></Form></Body></Html>1.3.2HTML基本标记7)文件域文件域由一个文本框和一个“浏览”按钮组成，用户既可以在文本框中输入文件的路径和文件名，也可以通过单击“浏览”按钮从磁盘上查找和选择所需文件。文件域一般用于选择文件。创建文件域方法如下：<InputType="file"属性="值"…>其中：Name=文件域的名称Valut=初始文件名Size=文件名输入框的宽度【例1.7】创建一个如图1.10所示的表单，其中包含文件域、提交按钮和重置按钮。1.3.2HTML基本标记源代码如下(Ex1-7.htm)：<Html><Head><Title>文件域示例</Title></Head><Body><Form><TableAlign=centerBgColor=#D6D3CEWidth=368><Tr><ThColSpan=2BgColor=#0034FF><FontColor=#FFFFFF>文件域</Font></Th></Tr><Tr><TdHeight=52Align=right>请选择文件：</Td><TdHeight=52><InputType=fileName=F1Size=16></Td></Tr><TrAlign=center> <TdHeight=52Align=right><InputType=submitValue=提交Name=btnSubmit></Td> <TdHeight=52><InputType=resetValue=全部重写Name=btnReset></Td></Tr></Table></Form></Body></Html>1.3.2HTML基本标记8)图像提交按钮图像提交按钮与提交按钮在表单中的区别仅仅是提交按钮上用图像代替按钮文本标题。图像提交按钮使用Input标记来创建方法如下：<InputType="image"属性="值"…事件="代码"…>其中属性如下：Src=所用图像的URL地址

Value=提供图像的替换文本其他同提交按钮。1.3.2HTML基本标记(3)其他表单控件1)多行文本框表单中添加多行文本框可以接受站点访问者输入多于一行的文本。创建多行文本框方法如下：<Textarea属性="值"…事件="代码"…>初始值</Textarea>其中属性如下：Name=滚动文本框控件的名称Rows=控件的高度（以行为单位）Cols=控件的宽度（以字符为单位）ReadOnly：滚动文本框的内容不被用户修改1.3.2HTML基本标记2)选项菜单表单中选项菜单让站点访问者从列表或菜单中选择选项。菜单中可以选择一个选项，也可以设置为允许作多重选择。创建选项菜单方法如下：<SelectName="值"Size="值"[Multiple]> <Option[Selected]Value="值">选项1</Option> <Option[Selected]Value="值">选项2</Option> ……</Select>其中：Name=选项选单控件的名称Size=在列表中一次可以看到的选项数目(默认为1)Multiple：允许作多项选择Selected=该选项的初始状态为选中。1.3.2HTML基本标记当提交表单时，菜单的名称会被包含在表单结果中，并且其后有一份所有选项值的列表。例如：<SelectName="课程"> <OptionValue="计算机基础"Selected>计算机基础</Option> <OptionValue="C语言程序设计">C语言程序设计</Option> <OptionValue="数据结构">数据结构</Option> <OptionValue="数据库原理">数据库原理</Option> <OptionValue="C++程序设计">C++程序设计</Option></Select>1.3.2HTML基本标记3)对表单控件分组可以使用FieldSet标记对表单控件进行分组，从而将表面细分为更小、更易于管理的部分。FieldSet标记必须以Legend标记开头，以指定控件组的标题，在Legend标记之后可以跟其他表单控件，也可以嵌套FieldSet。创建表单控件分组方法如下：<FieldSet><Legend>控件组标题</Legend>组内表单控件</FieldSet>1.3.2HTML基本标记8.多框架文档框架网页的基本结构可以表示如下：<Html><Head><Title>框架网页的基本结构</Title></Head><FrameSet属性="值"…> <Frame属性="值"…> <Frame属性="值"…> <Frame属性="值"…> ……</FrameSet> </Html>1.3.2HTML基本标记(1)框架集<FrameSet属性="值"…> ……</FrameSet>Cols=创建纵向分隔框架时指定各个框架的列宽。取值有3种形式：即像素、百分比（%）和相对尺寸（*）。例如：Cols="*,*,*"：表示将窗口划分成3个等宽的框架；Cols="30%,200,*"：表示将浏览器窗口划分为3列框架，其中第1列占窗口宽度的30%，第2列为200像素，第3列为窗口的剩余部分；Cols="*，3*，2*"：表示左边的框架占窗口宽度的1/6，中间的框架占窗口宽度的1/2，右边的框架占窗口宽度的1/3。Rows=横向分隔框架时各个框架的行高。取值有3种形式：即像素、百分比(%)和相对尺寸(*)。设置方法与Cols属性类似。但Rows属性不能与Cols属性同时使用，若要创建同时包含纵向分隔框架和横向分隔框架，则应使用嵌套框架。FrameBorder=框架周围是否显示三维边框。取值为1（默认值），显示三维边框；取值为0（显示平面边框）。FrameSpacing=框架之间的间隔（以像素为单位，默认值为0）。1.3.2HTML基本标记(2)框架<Frame属性="值"…>使用Frame标记可以设置框架的属性，包括框架的名称、框架是否可以滚动以及在框架中显示什么文件等。Frame标记具有下列属性：Name=框架的名称FrameBorder=框架周围是否显示三维边框。取值为1（默认值），显示三维边框；取值为0，显示平面边框。MarginHeight=框架的高度（以像素为单位）MarginWidth=框架的宽度（以像素为单位）NoResize=不能调整框架的大小Scrolling=指定框架是否可以滚动其取值：Yes：框架可以滚动No：框架不能滚动Auto：框架在需要时添加滚动条Src=在框架中显示的HTML文件1.3.2HTML基本标记【例1.8】设计如图1.11所示的框架页面：利用框架将窗口分成三个子窗口，分别命名为win1，win2和win3，子窗口win1对应的HTML中设置了两个超链接，用户单击这两个超链接后目标URL将在子窗口win2中显示。1.3.2HTML基本标记[主文件Ex1-8-1.htm]

<Html> <Head><Title>多框架网页</Title></Head> <FrameSetrows="80%,*"Bordercolor="green"> <FramesetCols="20%,*"> <FrameSrc="Ex1-8-2.htm"Scrolling="no"Name="win1"> <FrameSrc="Ex1-8-3.htm"Name="win2"> </FrameSet> <FrameSrc="Ex1-8-4.htm"NoresizeMarginWidth=5Name="win3"> </FrameSet> <NoFrames> PleaseuseaWebbrowsersuchasIE3.0orNetscapeNavigator toviewthispageinframes! </NoFrames> </Html>1.3.2HTML基本标记[文件Ex1-8-2.htm]

<Html><Head><Title>左边框架</Title></Head> <Body><AHref="Ex1-8-3.htm"target="win2">第1章</A><Br><Br> <AHref="第2章.htm"Target="win2">第2章</A></Body></Html>[文件Ex1-8-3.htm]

<Html><Head><Title>第1章</Title></Head> <Body><H1>第1章

绪论</H1><Br>本章简述课程的要点...<Br><Br> <AHref="Ex1-8-3.htm">返回</A></Body></Html>[文件Ex1-8-4.htm]

<Html><Head><Title>第三个框架</Title></Head> <Body><H2>《计算机网络》课件</H2></Body></Html>1.4可扩展标记语言XML1.4.1XML概述【例1.9】XML与HTML的比较。源代码如下(Ex1-9.htm)：<Body>Herewehavesometext<H1>Thisistitle</H1><P>Thisisnormaltext.</P><P><B>Thisisboldtext.</B></P>Andfinallysomemorenormaltext</Body>1.4.1XML概述如果将上面的代码存为HTML文件(扩展名为.htm或.html)，则在浏览器中加载时，显示如图1.12所示的Web页面。但如果将上面的代码存为XML文档（扩展名为.xml），则在浏览器中加载时，就将显示如图1.13所示的结果。

1.4.2XML文档的编写【例1.10】创建一个用于保存人的信息的XML文档。XML文档源代码如下(Ex1-10.xml)：1：<?xmlversion="1.0"encoding="GB2312"?>2：<persons>3：

<person>4：

<name>李明</name>5：

<birth>06/10/1990</birth>6：

<telephone>12345678</telephone>7：

</person>8：

<person>9：

<name>章蒙蒙</name>10：

<birth>12/11/1989</birth>11：

<telephone>88772212</telephone>12：

</person>13：</persons>1.4.3XML文档的显示【例1.11】使用XML在浏览器中显示人的姓名、出生日期与电话号码等信息。(1)编辑例1.10中的XML源文件，以person.xml文件名存盘。在第1行之后增加以下的内容： <?xml-stylesheettype="text/xsl"href="person.xsl"?>(2)编辑XSL样式文件。在编辑器中输入以下样式文件，以person.xsl文件名存盘。1.4.3XML文档的显示(3)显示输出结果在浏览器中运行person.xml文件，使用XSL样式文件person.xsl显示person.xml文件的输出。结果如图1.14所示。1.5XHTML标记语言1.5.1XHTML语言概述HTML从出现到现在，标准不断完善，功能也越来越强大，但它的规范化要求不是很严格，仍有很多缺陷和不足。例如，代码琐碎、臃肿，尤其是标记使用不规范，浏览器需要有足够的能力才能够正确显示HTML页面。1.5.2XHTML的格式XHTML的格式和HTML很类同，只是文档前边加了一个文档说明和标记的命名空间。它的基本格式为：1：<!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Transitional//EN”

“/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

2：<htmlxmlns="/1999/xhtml">

3：<head>4：

<title>XHTML的格式</title>//文档头部

5：</head>6：<body>7：

<div>XHTML文档的主体部分</div> //文档主体部分8：</body>9：</html>XHTML文档类型的声明XHTML命名空间1.5.3XHTML与HTML的区别(1) 标记的嵌套使用标记的嵌套使用是对文档结构的要求。尽管HTML也要求正确的嵌套，可是在实际中，即使HTML使用了不正确的嵌套形式，很多浏览器也一样可以正常显示。但是XHTML对文档的结构要求较严格，整个文档一定要有正确的组织格式，所有的嵌套必须完全正确。例如在XHTML中：

<body><div>XHTML文档的主体部分</div></body> //正确的嵌套 <body><d

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

最新文档

评论

0/150

提交评论