A_第02章 HTML与SCRIPT

第2章HTML与Script语言教学时间：6学时教学目的和要求：要求学生掌握HTML静态网页的基本方法和实用技巧。主要了解HTML概述，掌握HTML基本结构、页面布局与文本设计、列表、TABLE表格、文件之间的链接、多媒体的使用、框架的应用等内容。了解VBScript语言和Jscript语言。教学重点：HTML标签的掌握。教学难点：HTML标签的掌握，VBScript语言和Jscript语言的了解。教学方法和手段：教师讲授、实验教学、多媒体演示教学。2.1什么是HTMLHTML英文全称：HyperTextMark-upLanguage。HTML中文译称：超文本标记语言。它是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档也称为HTML文档，它能独立于各种操作系统平台（如UNIX，Windows等）。所谓超文本，因为它可以加入图片、声音、动画、影视等内容，也可以从一个文件跳转到另一个文件，与互联网上各地主机的文件进行连接。HTML不是程序语言（如C++和Java），它只是标记语言，可以这样说，只要我们明白了各种标记的作用和用法，就算掌握了HTML。HTML的格式简单，只是由文本及标记组合而成。任何文本编辑器都可以编辑它，当然用专业的网页编辑软件，则更为方便。下面通过一个简单示例，来说明HTML文档的编写和应用。◆请用Windows下的记事本编辑如下代码。注意，第一行中的路径和文件必须在你的磁盘中确实存在。然后将它以a1.htm文件格式保存于磁盘。imgsrc=C:\DocumentsandSettings\zuidaoer\MyDocuments\MyTxt\tup.jpgfontsize=+5color=006600云麓书台/font在这两行中，第一行imgsrc=e:/yunlun/指定插入一个图片。第二行fontsize=+5color=00ffff云麓书台/font通过对插入的文字“云麓书台”设置字体大小和显示颜色。通过浏览器打开a1.htm文件，则显示结果如图所示。·20·第2章HTML◆同样再建立一个a2.htm文件，有如下代码：ahref=C:\DocumentsandSettings\zuidaoer\MyDocuments\MyTxt\a1.htm连接a1/a该代码前一对a...中，指定一个链接的文件，接着给出链接提示文字，最后用/a标记结束。用IE打开该文件，结果如下图，如果点击“连接a1”，则转到上例中的图片和文字页面。◆当然，通过HTML标记语言，还可以展现多媒体的效果。声频示例：embedsrc=D:\MP3001.mp3autostart=true视频示例：embedsrc=D:\MVI_2436.AVIautostart=trueHTML是一种建立网页文件的语言。自1990年以来，HTML就一直被用作WorldWideWeb的信息表示语言，用于描述Homepage的格式设计和它与的连接信息。使用HTML语言描述的文件，透过标记式的指令(Tag)，将影像、声音、图片、文字等连结并显示出来。换言之，HTML是一种为普通文件中某些字句加上标记的语言，其目的在于运用标记使文件达到预期的显示效果。HTML标记是由一对尖括符“”括住的指令，主要分为单标记指令、双标记指令(由起始标记，/结束标记所构成)。HTML网页文件可由任何文本编辑器或网页专用编辑器编辑，其标记不区分大小写，完成后以.htm或.html为文件扩展名保存，然后通过浏览器即可打开该文件并显示网页内容。2.2HTML基本结构2.2.1基本结构和一般示例下面列出了HTML文档的最基本的结构：htmlhead头部信息/headbody文档主体/bodyhtml第2章HTML·21·html.../html处在最外层，表示其间的内容是HTML文档。有些主页省略这对标记，因为.html或.htm文件被Web浏览器默认为是HTML文档。head.../head之间包括文档的头部信息，如文档标题等，若不需要头部信息，则可以省略这个标记。body.../body之间是文档的主体部分，一般不省略。下面看一个简单的示例，下面文件a3给出了HTML代码。通过浏览器打开这个.htm文件，得到显示结果。htmlheadtitle简单示例/title/headbodycenterh5欢迎光临古典诗词主页/h5brhrfontsize=5临窗有感/fontbrbrfontsize=4云桥飞鹭影，柳岸渐春装。百叶窗前我，汀洲草上羊。br青青滩野阔，脉脉水微凉。此去江流远，安能载羽觞。/font/center/body/html2.2.2超文本中的标签刚刚接触上面超文本例子，有些不大习惯那些用“”和“”括起来的句子。在这里，我们称它为标签，它们是用来分割和标记文本的元素，用以形成文本的布局、文字的格式及形式多样、色彩缤纷的页面。下面加以简单说明。1．单标签文档中的某些标记称为“单标签”，它们只需要单独使用就能完整地表达意思，这类标记的语法如下：标签名称最常用的单标签如：br它是表示换行。·22·第2章HTML2．双标签文档中的另一类标记称为“双标签”，它们由“始标签”和“末标签”两部分构成，必须成对使用。其中始标签告诉浏览器从此处开始，执行该标记所表示的功能；而末标签告诉浏览器在此处结束该功能。这类标记的语法如下：标签名称.../标签名称如：h5欢迎光临古典诗词主页/h5设置标题格式fontsize=5临窗有感/font设置文本字号3．标签属性许多单标记和双标记的始标记内，可以包含标签属性，其语法如下：标签名字属性1属性2属性3...各属性之间并无先后次序，属性也可省略，而取其默认值。如单标记hr表示在当前位置画一条水平线（horizontalline），一般是从当前行的最左端一直画到最右端。它可以带一些属性，如：hrsize=3align=leftwidth=75%其中size属性定义了线的粗细，该属性值为整数，缺省时默认为1。align属性表示对齐方式，可取left（左对齐，缺省值）、center（居中）、right（右对齐）。width属性定义线的长度，可取相对值，（由一对号括起来的百分数，表示相对于整个窗口宽度的百分比），也可取绝对值（用整数表示的屏幕像素，如width=300），其缺省值是100%。2.3页面布局与文本设计2.3.1标题标签对于一般的文档，往往要使用主标题、副标题、章节等结构形式，HTML提供了相应的标题标签hn,其中n可以是数字1~6，n为1时，为一级标题，为2时，为二级标题，依此类推。n越小，标题字号就越大，下面示例说明：htmlbodyH1一级标题示例文字/H1H2二级标题示例文字/H2H3三级标题示例文字/H3H4四级标题示例文字/H4H5五级标题示例文字/H5H6六级标题示例文字/H6/body/html打开运行a4a.htm，则看到如下显示结果：第2章HTML·23·2.3.2换行标签在编写HTML文件时，我们不必考虑太细的设置，也不必理会段落过长的部分会被浏览器切掉。因为，在HTML语言规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文字转折至下一行。所以，编写者对于自己需要换行的地方，应加上br标签。请看下面的例子：htmlbody临窗有感云桥飞鹭影，柳岸渐春装。百叶窗前我，汀洲草上羊。青青滩野阔，脉脉水微凉。此去江流远，安能载羽觞。brbr临窗有感br云桥飞鹭影，柳岸渐春装。br百叶窗前我，汀洲草上羊。br青青滩野阔，脉脉水微凉。br此去江流远，安能载羽觞。/body/html上面的代码，在IE中运行得到如下显示效果：·24·第2章HTML2.3.3段落标签为了排列的整齐、清晰，文字段落之间，我们常用p.../p来做标记，表示段落开始。其中/p可以省略，下一个p开始，就意味着上一个p的结束。P标签还有一个属性align，用来指定对齐方式，一般值有center、left、right三个值。下面，我们用两个例子来说明这个标签的用法。htmlbodypalign=center临窗有感p云桥飞鹭影，柳岸渐春装。百叶窗前我，汀洲草上羊。p青青滩野阔，脉脉水微凉。此去江流远，安能载羽觞。/p/body/html第2章HTML·25·2.3.4水平线标签水平线标签hr可以在屏幕上显示一条水平线，用以分割页面中的不同部分。它有三个属性：size粗度，点数。width长度，屏幕百分比或象素值。align对齐，left、center、right。noshade阴影，有则为实心线段我们可以用几个例子来说明这线段的用法：请看下面的代码：htmlbodyhrhrsize=5hrsize=10hrwidth=50size=10hrwidth=50%size=10hrwidth=50%size=10align=lefthrwidth=50%size=10align=righthrwidth=50%size=10align=leftnoshadebodyhtml其执行效果如下：2.3.5字体设置标签字体设置标签是font，font有三个属性：size、face、color，分别字体字号、字体样式、字体颜色等。以外还有一系列字体特殊效果标签。1．字号和字体请看下面的综合示例。htmlbodycenter·26·第2章HTMLbrfontsize=7七号大小/fontfontsize=6六号大小/fontbrfontsize=5五号大小/fontfontsize=4四号大小/fontbrfontsize=3三号大小/fontfontsize=2二号大小/fontbrfontsize=1一号大小/fontfontsize=-1负一号大小/fontbrfontface=楷体_GB2312楷体_GB2312字体/fontfontface=宋体宋体字体/fontbrfontface=仿宋_GB2312仿宋_GB2312字体/fontfontface=黑体黑体字体/fontbrfontface=Arial西文Arial体/fontfontface=ComicSansMS西文ComicSansMS体/font/center/body/html字体代码执行效果如下：2．字体特殊效果HTML提供如下常用的字体特殊效果标签，例如：b字体效果/b，则表示“字体效果”这几个字的字体效果加粗。标签效果b/b粗体第2章HTML·27·i/i斜体u/u下划线tttt打字机字体big/big大型字体small/small小型字体blink/blink闪烁效果em/em斜体强调strong/strong粗体强调cite/cite斜体引证、示例3．文字颜色设置文字颜色设置的格式如下：fontcolor=color_value.../font这里的颜色值可以是一个十六进制数(用“#”作为前缀)，也可以是以下16种颜色名称。颜色名颜色值颜色名颜色值Black#000000Green#008000Silver#C0C0C0Lime#00FF00Gray#808080Olive#808000W