校团委信息中心美工部html培训

1、校团委信息中心美工部校团委信息中心美工部html培培训训1.手工直接编写手工直接编写记事本等，存成记事本等，存成.htm .html格格式式2.使用可视化使用可视化HTML编编 辑辑 器器Frontpage、Dreamweaver等等3.由由Web 服务器（服务器（ 或称或称HTTP 服服务器）务器） 一一 方实时动态地生成。方实时动态地生成。1.*.htm或或*.html2.无空格无空格3.无特殊符号（例如无特殊符号（例如&符号），只符号），只可以有下划线可以有下划线“_”，只可以为英，只可以为英文、数字文、数字4.区分大小写区分大小写5.首页文件名默认为：首页文件名默认为：inde

2、x.htm 或或 index.html. 元素：是元素：是HTML语言的基本部分。语言的基本部分。元素总是成对出现，每一对元素一元素总是成对出现，每一对元素一般都有一个开始的标记（如般都有一个开始的标记（如），也有一个结束的标记），也有一个结束的标记（如（如）。元素的标记要用）。元素的标记要用一对尖括号括起来，并且结束的标一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。记总是在开始的标记前加一个斜杠。 my first page This is my first homepage! HTML元素可以有自己的相关属元素可以有自己的相关属性，每一个属性还可以由我们网页性，每一个属性还

3、可以由我们网页编制者赋一定的值。元素属性出现编制者赋一定的值。元素属性出现在元素的在元素的内，并且和元素名之内，并且和元素名之间有一个空格分隔；属性值用间有一个空格分隔；属性值用“”“”引起来。引起来。 my first page This is my first homepage! HEAD元素元素1 元素出现在文档的开头部元素出现在文档的开头部分。分。与与之间的内容之间的内容不会在浏览器的文档窗口显示，但不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。是其间的元素有特殊重要的意义。 元素定义元素定义HTML文档的标文档的标题。题。与与之间的内容之间的内容将显示在浏览器窗口的标题

4、栏。将显示在浏览器窗口的标题栏。 HEAD元素元素2 元素元素 元素下面可以插入很多很元素下面可以插入很多很有用的元素属性。下面介绍四种：有用的元素属性。下面介绍四种： 用来标记搜索引擎在搜索你的页用来标记搜索引擎在搜索你的页面时所取出的关键词。面时所取出的关键词。 HEAD元素元素3 元素元素 用来标记文档的作者。用来标记文档的作者。 HEAD元素元素4 元素元素 用来标记你的页面的解码方式。用来标记你的页面的解码方式。 编写一个网页，要求编写一个网页，要求3秒钟后自动跳转到知了网首秒钟后自动跳转到知了网首页（页（）。）。 元素表明是元素表明是HTML文档的文档的主体部分。在主体部分。在与与

5、之之间，通常都会有很多其它元素；这间，通常都会有很多其它元素；这些元素和元素属性构成些元素和元素属性构成HTML文文档的主体部分。档的主体部分。元素中有下列元素属性：元素中有下列元素属性： (1)bgcolor bgcolor属性标志属性标志HTML文档的背文档的背景颜色。如：景颜色。如：bgcolor=#CCFFCC。 例：例：04.htm HTML对颜色的控制也有自己的对颜色的控制也有自己的语法。语法。HTML使用使用16进制的进制的RGB颜色值对颜色进行控制。颜色值对颜色进行控制。 16 进制的数码有进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.颜色颜色

6、颜色名和颜色名和RGB值值黑色黑色Black=”#000000”银色银色Silver=”#c0c0c0”红色红色Red=”#ff0000”蓝色蓝色Blue=”#0000ff”白色白色White=”#ffffff”黄色黄色Yellow=”ffff00”绿色绿色Green=”#00ff00”海蓝色海蓝色Aqua=”#00ffff” 元素中有下列元素属性：元素中有下列元素属性： (2)background background属性标志属性标志HTML文档文档的背景图片。如：的背景图片。如：background=“images/bg.gif。 可以使用的图片格式为可以使用的图片格式为GIF，JPG例：

7、例：05.htm 元素中有下列元素属性：元素中有下列元素属性： (3)bgproperties=fixed bgproperties=fixed使背景图片成使背景图片成水印效果，即图片不随着滚动条水印效果，即图片不随着滚动条的滚动而滚动。的滚动而滚动。 元素中有下列元素属性：元素中有下列元素属性： (4)text text属性标志属性标志HTML文档的正文文文档的正文文字颜色。如：字颜色。如：text=“#FF6666”。Text元素定义的颜色将应用于整元素定义的颜色将应用于整篇文档。篇文档。 例：例：06.htm 元素中有下列元素属性：元素中有下列元素属性： (5)超级链接颜色超级链接颜色

8、link、vlink、alink分别控制普通分别控制普通超级链接、访问过的超级链接、超级链接、访问过的超级链接、当前活动超级链接颜色。当前活动超级链接颜色。 例：例：07.htm 元素中有下列元素属性：元素中有下列元素属性： (6) leftmargin和和topmargin 设置网页主体内容距离网页顶端设置网页主体内容距离网页顶端和左端的距离如：和左端的距离如：leftmargin=20 topmargin=30“ 例：例：08.htm 文字属性标记文字属性标记 1.文字颜色文字颜色 指定颜色指定颜色 . #=RRGGBB 16 进制数码进制数码例：例：09.htm 文字属性标记文字属性标记

9、 2.文字字体文字字体 . #=客户端可获得的字体客户端可获得的字体10.htm 文字属性标记文字属性标记 3.文字大小文字大小 . #=1, 2, 3, 4, 5, 6, 7 or +#, -#例：例：11.htm 文字属性标记文字属性标记 4.文字标题文字标题 . #=1, 2, 3, 4, 5, 6例：例：12.htm 行的控制行的控制 段段(Paragraph) (可以看作是空行可以看作是空行) 空白占位符空白占位符  例：例：13.htm行的控制行的控制 HTML的段落与段落之间有一定的空隔。如的段落与段落之间有一定的空隔。如果不希望出现空隔而只想换行的话，就要用果

10、不希望出现空隔而只想换行的话，就要用到另一个元素，即到另一个元素，即元素。元素。元素可以元素可以使所在的位置出现换行。这种换行和浏览器使所在的位置出现换行。这种换行和浏览器的自动换行的效果类似。的自动换行的效果类似。元素不是成对元素不是成对出现的。出现的。例：例：14.htm 不换行不换行 15.htm 倾斜文本倾斜文本 粗体文本粗体文本 下划线文本下划线文本 删除线文本删除线文本 例：例：16.htm HTML文档可以插入注释。注释文档可以插入注释。注释内容不会在浏览器窗口显示内容不会在浏览器窗口显示 HTML注释的格式为：注释的格式为：例：例：17.htm. (n=1,2,3,4,5,6)

11、 . (#=left, center, right)例：例：18.htm . (#=left, center, right) 居中居中- 元素元素 元素是一个独立的使所元素是一个独立的使所标记的字符居中的元素。它的标记的字符居中的元素。它的作用与使用作用与使用元素里的元素里的align=“center”类似类似 例如：例如：居中段落居中段落标尺线标尺线：设定线宽：设定线宽 ：设定线长：设定线长 ：设定对齐方式：设定对齐方式 #=left, right ：设定线的颜色：设定线的颜色例：例：19.htm 无序列表元素无序列表元素1列表在列表在HTML的文档里有重要的的文档里有重要的地位地位,HTM

12、L规定了多种列表元素。规定了多种列表元素。列表所起的主要作用是使特定的文列表所起的主要作用是使特定的文本有序化。本有序化。无序列表元素无序列表元素2无序列表是由无序列表是由和和元素定义的元素定义的:sports food drink friends 例：例：20.htm 无序列表元素无序列表元素3 无序列表的默认符号是圆点。无序列表的默认符号是圆点。 元素有元素有type属性，通过定属性，通过定义不同的义不同的type属性可以改变列表属性可以改变列表的项目符号。目前，的项目符号。目前，type属性的属性的属性值有：属性值有：disc(圆圆)、circle（圆圈）、（圆圈）、square（方块）

13、（方块） 例：例：20.htm 有序列表元素有序列表元素1有序列表由有序列表由和和定义定义: sports drink friends例：例：20.htm有序列表元素有序列表元素2元素也有自己的元素也有自己的type属性，属性，type属性的属性的属性值有属性值有1、A、a、I、i等。例如，我们以等。例如，我们以A、B、C作为列表的编号作为列表的编号例：例： 20.htm元素还可以定义列表的起始编号，如我元素还可以定义列表的起始编号，如我们希望列表的第一个编号为们希望列表的第一个编号为5，而不是，而不是1，则需要定义则需要定义元素的元素的start属性属性例：例：20.htm 超级链接可以指向

14、超级链接可以指向E-mail地址地址 如：如：指向指向E-mail地址地址的超级链接的超级链接例：例：21.htm 开一个新的开一个新的(浏览器浏览器)窗口窗口 (Target Window) . 例：例：21.htm 去掉超级连接的下划线：去掉超级连接的下划线：style=“text-decoration: none”例：例：21.htm 指向本页面锚点指向本页面锚点aa的超级链接的超级链接例：例：21.htm 指向指向23页页面的锚点面的锚点top的超级链接的超级链接例：例：21.htm 标注出学校首页的标注出学校首页的html静态代码静态代码基本语法基本语法: 引用图片必须用引用图片必须

15、用元素标志。元素标志。元素下的基本元素属性是元素下的基本元素属性是src属性，属性，src的的属性值为所引用的图片的属性值为所引用的图片的URL地址。地址。 src属性是必须的。属性是必须的。Src的的URL可以是绝可以是绝对地址，也可以是相对地址对地址，也可以是相对地址例：例：22.htm 所谓图片的替代文本，指图片不能所谓图片的替代文本，指图片不能显示时在图片所在位置显示的一段显示时在图片所在位置显示的一段文本或当鼠标移到图片上时也会显文本或当鼠标移到图片上时也会显示替代文本。示替代文本。 定义图片替代文本的方法是：定义图片替代文本的方法是： 例：例：23.htm图片的显示大小图片的显示大

16、小我们可以指定一幅图片在浏览器窗口里我们可以指定一幅图片在浏览器窗口里的显示大小。的显示大小。 定义图片的显示大小的方法是：定义图片的显示大小的方法是： width指定图片的宽度，指定图片的宽度，height指定高度。指定高度。它们的属性值可以是象素，也可以是它们的属性值可以是象素，也可以是%。 例：例：24.htm 图片的边框图片的边框 我们可以为一幅图片加一个边我们可以为一幅图片加一个边框以突出显示：框以突出显示： border的属性值为象素数的属性值为象素数例：例：25.htm 图片的对齐方式图片的对齐方式图片可以相对于页面或单元格有一个对齐方式。图片可以相对于页面或单元格有一个对齐方式

17、。定义水平对齐方式的方法是：定义水平对齐方式的方法是： 例：例：26.htm26.htm图片的对齐方式图片的对齐方式定义图片的垂直对齐方式：定义图片的垂直对齐方式：对于图片的对齐方式不仅是以上几种，但是以对于图片的对齐方式不仅是以上几种，但是以上的几种是最常用的。上的几种是最常用的。例：例：26.htm定义图片与左、右的文本之间的间距定义图片与左、右的文本之间的间距 图片在显示时，与左右的文本之间可以图片在显示时，与左右的文本之间可以有一定的间距有一定的间距 Hspace(horizontal)定义水平间距；定义水平间距； Vspace(vertical)定义垂直间距。单位都是定义垂直间距。单

18、位都是象素数象素数.例：例：27.htm一月一月二月二月三月三月120010001500单元格（用单元格（用来表示，来表示，每个单元格可每个单元格可以有背景颜色以有背景颜色和背景图片）和背景图片）表格（用表格（用来表示，来表示，表格可以有背景颜色、背表格可以有背景颜色、背景图片）景图片）表格边框表格边框每一行可以用每一行可以用来表示，来表示，单元格放在行中，单元格放在行中，每行可以有很多每行可以有很多的单元格。的单元格。表头（用表头（用来表来表示，表头是特殊的示，表头是特殊的单元格，其中的文单元格，其中的文字加进去之后默认字加进去之后默认是居中并且加粗）是居中并且加粗） 元素：定义一个表格。每

19、一个表元素：定义一个表格。每一个表格只有一对格只有一对和和，一张页面，一张页面中可以有多个表格。中可以有多个表格。元素：定义表格的行，一个表格可以元素：定义表格的行，一个表格可以有多行，所以有多行，所以对于一个表格来说不是唯对于一个表格来说不是唯一的。一的。元素：定义表格的一个单元格。每行可元素：定义表格的一个单元格。每行可以有不同数量的单元格，在以有不同数量的单元格，在和和之间之间是单元格的具体内容。是单元格的具体内容。需要注意的是：上述的三个元素必须、而需要注意的是：上述的三个元素必须、而且只能够配对使用。缺少任何一个元素，且只能够配对使用。缺少任何一个元素，都无法定义出一个表格。都无法定

20、义出一个表格。表格的基本结构表格的基本结构定义表格定义表格定义表头定义表头定义表行定义表行定义单元格定义单元格练习练习尝试写出这个表格的代码尝试写出这个表格的代码例例:1.htmmondaytuesdaywednesdaythursdayfridaysaturdaysunday1ClassClassClassClass.2ClassClassClassClass.3ClassClassClassClass.4ClassClassClassClass.5ClassClassClassClass.6ClassClassClassClass.7ClassClassClassClass.8ClassC

21、lassclassClass.表格的属性表格的属性 1 width属性：指定表格或某一属性：指定表格或某一个表格单元格的宽度。单位可个表格单元格的宽度。单位可以是以是%或者象素。或者象素。 height属性：指定表格或某一属性：指定表格或某一个表格单元格的高度。单位可个表格单元格的高度。单位可以是以是%或者象素。或者象素。 border属性：表格边线粗细属性：表格边线粗细例例02.html 表格的属性表格的属性 1 4、bgcolor属性：指定表格或某属性：指定表格或某一个单元格的背景颜色。一个单元格的背景颜色。 5、background属性：指定表格属性：指定表格或某一个单元格的背景图片。或

22、某一个单元格的背景图片。其属性值为一个其属性值为一个URL地址。地址。例：例：03.htm 表格的属性表格的属性 2 6、bordercolor属性：指定表格属性：指定表格或某一个单元格的边框颜色。或某一个单元格的边框颜色。例：例：04.htm 7、Bordercolorlight属性：亮边属性：亮边框的颜色框的颜色 8、Bordercolordark属性：暗边属性：暗边框的颜色框的颜色例：例：05.htm表格的属性表格的属性 29、align属性：指定表格或某属性：指定表格或某一个单元格里的内容（文本、一个单元格里的内容（文本、图片等）的对齐方式。图片等）的对齐方式。例：例：06.htm 表

23、格的属性表格的属性 2 10、cellspacing属性：单元格间属性：单元格间距。距。例：例：06.htm 11、cellpadding属性：单元格属性：单元格边距。边距。例：例：06.htm单元格属性单元格属性1、valign属性：指定某一个单元格里的内容属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包括：齐方式的属性值包括：top：顶端对齐；：顶端对齐；middle：居中对齐；：居中对齐；bottom：底端对齐：底端对齐;Baseline：相对于基线对齐：相对于基线对齐;例：例：07.htm 单元格属性单元格属性2

24、、Colspan：属性值表示当前单：属性值表示当前单元格跨越几列元格跨越几列例：例：8.htm3、Rowspan：属性值表示当前单：属性值表示当前单元格跨越几行元格跨越几行例：例：8.htm 表格的嵌套表格的嵌套 在在 之间插入表格，实之间插入表格，实现表格嵌套现表格嵌套例：例：9.htm 表格的作用一般只是控制文本表格的作用一般只是控制文本和图像的显示，而不显示表格和图像的显示，而不显示表格的边框的边框 表格的综合使用表格的综合使用 利用表格做一张你的课程表利用表格做一张你的课程表 做一张最近来访的表格做一张最近来访的表格 HTML表单是表单是HTML页面与浏览页面与浏览器端实现交互的重要手

25、段。利用表器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。单可以收集客户端提交的有关信息。 在在HTML里，我们可以定义表单，里，我们可以定义表单，并且使表单与并且使表单与CGI或或ASP等服务器等服务器端的表单处理程序配合。我们在网端的表单处理程序配合。我们在网页设计课程中不会涉及程序编制。页设计课程中不会涉及程序编制。 表单是网页上的一个特定区域。这表单是网页上的一个特定区域。这个区域是由一对个区域是由一对元素定义元素定义的。的。 元素元素 action属性：用来定义表单处理属性：用来定义表单处理程序（一个程序（一个ASP、CGI等程序）等程序）的位置的位置(相对地址或绝对地

26、址相对地址或绝对地址)。 Method定义表单结果从浏览器定义表单结果从浏览器传送到服务器的方法，一般有传送到服务器的方法，一般有两种方法：两种方法：get、post。表单的基本语法表单的基本语法:. * =GET有数据量限制，有数据量限制，POST无以上限制无以上限制,以文件形式传以文件形式传输输例：输入以下代码，定义一个基本菜单，并以例：输入以下代码，定义一个基本菜单，并以E-mail方式实现提交方式实现提交Input元素元素 input元素是与输入相关的元素，元素是与输入相关的元素，它是一个空元素，因此在其末尾它是一个空元素，因此在其末尾必须添加斜杠必须添加斜杠“/”。Input元素有元

27、素有一个重要的属性一个重要的属性type,该属性决定该属性决定了了input的元素类型的元素类型（1）文本框，）文本框，type=“text”,用于控制用户仅输入一行文用于控制用户仅输入一行文本本 size：控制输入文本框所显示的长度，单位为字符：控制输入文本框所显示的长度，单位为字符 maxlength：控制允许最大输入的字符长度，单：控制允许最大输入的字符长度，单位为字符位为字符 name：通过表单传递出去的变量的名称：通过表单传递出去的变量的名称 value：即变量的值，是在表单提交的瞬间，在：即变量的值，是在表单提交的瞬间，在该输入框内的字符串（如果在该输入框内的字符串（如果在inpu

28、t元素中定义该元素中定义该属性，则表示设定了输入框的初始值）属性，则表示设定了输入框的初始值） 11.htm（2）密码框，）密码框，type=“password”，用户输入时所显示，用户输入时所显示的密码是屏蔽号的密码是屏蔽号 11.htm（3）隐藏条目，）隐藏条目，type=“hidden”，用于输入框不见，用于输入框不见，但仍然有但仍然有name和和value属性，一般用于不需要用户属性，一般用于不需要用户填写或选择，变量值已知，又需要将变量发送出填写或选择，变量值已知，又需要将变量发送出去的情况去的情况 11.htm（4）复选框，）复选框，type=“checkbox”，一般由若干个复选

29、，一般由若干个复选项组成，改组项组成，改组input元素拥有相同的元素拥有相同的name属性值，而属性值，而value值不同。当表单提交后，变量将成为一个数组，值不同。当表单提交后，变量将成为一个数组，且数组中包含选中复选框的且数组中包含选中复选框的value值。值。Checked=“checked”表示默认将该复选框选中表示默认将该复选框选中 11.htm（5）单选按钮，）单选按钮，type=“radio”，与复选框类似只能，与复选框类似只能选一个选一个 11.htm（6）提交按钮，）提交按钮，type=“submit” 按下该按钮时，表按下该按钮时，表单向单向form中中action属性所

30、定义的地址发送表单变量属性所定义的地址发送表单变量 11.htm（7）重置按钮，）重置按钮，type=“reset”按下该按钮时，表单按下该按钮时，表单中所有的内容将被清空中所有的内容将被清空 11.htm（8）自定义按钮，）自定义按钮，type=“button”该按钮没有预定义该按钮没有预定义的功能，但可以用的功能，但可以用onclick事件调用自己编写的事件调用自己编写的js函函数，数，name和和value属性可参照提交按钮属性可参照提交按钮 （9）图像按钮，）图像按钮，type=“image”，该按钮与自定义按，该按钮与自定义按钮基本相同，但用图片方式来显示。钮基本相同，但用图片方式来

31、显示。eg.（10）文件域，）文件域，type=“file”。使用该属性必须将。使用该属性必须将form的的enctype属性设置为属性设置为multipart/form-data. 该按钮帮该按钮帮助用户选择一个存储在本地计算机上的文件，在提交助用户选择一个存储在本地计算机上的文件，在提交表单时会将所选中文件发送给服务器，其属性与文本表单时会将所选中文件发送给服务器，其属性与文本框基本一致框基本一致 11.htmlselect元素元素 用于用于 创建一个下拉菜单或选项表。它是一个创建一个下拉菜单或选项表。它是一个非空元素，内容必须包含在非空元素，内容必须包含在和和之间。具有一个之间。具有一个

32、name属性，其属属性，其属性值定义了要提交变量的名称性值定义了要提交变量的名称.（1）无）无size属性时；下拉菜单属性时；下拉菜单（2）size=“1”且没有且没有multiple属性（表示允许属性（表示允许多选）；下拉菜单多选）；下拉菜单（3）size“1”或有或有multiple属性；滚动菜单属性；滚动菜单 12.htmlTextarea元素元素创建多行的，可滚动的文本输入框。非空元创建多行的，可滚动的文本输入框。非空元素，内容必须包含在素，内容必须包含在和和之间之间Cols、rows属性：制定文本框的列数、行数，属性：制定文本框的列数、行数，单位为字符单位为字符Name属性：定义变量

33、的名称属性：定义变量的名称Wrap属性属性:确定所提交的信息是否包含换行，按确定所提交的信息是否包含换行，按其默认值（文本不换行）提交其默认值（文本不换行）提交 综合练习（综合练习（*）13.html1.插入音乐插入音乐 embed src=“音乐地址音乐地址” 插入音乐插入音乐 autostart=true（false） 是否在音乐传送是否在音乐传送完自动播放完自动播放 loop=true，false，3音乐重复音乐重复次数次数 Width=宽度；宽度；height=高度高度 设定播放器面板设定播放器面板大小，均为大小，均为0则可把播放器隐藏则可把播放器隐藏 volume=0100 设定音量大小设定音量大小 Hidden=true 隐藏控制面板隐藏控制面板 Starttime=“分：秒分：秒” 设定