XML语言课件：第1章_HTML基础

《XML语言课件：第1章_HTML基础》由会员分享，可在线阅读，更多相关《XML语言课件：第1章_HTML基础（75页珍藏版）》请在金锄头文库上搜索。

1、第第1章章 HTML基础基础n了解网页设计的基本概念及了解网页设计的基本概念及HTML的基本的基本知识知识n掌握掌握HTML文档的基本结构文档的基本结构n熟悉常用熟悉常用HTML元素标记功能及使用方法元素标记功能及使用方法n掌握格式化网页文本的常用方法掌握格式化网页文本的常用方法n熟悉在网页中链接的使用方法熟悉在网页中链接的使用方法教学内容教学内容n1 HTML概述概述n2 HTML的标记的标记n3 文字修饰文字修饰n4 图像图像n5 列表列表n6 表格表格n7 色彩色彩n8 超文本链接超文本链接n9 表单表单n10 事件事件n11 脚本脚本n小结小结1.1 HTML概述概述nHTML是是Hy

2、per Text Markup Language的缩写，意的缩写，意思是思是“超文本标识语言超文本标识语言”，它实际上是专门用来编写，它实际上是专门用来编写网页的一种编程语言。大多数网页的构成基础就是网页的一种编程语言。大多数网页的构成基础就是HTML的语句。的语句。 HTML文档的基本结构文档的基本结构 构成构成HTML文档基本结构的标记有：文档基本结构的标记有：, 。一个网页就是一个一个网页就是一个HTML文档，其基本结构如下：文档，其基本结构如下：1.2 如何编写一个如何编写一个HTML文件文件nHTML文文件件是是一一个个扩扩展展名名为为.htm或或.html的的ASCII格式的文件格

3、式的文件n任何一种可以编辑任何一种可以编辑ASCII文件的编辑器文件的编辑器n记事本、写字板、记事本、写字板、Word等软件。等软件。n扩展名应为扩展名应为 htm 或或 html。1.3 HTML文件的调试文件的调试 第一章第一章 HTML基础基础 HTML是是Hyper Text Markup Language的缩写，的缩写，意思是意思是“超文本标识语言超文本标识语言”。它实际上是专门用来编写网页它实际上是专门用来编写网页的一种编成语言。大多数网页的一种编成语言。大多数网页的构成基础就是的构成基础就是HTML的语句。的语句。 可以用网页浏览器对可以用网页浏览器对HTML文件进行调试，如文件

4、进行调试，如 例例1 ：2.1 标记的一般特性标记的一般特性n标记的记述形式：标记的记述形式：n开始标记：开始标记：n结束标记：结束标记：n属性：属性名属性：属性名=“属性值属性值”，包含在开始标记里，可以有多个，包含在开始标记里，可以有多个n元素：元素： n内容数据内容数据n元素包含多个属性时：元素包含多个属性时：n内容数据内容数据n空元素：空元素： n也可记为：也可记为：2.2 几个最常用的标记几个最常用的标记n1. 和和n在文档的最初和最后，定义一个在文档的最初和最后，定义一个HTML文档。文档。n2. 和和n定定义义文文档档的的头头部部，描描述述了了文文档档的的各各种种属属性性和和信信

5、息息，包包括括文文档档的的标标题题和和 、在在 Web 中中的的位位置置以以及及和和其其他他文文档档的的关关系等。系等。 n3. 和和n定义文档的标题，在浏览器窗口的标题栏上显示。定义文档的标题，在浏览器窗口的标题栏上显示。n4. 和和n定定义义文文档档的的主主体体，包包含含文文档档的的所所有有内内容容（比比如如文文本本、超超链链接接、图图像、表格和列表等等。）像、表格和列表等等。） n5. 和和n定义子标题。其中定义子标题。其中n=1,2,6。 定义最大的子标题，定义最大的子标题， 定义最小的子标题。如定义最小的子标题。如 例例2 。n6. n插入一个简单的换行符。插入一个简单的换行符。n7

6、.n定义段落，前后有空行。定义段落，前后有空行。n8. n在页面中创建一条水平线。如在页面中创建一条水平线。如 例例3 。3 文字修饰文字修饰n一个网页大多由以下要素构成：一个网页大多由以下要素构成：n文字、图片、表格、动画及声音等。文字、图片、表格、动画及声音等。n文字是十分重要的要素。可以对文字的字号、文字是十分重要的要素。可以对文字的字号、字体的样式及颜色等进行修饰。字体的样式及颜色等进行修饰。3.1 字号字号n可以采用多种方式设置文字的大小。可以采用多种方式设置文字的大小。n不过设置文字的大小后，其效果会受到网页浏不过设置文字的大小后，其效果会受到网页浏览器中选项的影响。览器中选项的影

7、响。 n1. 和和n显示小一号的字体。显示小一号的字体。 n2. 和和n显示大一号的字体显示大一号的字体 。n3. n规定规定 font 元素中文本的尺寸大小。元素中文本的尺寸大小。n是从是从 1 到到 7 的数字。的数字。n=1时最小，时最小，n=7时最大。浏览器默认值时最大。浏览器默认值是是 3。nn也可以是带也可以是带+号或号或-号数字，表示相对扩大或缩小号数字，表示相对扩大或缩小字号。字号。 n4. n为文档中的所有文本定义默认字体的大小。为文档中的所有文本定义默认字体的大小。 3.1 字号字号例例4 设置文字大小的例子设置文字大小的例子 设置文字的默认大小设置文字的默认大小 显示效果

8、正常字号显示效果正常字号 小号字小号字 大号字大号字 1号字号字 2号字号字 3号字号字 4号字号字 5号字号字 6号字号字 7号字号字 相对小相对小5号字号字 1号字号字 相对大相对大2号字号字 5号字号字 3.2 字体式样字体式样n1. 和和n显示粗体字显示粗体字n2. 和和n显示斜体字显示斜体字n3. 和和n显示带下划线的字显示带下划线的字n4. 和和n显示带删除线的字显示带删除线的字n5. 和和n显示下脚标显示下脚标n6. 和和n显示上脚标显示上脚标3.3 特殊标记特殊标记n由于由于、& 和和 “ 号是号是HTML的关键字符，要把这些的关键字符，要把这些字符当作数据使用时，就必须使用与

9、之对应的特殊标记，字符当作数据使用时，就必须使用与之对应的特殊标记，也叫也叫”实体实体”。n 用用 >表示表示n& 用用 &表示表示n“ 用用 "表示表示n也可用也可用“&#字符编码字符编码;”的形式显示任一字符。其中字符的形式显示任一字符。其中字符编码可以是编码可以是10进制也可以是进制也可以是16进制。进制。16进制要在编码进制要在编码前加前加“x”字符。字符。n如如“”的编码是的编码是A7，则可在，则可在HTML中用中用§来表来表示。示。例例5 字体式样和特殊标记的例子字体式样和特殊标记的例子 使用字体样式和特殊标识使用字体样式和特殊标识 要粗体显示的文

10、字要粗体显示的文字 要斜体显示的文字要斜体显示的文字 要下划线显示的文字要下划线显示的文字 要加上删除线显示的文字要加上删除线显示的文字 正常文字正常文字下标形式显示的文字下标形式显示的文字 正常文字正常文字上标形式显示的文字上标形式显示的文字 小于号小于号< 大于号大于号> 其他符号：其他符号：§ µ ¥ 4.图像图像n在在 HTML 中，图像由中，图像由 标记定义。标记定义。n格式：格式： n 是空标签，它只包含属性。是空标签，它只包含属性。nsrc属性为必须项，其值是图像文件的路径名或网络属性为必须项，其值是图像文件的路径名或网络地址。地址。na

11、lt属性为图像定义一串预备的可替换的文本。属性为图像定义一串预备的可替换的文本。nwidth和和height属性规定图像的宽度和高度（单位为属性规定图像的宽度和高度（单位为像素）像素） 使用图像的例子使用图像的例子使用图像的例子使用图像的例子一幅图像：一幅图像：一幅动画图像：一幅动画图像：请注意，插入动画图像的语法与插入普通图像的语法没有区请注意，插入动画图像的语法与插入普通图像的语法没有区别。别。5 列表列表n列表是一种条理化地排列信列表是一种条理化地排列信息的方法息的方法n它把内容一条条地水平排列它把内容一条条地水平排列显示，直观、清晰显示，直观、清晰n不同于表格，一般列表没有不同于表格，

12、一般列表没有表格复杂。表格复杂。 列表标记的通用格式列表标记的通用格式条目内容条目内容1条目内容条目内容2条目内容条目内容3 一般一般为为列表标记列表标记n1. 和和：条目前加符号：条目前加符号n ，f: disk, circle, squaren2. 和和：条目前加序号：条目前加序号n ，f: A, a, I, i, 1n ，n: 数字数字,为起始序号为起始序号 例例6 列表标记的使用例子列表标记的使用例子 列表标识列表标识 李白李白-赠孟浩然赠孟浩然 杜甫杜甫-望岳望岳 杜牧杜牧-泊秦淮泊秦淮 李白李白-赠孟浩然赠孟浩然 杜甫杜甫-望岳望岳 杜牧杜牧-泊秦淮泊秦淮 李白李白-赠孟浩然赠孟浩

13、然 杜甫杜甫-望岳望岳 杜牧杜牧-泊秦淮泊秦淮 例例7 列表的嵌套列表的嵌套 列表嵌套列表嵌套 唐诗选读唐诗选读 李白李白 春思春思 月下独酌月下独酌 赠孟浩然赠孟浩然 杜甫杜甫 望月望月 佳人佳人 梦李白梦李白 杜牧杜牧 赤壁赤壁 泊秦淮泊秦淮 秋夕秋夕 6 表格表格n使用表格基本能实现对页面元素使用表格基本能实现对页面元素在浏览器中随心所欲的排版定位。在浏览器中随心所欲的排版定位。表格通常用来显示大量的、分类表格通常用来显示大量的、分类化的信息，具有表示清晰、明了化的信息，具有表示清晰、明了的特点，使用十分广泛。的特点，使用十分广泛。n表格一般由以下几部分组成：表表格一般由以下几部分组成：

14、表格名称、表格栏及表中数据。这格名称、表格栏及表中数据。这与其他软件（如与其他软件（如WORD）中所说）中所说的表格十分相同。的表格十分相同。6.1 表格的定义表格的定义n表格由表格由标记来定义。标记来定义。n这是一对用来指明表格范围的标记。通这是一对用来指明表格范围的标记。通常使用的格式如下：常使用的格式如下： 表格全部内容表格全部内容表格的表格的border属性属性 n使用表格的这一属性可以给表格加上框线。如使用表格的这一属性可以给表格加上框线。如表示表格是有表格线的，表示表格是有表格线的，border的线宽默认为的线宽默认为1。没有写。没有写border则表则表示表格是没有表格线的。示表

15、格是没有表格线的。n一般用一般用来设置来设置“有线表有线表格格”和边框宽度。和边框宽度。n是一个具体的数字，用来是一个具体的数字，用来指定宽度的大小，单位是指定宽度的大小，单位是“像素像素”，默认为没，默认为没有边框。当有边框。当n为为0时，也没有边框时，也没有边框例例8 设置表格边框的例子设置表格边框的例子 这是有线表格和表这是有线表格和表格边框的例子格边框的例子表格标题表格标题 栏目名称栏目名称1 栏目名称栏目名称2 栏目名称栏目名称3 数据数据1-1 数据数据2-1 数据数据3-1 数据数据1-2 数据数据2-2 数据数据3-2表格的表格的width属性属性 n这一属性可以用来设置表格占

16、整个页面的相对这一属性可以用来设置表格占整个页面的相对宽度，写法为：宽度，写法为：n。n这里的这里的n是一个具体的数字，可以是一个具体的是一个具体的数字，可以是一个具体的数值，单位是像素，也可以是一个百分数（如数值，单位是像素，也可以是一个百分数（如100%）。如：）。如：n80表示表格占表示表格占80个像素单位的宽度；个像素单位的宽度；n80%表示表格宽度占页面宽度的表示表格宽度占页面宽度的80%。表格的表格的height属性属性n这一属性可以用来设置表格的高度。其这一属性可以用来设置表格的高度。其用法与用法与相似。相似。n使用相对方式来设置表格大小时，浏览使用相对方式来设置表格大小时，浏览

17、器窗口大小的变化会影响到表格大小的器窗口大小的变化会影响到表格大小的变化。表格宽度、高度设置要合理，在变化。表格宽度、高度设置要合理，在视觉上要有美感。视觉上要有美感。例例9 表格占页面大小的例子表格占页面大小的例子 这是表格占页面相对大小的例子这是表格占页面相对大小的例子表格占页面的表格占页面的80% 栏目名称栏目名称1 栏目名称栏目名称2 栏目名称栏目名称3 数据数据1-1 数据数据2-1 数据数据3-1 数据数据1-2 数据数据2-2 数据数据3-2表格占页面的表格占页面的70% 栏目名称栏目名称1 栏目名称栏目名称2 栏目名称栏目名称3 数据数据1-1 数据数据2-1 数据数据3-1

18、数据数据1-2 数据数据2-2 数据数据3-26.2 表格的标题表格的标题n用用和和标记来定义表格标记来定义表格的标题的标题n通常使用的格式如下：通常使用的格式如下： 表格标题内容表格标题内容6.3 定义表格的一行定义表格的一行n用用和和标记来指明表格一行的内容。这一行可以标记来指明表格一行的内容。这一行可以是表格的栏目，也可以是数据。是表格的栏目，也可以是数据。表格标题表格标题数据数据数据数据 数据数据数据数据和是有区别的，前者可以认为是表头的一部分，后者是表格内容部分 6.4 表格的数据项表格的数据项n用用和和标记来指明表格数据行中的一项标记来指明表格数据行中的一项n一行可以由多项组成，它

19、也必须嵌套在一行可以由多项组成，它也必须嵌套在与与之中使用之中使用n的属性：的属性：n水平对齐方式水平对齐方式align=x, x:left, center, rightn垂直对齐方式垂直对齐方式valign=y,y:top, middle, bottomnnowrap:超长文本不自动换行超长文本不自动换行n单元格宽度单元格宽度width=数值数值n列合并列合并colspan=向右合并单元格的数目向右合并单元格的数目n行合并行合并rowspan=向下合并单元格的数目向下合并单元格的数目如果指定的td标签中 colspan不为1且在最末的格，若后续的表格中最大列数恰等于这行的实际列数（不含最后标

20、签coslpan比1大的部分）时，实际只显示了coslpan=1时的样式。rowspan同理例例10 单元格合并的例子单元格合并的例子 这是表格栏目合并的例子这是表格栏目合并的例子表格标题表格标题 栏目名称栏目名称1 栏目名称栏目名称2和和3 数据数据1-1 数据数据2-1 数据数据3-1 数据数据2-2 数据数据3-2 7.1 色彩的表示方法一色彩的表示方法一n三原色浓度混合表示法三原色浓度混合表示法(RGB)。n把三原色的浓度把三原色的浓度(R、G、B)分别以两位的分别以两位的16进制数进制数表示，即表示，即:00FF。n再把三种颜色的浓度数值按再把三种颜色的浓度数值按RGB顺序组合起来，

21、前顺序组合起来，前面再加个面再加个“#”号，即号，即:#rrggbb的形式表示色彩。的形式表示色彩。n如：黑色为如：黑色为#000000、白色为、白色为#ffffff、墨绿色为、墨绿色为#008040、深灰色为、深灰色为#808080等等7.1 色彩的表示方法二色彩的表示方法二颜 色名 称颜 色名 称BlackBlack黑黑RedRed红红WhiteWhite白白FuchsiaFuchsia洋红洋红NavyNavy深蓝深蓝MaroonMaroon棕棕BlueBlue蓝蓝PurplePurple紫紫AquaAqua浅蓝浅蓝GreenGreen绿绿TealTeal靛靛OliveOlive橄榄色橄榄

22、色SilverSilver银灰（浅灰）银灰（浅灰）LimeLime柠檬绿柠檬绿GrayGray灰灰YellowYellow黄黄表表1 常见颜色列表常见颜色列表用颜色的名称用颜色的名称(英文英文)表示法：表示法：7.2 文本的色彩文本的色彩 n1. 在在body的属性中，我们可以使用以下几种属性改变的属性中，我们可以使用以下几种属性改变文本的颜色。文本的颜色。 n(1) text属性：设置文本的颜色属性：设置文本的颜色nn(2) link属性：设置超连接文字的颜色属性：设置超连接文字的颜色nn(3) vlink属性：设置鼠标指向超链接文字时的颜色属性：设置鼠标指向超链接文字时的颜色n n2. 标

23、记的标记的color属性属性:局部设置文本的颜色局部设置文本的颜色n着色的文本着色的文本7.3 表格的颜色表格的颜色 n1. 设置表格的背景色设置表格的背景色nn2.设置表格数据项的背景色设置表格数据项的背景色 nn4. 设置水平线的颜色设置水平线的颜色 n例例11 颜色设置的例子颜色设置的例子 这是颜色设置的例子这是颜色设置的例子 颜色显示效果颜色显示效果 问题与答案问题与答案(红色红色) 1、如何改变表格的背景颜色？、如何改变表格的背景颜色？(蓝色蓝色) 这还不简单这还不简单(橄榄色橄榄色)。8 超文本链接超文本链接n超文本链接是网页中一种非常重要的功超文本链接是网页中一种非常重要的功能，

24、是网页中最重要、最根本的元素之能，是网页中最重要、最根本的元素之一。一。n通过链接可以从一个网页转到另一个网通过链接可以从一个网页转到另一个网页，也可以从一个网站转到另一个网站，页，也可以从一个网站转到另一个网站，这符合人类的跳跃思维方式。这符合人类的跳跃思维方式。n链接的标志有文字和图形两种。可以制链接的标志有文字和图形两种。可以制作一些精美的图形作为链接按钮，使它作一些精美的图形作为链接按钮，使它和整个网页融为一体。和整个网页融为一体。8.1 超文本链接的概念超文本链接的概念n所谓的超文本链接是指从一个网页指向一个目所谓的超文本链接是指从一个网页指向一个目标的连接关系。标的连接关系。n这个

25、目标可以是另一个网页，也可以是相同网这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。子邮件地址、一个文件，甚至是一个应用程序。n而在一个网页中用来表示超文本链接的对象，而在一个网页中用来表示超文本链接的对象，可以是一段文本或者是一个图片。可以是一段文本或者是一个图片。n当浏览者单击已经链接的文字或图片后，链接当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型目标将显示在浏览器上，并且根据目标的类型来打开或运行。来打开或运行。8.2 页面链接页面链接n在

26、在HTML中创建超文本链接需要使用中创建超文本链接需要使用标记符标记符（结束标记符（结束标记符不能省略），它的最基本属性不能省略），它的最基本属性是是href，用于指定超文本链接的目标。通过为，用于指定超文本链接的目标。通过为href指定不同的值，可以创建出不同类型的超链指定不同的值，可以创建出不同类型的超链接。接。n在在HTML文件中用链接指针指向一个目标。其基本文件中用链接指针指向一个目标。其基本格式为：格式为：n标记超文本链接信息标记超文本链接信息n 8.3 页内链接页内链接n超文本链接可以指向自己的计算机中的某一个文件的超文本链接可以指向自己的计算机中的某一个文件的某处，这种链接方式叫

27、做本地链接。某处，这种链接方式叫做本地链接。n在文件中需要创建一个标签在文件中需要创建一个标签(即做一个记号即做一个记号)，为页面，为页面中需要跳转到的位置命名。命名时应使用中需要跳转到的位置命名。命名时应使用标记符标记符的的name属性创建标签：属性创建标签：n此处创建了一个标签此处创建了一个标签n建立本网页内部链接：建立本网页内部链接：n本地链接信息本地链接信息n建立外部网页内部的链接：建立外部网页内部的链接：n链接信息链接信息例例12 超链接的例子超链接的例子 使用本地链接使用本地链接 互联网互联网 HTML简介简介 多样化和统一性多样化和统一性 互联网互联网 互联网是网络的网络。也就是

28、说，计算机网络可以跨越国家甚至全球的范围连接到其他网络。互联网是网络的网络。也就是说，计算机网络可以跨越国家甚至全球的范围连接到其他网络。世界上所有的计算机都可以通过世界上所有的计算机都可以通过TCP/IP传输协议绑定在一起。传输协议绑定在一起。 HTML简介简介 超文本标记语言是超文本标记语言是Web用来创建和识别文档的标准语言。虽然它不是标准通用标记语言用来创建和识别文档的标准语言。虽然它不是标准通用标记语言 (SGML) 的子集，但与它有着某种程度上的关联。的子集，但与它有着某种程度上的关联。SGML是一种文档格式语言表示方法。是一种文档格式语言表示方法。 多样性和统一性多样性和统一性

29、万事万物都离不开多样性和统一性这样一条基本准则。也就是说，所有的事物都可以融合成万事万物都离不开多样性和统一性这样一条基本准则。也就是说，所有的事物都可以融合成一个整体，同时，又保持自己独特的与众不同的一面。站点的独特性恰恰来源于它的一致性。颜一个整体，同时，又保持自己独特的与众不同的一面。站点的独特性恰恰来源于它的一致性。颜色、字体、分栏布局以及其他设计元素应在站点的每个部分都保持一致。色、字体、分栏布局以及其他设计元素应在站点的每个部分都保持一致。 关于我们关于我们 联系我们联系我们 8.4 电子邮件链接电子邮件链接n如果希望用户在网页上通过链接直接打开客户端的发送邮件如果希望用户在网页上

30、通过链接直接打开客户端的发送邮件的工具发送电子邮件，则可以在网页内包含发送电子邮件的的工具发送电子邮件，则可以在网页内包含发送电子邮件的功能。实现此功能所需的全部工作就是在链接标记中插入功能。实现此功能所需的全部工作就是在链接标记中插入mailto值。如值。如n 管理员信箱管理员信箱 9 表单表单n表单是一个包含表单元素的区域。表单是一个包含表单元素的区域。n表单元素是允许用户在表单中（比如：文本域、下拉列表、表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。单选框、复选框等等）输入信息的元素。n表单用于搜集不同类型的用户输入数据，并将其传送给目表单用于搜

31、集不同类型的用户输入数据，并将其传送给目标文件（程序）。标文件（程序）。 n表单使用表单标签（表单使用表单标签（）定义。）定义。 . input 元素元素 . 9.1 表单的输入表单的输入:文本域文本域n多数情况下被用到的表单标签是输入标签（多数情况下被用到的表单标签是输入标签（）。）。输入类型是由类型属性（输入类型是由类型属性（type）定义的。大多数经常被用）定义的。大多数经常被用到的输入类型如下：到的输入类型如下： n文本域（文本域（Text ）：当用户要在表单中键入字母、数字等内：当用户要在表单中键入字母、数字等内容时，就会用到文本域。容时，就会用到文本域。 First name: L

32、ast name: 9.1 表单的输入表单的输入:单选按钮单选按钮n单选按钮（单选按钮（Radio ）：当用户从若干给定的的选择中选取：当用户从若干给定的的选择中选取其一时，就会用到单选框。其一时，就会用到单选框。 Male Female 9.1 表单的输入表单的输入:复选框复选框n复选框（复选框（Checkboxes）：当用户需要从若干给定的选择：当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。中选取一个或若干选项时，就会用到复选框。 I have a bike I have a car 9.2 表单的确认按钮表单的确认按钮n当用户单击确认按钮当用户单击确认按钮(submi

33、t)时，表单的内容会被传送到时，表单的内容会被传送到另一个文件：另一个文件：。 Username: 9.3 表单的动作属性表单的动作属性n表单的动作属性（表单的动作属性（action）定义了目的文件的文件名。由）定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。传输方式属性（相关的处理。传输方式属性（method）规定了数据是以显）规定了数据是以显式的方式（式的方式（get）传送还是以隐式的方式（）传送还是以隐式的方式（post）传送。）传送。 Username: 10 脚本脚本n向向 HTML 添加脚本（

34、添加脚本（Script），使其动态性和交互性更强。），使其动态性和交互性更强。n格式：格式：脚本脚本 n其中：其中：ntype属性是必需的，指定脚本语言的种类，如：属性是必需的，指定脚本语言的种类，如：ntype=“text/javascript” 表示表示JavaScript脚本脚本ntype=“text/vbscript” 表示表示VBScript脚本脚本nsrc属性是可选的，规定外部脚本文件的属性是可选的，规定外部脚本文件的URL或文件名，如：或文件名，如：nsrc=”myscript.js“例例13 在在HTML中插入脚本中插入脚本 Script Test document.write

35、(Hello World!) 10.1 脚本放置的位置脚本放置的位置n脚本可以分别放在脚本可以分别放在HTML文件的文件的head部部分、分、body部分和外部。部分和外部。n当页面载入时，会执行位于当页面载入时，会执行位于 body 部分部分的脚本。的脚本。n当被调用时，位于当被调用时，位于 head 部分的脚本才部分的脚本才会被执行。会被执行。10.2 位于位于 head 部分的脚本部分的脚本n当脚本被调用时，或者当事件被触发时，脚本就会被执行。当你把脚当脚本被调用时，或者当事件被触发时，脚本就会被执行。当你把脚本放置到本放置到 head 部分后，就可以确保在需要使用脚本之前，它已经被部分

36、后，就可以确保在需要使用脚本之前，它已经被载入了。载入了。 function message() alert(该提示框是通过该提示框是通过 onload 事件调用的。事件调用的。)10.3 位于位于 body 部分的脚本部分的脚本n在页面载入时脚本就会被执行。当你把脚本放置于在页面载入时脚本就会被执行。当你把脚本放置于 body 部分后，它就会生成页面的内容。部分后，它就会生成页面的内容。document.write(该消息在页面加载时输出。该消息在页面加载时输出。) 10.4 使用外部脚本使用外部脚本n有时，你也许希望在若干个页面中运行相同的脚本，同时不在每个页有时，你也许希望在若干个页面中

37、运行相同的脚本，同时不在每个页面中写相同的脚本。为了达到这个目的，你可以将脚本写入一个外部面中写相同的脚本。为了达到这个目的，你可以将脚本写入一个外部文件之中。文件之中。实际的脚本位于名为实际的脚本位于名为 xxx.js 的外部脚本中。的外部脚本中。11 HTML的事件属性的事件属性n在现代浏览器中都内置有大量的事件处理器。这些处理器会监视特定的在现代浏览器中都内置有大量的事件处理器。这些处理器会监视特定的条件或用户行为，例如鼠标单击或浏览器窗口中完成加载某个图像。条件或用户行为，例如鼠标单击或浏览器窗口中完成加载某个图像。n通过使用客户端的通过使用客户端的 JavaScript，可以将某些特

38、定的事件处理器作为属，可以将某些特定的事件处理器作为属性添加给特定的标签，并可以在事件发生时执行一个或多个性添加给特定的标签，并可以在事件发生时执行一个或多个JavaScript 命令或函数。命令或函数。n事件处理器的值是一个或一系列以分号隔开的事件处理器的值是一个或一系列以分号隔开的 Javascript 表达式、方表达式、方法和函数调用，并用引号引起来。当事件发生时，浏览器会执行这些代法和函数调用，并用引号引起来。当事件发生时，浏览器会执行这些代码。码。n例如，当把鼠标移动到一个超链接时，会启动一个例如，当把鼠标移动到一个超链接时，会启动一个 JavaScript 函数。函数。 标签中的一

39、个特殊的标签中的一个特殊的onmouseover属性就是属性就是 “mouse over”事事件处理器，由它来完成这项工作：件处理器，由它来完成这项工作：aaaaaa 注意 alert函数里面的双引号变成了单引号11.1 窗口事件窗口事件 n仅在仅在 body元素中有效。元素中有效。属性名属性名值值描述描述onload脚本脚本当文档载入时执行脚本当文档载入时执行脚本onunload脚本脚本当文档卸载时执行脚本当文档卸载时执行脚本11.2 键盘事件键盘事件 属性名属性名值值 描述描述 onkeydown 脚本脚本 当键盘被按下时执行脚本当键盘被按下时执行脚本onkeypress 脚本脚本 当键盘

40、被按下后又松开时当键盘被按下后又松开时执行脚本执行脚本onkeyup 脚本脚本 当键盘被松开时执行脚本当键盘被松开时执行脚本11.3 鼠标事件鼠标事件属性名属性名值值描述描述onclick 脚本脚本 当鼠标被单击时执行脚本当鼠标被单击时执行脚本ondblclick 脚本脚本 当鼠标被双击时执行脚本当鼠标被双击时执行脚本onmousedown 脚本脚本 当鼠标按钮被按下时执行脚本当鼠标按钮被按下时执行脚本onmousemove 脚本脚本 当鼠标指针移动时执行脚本当鼠标指针移动时执行脚本onmouseout 脚本脚本 当鼠标指针移出某元素时执行脚本当鼠标指针移出某元素时执行脚本onmouseove

41、r 脚本脚本 当鼠标指针悬停于某元素之上时执当鼠标指针悬停于某元素之上时执行脚本行脚本onmouseup 脚本脚本 当鼠标按钮被松开时执行脚本当鼠标按钮被松开时执行脚本11.4 表单元素事件表单元素事件属性名属性名值值描述描述onchange 脚本脚本 当元素改变时执行脚本当元素改变时执行脚本onsubmit 脚本脚本 当表单被提交时执行脚本当表单被提交时执行脚本 onreset 脚本脚本 当表单被重置时执行脚本当表单被重置时执行脚本onselect 脚本脚本 当元素被选取时执行脚本当元素被选取时执行脚本onblur 脚本脚本 当元素失去焦点时执行脚本当元素失去焦点时执行脚本onfocus 脚

42、本脚本 当元素获得焦点时执行脚本当元素获得焦点时执行脚本使用事件的例子使用事件的例子 function mouseOver() document.b1.src =eg_mouse.jpg function mouseOut() document.b1.src =eg_mouse2.jpg HTML标记汇总标记汇总: 基本结构基本结构n和和定义一个定义一个HTML文档文档n和和定义文档的头部定义文档的头部n和和定义文档的标题定义文档的标题n和和定义文档的主体定义文档的主体nbgcolor=“#rrggbb” 设置背景颜色设置背景颜色 ntext=“#rrggbb” 设置文本的颜色设置文本的颜色n

43、link=“#rrggbb” 设置超连接文字的颜色设置超连接文字的颜色nvlink=“#rrggbb” 设置鼠标指向超链接时文字的设置鼠标指向超链接时文字的颜色颜色nbackground=“file-name” 设置背景图案设置背景图案 HTML标记汇总标记汇总: 文本设置文本设置n和和文本串的修饰文本串的修饰nsize=n 设置文本字体的大小设置文本字体的大小,n为为1到到7ncolor=“#rrggbb” 设置文本字体的颜色设置文本字体的颜色n设置全体文本字体的默认大小设置全体文本字体的默认大小n和和显示小一号的字体显示小一号的字体n和和显示大一号的字体显示大一号的字体n和和显示粗体文字显

44、示粗体文字n和和显示斜体文字显示斜体文字n和和显示带下划线的文字显示带下划线的文字n和和显示带删除线的文字显示带删除线的文字n和和显示下脚标文字显示下脚标文字n和和显示上脚标文字显示上脚标文字HTML标记汇总标记汇总: 图像图像nHTML标记汇总标记汇总: 排版排版n换行换行n和和定义子标题，定义子标题，n为为1到到6n和和定义段落，前后有空行定义段落，前后有空行n和和定义区域块定义区域块n和和定义行内元素定义行内元素n定定义水平线义水平线ncolor: 线的颜色线的颜色nsize: 线的粗细线的粗细nwidth: 线的长度线的长度HTML标记汇总标记汇总: 列表列表n和和 定义带符号的列表定

45、义带符号的列表nf: disk, circle, squaren和和定义带序号定义带序号的列表的列表nf: A, a, I, i, 1n和和定义列表条目定义列表条目HTML标记汇总标记汇总: 表格表格n和和定义表格定义表格nborder=n 设定表格的边框设定表格的边框,当当n为为0时没有边框时没有边框nwidth=x, height=y 设定表格的宽度和高度设定表格的宽度和高度n和和标记来定义表格的标题标记来定义表格的标题n和和定义表格的一行定义表格的一行n和和定义表格数据行中的一项定义表格数据行中的一项nalign=x 设置水平对齐方式设置水平对齐方式,x:left, center, ri

46、ghtnvalign=y 设置垂直对齐方式设置垂直对齐方式,y: top, middle, bottomnnowrap 超长文本不自动换行超长文本不自动换行nwidth=x 设置单元格宽度设置单元格宽度ncolspan=x 列合并列合并, x:向右合并单元格的数目向右合并单元格的数目nrowspan=y 行合并行合并, y:向下合并单元格的数目向下合并单元格的数目HTML标记汇总标记汇总: 链接链接n建立页面链接建立页面链接n创建页内标签创建页内标签n建立页内链接建立页内链接n建立页内链接建立页内链接n建立建立发送邮件链接发送邮件链接HTML标记汇总标记汇总: 表单表单 其中：其中：form的

47、的method属性的值（传输方式）可以是属性的值（传输方式）可以是“get”或或“post”；input的的type属性的值（输入类型）可以是属性的值（输入类型）可以是text（文本框），（文本框），radio（单选按钮），（单选按钮），checkbox（复选框）。（复选框）。HTML标记汇总标记汇总: 脚本脚本 脚本脚本ntype的值为脚本的语言类型，是必需的属性。如的值为脚本的语言类型，是必需的属性。如 ”text/javascript”, “text/vbscript” 等。等。nsrc的值为外部脚本文件的的值为外部脚本文件的URL，也可以是脚本，也可以是脚本文件名，是可选的属性。文件名

48、，是可选的属性。HTML标记汇总标记汇总: 事件事件n窗口事件窗口事件nonload = “脚本脚本” ：加载时执行脚本：加载时执行脚本nonunload =“脚本脚本” ；卸载时执行脚本；卸载时执行脚本n鼠标事件鼠标事件nclick =“脚本脚本” ：单击时执行脚本：单击时执行脚本ndoubleClick =“脚本脚本” ：双击时执行脚本：双击时执行脚本n表单元素事件表单元素事件nonchange =“脚本脚本” ：数据发生变化时执行脚本：数据发生变化时执行脚本nonsubmit =“脚本脚本” ：表单被提交时执行脚本：表单被提交时执行脚本nonblur =“脚本脚本” ：失去焦点时执行脚本

49、：失去焦点时执行脚本小结小结nHTML是构成网页的最基本的元素。是构成网页的最基本的元素。nHTML文件是普通的文本文件，再加上一些标文件是普通的文本文件，再加上一些标记构成的。记构成的。 nHTML告知告知WWW浏览器有关字形的变化、表浏览器有关字形的变化、表格设置或是一些超文本链接。浏览器会自动解格设置或是一些超文本链接。浏览器会自动解释这些标记的含义，并按照一定的格式在屏幕释这些标记的含义，并按照一定的格式在屏幕上显示这些被标记的文件。上显示这些被标记的文件。nHTML的优点是跨平台性，不管操作系统是什的优点是跨平台性，不管操作系统是什么，浏览器的显示结果相同，呈现出生动、活么，浏览器的显示结果相同，呈现出生动、活泼的泼的WWW世界。世界。谢谢！谢谢！