创建一个简单的HTML文档----为中国网络技术提供点滴动力-iyit.net-易特网络技术！

　　通行证: 用户密码

域名空间　下载中心　 社区论坛　信息公告 MY小屋

联系我们
设为首页
加入收藏

QQ,ASP,PHP,JSP,XML,SQL,.Net,编程程序网页图象建站经验私服




	当前位置：首页>>编程开发>>VC编程>>正文	新版上线！[旧版]

注:打开慢时请稍等

创建一个简单的HTML文档

http://www.iyit.net 日期：2006-5-23 12:14:21 来源：网络转载点击：

编辑：黑鹰　[发送给好友] [打印本页] [关闭窗口] [返回顶部]
上一篇：HTML概要
下一篇：ActiveX适用的场合
转载请注明来源：www.iyit.net
特别声明： 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员，我们尽快予以更正。

【参加讨论】创建一个简单的HTML文档：在前面的小节中，我们讨论了创建HTML页所用的12种基本标记。每个人都可以按这种方式使用这些标记。现在，该讨论一下怎样在Web 站点上使用这些标记创建一个页了。清单8-1列出了一个简单Web页的源代码。显然，决不会在实际应用程序中创建这样（简单的）一个页，这一页的全部目的在于说明12种标记是如何工作的。

    这些源码初看起来有些唬人，但这里没有任何前面小节中没有讲到的东西。首先，第一个标记< HTML> 定义了页的开始，在源代码程序列表的末尾可以看到它的配对符号</HTML>。其次，我们把文档用<HEAD>及<BODY> （及其配对符号）将文本分成了两部分。唯一没见过的标记是<TITLE>，它定义了浏览器标题栏中的标题，这一标记并不是绝对必要的，但给Web页一个标题很好，使其它人知道它们在看什么。另外，标题还可以帮助在自己的页间航行以找到出问题的部分。
    注 <TITLE>标记在浏览器标题栏中显示你的Web 页的名称。
    页的正文部分以一个1级标题开始，接着是加了特殊属性的一些文本，其后是一条水平标尺标记，在这里，还可以看到能表明<P>与<BR>标记有什么差别的一些文字，过一会儿就会看到它们是怎么一回事。
    程序列表的下一节说明了标题的其它五个级别的差别，大多数浏览器只是简单地使用不同的字号来改变标题的级别。不幸地是，大多数浏览器没有足够多的可读的字体大小来对应全部标题级别。可能需要避免使用第6级标题，因为它们太小，以至于某些人看不清。第5级标题已经是相当小了。
    在这个示例的最后一小节含有一些链接，现在还不能看到链接上去的页，这仅是后面章节的一个练习。但是，请看第五个链接，可以注意到它是当前页的一个锚地。正文部分的最后一个工作行包含着这个锚地。一定要花些时间在你的浏览器上看一看它们是如何工作的。

    那么，我们的HTML样页看起来是什么样子呢? 图8.3是使用InternetExplorer 3.0时可以看到的样子。如果你使用其它浏览器，就要用些时间对书中列出的屏幕显示与你自己的屏幕进行比较了。可以发现，并不是所有的浏览器都是一样的，在显示东西时，它们会有一些细小的差别。机器的差别只能加剧显示的差别。考虑到这些都是常见标记，想象一下，如果使用了某个浏览器支持而其它浏览器不支持的一些更奇异的标记时会发生什么呢?!
    现在到了扩充我们的HTML知识的时候了。下面几节将要说明一些其他标记，尽管在这些章节不准备讨论全部细节，但它们提供的足够信息，已经可以使你在访问其它Web站点并查看源码时能看懂它们。
    使用列表
    你看到过不包括任何形式的公告式列表或过程程序的技术书籍吗? 把复杂的思想用容易理解的语句片段表达出来，恐怕是作者们能够进行的最基本的任务之一。列表──是枚举想法的小段文本棗是大多数情况下解决问题的答案。考虑到大多数Web页的大小限制，列表就变得更加重要。HTML支持三种不同形式的列表：
    无序列表这种列表使用公告牌形式，以<UL>标记开始，并以</UL> 标记结束，在列表中的项以<LI>标记开头。
    有序列表过程或其它具有编号的文本形式考虑使用有序列表，这种列表格式使用<OL>和</OL>标记，和无序列表一样，每一项以<LI>标记开头。
    术语汇编这种特殊的列表使用由<DL>和</DL> 标记括起来的两类项元素。被定义的项前辍以<DT>标记，而项的定义则前辍以<DD>标记。
    尽管只有三种列表形式，但就如同其它程序设计方案中一样，可以用嵌套方法实现多种功效。讨论页的样本的代码时，就会看到列表8.2中是如何实现这一点的了。
    注总要对HTML页加入大量的注释，因为可能有不是程序员的人们来不时地编辑它们。
    在我们讨论的三种形式的列表中，术语汇编是最灵活的。它使用的两种类型的列表元素使显示的文本看起来更美观。<DT>（项）标记和<DD>标记（定义）间的差别在于其中之一是被缩进的。可以用这一特色，作出与术语汇编类型元素显示无关的特殊功效。和本章中讨论的一些其它特殊文本标记一样，列表标记（<LI>，<DT>和<DD>）在行尾自动插入一个<BR>标记。使用<BR>标记使得文本变成下一行，但保持列表仍在一起。
    现在又该看一下列表代码的例子了。程序列表8.2显示的是程序列表8.1中看到的第一页的第一个链接页。它包含着三种基本列表形式，以及一个说明怎样对它们进行嵌套的例子。请确保将产生的文件命名为LISTS.HTM，这样才能使链接按所预期地那样工作。特别要注意这是第一个使用注释（<!-文本>标记）的页面。

注尽管有其它方式创建注释，但通常习惯于用<!－文本>标记。
你已很好地了解了怎样对各种列表标记写出代码了，现在就能够看到这一页的样子了。图8.4显示的是怎样使用列表的一个典型例子，请注意，三种列表形式都没有怎么进行修饰，但它们却都正常有效。

    添加图形
    图形确实可以对文本页进行乔装打扮。我们大多数人都会同意这样的说法：如果作者在技术手册中添加了足够多的正确的图形图像，理解起来就会容易得多。也可以向 Web页中加入图形，然而，添加的方式上却有一些限制。
    技巧一些人过分热衷于向它们的Web站点添加图形，导致了大多数人甚至不能看到这些图形的大部分，当用户在下载图形时，如果用了一分钟还不能完成下载，他们就会按下浏览器的Stop（停止）按钮。事实上，一个良好的估算是使Web 页的大小（包括图形和ActiveX控件）保持在60KB以下。
    你要面对的最大限制之一是能够显示的图形种类，许多浏览器只处理GIF（又称为CompuServe格式）和JP（JPG）图像这两种格式──它们是由HTML支持的。你的浏览器上显示的其它类型的图像，都是使用了插件的结果。Netscape和Internet Explorer都支持各种插件，例如，更流行的插件之一允许用浏览器观看AVI（电影）文件。Web页设计者的问题是不能指望别人都拥有这些插件。于是，如果计划创建一个受欢迎的Internet站点，那么大概就要坚持使用GIF和JPEG 图像了。
    注使用GIF和JPG图像可以获得最大的兼容性，而在知道了用户使用什么浏览器时，使用其它图像类型则可以获得最大的美观效果。
    显示图形图像是相当容易的，必须做的全部工作就是使用<IMG>标记，这一标记使用SRC属性来接受一个文件名，例如：
    <IMG src="http://www.iyit.net/Files/BeyondPic/2006-5/23/0652312125552802.Gif"">
    把图形放入一个页面就不像你想像的那么容易了，像文本情况时一样，由于不能定义它们的确切位置，除了使用框架(frame)或表格之外，没有多少办法来预先确定图形的位置。通过使用诸如在前一小节中看到的列表标记技巧，文本通常提供了某些灵活性，而图形却不提供这样的灵活性。如果你设计中的Web页非常复杂，那么大概一直要使用框架(frame)来获取大部分浏览器的正确响应了。
    Web链接 Microsoft、Netscape和其它供货商正在制定称之为层叠式电子表格（CSS）的HTML新标准。事实上，Internet Explorer 4.x已部分地支持CSS 。CSS的一个目的是提供前后连贯的方法，从而不用做大量格式化工作就可以显示数据。另一个目的是，使诸如图形这样的屏幕元素的定位更容易。如果想找到Internet Explorer3.x支持的CSS的具体信息（写本书时，Internet Explorer 4.x的Web 站点还没有更新），那么请查看http://www.shadow.net/%7Ebraden/nostyle/。可以在http://www.w3.org/pub/WWW/Style/CSS/，找到规范本身。Microsoft 在http://www.microsoft.com/turetype/css/gallery/entrance.htm也有一个CSS展台，这一特定的站点不能用Netscape Communicator访问，因为到写本书时它还不支持CSS。这一产品也支持称之为Javascript Style Sheets的竞争标准。
    使用<IMG>标记能够定义文本和图形混合显示的方式，所要做的一切工作就是加入ALIGN属性，有三种方式对齐文本：
    ALIGN=TOP
    ALIGN=MIDDLE
    ALIGN=BOTTOM
    注当图形与文本相邻显示时，ALIGN属性允许你改变文本的显示位置。
    让我们看一下向某个Web站点加入图形的简单代码。在“使用窗体(FORM)”一节中，我们将更深入地考察图形的定位问题。程序列表8.3中的代码显示了图形图像，并说明怎样使用ALIGN属性（这一程序列表使用了我作的一个GIF，你可以用手边的任何GIF 文件代替它）。这种方法对于显示公司形象标志或在一个页上显示其它简单图形是适用的。图8.5则显示这些代码显示出的图像。

    Web 链接你可能已经注意到某些人用图形而不是用文本来创建链接（详见本章前面一节“链接及锚地”）。这种技术称之为映射。如果没有实用程序的帮助，在Web 页中使用映射很快就会糊涂起来。在http://www,ecaeta.ohio-state.edu/tc/mt/上可以找到一个称为Map This的非常出色的共享实用程序，可以帮助你创建图形映射。（由于这个站点十分繁忙，也许会碰上麻烦，但坚持试下去，因为这个实用程序非常值得去努力得到它。）
    创建表格
    表格化数据差不多总是所有商务展示的一部分。电子表格帐页（spreadsheets）仅仅是会计师分类帐帐页在计算机中实现的一个例子。在HTML页上创建表格是有意义的，但是需要有一整套标记来完成这项工作。这里列出了所有必须的制表标记。

    技巧 <TABLE>标记有一个特殊的BORDER属性，允许你用线条把表格围起来，缺省的边界（线条）值是宽度1，也可以根据浏览器设置为1到6之间的任一个数字。
    我们来看一份简单的代码，它定义了两种不同的表格。程序列表8.4 说明了怎样使用本节谈到的那些简单标记来实现两种不同的效果。第一个表格包含的是简单文字元素，而第二个则以复杂的方式混合了文字和图形。
    技巧可用<CENTER>和</CENTER>这对标记对表格中的文本进行居中处理。这一对标记对放入文档的任何文本都可以起作用，而且它们对图形也起作用，请参考程序列表8.4。

注用缩进格式写代码可以使表格中的行和列分开，而且容易看清。
这些代码看起来真不少，手工写起来令人发烦（类似于这样的代码从另一角度说明，如果计划写出大量HTML页面代码的话，就应该多用些精力让GUI 前端工具来帮你的忙）。图8.6是在浏览器看到的屏幕显示。上述代码还说明了一个要遵守的基本规则：工作时总是先行后列。如果遵守这一简单规则，在制表时就不会遇到什么麻烦。注意到第二个表格是图文混合的，尽管表格看起来有些复杂，但先行后列的同一原则仍然成立。请注意，第一个表格使用的1宽度边界与第二个表使用的3宽度边界有所差别，3宽度边界占用更多的空间，但也更引人注目。

    第一个表格中行和列中都使用了<TH>。标准文本和表头文本有两个主要差别：第一，标准文本通常是左对齐的，而表头文本则是居中的。可像以程序列表8.4 中那样，用<CENTER>来改变它们的行为。第二，表头文本使用粗体字。
    注：用<CENTER>可以对Web 页上任意位置的文本（包括表格和窗体中的文本）进行居中处理。
    使用窗体
    我们要讨论的最后一段基本的HTML代码是窗体，窗体有多种用途──大部分都是和数据项（Entry）打交道而不是用于数据传播（dissemination)。到目前为止，我们所看到的全部技术中，在使用标准的HTML向Web 站点添加类似于单选按钮和复选框之类的项时，窗体提供了唯一的方法。因为ActiveX 将从根本上大量地代替了使用窗体的需求，尽管了解窗体是使用ActiveX的另一种选择是重要的，但我们在这里并不打算介绍使用窗体的所有难以预测的变化。
    每个窗体都以<FORM>标记开头。除了标记本身，还必须包括进两个属性：METHOD和ACTION。METHOD属性定义了你打算怎样处理窗体收集数据的方式，这有两种标准的方法：POST和GET。POST方法更多地用于数据项（Entry）窗体，它允许你从客户机向主机发送数据。GET方法用于数据查询窗体。例如，当你要到你喜爱的Web搜索页时，实际上你就是要填一份使用GET方法的窗体。ACTION属性则让Web服务器知道到哪里去找一个CGI脚本，用它处理来自窗体的输入。一个典型的<FORM>标记如下：
    <FORM METHOD=GET ACTION="/cgi-bin/query">
    创建一个窗体使用的主要标记是<INPUT>标记。有许多方式──多于这里介绍的棗使用这一特定的标记。除了在这里可以找到的基本信息外，浏览器供货商通常对<INPUT>标记进行增强，使之提供附加功能。例如，你或许会发现某个浏览器比另一个浏览器支持更多种类的按钮。了解了这些后，让我们快速地看一下这一标记使用的各种属性吧。
    TYPE 这一属性定义控件的类型──按钮、文本框等等。
    VALUE 这一属性的效果取决于控件的类型。例如，它定义按钮的标题或文本框的内容。
    NAME 这一属性指定引用该控件的变量名称。
    SIZE 这一属性定义控件的大小──通常是按字符计算的宽度。
    CHECKED 具有选中或未选中两种状态的单选按钮或其它控件使用这个属性。
    ROWS 这一属性定义了为一个特定控件分配的行数──通常是控件的高度。
    除了<INPUT>标记，还可以使用<SELECT>标记创建弹出式列表框或菜单，它工作的方式与本章前面创建的列表相同。要用</SELECT>标记结束列表框。在<SELECT>和</SELECT>标记之间，使用<OPTION>或<OPTION SELECTED>标记为弹出式列表框创建一系列表项（entries），<OPTION SELECTED>标记指示出当用户最初看到这一页时你想选择哪一个选项。
    最后的窗体专用标记允许创建一个文本区。这允许你在一个小区中显示大量文本，或为用户的注释及评论提供一个大显示区。文本区使用<TEXTAREA>和< /TEXTAREA>标记对，也能够为<TEXTAREA>标记添加一个可选的属性NAME, 以便于后面恢复其内容。
    现在你已经基本了解了这些标记是如何工作了。让我们来看看实际代码。程序列表8.5 列出了一个窗体的代码示例（将产生的文件命名为FORM.HTM以使程序列表8.1中的链接正确工作）。它对能够使用的每种类型的基本控件都给出了例子，还有一个在本节末尾要更详细讨论的扩充控件。图8.7则显示的是从Internet Explorer上看到的这一页的外观，如果使用不同的浏览器，你的视图也许会稍有不同。注意，在页底部的三个按钮，使用了<CENTER>标记进行居中处理。

    如你所见，显示的大多数控件使用了<INPUT>标记。控件类型间的主要差别由 TYPE属性定义，若想知道它们如何工作，可以选择任一控件。不能正确工作的唯一按钮是提交（Submit）按钮，这是因为我们还没有写出CGI脚本来处理窗体的信息。取消按钮还不能用，但过一会儿我们就定义它。
    在源代码中还应注意到两个独特的按钮类型：提交（Submit）与复位（Reset ）。提交按钮总是执行<FORM>标记中ACTION属性指出的动作。若打算用标准方法处理窗体中的信息，就必须提供一个提交按钮。复位按钮总是将窗体中的全部控件恢复成初始状态，这使得用户可以从头开始重新启动窗体，而不必先离开该站点再重新进入该站点。
    这个例子中的取消按钮还不能用，可以单击它，但什么也不发生。取消按钮代表了HTML文档的标准按钮类型，为使其工作，不得不添加一个调用某个脚本或执行某个其它动作的ONCLICK参数。一旦创建了这个按钮本身，ActiveXControl Pad就提供一种容易的办法让你创建这一脚本。下列程序说明了为一个按钮（或其它控件）指定几乎任何缺省动作的快速方法。
    注释可以从http://www.microsoft.com/workshop/author/cpad/ 的Microsoft Web站点为自己下载一个ActiveX control Pad。
    1. 一旦在你的机器上安装了ActiveX Control Pad，使用File（文件）|Open （打开）命令打开FORM.HTM文件（该文件代码如程序列表8.5所示）。
    2. 使用Tools（工具）|Script Wizard（脚本向导）命令显示脚本向导对话框，如图8.8所示。看到的是三个列表框及一些按钮。第一个列表框包含了你定义的控件；第二个则包含了你可以与这些控件的事件相联系的动作；第三个包括的是当前赋给一个特定事件的动作。

    3. 单击第一个列表框中Cancel（取消）元素左边的加号，再单击onClick事件，这就是让脚本向导知道你想为Cancel按钮的onClick事件（单击事件）定义某个动作了。
    4. 单击第二个列表框中的Go To Page（到......页）项，这表示当你单击窗体中的Cancel（取消）按钮时，你将到另一页去。这时，你将到我们例中Web 站点的前一页去。
    5. 单击Insert Action（插入动作）按钮，则看到如下所示的Go To Page对话框，在这里可以告诉脚本向导你想到哪一页去。

    6. 在Enter a Text String（键入字符串）域中键入你的Web站点某页名称，本例中是SMPL_TAG.HTM。请注意不必有双引号或单引号──脚本向导自动地处理这些事。
    7. 单击OK，就可以看到Cancel按钮的onClick事件与一个动作联系起来，如图8.9所示。将这一文档存盘，然后用浏览器查看该页，单击Cancel按钮，将回到前一页去。
    脚本向导自动地对你的代码作了所需的变化，在这时，它向程序列表8.5 中我们定义的取消按钮添加了一个ONCLICK属性，代码如下：
    <!- 这是标准的按钮类型，我们将用它取消窗体 ->
     <INPUT LANGUAGE="VBScript" TYPE=button VALUE="Cancel" ONCLICK="Window.location.href 'SMPL_TAG.HTM'">

		相关文章