航标网技术部内部资料（HTML教程）.pdf

航标网技术部内部资料HTML教程航标网技术部内部资料（HTML教程）第1页（共42页）航标网技术部内部资料HTML教程HTML教程概述：HTML概述与基本结构一、HTML的概述HTML的英语意思是：Hypertext Marked Language,即超文本标记语言，是一种用来制 作超文本文档的简单标记语言。超文本传输协议规定了浏览器在运行HTML文档时所遵循的 规则和进行的操作.HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准.用 HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台，自1990年以来HTML 就一直被用作WWW（是World Wide Web的缩写，也可简写WEB、中文叫做万维网）的信 息表示语言，使用HTML语言描述的文件，需要通过WEB浏览器显示出效果。所谓超文本，是因为它可以加入图片、声音、动画、影视等内容，事实上每一个HTML 文档都是一种静态的网页文件，这个文件里面包含了 HTML指令代码，这些指令代码并不是 一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术一一通过单击鼠标从一个主题跳转到另一个主 题，从一个页面跳转到另一个页面与世界各地主机的文件链接。直接获取相关的主题。如下 所示：通过HTML可以表现出丰富多彩的设计风格：图片调用：IMG SRC=文件名文字格式：F0N T SIZE=+5 C 0L0R=#00FFFF文字/F0N T通过HTML可以实现页面之间的跳转：页面跳转：A HREF=文件路径/文件名X/A通过HTML可以展现多媒体的效果：声频：EMBED SRC=音乐地址 AUTOSTART=true 视频：EMBED SRC=视频地址 AUTOSTART=true从上面我们可以看到HTML超文本文件时需要用到的一些标签。在HTML中每个用来作标 签的符号都是一条命令、它告诉浏览器如何显示文本。这些标签均由和符号以及一个 字符串组成。而浏览器的功能是对这些标记进行解释，显示出文字、图像、动画、播放声音。这些标签符号用“标签名字属性”来表示。HTML只是一个纯文本文件。创建一个HTML文档，只需要两个工具，一个是HTML编辑 器，一个WEB浏览器。HTML编辑器是用于生成和保存THML文档的应用程序。WEB浏览器是 用来打开WEB网页文件，提供给我们查看WEB资源的客户端程序。二、HTML的基本结构：一个HTML文档是由一系列的元素和标签组成.元素名不区分大小写.HTML用标签来规定 元素的属性和它在文件中的位置，第2页（共42页）航标网技术部内部资料HTML教程HTML超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要 的定义，文档体中才是要显示的各种文档信息。下面是一个最基本的html文档的代码：1 1.html-开始标签-一个简单的 HTML 示例 -欢迎光临我的主页这是我第一次做主页-头部标签文件主体结尾标签HTMLX/HTMD在文档的最外层，文档中的所有文本和html标签都包含在其中，它表 示该文档是以超文本标识语言(HTML)编写的。事实上，现在常用的Web浏览器都可以自动 识别HTML文档，并不要求有标签，也不对该标签进行任何操作，但是为了使HTML 文档能够适应不断变化的Web浏览器，还是应该养成不省略这对标签的良好习惯。是HTML文档的头部标签，在浏览器窗口中，头部信息是不被显示在正文 中的，在此标签中可以插入其它标记，用以说明文件的标题和整个文件的一些公公属性。若 不需头部信息则可省略此标记，良好的习惯是不省略。title和/title是嵌套在HEAD头部标签中的，标签之间的文本是文档标题，它被 显示在浏览器窗口的标题栏。标记一般不省略，标签之间的文本是正文，是在浏览器要显示的页面内 容。上面的这几对标签在文档中都是唯一的，HEAD标签和BODY标签是嵌套在HTML标签中 的。三、HTML的标签与属性：第3页(共42页)航标网技术部内部资料HTML教程对于刚刚接触超文本的朋友，遇到的最大的障碍就是一些用和括起来的句 子，我们称它为标签，是用来分割和标签文本的元素，以形成文本的布局、文字的格式及五 彩缤纷的画面。标签通过指定某块信息为段落或标题等来标识文档某个部件。属性是标志里 的参数的选项，HTML的标签分单标签和成对标签两种。成对标签是由首标签标签名和尾标签/标签 名组成的，成对标签的作用域只作用于这对标签中的文档。单独标签的格式标签名，单 独标签在相应的位置插入元素就可以了，大多数标签都有自己的一些属性，属性要写在始标 签内，属性用于进一步改变显示的效果，各属性之间无先后次序，属性是可选的，属性也可 以省略而采用默认值;其格式如下：标签名字属性1属性2属性3 内容/标签名字作为一般的原则，大多数属性值不用加双引号。但是包括空格、号，#号等特殊字符 的属性值必须加入双引号。为了好的习惯，提倡全部对属性值加双引号。如：字体设置注意事项：输入始标签时，一定不要在与标签名之间输入多余的空格，也不能在 中文输入法状态下输入这些标签及属性，否则浏览器将不能正确的识别括号中的标志命令，从而无法正确的显示你的信息。HTML教程第一章：HTML语言的结构html文件是标准的ASC II文件，它看起来象是加入了许多被称为标注(tag)的特殊字符 串的普遍文本文件。从结构上讲，html文件由元素(element)组成，组成html文件的元素 有许多种，用于组织文件的内容和指导文件的输出格式。绝大多数元素是“容器”，即它 有起始标记和结尾标记。元素的起始标记叫做起始标注(start tag),元素结束标记叫做结 尾标注(end tag),在起始标注和结尾标注中向的部分是元素体。每一个元素都有名称和可 选择的属性，元素的名称和属性都在起始标注内标明。比如体元素(body)demo This is my first html file.第一行是体元素的起始标注，它标明体元素从此开始。因为所有的标注都具有相同的结 构，所以我们将仔细分析这个标注的各个部分，以便读者对标注的写法有一大概了解。起始标注开始第4页(共42页)航标网技术部内部资料HTML教程body元素名称，由于元素和标注一一对应，所以元素名也叫标注名。需要注意的是 和body之间不能有空格。元素名称不分大小写。background属性名。一个元素可以有多个属性，属性及其属性值不分大小写。本属性 指明用什么方法来填充背景。=指明属性值background.gif”属性值，表示用background.gif文件来填充背景。属性名，=，属性值合起来构成一个完整的属性，一个元素可以有多个属性，各个属性用 空格分开。起始链接链结束。第二行和第三行是body元素的元素体，最后一行是body元素的结尾标注。结尾标注用/开始，随后是元素名，然后是大于号。从上面的例子中，我们可以看出，一个元素的元素体中可以有另外的元素。（上例中第 二行的标题元素h2-Y/h2和第三行的分段元素p。实际上，html文件仅由一个html元 素组成，即文件以开始，以结尾，文件其部分都是html的元素体。html 元素的元素体由两大部分，即头元素head./head4C I体元素bodyY/body和一些注释组成。头元素和 体元素的元素体又由其它的元素和文本及注释组成。也就是说，一个html文件应具有下面 的结构：html html文件开始head文件头开始文件头/head 文件头结束body文件体开始文件体/body文件体结束/html html文件结束需要说明的是，html是一门发展很快的语言，早期的html文件并没有如此严格的结构,因而现在流行的浏览器（如N etscape,Mosaic等）为保持对早期html文件的兼容性，也支持不 按上述结构编写的html文件。还需要说明的是，各种浏览器对html元素及其属性的解释也 不完全一样，本书中所讲的元素，元素的属性及其输出是以N etscape2.0浏览器为准的，作者将尽量给出别的浏览器对某一元素的解释。一般来讲，html的元素有下列三种表示方法：1）元素名文件或超文本/元素名第5页（共42页）航标网技术部内部资料HTML教程2）元素名 属性名=属性值文本成超文本/元素名3）元素名第三种写法仅用于一些特殊的元素，比如分段元素P,它仅仅通知ww浏览器在此处分 段，因而不需要界定作用范围，所以它没有结尾标注。htlm3.0标准中，也定义了标 注，它用于需要界定作用范围的段落，比如增加对齐方式属性的段落。注意：HTML并非大小写敏感.和TITLE）或者是一样的.html文件中，有些元素只能出现在头元素中，绝大多数元素只能出现在体元素中。在 头元素中的元素表示的是该html文件的一般信息，比如文件名称，是否可检索等等。这些 元素书写的次序是无关紧要的，它只表明该html有还是没有该属性。与此相反，出现在体 元素中的元素是次序敏感的，改变元素在html文件中的次序会改变该html文件的输出形式。HTML教程第二章 页面布局与文字设计标题一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签,其 中n为标题的等HTML总共提供六个等级的标题，n越小，标题字号就越大，以下列出所有 等级的标题：-第一级标题-第二级标题-第三级标题-第四级标题-第五级标题-第六级标题请看下面的例子:第6页（共42页）航标网技术部内部资料HTML教程title标题示例/title这是一行普通文字Hl一级标题 H2 二级标题 H3三级标题H4四级标题H5五级标题H6六级标题显不结果这是一行普通文字一级标题二级标题三级标题 四级标题五级标题六级标题从结果可以看出，每一个标题的字体为黑体字，内容文字前后都插入空行。换行第7页（共42页）航标网技术部内部资料HTML教程在编写HTML文件时，我们不必考虑太细的设置，也不必理会段落过长的部分会被浏览 器切掉。因为，在HTML语言规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文 字转折至下一行。所以，编写者对于自己需要断行的地方，应加上br标签。请看下面的例子：title无换行示例/title登鹳雀楼 白日依山尽，黄河入海流。欲穷千里目，更上一层楼。显示结果登鹳雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。title换行示例/title登鹳雀楼br白日依山尽，黄河入海流。欲穷千里目，更上一层楼。显示结果登鹳雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。第8页（共42页）航标网技术部内部资料HTML教程段落标签为了排列的整齐、清晰，文字段落之间，我们常用来做标记。文件段落的开始由 来标记，段落的结束由来标记，是可以省略的，因为下一个p的开始就意味着上 一个的结束。标签还有一个属性ALIN G,它用来指名字符显示时的对齐方式，一般值有C EN TER、L EFT、RIGHT 三种。下面，我们用两个例子来说明这个标签的用法。title段落标签/title浣溪沙一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。无可奈何花落去，似 曾相识燕归来。小园香径几徘徊。显示结果 浣溪沙一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。无可奈何花落去，似曾相识燕归来。小园香径几徘徊。title段落标签/title登鹳雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。第9页（共42页）航标网技术部内部资料HTML教程显示结果登鹳雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。水平线段hr这个标签可以在屏幕上显示一条水平线，用以分割页面中的不同部分。有三个属性:size水平线的宽度width水平线的长，用占屏幕宽度的百分比或象素值来表示align水平线的对齐方式，有LEFT RIGHT C EN TER三种noshade线段无阴影属性，为实心线段我们可以用几个例子来说明这线段的用法：-线段粗细的设定TITLE线段粗细的设定/TITLE这是第一条线段，无size设定，取内定值SIZE=1来显示这是第二条线段，SIZE=5这是第三条线段，SIZE=10显示结果第10页（共42页）航标网技术部内部资料HTML教程这是第一条线段，无size设定，取内定值SIZE=1来显示这是第二条线段，SIZE=5这是第三条线段，SIZE=10v线段长度的设定TITLE线段长度的设定/TITLE这是第一条线段，无WIDTH设定，取WIDTH内定值100%来显示这是第二条线段，WIDTH=50（点数方式）这是第三条线段，WIDTH=50%（百分比方式）显示结果这是第一条线段，无WIDTH设定，取WIDTH内定值100%来显示这是第二条线段，WIDTH=50（点数方式）这是第三条线段，WIDTH=50%（百分比方式）第11页（共42页）航标网技术部内部资料HTML教程-线段排列的设定TITLE线段排列的设定/TITLE这是第一条线段，无ALIGN设定，（取内定值C EN TER显示）这是第二条线段，向左对齐这是第三条线段，向右对齐显示结果这是第一条线段，无ALIGN设定，（取内定值C EN TER显示）这是第二条线段，向左对齐BR这是第三条线段，向右对齐-无阴影的设定TITLE无阴影的设定/TITLE 第12页（共42页）航标网技术部内部资料HTML教程这是第一条线段，无N OSHADE设定，取内定值阴影效果来显示这是第二条线段，有N OSHADE设定显示结果这是第一条线段，无N OSHADE设定，取内定值阴影效果来显示这是第二条线段，有N OSHADE设定文字的大小设置提供设置字号大小的是FON T,FON T有一个属性SIZE,通过指定SIZE属性就能设置字 号大小，而SIZE属性的有效值范围为1 7,其中缺省值为3我们可以SIZE属性值之前加 上“+”、“一”字符，来指定相对于字号初始值的增量或减量。请看示例：title字号大小/title这是 size=7 的字体这是 size=6 的字体P这是 size=5 的字体P这是 size=4 的字体这是 size=3 的字体这是 size=2 的字体P这是 size=l 的字体第13页（共42页）航标网技术部内部资料HTML教程这是 size=-l 的字体显示结果这是size=7的字体这是size=6的字体这是size=5的字体这是size=4的字体这是size=3的字体这是size=2的字体这是size=l的字体这是size=-l的字体文字的字体与样式HTML4.0提供了定义字体的功能，用FAC E属性来完成这个工作。FAC E的属性值可以是本机 上的任一字体类型，但有一点麻烦的是，只有对方的电脑中装有相同的字体才可以在他的浏览器 中出现你预先设计的风格。请看例子：TITLE字体 第14页（共42页）航标网技术部内部资料HTML教程欢迎光临 FON T face=宋体”）欢迎光临G欢迎光临欢迎光临守Welcom my homepage.Welcom my homepage.显示结果欢迎光临欢迎光临欢迎光临欢迎光临Welcom my homepage.Welcom my homepage.为了让文字富有变化，或者为了着意强调某一部分，HTML提供了一些标签产生这些效果,现将常用的标签列举如下：粗体HTML语言斜体HTML语言加下划线HTML语言打字机字体HTML语言大型字体HTML语言小型字体HTML语言第15页（共42页）航标网技术部内部资料HTML教程现在我们用一个实例来看看效果:闪烁效果HTML语言表示强调，一般为斜体HTML语言表示特别强调，一般为粗体HTML语言用于引证、举例，一般为斜体HTML语言title字体样式/title)黑体字 斜体字 加下划线 大型字体 小型字体 闪烁效果WelcomeWelcomeWelcom显示结果黑体字斜体字加下划线大型字体小型字体闪烁效果第16页（共42页）航标网技术部内部资料HTML教程WelcomeWelcomeWei com文字的颜色文字颜色设置格式如下：,这里的颜色值可以是一个十六进制数（用“甲作为前缀），也可以是以下16种颜色名称。请看例子：TITLE文字的颜色第17页（共42页）航标网技术部内部资料HTML教程色彩斑斓的世界 FON T C OLOR=RED色彩斑斓的世界 色彩斑斓的世界/FON TXBR色彩斑斓的世界色彩斑斓的世界 色彩斑斓的世界 色彩斑斓的世界 显示结果色彩斑斓的世界 色彩斑斓的世界色彩斑斓的世界 色彩斑斓的世界位置控制通过ALIGN属性可以选择文字或图片的对齐方式，LEFT表示向左对齐，RIGHT表示向右 对齐，C EN TER表示居中。基本语法如下：#=left/right/center例:第18页（共42页）航标网技术部内部资料HTML教程title位置控制/title你好!你好!你好！显示结果你好！你好!你好!另外，ALIGN属性也常常用在其它标签中，引起其内容位置的变动。如：#=left/right/center综合示例前面我们所讲是单独使用一个标签的方法，在实际的编写中，许多标签和一些属性是结合起 来使用的，比如：文字 文字【例】第19页（共42页）航标网技术部内部资料HTML教程TITLE字体样式/TITLE白居易 白居易（772-846年）字乐天，晚居香山，自号香山居士，原籍太原。白居易是唐 代新乐府运动的倡导者，是中国文学史上堪与屈原、李白、杜甫并列的第一流大诗人。白居易出身于小官僚家庭。大约在贞元三年（787年）的年初，十六岁的白居易带 着自己的诗稿，到 了京都长安。老诗人顾况看到这位不速之客的姓名有“居易”二字,便很恢谐地说：“长安米贵，居住不易！”及披卷读到赋得古原草送别中的“离离原上草，一岁一枯荣；野火烧不尽，春风吹又生”时，不禁大为惊奇，拍案称绝，马上改变语气，郑重地说：“能写出这样好的诗句，居 下去是不难的，刚才我是同你开开玩笑罢了。”从此，白居易的诗名大振。白居易生活的时代，主要是建中、元和、长庆时期（公元781-824年）。是唐朝走向衰败的极端苦难动荡的时代。白居易是继杜甫之后，我国伟大的现实主义诗人。他的贡献是在总结我国自诗经 以来现实主义诗歌创作经验的基础上，建立了现实主义的诗歌理论，掀起了一个波澜壮阔的 现实主义的诗歌运动一一新乐府运动，创作了大量优秀的现实主义诗篇。显示结果白居易白居易（772-846年）字乐天，晚居香山，自号香山居士，原籍太原。白居易是唐代新 乐府运动的倡导者，是中国文学史上堪与屈原、李白、杜甫并列的第一流大诗人。白居易出身于小官僚家庭。大约在贞元三年（787年）的年初，十六岁的白居易带着 自己的诗稿，到了京都长安。老诗人顾况看到这位不速之客的姓名有“居易”二字，便很恢谐地说：“长安 米贵，居住不易！”及披卷读到赋得古原草送别中的第20页（共42页）航标网技术部内部资料HTML教程“离离原上草,一岁一枯荣;野火烧不尽,春风吹又生”时，不禁大为惊奇，拍案称绝，马上改变语气，郑重地说：“能写出这样好的诗句，居 下去是不难的，刚才我是同你开开玩笑罢了。”从此，白居易的诗名大振。白居易生活的时代，主要是建中、元和、长庆时期（公元781-824年）。是唐朝走向衰 败的极端苦难动荡的时代。白居易是继杜甫之后，我国伟大的现实主义诗人。他的贡献是在总结我国自诗经 以来现实主义诗歌创作经验的基础上，建立了现实主义的诗歌理论，掀起了一个波澜壮阔的 现实主义的诗歌运动新乐府运动，创作了大量优秀的现实主义诗篇。HTML教程第三章列表无序号列表无序号列表使用的一对标签是 ulX/ul,每一个列表项前使用。其结构如下所示:第一项第二项第三项例：title无序列表/title这是一个无序列表：国际互联网提供的服务有:WWW 服务文件传输服务电子邮件服务远程登录服务第21页（共42页）航标网技术部内部资料HTML教程其它服务显示结果这是一个无序列表：国际互联网提供的服务有：WWW服务 文件传输服务 电子邮件服务 远程登录服务 其它服务序号列表序号列表和无序号列表的使用方法基本相同，它使用标签OLX/OD,每一个列表项前 使用。每个项目都有前后顺序之分，多数用数字表示。其结构如下所示：第一项第二项第三项例：title有序列表/title这是一个有序列表：国际互联网提供的服务有:WWW 服务第22页（共42页）航标网技术部内部资料HTML教程文件传输服务电子邮件服务远程登录服务其它服务国际互联网提供的服务有：1.WWW服务2.文件传输服务3.电子邮件服务4.远程登录服务5.其它服务定义性列表定义性列表可以用来给每一个列表项再加上一段说明性文字，说明独立于列表项另起一 行显示。在应用中，列表项使用标签标明，说明性文字使用表示。在定义性列表中,还有一个属性是C OMPAC T,使用这个属性后，说明文字和列表项将显示在同一行。其结构如 下所示：第一项叙述第一项的定义第二项叙述第二项的定义第三项叙述第三项的定义例：title定义性列表/title这是一个定义性列表：WWWDDWWW是全球信息网(World wide web)的缩写，也有人称之为3W、W3、Web。第23页(共42页)航标网技术部内部资料HTML教程Hyper TextHyper Text是超文本。文件通过超文本，可链结到其它地方的数据 文件，取得分散在各地的数据。显示结果这是一个定义性列表：WWWWWW是全球信息网（World wide web）的缩写，也有人称之为3W、W3、Web。Hyper TextHyper Text是超文本。文件通过超文本，可链结到其它地方的数据文件，取得分散 在各地的数据。HTML教程第四章table表格表格的基本结构.定义表格（caption.定义标题 定义表行 定义表头 定义表元（表格的具体数据）以下是一个简单的例子：姓名 性别 年龄 王林 男 显示结果姓名性别年龄王林男25第24页（共42页）航标网技术部内部资料HTML教程表格的标题表格标题的位置，可由ALIGN属性来设置，其位置分别由表格上方和表格下 方。下面为表格标题位置的设置格式。设置标题位于表格上方：设置标题位于表格下方：caption align=bottom 旅游日程/caption 日期 9Tln-1313-14/td 旅游地点 青岛 黄山/tdXtd杭州 显示结果：旅游日程日期9-1111-1313-14旅游地点青岛黄山杭巾1旅游日程/caption)日期 9-n/tdXtdn-13/tdXtd13T4 青岛日期 9-11 11-13 13-14 旅游地点I青岛I黄山I杭州第25页（共42页）航标网技术部内部资料HTML教程旅游日程表格尺寸设置表格的大小一般情况下，表格的总长度和总宽度是根据各行和各列的总和自动调整的，如果我们要直接固定表格的大小，可以使用下列方式：width和height属性分别指定表格一个固定的宽度和长度，nl和n2可以用 像素来表示，也可以用百分比（与整个屏幕相比的大小比例）来表示。下表是一个长为200像素，宽为100像素的表格。下表是一个长为屏幕的20%,宽为屏幕的10%的表格。边框尺寸设置边框是用border属性来体现的，它表示表格的边框边厚度和框线。将bord er设成不同的值，有不同的效果。第26页（共42页）航标网技术部内部资料HTML教程如:caption定货单/caption1苹果香蕉/11葡萄200 公斤200 公斤100 公斤显不结果为：定货单苹果 香蕉 葡萄200公斤 200公斤 100公斤caption定货单/caption1苹果香蕉/11葡萄200 公斤200 公斤100 公斤显小结果：定货单苹果香蕉葡萄200公斤200公斤100公斤caption定货单/caption 苹果 th 香蕉 葡萄 200 公斤td200 公斤100 公斤显示结果：定货单苹果 香蕉 葡萄200公斤 200公斤 100公斤第27页（共42页）航标网技术部内部资料HTML教程格间线宽度格与格之间的线为格间线，它的宽度可以使用TABLE）中的C ELLSPAC IN G属 性加以调节。格式是：TABLE C ELLSPAC IN G：#表示要取用的像素值例：caption定货单/caption1苹果香蕉/11葡萄200 公斤200 公斤100 公斤显示结果为：内容与格线之间的宽度我们还可以在中设置C ELLPADDIN G属性，用来规定内容与格线之间 的宽度。格式为：#表示要取用的像素值例：caption定货单/caption 苹果 香蕉 葡萄 200 公斤200 公斤100 公斤显示结果为：定货单第28页（共42页）航标网技术部内部资料HTML教程苹果香蕉葡萄200公斤200公斤100公斤表格内文字的对齐/布局表格中数据的排列方式有两种，分别是左右排列和上下排列。左右排列是以 ALIGN属性来设置，而上下排列则由VALIGN属性来设置。其中左右排列的位置可分为三种:居左(left)居右(right)和居中(center)；而上下排列基本上比较常用的有四种：上齐(top)居中(middle)下齐(bottom)和基线(baseline)0#=left,center,right#=top,middle,bottom,baseline左右排列居左 居中/th居右 A B C 显不结果：居左 居中 居右第29页(共42页)航标网技术部内部资料HTML教程ABC上下排列th上齐居中 下齐/thth基线/thA B C D显不结果：上齐居中下齐基线ABCD跨多行、多列的表元要创建跨多行、多列的表元，只需在或中加入ROWSPAN或C 0LSPAN属性，这两 个属性的值，表明了表元中要跨越的行或列的个数。跨多列的表元 col span表示跨越的列数，例如colspan=2表示这一格的宽度为两个列的宽度。跨多行的表元 rowspan所要表示的意义是指跨越的行数，例如rowspan=2就表示这一格跨越表格两个 行的高度。跨多列的表元title表格 TABLE第30页（共42页）航标网技术部内部资料HTML教程值班人员 星期一/th 星期二 /thth星期三/thtrXtd李强 王平/td显示结果值班人员星期一星期二星期三李强张明王平跨多行的表元title表格 TABLE值班人员/thth 星期一 /thXth星期二/th 李强 张明 王平 显示结果值班人员星期一星期二星期三李强张明王平在表格中，既可以对整个表格填入底色，也可以对任何一行、一个表元使用背景色。第31页（共42页）航标网技术部内部资料HTML教程表格的背景色彩行的背景色彩表元的背景色彩或#=rrggbb 16进制RGB数码，或者是下列预定义色彩名称：Black,Olive,Teal,Red,Blue,Maroon,N avy,Gray,Lime,Fuchsia,Gr een,Purple,S i Ivei,Aqua例：彩电 冰箱 家电AB显示结果彩电冰箱一厂家电A BHTML教程第五章 文件之间的连接文件之间的链接超文本中的链接是其最重要的特性之一，使用者可以从一个页面直接跳转到其他的页 面、图象或者服务器。一个链接的基本格式如下：A HREF=资源地址”链接文字第32页（共42页）航标网技术部内部资料HTML教程 标签A表示一个链接的开始，/A表示链接的结束；属性“HREF”定义了这个链接所指的地方；通过点击“链接文字”可以到达指定的文件。A HREF=http:”中国山西之窗/A链接分为本地链接、URL链接和目录链接。在各种链接的各个要素中，资源地址是最重 要的，一旦路径上出现差错，该资源就无法从用户端取得。本地链接:对同一台机器上的不同文件进行的连接称为本地链接，它使用UN IX或DOS系统中文件 路径的表示方法，采用绝对路径或相对路径来指示一个文件。例如：我们现在正在浏览的这一页的绝对路径是：c:study HTML教程 linkOL htm 而这一页相对于当前目录即“HTML教程”的相对路径是：link01.htm 如果是浏览HTML教程之外的一页，该文件路径要以两个圆点(.)来表示上一层目录：./internet/IP 地址现在我们把这几种路径的表示方法写入链接中：以绝对路径表示：A HREF=/c:study HTML教程 link01.htm文件的链接/A以相对路径表示：A HREF=link01.htm文件的链接/A链接上一目录中的文件：A HREF=././Inte门iet/IP地址”IP地址/A一般情况下，我们是不用绝对路径的，因为我们的资源常常是放在网上供其他人浏览的,写成绝对路径，当我们把整个目录中的所有文件移植到服务器上时，带有C:的资源地址用 户将无法访问到。所以我们最好写成相对路径，避免了重新修改文件资源路径的麻烦。URL链接如果链接的文件在其它服务器上，我们就要弄清我们所指向的文件时采用的哪一种URL 地址。URL意思是统一资源定位器，通过它可以以多种通讯协议于外界沟通来存取信息。URL链接的形式是：协议名：主机.域名/路径/文件名其中协议包括：file http ftp本地系统文件WWW服务器 ftp服务器第33页(共42页)航标网技术部内部资料HTML教程telnet 基于TELN ET的协议mailto 电子邮件news Usenet 新闻组gopher GOPHER 服务器wais WAIS服务器例如，我们这样来表达一个URL地址：http:/ telnet:/写在HTML文件中，链接其他主机上的文件时，格式如下：中国山西之窗西北网络中心兵马俑站目录链接前面所谈的资源地址，只是单纯的指向一份文件，但是，对于直接指到某文件上部、下 部或是中央部分，以上方法却是无法做到的。然而，我们要这样做，也并不是毫无办法。我 们可以是使用目录链接。制作目录链接方法是：-首先把把某段落设置为链接位置，格式是：在调用此链接部分的文件，定义连接：如果是在一个文件内跳转，文件名可以省略不写。例：title链接举例/title第34页（共42页）航标网技术部内部资料HTML教程我们的HTML教程已经进行到“文件之间的链接”部分，其中，我们学习了A href=l inkOl.htm#nl”本地链接A、A href=linkOL htm#n3”目录链接/A和A href=，/linkO 1.htm#n2URL 链接/A。之前，我们还介绍了A href=4.htm”文字的设计/A、A hre f=table.htmTABLE 表格/A、A href=listOl.htm列表/A等内容。也许很多人理 解起来比较吃力，这是很正常的，每个人在刚刚接触它的时候往往要度过很长的一段接受时 期。P除了我们的这个教程外，网上也有很多的站点介绍了 HTML文件的制作方法，在这里，我来推荐几个做得相当不错的站点：PA href=，/http:/ TML语言参考/AXbrA href=，/http:/ 语言教 程/AXbrA href=，/http:/ 程序员手册/AXP/body/htmlHTML教程第六章 多媒体效果插入图形超文本之所以在很短的时间内如此广泛的受到人们的青睐,很重要的一个原因时它能支 持多媒体的特性，如图象、声音、动画等。这一部分，我们先来学习在一个页面中如何插入 图象。基本格式超文本支持的图象格式一般有X Bitmap(XBM)、GIF、JPEG三种，所以我们对图片处理 后要保存为这三种格式中的任何一种，这样才可以在浏览器中看到。插入图象的标签是GMG,其格式为：IMG SRC=图形文件地址“SRC属性指明了所要链接的图象文件地址，这个图形文件可以是本地机器上的图形，也 可以是位于远端主机上的图形。地址的表示方法可以沿用上一篇内容“文件的链接”中URL 地址表示方法。例：IMG SRC=，/images/ball.gifz/第35页(共42页)航标网技术部内部资料HTML教程IMG还有两个属性是HEIGHT和WIDTH,分别表示图形的高和宽。通过这两个属性，可以 改变图形的大小，如果没有设置，图形按原大显示：例：图形与文字的对齐排列：由IMG中的ALIGN属性来设置图文的对齐方式，有以下几种:ALIGN=top(IMG SRC=love,gif ALIGN=top美丽的心灵 美丽的心灵ALIGN=middle(IMG SRC=love.gif ALIGN=middle美丽的心 灵 ,声，美丽的心灵ALIGN=buttomIMG SRC=，love.gif ALIGN=buttom美丽的心 灵.美丽的心灵第36页（共42页）航标网技术部内部资料HTML教程ALIGN=texttop(IMG SRC=love.gif ALIGN=textop美丽的心 灵美丽的心灵(IMG SRC=love,gif ALIGN=baeline美丽的 ALIGN=baseline心灵美丽的心灵ALIGN=left(IMG SRC=love,gif ALIGN=left美丽的心 灵，有着数不清的爱心，象天空里的星星，明 亮晶莹。美丽的心灵，有着数不清的|爱心，象天空 里的星星，明 亮晶莹。ALIGN=right(IMG SRC=love,gif ALIGN=right美丽的心 灵，有着数不清的爱心，象天空里的星星，明 亮晶莹。|美丽的心灵，,着数不清的 归心，象天空 里的星星，明亮晶莹。图文之间的距离设置:在HTML文件里图形水平位置的配置，可由HSPAC E属性来完成，其垂直位置的配置，由 VSPAC E来完成。第37页(共42页)航标网技术部内部资料HTML教程.图形按钮：图形按钮就是使用者通过在图形上单击，就能连接到某个地址上去。很简单，我们只要 调用一下前面的知识就可以完成了。其基本格式如下：例：播放音乐HTML除了可以插入图形之外，还可以播放音乐和视频等。用浏览器可以播放的音乐格 式有：MIDI音乐、WAV音乐、AU格式。另外在利用网络下载的各种音乐格式中，MP3是压缩 率最高，音质最好的文件格式。点播音乐将音乐做成一个链接，只需用鼠标在上面单击，就可以听到动人的音乐了，这样做的方 法很简单：乐曲名例如：-播放一段MIDI音乐：MIDI 音乐第38页（共42页）航标网技术部内部资料HTML教程-播放一段AU格式音乐：同桌的你-AU 音乐把我们喜欢的音乐收集起来，作成一个音乐库，随时都可以让自己和别人徜徉在音乐的 海洋中，已经有人这样做了，你一定已经遇到很多，而且自己也可以试着去做了！自动载入音乐前面，我们是借助链接来实现网上播放音乐这一功能的，我们还可以让音乐自动载入,你可以让它出现控制面板或当背景音乐来使用。基本语法：属性有:SRC=FILEN AME”设定音乐文件的路径AUTOSTART=TRUE/FALSE是否要音乐文件传送完就自动播放，TRUE是要，FALSE是不要，默认为FALSELOOP=TRUE/FALSE设定播放重复次数,L00P=6表示重复6次,TRUE表示无限次播放,FALSE 播放一次即停止。STARTIME=分:秒”设定乐曲的开始播放时间，如20秒后播放写为STARTIME=00:20V0LUME=0-100设定音量的大小。如果没设定的话，就用系统的音量。WIDTH HEIGHT设定控制面板的大小HIDDEN=TRUE隐藏控制面板C ON TROLS=C ON SOLE/SMALLC ON SOLE设定控制面板的样子例：*title播放音乐/title第39页（共42页）航标网技术部内部资料HTML教程作为背景音乐来播放。例：*title播放音乐/title 出现控制面板了，你可以控制它的开与关，还可以调节音量的大小。IE中的背景音乐另外，还有一种插入背景音乐格式，不过只有在IE浏览器中才可以听到。#=循环数例：播放视频用浏览器可以播放的格式有：MOV格式、AVI格式。第40页（共42页）航标网技术部内部资料HTML教程链接一个视频文件将视频文件做成一个链接的方法：视频名称例如：-播放一段视频：WIN D0WS95 WIN D0WS95自动载入视频与音乐的播放一样，我们可以使用EMBED标签播放视频,EMBE