2022年html基础教程 .pdf

《2022年html基础教程 .pdf》由会员分享，可在线阅读，更多相关《2022年html基础教程 .pdf（26页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、1 第一章 HTML 概述与基本结构目前大部分的网页都是用HTML配合其它语言写成的。本章使用html 语言来制作网页，而现在的很多网页制作工具软件，比如FrontPage 、DreamWave,.net 等，可自动生成一些固定格式的网页元素，在学习本章的过程中，不要一味去死记这些标识内容，我们学习这html 语言的主要目的不是要大家完全使用html 语言来制作一个完整的网页，而是掌握其基本语法格式后应用到动态程序中去。在学习过程中，我们要结合动态程序的方法来应用这些标识。如果用 html 完全编写网页，那是过时了；如果不懂html 语言那是学网页的无知，更谈不上灵活运用动态程序,php等。一

2、、 HTML 的概述HTML （HyperTextMarkupLanguage的缩写），即超文本链接标记语言。它是在互联网发布超文本文件( 通常所说的网页 ) 的通用语言。所谓超文本，就是它可以加入图片、声音、动画、影视等内容，每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML标记，这些标记并不是一种程序语言，它只是一种排版网页中资料显示位置的标记语言。每个标记的符号都是一条命令、它告诉浏览器如何显示文本。这些标记均由 符号以及一个字符串组成。而浏览器的功能是对这些标记进行解释，显示出文字、 图像、动画、播放声音。 这些标记符号用“ ”来表示。二、 HTML 的基本结构：一个

3、 HTML文档是由一系列的元素和标记组成。元素名不区分大小写，HTML用标记来规定元素的属性和它在文件中的位置， HTML超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。下面是一个最基本的html 文档的代码 :1 1.html - 开始标记- 头部标记一个简单的HTML示例 - - 文件主体| 欢迎光临我的主页 | 这是我第一次做主页 | | | -结尾标记 在文档的最外层，文档中的所有文本和html 标记都包含在其中，它表示该文档是以超文本标识语言（ HTML ）编写的。是 HTML文档的头部标记, 在浏览器窗口中，头部信息是

4、不被显示在正文中的, 在此标记中可以插入其它标记，用以说明文件的标题和整个文件的一些公共属性。该标记可以省略。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 26 页 - - - - - - - - - 2 是嵌套在 头部标记中的，标记之间的文本是文档标题，它被显示在浏览器窗口的标题栏。该标记可以省略。标记一般不能省略，标记之间的文本是正文，是在浏览器要显示的页面内容。上面的这几对标记在文档中都是唯一的，HEAD 标记和 BODY 标记是嵌套在HTML标记中的。三、 HT

5、ML 的标记与属性 : 对于刚刚接触超文本的读者，遇到的最大的障碍就是一些用“”括起来的句子，我们称它为标记，是用来分割和标记文本的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。属性是标志里的参数的选项。HTML的标记分单标记和成对标记两种。成对标记是由首标记和尾标记 组成的， 成对标记的作用域只作用于这对标记中的文档。单独标记的格式，单独标记在相应的位置插入元素就可以了，大多数标记都有自己的一些属性, 属性要写在始标记内，属性用于进一步改变显示的效果, 各属性之间无先后次序，属性是可选的，属性也可以省略而采用默认值; 其格式如下：内容 属性值可以不用加双引号，但是为了适应XHTML 规

6、则，提倡全部对属性值加双引号。如：字体设置 第二章 HTML 主体标记及属性、颜色的设定为了使网页绚丽多姿，吸引更多的浏览者阅读，可以给网页添加更多的标记及属性，这是为了对网页中的元素进行修饰、布局。下面就来逐一介绍这些标记。一、html 的主体标记 在和 中放置的是页面中所有的内容，如图片、文字、表格、表单、超链接等设置。标记有自己的属性，设置标记内的属性，可控制整个页面的显示方式。标记的属性属性描述link设定页面默认的链接颜色alink设定鼠标正在单击时的链接颜色vlink设定访问后链接文字的颜色background设定页面背景图像bgcolor设定页面背景颜色leftmargin设定页

7、面的左边距topmargin设定页面的上边距bgproperties设定页面背景图像为固定，不随页面的滚动而滚动text设定页面文字的颜色格式： 实例： 2-1.html bady的属性实例 设定不同的链接颜色 测试 body标记 各种链接颜色 实例说明：的属性设定了页面的背景颜色，文字的颜色，链接的颜色为#3300ff ，单击的链接颜色为#ff00ff，单击过后的颜色为 #9900ff 。对于上面的属性在后面的章节中还会介绍，在这里就不逐一引用了，我们的学习目的主要是掌握标记及属性的使用方法。二、颜色的设定颜色值是一个关键字或一个RGB格式的数字。在网页中用得很多，在此就先介绍一下。颜色是由

8、 redgreenblue三原色组合而成的，在HTML中对颜色的定义是用十六进位的，对于三原色HTML 分别给予两个十六进位去定义。例如：白色的组成是red=ff,green=ff,blue=ff,RGB值即为 ffffff 红色的组成是red=ff,green=00,blue=00,RGB值即为 ff0000 黑色的组成是red=00,green=00,blue=00,RGB值即为 000000 应用时常在每个RGB值之前加上“ #“符号，如：bgcolor=#336699用英文名字表示颜色时直接写名字。如bgcolor=green。第三章文字版面的编辑3-1 换行标记 换行标记是个单标记，

9、也叫空标记，不包含任和内容，在html 文件中的任何位置只要使用了 标记，该标记之后的内容将显示在下一行。请看下面的例子：3-1 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 26 页 - - - - - - - - - 4 无换行标记：白日依山尽，黄河入海流。 有换行标记： 白日依山尽， 黄河入海流。 3-2 换段落标记 及属性：由标记所标识的文字，表明是同一个段落的文字。两个段落间的间距等于连续加了两个换行符，也就是要隔一行空白行。格式： 其中 ,ALIGN 是标记

10、的属性 , 属性有三个参数left,center,right.这三个参数设置段落文字的左，中，右位置的对齐方式。实例 :3-2 这是 第一段。 第二段。 第三段。 3-3 原样显示文字标记 要保留原始文字排版的格式, 就可以通过 标记来实现，方法是把制作好的文字排版内容前后分别加上始标记和尾标记 。实例 :3-3 白日依山尽，黄河入海流。 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 26 页 - - - - - - - - - 5 3-4 居中对齐标记 在页面中使用

11、标记进行居中显示,是成对标记 , 在需要居中的内容部分开头处加,结尾处加 。实例： 3-4 居中对齐标记 送孟浩然之广陵 故人西辞黄鹤楼，烟花三月下扬州。孤帆远影碧山尽，惟见长江天际流。 3-5 水平分隔线标记 标记是单独使用的标记，是水平线标记。通过设置 标记的属性值，可以控制水平分隔线的样式。 标记的属性属性参数功能单位默认值size 设置水平分隔线的粗细pixel(像素）2 width 设置水平分隔线的宽度pixel(像素）、 % 100% align Left center right 设置水平分隔线的对齐方式center color 设置水平分隔线的颜色black noshade 取

12、消水平分隔线的3d 阴影实例： 3-5 测试水平分隔线标记 春晓 春眠不觉晓， 处处闻啼鸟。 夜来风雨声， 花落知多少？ 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 26 页 - - - - - - - - - 6 3-6 特殊字符在 HTML文档中，有些字符没办法直接显示出来，例如?. 使用特殊字符可以将键盘上没有的字符表达出来，而有些 HTML文档的特殊字符在键盘上虽然可以得到，但浏览器在解析HTML 文当时会报错，例如 等，为防止代码混淆，必须用一些代码来表示它

13、们。HTML几种常见特殊字符及其代码表特殊或专用字符字符代码特殊或专用字符字符代码 > × & & ?® " 空格  实例： 3-6 特殊字符 < 这是我的 e家 > Copyright ? 2008 中国 e家 3-7 注释标记在 HTML文档中可以加入相关的注释标记，便于查找和记忆有关的文件内容和标识，这些注释内容并不会在浏览器中显示出来。注释标记的格式有如下： 实例 :3-7 < 赋得古原草送别> 离离原上草，一岁一枯荣。野火烧不尽，名师资料总结 - - -精品资料欢迎下载 - - - - - - - - -

14、- - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 26 页 - - - - - - - - - 7 春风吹又生。 3-8 字体属性3-10-1 标题文字标记 标记用于设置网页中的标题文字，被设置的文字将以黑体或粗体的方式显示在网页中。标题标记的格式：hn align=参数标题内容 说明： 标记是成对出现的，标记共分为六级，在.之间的文字就是第一级标题，是最大最粗的标题； .之间的文字是最后一级，是最小最细的标题文字。align属性用于设置标题的对齐方式，其参数为 left（左）， enter（中 ) ， right (右）。 标记本身具有换行的作用，

15、标题总是从新的一行开始。实例 3-10-1html 设定各级标题 一级标题。 二级标题。 三级标题。 3-10-2 文字格式控制标记 标记用于控制文字的字体，大小和颜色。控制方式是利用属性设置得以实现的。FONT标记的属性属性使用功能默认值face 设置文字使用的字体宋体size 设置文字的大小3 color 设置文字的颜色黑色格式： font face=值 1 size= 值 2 color=值 3文字 说明：如果用户的系统中没有face 属性所指的字体，则将使用默认字体。size属性的取值为17。也可以用 +或- 来设定字号的相对值。color属性的值为：rgb 颜色 #nnnnnn 或颜

16、色的名称。实例： 3-10-2 盼望着，盼望着，东风来了，春天脚步近了。 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 26 页 - - - - - - - - - 8 3-10-3 特定文字样式标记在有关文字的显示中，常常会使用一些特殊的字形或字体来强调、突出、区别以达到提示的效果。(1) 粗体标记 ：放在 与 标记之间的文字将以粗体方式显示。(2) 斜体标记 ：放在 与 标记之间的文字将以斜体方式显示。(3) 下划线标记 ：放在 与 标记之间的文字将以下划线方式显示

17、。实例 3-10-3 这些文字是粗体的 这些文字是斜体的 这些文字带有下划线 第四章建立超链接HTML文件中最重要的应用之一就是超链接，超级链接除了可链接文本外，也可链接各种媒体，如声音、图象、动画。建立超链接的标记为: ,格式为： 显示内容 上述语法格式包含标记的以下基本属性：HREF ：该属性是必选项，用于指定目标端点的URL地址，可以包含一个或多个参数。具体地，如果是与站点以外页面链接的情况，就为URL ；如果是与站点内页面链接，则为文件名。TARGET ：该属性是可选项，用于指定一个窗口或框架的名称，目标文档将在该窗口或框架中打开。如果省略该属性，则目标文档将取代包含该超链接的文档。T

18、ARGET 属性的取值既可以是窗口或框架的名称，也可以用“_blank ”指定将链接的目标文件加载到未命名的新浏览器窗口中；用“_parent ”指定将链接的目标文件加载到包含链接的父框架页或窗口中，如果包含链接的框架不是嵌套的，则链接的目标文件加载到整个浏览器窗口中；用“_self ”指定将链接的目标文件加载到链接所在的同一框架或窗口中，这是默认值；用“_top”指定将链接的目标文件加载到整个浏览器窗口中，并由此删除所有框架。TITLE：该属性也是可选项，用于指定指向超链接时所显示的标题文字。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - -

19、 - - - 名师精心整理 - - - - - - - 第 8 页，共 26 页 - - - - - - - - - 9 4-1 链接路径路径是指从站点根文件夹或当前文件夹到目标文件所经过的路线，可以使用路径来指定超链接中目标端点的位置。路径有以下几种类型：绝对路径： 也称为绝对URL ，它给出目标文件的完整URL地址， 包括传输协议在内。如果要链接的文件位于外部服务器上，则必须使用绝对路径。相对路径： 也称为相对URL ，是指以当前文档所在位置为起点到目标文档所经过的路径。若要将当前文档与处在同一文件夹中的另一个文档链接，或者将同一站点中不同文件夹下的文档相互链接，都可以使用相对路径，此时可

20、以省去当前文档与目标文档完整URL中的相同部分，只留下不同部分。根相对路径：是指从站点根目录到被链接文件的路径。使用这种路径是指定站点内文档链接的最好方式。4-2 超链接的应用1. 超链接的形式按照目标端点的不同，可以将超链接分为以下几种常见形式。文件超链接：这种链接的目标端点是一个文件，当然包括各种文件，如页面文件，它可以位于当前网页所在的服务器上，此时可称为“站点内页面的链接”，也可以位于其他服务器，此时可称为“与站点外页面的链接”。书签超链接：这种链接的目标端点是网页中的一个位置，通过这种链接可以从当前网页跳转到本页面或其他页面中的指定位置。E-mail链接：通过这种链接可以启动电子邮件

21、客户端程序(如 Outlook 或 FoxMail 等) ，并允许访问者向指定的地址发送邮件。图像超链接：这种链接是在图像上建立若干个区域称为“链接区”，通过它可以跳转到其他目标端点去。2常见链接的创建(1) 创建文件链接在 HTML语言中，可以使用标记来创建超链接，基本语法格式如下：文本 (2) 创建书签链接创建书签链接时，要在页面的某处设置一个位置标记( 即所谓书签 ) ，并给该位置指定一个名称，以便在同一页面或其他页面中引用。通过创建书签链接，可以使超链接指向当前页面或其他页面中的指定位置。若要创建书签链接，首先在页面中为需要跳转的位置命名，即在该位置上放置一个A 标记并通过NAME 属

22、性为该位置指定一个名称，一般不要在 和标记之间放置任何文字。例如，可以使用A 标记在 test.htm页面顶部创建一个书签： 创建书签后， 可以使用A标记来创建指向该书签的超链接。例如，要在同一个页面中跳转到名为“top ”的书签处，可以使用以下HTML代码：返回顶部 若要在其他页面中跳转到该书签，则使用以下HTML代码：跳转到 test.htm页的顶部 (3) 创建邮件链接名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 9 页，共 26 页 - - - - - - - - - 10

23、 使用 A标记创建邮件链接，该标记的 HREF属性应由三个部分组成：第一部分是电子邮件协议名称mailto ，第二部分是电子邮件地址，第三部分是可选的邮件主题，其形式为“subject= 主题”。第一部分与第二部分之间用冒号(:) 分隔，第二部分与第三部分之间用问号(?) 分隔。例如：给我写信 当访问者在浏览器窗口中单击邮件链接时，将会自动启动电子邮件客户端程序( 例如 Outlook Express或 FoxMail等) ，并将指定的主题填入“主题”栏中。(4) 创建图像超链接图像的超链接与文本超链接差不多，就是将,标记放在图片两端即可。例如语句： 当单击 dysb.jpg图片时将转向Def

24、ault.htm网页。3示例超链接主要形式的示例( 注：下面的“ , ”代表热点，即一般用鼠标指向时，鼠标指针变手形的区域) 。(1) 创建指向本地页面的链接, ( 链接到本地磁盘上同一目录下的页面) , (链接到本地磁盘上不同目录下的页面) (2) 创建指向其他服务器的页面链接,( 链接到 Internet上其他服务器上的页面) (3) 创建一个指向页面特定部分的链接, (链接到本页面内的某指定位置) ,(链接到其他服务器上页面的某指定位置) (4) 创建一个指向电子邮件的链接,第五章建立列表在 html 也面中，合理的使用列表标记可以起到提纲和格式排序文件的作用。列表分为两类，一是无序列表

25、，一是有序列表，无序列表就是项目各条列间并无顺序关系，纯粹只是利用条列来呈现资料而已，此种无序标记，在各条列前面均有一符号以示区隔。而有序条列就是指各条列之间是有顺序的，比如从 1、2、3, 一直延伸下去。5-1 无序列表 无序列表使用的一对标记是，无序列表指没有进行编号的列表, 每一个列表项前使用 。 的属性type 有三个选项 , 这三个选项都必须小写: disc实心园名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 10 页，共 26 页 - - - - - - - - - 11

26、 circle空心园square 小方块 如果不使用其项目 的属性值 , 即默认情况下的 会加 实心园 。格式 : 第一项第二项第三项 第四项 示例 5-1 无序列表 默认的无序列表加 实心园 无序列表 square 加方块无序列表 circle加空心园 5-2 有序列表 有序列表和无序列表的使用格式基本相同，它使用标记，每一个列表项前使用 。 列表的结果是带有前后顺序之分的编号。如果插入和删除一个列表项，编号会自动调整。顺序编号的设置是由 的两个属性type 和 start来完成的。 start=编号开始的数字，如start=2则编号从 2 开始，如果从1 开始可以省略，或是在 标记中设定v

27、alue n 改变列表行项目的特定编号，例如。type= 用于编号的数字, 字母等的类型，如type=a ，则编号用英文字母。为了使用这些属性，把它们放在 或 的的初始标记中。有序列表type 的属性：type=1表示列表项目用数字标号（1,2,3.）type=A表示列表项目用大写字母标号（A,B,C. ）type=a表示列表项目用小写字母标号（a,b,c.）type=I表示列表项目用大写罗马数字标号（,.）type=i表示列表项目用小写罗马数字标号（i,ii,iii. ）格式 1 第 1 项 第 2 项名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - -

28、- - - - - - 名师精心整理 - - - - - - - 第 11 页，共 26 页 - - - - - - - - - 12 第 1 项 第 2 项 实例： 5-2.html 默认的有序列表默认的有序列表 第 1项第 2项 第4项 第六章图像的处理浏览器可以显示的图像格式有jpeg ， bmp ，gif ，png。其中 bmp文件存储容量大，不提倡用，jpeg 图像支持数百万种颜色， 即使在传输过程中丢失数据，也不会在质量上有明显的不同，文件容量比gif大，gif图像仅包括265 色彩，虽然质量上没有jpeg 图像高，但文件容量小，下载速度最快、支持动画效果及背景色透明等特点。PNG

29、图像是网络图像中的通用格式，也是Fireworks软件的基本格式。它用一种无损压缩的方法，最多可支持32 位颜色，但它不支持动画，如果没有相应的插件，有的浏览器可能不支持这种格式。因此使用图像美画页面可视情况而决定使用那种格式。6-1 网页中插入图片标记 网页中插入图片用单标记，如果要对插入的图片进行修饰时，还要配合其它属性来完成。 的格式及一般属性设定： 图片标记 的属性：Src：图像的 url 的路径Alt：提示文字Width： 宽度通常只设为图片的真实大小以免失真,改变图片大小最好用图像工具.Height： 高度通常只设为图片的真实大小以免失真,改变图片大小最好用图像工具.Align ；

30、图像和文字之间的排列属性Border:边框名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 12 页，共 26 页 - - - - - - - - - 13 6-2 图像的超链接6-3-1 图像的超链接图像的链接和文字的链接方法是一样的，都是用标记来完成，只要将标记放在 和 只见就可以了。用图像链接的图片的上有蓝色的边框，这个边框颜色也可以在标记中设定。实例：6-3-1 6-3 用 标记插入 avi 文件格式： 标记插入avi 文件的属性属性：描述Dynsrc：指定 avi 文件所在路

31、径Loop：设定 avi 文件循环次数Loopdelay：设定 avi 文件循环延迟Start：设定文件播放方式fileopen/mouseover( 网页打开时即播放/当鼠标滑到avi 文件时播放）实例： 6-.html 第七章TABLE 表格表格在网站应用中非常广泛, 可以方便灵活的排版, 很多动态大型网站也都是借助表格排版, 表格可以把相互关联的信息元素集中定位, 使浏览页面的人一目了然. 所以说要制作好网页, 就要学好表格7-1 定义表格的基本语法在 html 文档中，表格是通过,标记来完成的，如下表所示：表格标记名师资料总结 - - -精品资料欢迎下载 - - - - - - - -

32、 - - - - - - - - - - 名师精心整理 - - - - - - - 第 13 页，共 26 页 - - - - - - - - - 14 标 签描述. 用于定义一个表格开始和结束.定义表头单元格。表格中的文字将以粗体显示，在表格中也可以不用此标记，标记必须放在 标记内.定义一行标记，一组行标记内可以建立多组由或标记所定义的单元格.定义单元格标记， 一组 标记将将建立一个单元格，标记必须放在 标记内在一个最基本的表格中，必须包含一组 标记，一组标记 和一组 标记或 。7-2 表格属性（1) 标记的属性表格标记 有很多属性，最常用的属性有：width：表格的宽度height：表格的

33、高度align：表格在页面的水平摆放位置background：表格的背景图片bgcolor：表格的背景颜色border：表格边框的宽度（以像素为单位）bordercolor：表格边框颜色bordercolorlight：表格边框明亮部分的颜色bordercolordark：表格边框昏暗部分的颜色cellspacing：单元格之间的间距cellpadding：单元格内容与单元格边界之间的空白距离的大小（2) 标记的属性表格是按行和列（单元格）组成的，一个表格有几行组成就要有几个行标记 ，行标记用它的属性值来修饰，属性都是可选的。 标记的属性如下：align：行内容的水平对齐valign：行内容的

34、垂直对齐bgcolor：行的背景颜色bordercolo：行的边框颜色bordercolorlight：行的亮边框颜色bordercolordark：行的暗边框颜色 的参数设定（常用）：实例： 7-2-1.html 表格的控制 姓 名 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 14 页，共 26 页 - - - - - - - - - 15 性 别 年 龄 专 业 咚 咚 男 18 学 生 楠 楠 女 17 学 生 （3) 标记的属性和 都是插入单元格的标记，这两个标记必须嵌套

35、在 标记内。是成对出现的。用于表头标记，表头标记一般位于首行或首列，标记之间的内容就是位于该单元格内的标题内容，其中的文字以粗体居中显示。数据标记 就是该单元格中的具体数据内容, 和标记的属性都是一样的，属性设定如下：width/height：单元格的宽和高，接受绝对值（如80）及相对值（如80%） 。colspan：单元格向右打通的栏数rowspan：单元格向下打通的列数align：单元格内字画等的摆放贴，位置（水平），可选值为：left, center, right 。valign：单元格内字画等的摆放贴位置（垂直） ，可选值为：top, middle, bottom 。bgcolor：单

36、元格的底色bordercolor：单元格边框颜色bordercolorlight：单元格边框向光部分的颜色bordercolordark：单元格边框背光部分的颜色background：单元格背景图片（4) 设定跨多行多列单元格要创建跨多行、 多列的单元格， 只需在 或 中加入 ROWSPAN或 COLSPAN 属性的属性值， 默认值为1。表明了表格中要跨越的行或列的个数。跨多列的语法： colspan表示跨越的列数，例如colspan=2表示这一格的宽度为两个列的宽度。跨多行的语法： rowspan 所要表示的意义是指跨越的行数，例如rowspan=2 就表示这一格跨越表格两个行的高度。名师资

37、料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 15 页，共 26 页 - - - - - - - - - 16 7-3 表格的标题标记 表格标题的位置，可由ALIGN属性和 VALIGN属性来设置，ALIGN属性设置标题位于文档的左，中，右。 VALIGN属性设置标题位于表格的上方和表格的下方。下面为表格标题位置的设置格式。语法格式： 表格标题 应放在 标记内，在表格行标记 标记之前。 标记的默认属性是标题位于表格的上方中间位置。实例：7-7.html 表格的标题标记 学生信息表 学生基

38、本信息 成 绩 姓 名 专 业 课 程 分 数 蓉蓉 计算机 程序设计 88 喃 喃 89 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 16 页，共 26 页 - - - - - - - - - 17 7-4 表格的嵌套在 html 页面中，使用表格排版是通过嵌套来完成的，即一个表格内部可以嵌套另一个表格，用表格来排版页面的思路是：由总表格规划整体的结构，由嵌套的表格负责各个子栏目的排版，并插入到表格的相应位置，这样就可以使页面的各个部分有条不紊，互不冲突，看上去清晰整洁。在实际

39、做网页时一般不显示边框, 边框的显示可根据自己的爱好来设定。在实例中为了让大家能够看清楚，都设置了有边框。实例 7-8.html 表格嵌套 网页标志 广告条 标题栏 标题栏 标题栏 标题栏 标题栏 标题栏 标题栏 标题栏 标题栏 内容六 内容一 内容二 内容三 内容四 内容五 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 17 页，共 26 页 - - - - - - - - - 18 第八章网页的动态、多媒体效果在网页的设计过程中，动态效果的插入，会使网页更加生动灵活、丰富多彩。

40、8-1 滚动字幕 标记可以实现元素在网页中移动的效果，以达到动感十足的视觉效果。标记是一个成对的标记。应用格式为: .标记有很多属性，用来定义元素的移动方式: align：指定对齐方式top,middle,bottomscroll：单向运动slide：如幻灯片 ,一格格的，效果是文字一接触左边就停止。alternate：左右往返运动bgcolor：设定文字卷动范围的背景颜色loop：设定文字卷动次数，其值可以是正整数或infinite 表示无限次，默认为无限循环height：设定字幕高度width：设定字幕宽度scrollamount：指定每次移动的速度,数值越大速度越快scrolldelay

41、：文字每一次滚动的停顿时间，单位是毫秒。时间越短滚动越快hspace：指定字幕左右空白区域的大小vspace：指定字幕上下空白区域的大小direction：设定文字的卷动方向,left 表示向左 ,right 表示向右 ,up 表示往上滚动behavior：指定移动方式，scroll 表示滚动播出，slibe 表示滚动到一方后停止，alternate 表示滚动到一方后向相反方向滚动。8-1 实例 h8-1.html 滚动字幕 啦啦啦 我会跑了 啦啦啦 我会往上跑了 啦啦啦 我会往上跑了 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - -

42、 - 名师精心整理 - - - - - - - 第 18 页，共 26 页 - - - - - - - - - 19 8-2 插入多媒体文件在网页中可以用 标记将多媒体文件插入，比如可以插入音乐和视频等。用浏览器可以播放的音乐格式有：MIDI 音乐、 WAV 音乐、 mp3 、AIFF、AU格式等；视频有avi ，swf 等。另外在利用网络下载的各种音乐格式中，MP3是压缩率最高，音质最好的文件格式。但要说明一点，虽然我们用代码标记插入了多媒体文件，但IE 浏览器通常能自动播放某些格式的声音与影像，但具体能播放什么样格式的文件。取决于所用计算机的类型以及浏览器的配置。浏览器仅仅能播放几种文件格

43、式，通常是调用称为插件的内置程序来播放的。是插件扩展了浏览器的能力。有时，不得不分别下载每个浏览器的多媒体插件程序，比如使用下载Adobe Flash Player播放 swf 动画。 标记的使用格式： 常用属性如下：SRC=FILENAME：设定音乐文件的路径AUTOSTART=TRUE/FALSE：是否要音乐文件传送完就自动播放，TRUE 是要， FALSE 是不要，默认为FALSELOOP=TRUE/FALSE ：设定播放重复次数，LOOP=6 表示重复6 次，TRUE 表示无限次播放，FALSE 播放一次即停止。STARTIME= 分:秒：设定乐曲的开始播放时间，如20 秒后播放写为S

44、TARTIME=00:20VOLUME=0-100 ：设定音量的大小。如果没设定的话，就用系统的音量。WIDTH HEIGHT：设定播放控件面板的大小HIDDEN=TRUE ：隐藏播放控件面板CONTROLS=CONSOLE/SMALLCONSOLE：设定播放控件面板的样子实例8-2-1 插入 flash 网页中的多媒体 8-3 嵌入多媒体文件除了可以使用上述方法插入多媒体文件外，还可以在网页中嵌入多媒体文件，这种方式将不调用媒体播放器8-3-1 嵌入背景音乐标记用来设置网页的背景音乐。但只适用于IE，其参数设定不多。格式如下： 名师资料总结 - - -精品资料欢迎下载 - - - - - -

45、 - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 19 页，共 26 页 - - - - - - - - - 20 autostart=true，表示是否在音乐文件传完之后，就自动播放音乐。true是， false否 ( 内定值 ) 。loop=infinite，表示是否自动反复播放。LOOP=2 表示重复两次，Infinite 表示重复多次。直到网页关闭为止。实例 8-3-1.html 背景声音 网页的背景声音 背景音乐可以放在 或 之间8-3-2 在网页中嵌入视屏文件使用前面学过的标记, 在此就不重述了。第九章多视窗口框架9-1 框架的含义和基

46、本构成框架就是把一个浏览器窗口划分为若干个小窗口，每个窗口可以显示不同的 URL 网页。使用框架可以非常方便的在浏览器中同时浏览不同的页面效果，也可以非常方便的完成导航工作。而所有的框架标记要放在一个 html 文档中。 html 页面的文档体标记被框架集标记 所取代，然后通过 的子窗口标记 定义每一个子窗口和子窗口的页面属性。语法格式： . Frame 子框架的src 属性的每个URL值指定了一个html 文件（这个文件必须事先做好）地址，地址路径可使用绝对路径或相对路径，这个文件将载入相应的窗口中。9-2 框架集 标记 的属性 : 名师资料总结 - - -精品资料欢迎下载 - - - -

47、- - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 20 页，共 26 页 - - - - - - - - - 21 border：设置边框粗细 ,默认是 5 象素 .bordercolor：设置边框颜色frameborder：指定是否显示边框：0代表不显示边框，1 代表显示边框cols：用象素数 和% 分割左右窗口,* 表示剩余部分rows：用象素数 和% 分割上下窗口 ,* 表示剩余部分framespacing=5：表示框架与框架间的保留空白的距离noresize：设定框架不能够调节，只要设定了前面的，后面的将继承1. 左右分割窗口属性：c

48、ols 如果想要在水平方向将浏览器分割多个窗口，这需要使用到框架集的左右分割窗口属性cols 。 分割几个窗口其cols的值就有几个，值的定义为宽度，可以是数字( 单位为像素 ) ，也可以是百分比和剩余值。各值之间用逗号分开。其中剩余值用 * 号表示，剩余值表示所有窗口设定之后的剩余部分，当* 只出现一次时，表示该子窗口的大小将根据浏览器窗口的大小自动调整，当* 出现一次以上时，表示按比例分割剩余的窗口空间。cols 的默认值为一个窗口。如： 将窗口分为40% ，40% ，20% 将 100 像素以外的窗口平均分配 将窗口分为三等份2. 上下分割窗口属性：rows 上下分割窗口的属性设置和左右

49、窗口的属性设定是一样的，参照上面所述就可以了。第十章表单的设计表单在 HTML页面中起着重要作用，它是与用户交互信息的主要手段。一个表单至少应该包括说明性文字、用户填写的表格、提交和重填按钮等内容。用户填写了所需的资料之后，按下“提交资料”按钮，这样所填资料传到Web服务器上。网页的设计者随后就能在Web服务器上看到用户填写的资料，从而完成了从用户到作者之间的反馈和交流。对于免费个人网站，往往服务器不提供CGI 功能，也可以电子邮件来接收用户的反馈信息。表单中主要包括下列元素：button 普通按钮radio 单选按钮checkbox 复选框select 下拉式菜单text 单行文本框text

50、area多行文本框submit 提交按钮reset 重填按钮用 HTML设计表单常用的标记是：、 、 、和 等标记。1、 表单标记该标记的主要作用是设定表单的起止位置，并指定处理表单数据程序的url地址。其基本语法结构如下： 其中 action ：用于设定处理表单数据程序url的地址， 采用电子邮件方式时，用 action=mailto:你的邮件地址 。method：用来定义处理程序从表单中获得信息的方式，可取值为 GET 和 POST 的其中一个。GET方式是处理程序从当前 Html 文档中获取数据，然而这种方式传送的数据量是有所限制的，一般限制在1KB（255 个字节）以下。POST方式传