第一章 HTML 概述与基本结构一 HTML 的概述 HTML 的英语意思是 :Hypertext Marked Language, 即超文本标记语言, 是一种用来制作超文本文档的简单标记语言超文本传输协议规定了浏览器在运行 HTML 文档时所遵循的规则和进行的操作.HTTP 协议的制定使浏览器

Size: px

Start display at page:

Download "第一章 HTML 概述与基本结构一 HTML 的概述 HTML 的英语意思是 :Hypertext Marked Language, 即超文本标记语言, 是一种用来制作超文本文档的简单标记语言超文本传输协议规定了浏览器在运行 HTML 文档时所遵循的规则和进行的操作.HTTP 协议的制定使浏览器"

荏匠俞
7 years ago
Views:

1 HTML 教程第一章 HTML 概述与基本结构...2 一 HTML 的概述二 HTML 的基本结构 : 三 HTML 的标签与属性 : 第二章 HTML 主体标签及属性颜色的设定一 html 的主体标签二颜色的设定第三章文字版面的编辑...6 第四章建立列表...15 第五章图像的处理...21 第六章建立超链接...26 第七章 TABLE 表格定义表格的基本语法表格 <table> 标签属性 (1) 表格 <table> 标签的常用属性 (2) 设置分隔线的显示状态 rules (3) 表格的边框显示状态 frame 表格行的设定单元格的设定设定跨多行多列单元格表格的分组表格的行分组 <thead>/<tbody>/<tfoot> 表格按列分组 <colgroup> 表格的行列分组表格的标题标签 <caption> 表格的嵌套...46 第八章网页的动态多媒体效果...49 第九章多视窗口框架...53 第十章表单的设计...59

2 第一章 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=" 文件名 "> SIZE="+5 " COLOR="#00FFFF"> 文字 </FONT> 间的跳转 : 文字格式 : <FONT 通过 HTML 可以实现页面之页面跳转 : A HREF=" 文件路径 / 文件名 "></A> 通过 HTML 可以展现多媒体的效果 : 声频 :<EMBED SRC=" 音乐地址 " AUTOSTART=true> 频 :<EMBED SRC=" 视频地址 " AUTOSTART=true> 视从上面我们可以看到 HTML 超文本文件时需要用到的一些标签在 HTML 中每个用来作标签的符号都是一条命令它告诉浏览器如何显示文本这些标签均由 "<" 和 ">" 符号以及一个字符串组成而浏览器的功能是对这些标记进行解释, 显示出文字图像动画播放声音这些标签符号用 < 标签名字属性 > 来表示 HTML 只是一个纯文本文件创建一个 HTML 文档, 只需要两个工具, 一个是 HTML 编辑器, 一个 WEB 浏览器 HTML 编辑器是用于生成和保存 THML 文档的应用程序 WEB 浏览器是用来打开 WEB 网页文件, 提供给我们查看 WEB 资源的客户端程序二 HTML 的基本结构 :

3 一个 HTML 文档是由一系列的元素和标签组成. 元素名不区分大小写.HTML 用标签来规定元素的属性和它在文件中的位置, HTML 超文本文档分文档头和文档体两部分, 在文档头里, 对这个文档进行了一些必要的定义, 文档体中才是要显示的各种文档信息下面是一个基本的 html 文档的代码 :1-1.html <HTML> 开始标签 <HEAD> <TITLE> 一个简单的 HTML 示例 </TITLE> </HEAD> 头部标签 <BODY> 文件主体 <CENTER> <H1> 欢迎光临我的主页 </H1> <BR> <HR> <FONT SIZE= 7 COLOR= red> 这是我第一次做主页 </FONT> </CENTER> </BODY> </HTML> 结尾标签 <HTML></HTML> 在文档的外层, 文档中的所有文本和 html 标签都包含在其中, 它表示该文档是以超文本标识语言 (HTML) 编写的事实上, 现在常用的 Web 浏览器都可以自动识别 HTML 文档, 并不要求有标签, 也不对该标签进行任何操作, 但是为了使 HTML 文档能够适应不断变化的 Web 浏览器, 还是应该养成不省略这对标签的良好习惯 <HEAD></HEAD> 是 HTML 文档的头部标签, 在浏览器窗口中, 头部信息是不被显示在正文中的, 在此标签中可以插入其它标记, 用以说明文件的标题和整个文件的一些公共属性若不需头部信息则可省略此标记, 良好的习惯是不省略 <title> 和 </title> 是嵌套在 <HEAD> 头部标签中的, 标签之间的文本是文档标题, 它被显示在浏览器窗口的标题栏 <BODY> </BODY> 标记一般不省略, 标签之间的文本是正文, 是在浏览器要显示的页面内容上面的这几对标签在文档中都是唯一的,HEAD 标签和 BODY 标签是嵌套在 HTML 标签中的三 HTML 的标签与属性 :

4 对于刚刚接触超文本的朋友, 遇到的大的障碍就是一些用 < 和 > 括起来的句子, 我们称它为标签, 是用来分割和标签文本的元素, 以形成文本的布局文字的格式及五彩缤纷的画面标签通过指定某块信息为段落或标题等来标识文档某个部件属性是标志里的参数的选项, HTML 的标签分单标签和成对标签两种成对标签是由首标签 < 标签名 > 和尾标签 </ 标签名 > 组成的, 成对标签的作用域只作用于这对标签中的文档单独标签的格式 < 标签名 >, 单独标签在相应的位置插入元素就可以了, 大多数标签都有自己的一些属性, 属性要写在始标签内, 属性用于进一步改变显示的效果, 各属性之间无先后次序, 属性是可选的, 属性也可以省略而采用默认值 ; 其格式如下 : < 标签名字属性 1 属性 2 属性 3 > 内容 </ 标签名字 > 作为一般的原则, 大多数属性值不用加双引号但是包括空格 % 号,# 号等特殊字符的属性值必须加入双引号为了好的习惯, 提倡全部对属性值加双引号如 : <font color="#ff00ff" face=" 宋体 " size="30"> 字体设置 </font> 注意事项 : 输入始标签时, 一定不要在 < 与标签名之间输入多余的空格, 也不能在中文输入法状态下输入这些标签及属性, 否则浏览器将不能正确的识别括号中的标志命令, 从而无法正确的显示你的信息第二章 HTML 主体标签及属性颜色的设定为了使你的网页绚丽多姿, 吸引更多的浏览者阅读, 可以给网页添加更多的标签及属性, 这是为了对网页中的元素进行修饰布局下面就来逐一介绍这些标签一 html 的主体标签在和 bgcolor </body> 中放置的是页面中所有的内容, 如图片文字表格表单超链接等设 leftmargin 置标签有自己的属性, 设定页面文字的颜色设置标签内的 topmargin 属性描述属 bgproperties 性, link 设定页面默认的连接颜色可控制整个页面的显示 alink 设定鼠标正在单击时的连接颜色方式标签的属性 vlink 设定页面的上边距 background 格式 : <body text="#000000" link="#000000" 设定页面背景图像设定页面背景颜色设定访问后连接文字的颜色设定页面背景图像为固定, 不随页面的滚动而滚动设定页面的左边距 text

5 alink="#000000" vlink="#000000" background="gifnam.gif" bgcolor="#000000" leftmargin=3 topmargin=2 bgproperties="fixed"> 实例 :2-1.html <title>bady 的属性实例 </title> <body bgcolor="#ffffe7" text="#ff0000" link="#3300ff" alink="#ff00ff" vlink="#9900ff"> <center> <h2> 设定不同的连接颜色 </h2> 测试 body 标签 <p> <a href=" 默认的连接颜色 </a> <p> <a href=" 正在按下的连接颜色,</a> <p> <a href=" 访问过后的连接颜色,</a> <P> <a href="#" onclick="window.history.back()"> 返回 </a> </conter> </body> 实例说明 : 的属性设定了页面的背景颜色, 文字的颜色, 链接的颜色为 #3300ff, 单击的连接颜色为 #ff00ff, 单击过后的颜色为 #9900ff Body 里面的是页面中的链接标签, 对于属性可根据页面的效果来定, 用那个属性就设定那个属性对于上面的属性在后面的章节中还会介绍, 在这里就不逐一引用了, 我们的学习目的主要是掌握标签及属性的使用方法二颜色的设定颜色值是一个关键字或一个 RGB 格式的数字在网页中用得很多, 在此就先介绍一下颜色是由 "red" "green" "blue " 三原色组合而成的, 在 HTML 中对颜色的定义是用十六进位的, 对於三原色 HTML 分别给予两个十六进位去定义, 也就是每个原色可有 256 种彩度, 故此三原色可混合成种颜色

6 例如 : 白色的组成是 red=ff, green=ff, blue= ff,rgb 值即为 ffffff 红色的组成是 red=ff, green= 00, blue= 00, RGB 值即为 ff0000 绿色的组成是 red=00, green=ff, blue= 00, RGB 值即为 00ff00 蓝色的组成是 red=00, green= 00, blue= ff, RGB 值即为 0000ff 黑色的组成是 red=00, green=00, blue=00, RGB 值即为应用时常在每个 RGB 值之前加上 # 符号, 如 :bgcolor="#336699" 用英文名字表示颜色时直接写名字如 bgcolor=green RGB 颜色可以有四种表达形式 :: #rrggbb ( 如,#00cc00) #rgb ( 如,#0c0) rgb(x,x,x) x 是一个介乎 0 到 255 之间的整数 ( 如,rgb(0,204,0)) rgb(y%,y%,y%) y 是一个介乎 0.0 到之间的整数 ( 如, rgb(0%,80%,0%) Windows VGA( 视频图像阵列 ) 形成了 16 各关键字 : aqua,black, blue,fuchsia, gray, green, lime,maroon,navy,olive, purple,red,silver,teal,white,and yellow 3-1 换行标签 <br> 下面是部分颜色的 RGB 代码图表 : 第三章文字版面的编辑换行标签是个单标签, 也叫空标签, 不包含任和内容, 在 html 文件中的任何位置只要使用了 <br> 标签, 当文件显示在浏览器中时, 该标签之后的内容将显示下一行请看下面的例子 :3-1html <title> 无换行示例 </title> 无换行标记 : 登鹳雀楼白日依山尽, 黄河入海流欲穷千里目, 更上一层楼 <br> 有换行标记 :<br> 登鹳雀楼 <br> 白日依山尽,<br> 黄河入海流 <br> 欲穷千里目,<br> 更上一层楼 </body> 3-2 换段落标签 <p> 及属性 : 由 <p> 标签所标识的文字, 代表同一个段落的文字不同段落间的间距等于连续加了两个换行符, 也就是要隔一行空白行, 用以区别文字的不同段落它可以单独使用, 也可以成对使用单独使用时, 下一个 <P> 的开始就意味着上一个 <P> 的结束良好的习惯是成对使用格式 :

7 <P> <P ALIGN= 参数 > 其中,ALIGN 是 <p> 标签的属性, 属性有三个参数 left,center,right. 这三个参数设置段落文字的左, 中, 右位置的对齐方式. 实例 :3-2html <title> 测试分段控制标签 </title> <p> 花儿什么也没有它们只有凋谢在风中的轻微凄楚而又无奈的吟怨, 就像那受到了致命伤害的秋雁, 悲哀无助地发出一声声垂死的鸣叫 </p> <p align="right"> 或许, 这便是花儿那短暂一生凄凉伤感的归宿 </p> <p align=center> 而美丽苦短的花期 </p> <p align="left"> 却是那后悲伤的秋风挽歌中的瞬间插曲 </p> </body> 3-3 原样显示文字标签 <pre> 要保留原始文字排版的格式, 就可以通过 <pre> 标签来实现, 方法是把制作好的文字排版内容前后分别加上始标签 <pre> 和尾标签 </pre>. 实例 :3-3html <HTML> <HEAD> <TITLE> 原样显示文字标签 </TITLE> </HEAD> <BODY> <PRE> 白日依山尽, 黄河入海流欲穷千里目, 更上一层楼 </PRE> </BODY> </HTML> 3-4 居中对齐标签 <center> 文本在页面中使用 <center> 标签进行居中显示,<center> 是成对标签, 在需要居中的内容部分开头处加 <center>, 结尾处加 </center> 实例 :3-4html <HTML> <HEAD> <TITLE> 居中对齐标签 </TITLE> </HEAD>

8 <BODY> <CENTER> 送孟浩然之廣陵 <p> 故人西辭黃鶴樓, 煙花三月下揚州孤帆遠影碧山盡, 惟見長江天際流 </CENTER> </BODY> </HTML> 3-5 引文标签 ( 缩排标签 )<blockquote> <blockquote> 标签可以用来建立一个引文, 他特别适合较长文本的引用, 引文显示时将会自动右移, 左边空出几个格, 加以区别实例 :3-5html <HTML> <HEAD> <TITLE> 引文标签 </TITLE> </HEAD> <BODY> 春 <BR> <PRE> <BLOCKQUOTE> 盼望着, 盼望着, 东风来了, 春天脚步近了 <br> 一切都像刚睡醒的样子, 欣欣然张开了眼山朗润起来了, 水涨起来了, 太阳的脸红起来了小草偷偷地从土里钻出来, 嫩嫩的, 绿绿的园子里, 田野里, 瞧去一大片一大片满是的坐着, 躺着, 打两个滚, 踢几脚球, 赛几趟跑, 捉几回迷藏风轻悄悄的, 草软绵绵的 </BLOCKQUOTE> <BLOCKQUOTE><BLOCKQUOTE> 桃树杏树梨树, 你不让我, 我不让你, 都开满了花赶趟儿红的像火, 粉的像霞, 白的像雪花里带着甜味儿 ; 闭了眼, 村上仿佛已经满是桃儿杏儿梨儿花下成千成百的蜜蜂嗡嗡地闹着, 大小的蝴蝶飞来飞去野花遍地是 : 杂样儿, 有名字的, 没名字的, 散在草丛里像眼睛, 像星星, 还眨呀眨的吹面不寒杨柳风, 不错的, 像母亲的手抚摸着你风里带来些新翻的泥土的气息, 混着青草味儿, 还有各种花的香, 都在微微润湿的空气里酝酿鸟儿将巢安在繁花嫩叶当中, 高兴起来了, 呼朋引伴地卖弄清脆的喉咙, 唱出宛转的曲子, 跟轻风流水应和着牛背上牧童的短笛, 这时候也成天嘹亮地响着雨是寻常的, 一下就是三两天可别恼看, 像牛毛, 像花针, 像细丝, 密密地斜织着, 人家屋顶上全笼着一层薄烟树叶儿却绿得发亮小草儿也青得逼你的眼傍晚时候, 上灯了, 一点点黄晕的光, 烘托出一片安静而和平的夜在乡下, 小路上, 石桥边, 有撑着伞慢慢走着的人 ; 地里还有工作的农民, 披着蓑戴着笠他们的房屋, 稀稀疏疏的, 在雨里静默着

9 </BLOCKQUOTE></BLOCKQUOTE> <BLOCKQUOTE><BLOCKQUOTE><BLOCKQUOTE> 天上风筝渐渐多了, 地上孩子也多了城里乡下, 家家户户, 老老小小, 也都赶趟儿似的, 一个个都出来了舒活舒活筋骨, 抖擞抖擞精神, 各做各的一份事儿去一年之计在于春, 刚起头儿, 有的是工夫, 有的是希望春天像刚落地的娃娃, 从头到脚都是新的, 它生长着春天像小姑娘, 花枝招展的, 笑着, 走着春天像健壮的青年, 有铁一般的胳膊和腰脚, 他领着我们上前去 </BLOCKQUOTE></BLOCKQUOTE></BLOCKQUOTE> </PRE> </BODY> </HTML> 3-6 水平分隔线标签 <hr> <hr> 标签是单独使用的标签, 是水平线标签, 用于段落与段落之间的分隔, 使文档结构清晰明了, 使文字的编排更整齐通过设置 <hr> 标签的属性值, 可以控制水平分隔线的样式 <hr> 标签的属性属性参数功能单位默认值 size 设置水平分隔线的粗细 pixel( 像素 ) 2 width 设置水平分隔线的宽度 pixel( 像素 ) % 100% align left center right 设置水平分隔线的对齐方式 center color 设置水平分隔线的颜色 black noshade 取消水平分隔线的 3d 阴影实例 :3-6html <HTML> <HEAD> <TITLE> 测试水平分隔线标签 </TITLE> </HEAD> <BODY> <CENTER> 春晓 <HR > 春眠不觉晓, <hr size="6"> 处处闻啼鸟 <hr width="40%"> 夜来风雨声, <hr width="60" align="left"> 花落知多少? <hr size="6" width="30%" align="center" noshade color=red > </CENTER>

10 </BODY> </HTML> 3-7 署名标签 <address> <address> 署名标签一般用于说明这个网页是由谁或是由哪个公司编写的, 以及其它相关信息在 <address></address> 标签之间的文字显示效果是斜体字实例 :3-7html <HTML> <HEAD> <TITLE> 署名标签 </TITLE> </HEAD> <BODY> <CENTER> 乐游原 <HR WIDTH="50%" SIZE="5" COLOR="FFCC00" ALIGN=CENTER> <PRE> 向晚意不适, 驱车登古原夕阳无限好, 只是近黄昏 </PRE> <HR WIDTH="50%" SIZE="5" COLOR="FFCC00" ALIGN=CENTER> <ADDRESS> [ 唐 ] 李商隐 </ADDRESS> </BODY> </HTML> 3-8 特殊字符在 HTML 文档中, 有些字符没办法直接显示出来, 例如?. 使用特殊字符可以将键盘上没有的字符表达出来, 而有些 HTML 文档的特殊字符在键盘上虽然可以得到, 但浏览器在解析 HTML 文当时会报错, 例如 "<" 等, 为防止代码混淆, 必须用一些代码来表示它们 HTML 几种常见特殊字符及其代码表特殊或专用字符字符代码特殊或专用字符字符代码

11 实例 :3-8html <HTML> <HEAD> <TITLE> 特殊字符 </TITLE> </HEAD> <BODY> <CENTER> < 赋得古原草送别 > < <? > > & &? " " 空格 <HR WIDTH="49%" SIZE="5" ALIGN=CENTER NOSHADE> <PRE> 离离原上草, 一岁一枯荣野火烧不尽, 春风吹又生 </PRE> <HR WIDTH="49%" SIZE="5" ALIGN=CENTER NOSHADE> <ADDRESS> 白居易 </ADDRESS> </BODY> </HTML> 3-9 注释标签在 HTML 文档中可以加入相关的注释标记, 便于查找和记忆有关的文件内容和标识, 这些注释内容并不会在浏览器中显示出来注释标签的格式有如下 :  实例 :3-9html <HTML> <HEAD> <TITLE> 注释标签 </TITLE> </HEAD> <BODY>  <CENTER> < 赋得古原草送别 >

12 <HR WIDTH="49%" SIZE="5" ALIGN=CENTER NOSHADE> <PRE> <! pre 代表原样显示排版格式 > 离离原上草, 一岁一枯荣野火烧不尽, 春风吹又生 </PRE> <HR WIDTH="49%" SIZE="5" ALIGN=CENTER NOSHADE> <ADDRESS> 白居易 </ADDRESS> </BODY> </HTML> 3-10 字体属性标题文字标签 <hn> <hn> 标签用于设置网页中的标题文字, 被设置的文字将以黑体或粗体的方式显示在网页中标题标签的格式 :<hn align= 参数标题内容 </hn> 说明 :<hn> 标签是成对出现的,<hn> 标签共分为六级, 在 <h1>...</h1> 之间的文字就是第一级标题, 是大粗的标题 ;<h6>...</h6> 之间的文字是后一级, 是小细的标题文字 align 属性用于设置标题的对齐方式, 其参数为 left( 左 ), enter ( 中 ), right ( 右 ) <hn> 标签本身具有换行的作用, 标题总是从新的一行开始实例 html <HTML> <HEAD> <TITLE> 设定各级标题 </TITLE> </HEAD> <BODY> <H1 ALIGN="CENTER"> 一级标题 </H1> <H2> 二级标题 </H2> <H3> 三级标题 </H3> <H4> 四级标题 </H4> <H5 ALIGN="RIGHT"> 五级标题 </H5> <H6 ALIGN="LEFT"> 六级标题 </H6> </BODY> </HTML> 文字格式控制标签 <FONT> <FONT> 标签用于控制文字的字体, 大小和颜色控制方式是利用属性设置得以实现的

13 FONT 标签的属性属性使用功能默认值 face 设置文字使用的字体宋体 size 设置文字的大小 3 color 设置文字的颜色黑色格式 :<font face= 值 1 size= 值 2 color= 值 3 文字 </font> 说明 : 如果用户的系统中没有 face 属性所指的字体, 则将使用默认字体 size 属性的取值为 1~7 也可以用 "+" 或 "-" 来设定字号的相对值 color 属性的值为 :rgb 颜色 "#nnnnnn" 或颜色的名称实例 : html <title> 控制文字的格式 </title> <center> <font face= 黑体 size=6 color="red" > 盼望着, 盼望着, 东风来了, 春天脚步近了 </font> <p> <font face= 隶书 size=+3 color="green"> 一切都像刚睡醒的样子, 欣欣然张开了眼 <p> 山朗润起来了, 水涨起来了, 太阳的脸红起来了 </font><p> <font face= 楷体 size=4 color="#ff00ff"> 小草偷偷地从土里钻出来, 嫩嫩的, 绿绿的 <p> 园子里, 田野里, 瞧去一大片一大片满是的 <p> 坐着, 躺着, 打两个滚, 踢几脚球, 赛几趟跑, 捉几回迷藏 <p> 风轻悄悄的, 草软绵绵的 </font> </center> </body> 特定文字样式标签在有关文字的显示中, 常常会使用一些特殊的字形或字体来强调突出区别以达到提示的效果在 html 中用于这种功能的标签可以分为两类, 物理类型和逻辑类型 1 物理类型 (1) 粗体标签 <b> 放在 <b> 与 </b> 标签之间的文字将以粗体方式显示 (2) 斜体标签 <i> 放在 <i> 与 </i> 标签之间的文字将以斜体方式显示

14 (3) 下划线标签 <u> 放在 <u> 与 </u> 标签之间的文字将以下划线方式显示实例 html <title> 字体的物理类型 </title> <center> <font color="#ff0000" size="+2"><b> 这些文字是粗体的 </b></font><br><br> <i> 这些文字是斜体的 </i> <br><br> <u> 这些文字带有下划线 </u> </center> </body> 2 逻辑类型逻辑类型是使用一些标签来改变字体的形态和式样, 以便产生一些浏览者习惯的或约定的显示效果, 常用的逻辑类型标签有八种, 放在标签之间的文字受其控制下面请看常用逻辑标签的实例实例 htrml <title> 字体的逻辑类型 </title> <pre> em 标签 :<em> 用于强调的文本, 一般显示为斜体字 </em> strong 标签 :<strong> 用于特别强调的文本, 显示为粗体字 </strong> cite 标签 :<cite> 用于引证和举例, 通常是斜体字 </cite> code 标签 :<code> 用来指出这是一组代码 </code> small 标签 :<small> 规定文本以小号字显示 </small> big 标签 :<big> 规定文本以大号字显示 </big> samp 标签 :<samp> 显示一段计算机常用的字体, 即宽度相等的字体 </samp> kbd 标签 :<kbd> 由用户输入文本, 通常显示为较粗的宽体字 </kbd> var 标签 :<var> 用来表示变量, 通常显示为斜体字 </var> dfn 标签 :<dfn> 表示一个定义或说明, 通常显示为斜体字 </dfn> sup 标签 :12<sup>2</sup>=144 sub 标签 : 硫酸亚铁的分子式是 Fe<sub>2</sub>SO<sub>4</sub> </pre> </body>

15 第四章建立列表在 html 页面中, 合理的使用列表标签可以起到提纲和格式排序文件的作用列表分为两类, 一是无序列表, 一是有序列表, 无序列表就是项目各条列间并无顺序关系, 纯粹只是利用条列来呈现资料而已, 此种 <MENU> 无序标签, 在各条列前面均有一符号以示区隔而有序条列就是指各条列之间是有顺序的, 比如从一直延伸下去列表项目的标记标签列表的主要标签 <UL> 无序列表 4-1 无序列表 <UL> <OL> 有序列表无序列表使用 <DIR> 目录列表的一对标签是 <ul></ul>, <DL> 定义列表无序列表指没有进行编号的列表, <LI> 每一个列表项前使用 <LI> <LI> 的属性 type 有三个选项, 这三个选项都必须小写 : 定义列表的标记 <DL>/<DT>/<DD> 菜单列表描述 disc 实心园空心园 square 小方块 circle <ul> 如果不使用其项目 <li> 的属性值, 即默认情况下的 <ul> 会加 " 实心园 " 格式 1: <UL> <LI> 第一项 <LI> 第二项 <LI> 第三项 </UL> 格式 2 <ul> <li type=disc> 第一项 <li type=circle> 第二项 <li type=square> 第三项 </ul> 示例 5-1.html <title> 无序列表 </title>

16 <ul> <li> 默认的无序列表加 " 实心园 " <li> 默认的无序列表 " 实心园 " <li> 默认的无序列表 " 实心园 " </ul> <ul> <li type=square> 无序列表 square 加方块 <li type=square> 无序列表 square 加方块 <li type=square> 无序列表 square 加方块 </ul> <ul> <li type=circle> 无序列表 circle 加空心园 <li type=circle> 无序列表 circle 加空心园 <li type=circle> 无序列表 circle 加空心园 </ul> </body> 4-2 有序列表 <OL> 有序列表和无序列表的使用格式基本相同, 它使用标签 <ol></ol>, 每一个列表项前使用 <li> <ol> 列表的结果是带有前后顺序之分的编号如果插入和删除一个列表项, 编号会自动调整顺序编号的设置是由 <ol> 的两个属性 type 和 start 来完成的 start= 编号开始的数字, 如 start=2 则编号从 2 开始, 如果从 1 开始可以省略, 或是在 < li > 标签中设定 value="n" 改变列表行项目的特定编号, 例如 <li value="7"> type= 用于编号的数字, 字母等的类型, 如 type=a, 则编号用英文字母为了使用这些属性, 把它们放在 <ol> 或 <li> 的的初始标签中有序列表 type 的属性 type 类型 type=1 type=a type=a type=i type=i 描述表示列表项目用数字标号 (1,2,3...) 表示列表项目用大写字母标号 (A,B,C...) 表示列表项目用小写字母标号 (a,b,c...) 格式 1 <ol type= 编号类型 start=value> <li> 第 1 项 <li> 第 2 项 <li> 第 3 项表示列表项目用大写罗马数字标号 (Ⅰ,Ⅱ,Ⅲ...) 表示列表项目用小写罗马数字标号 (i,ii,iii...)

17 </ol> 格式 2 <ol> <li> 第 1 项 <li> 第 2 项 <li> 第 3 项 </ol> 实例 :5-2.html <title> 有序列表 </title> <ol> <li> 默认的有序列表 <li> 默认的有序列表 <li> 默认的有序列表 </ol> <ol type=a start=5> <li> 第 1 项 <li> 第 2 项 <li> 第 3 项 <li value= 20> 第 4 项 </ol> <ol type= I start=2> <li> 第 1 项 <li> 第 2 项 <li> 第 3 项 </ol> </body> 4-3 嵌套列表将一个列表嵌入到另一个列表中, 作为另一个列表的一部分, 叫嵌套列表无论是有序列表和无序列表的嵌套, 浏览器都可以自动地分成排列实列 :5-3.html <HTML> <HEAD> <TITLE> 嵌套列表 </TITLE> </HEAD> <BODY>

18 <h3> 目录 </h3> <ol type=a> <li> 这是以序号类型 a 开头第一行内容 </li> <li> 这是以序号类型 a 开头第二行内容 </li> <ol type=a start=3> <li> 这是以序号 A 类型 C 开头第一行内容 </li> <li> 这是以序号 A 类型 C 开头第二行内容 </li> <ol type=1 start=51> <li> 这是以序号数字 51 开头第一行内容 </li> <li> 这是以序号数字 51 开头第二行内容 </li> <li> 这是以序号数字 51 开头第三行内容 </li> </ol> <li> 这是以序号 A 类型 C 开头第三行内容 </li> </ol> <li> 这是以序号类型 a 开头第三行内容 </li> </ol> <HR> </BODY> </HTML> 4-4 定义列表的标记 <DL>/<DT>/<DD> 定义列表的标记也叫描述性列表, 定义列表默认为两个层次, 第一层为列表项标签 <DT>, 第二层为注释项标签 <DD> <DT> 和 <DD> 标签通常是成对使用的也可以一个列表项对应于几个解释项, 这种方式很少用 <DD> 默认的注释是显示在另一行中, 当使用 <dl compact="compact"> 后, 注释项和列表项将显示在同一行其格式为 : <dl> <dt> 第 1 项 <dd> 注释 1 <dt> 第 2 项 <dd> 注释 2 <dt> 第 3 项 <dd> 注释 3 </dl> 实例 :5-4.html <title> 定义性列表 </title> 定义性列表 <P> <dl>

19 <dt> WWW:<dd> WWW 是 (World wide web) 的缩写, 也可简写 web; <dt> WWW:<dd> WWW 又叫万维网 ; <dt> WWW:<dd> internet 提供的常用的服务是 WWW; </dl> </body> 4-5 目录列表 <DIR> 和菜单列表 <MENU> <dir> 为目录列表标签,<menu> 为菜单列表标签, 它们的格式和无序列表 <ul> 是一样的, 例如 : 格式 1: <dir> <li> 第一项 <li> 第二项 <li> 第三项 </dir> 格式 2 <menu> <li type=disc> 第一项 <li type=circle> 第二项 <li type=square> 第三项 </menu> 实例 :5-5.HTML <title> 无序列表 </title> <ul> <li> 默认的无序列表加 " 实心园 " <li> 默认的无序列表 " 实心园 " <li> 默认的无序列表 " 实心园 " </ul> <dir> <li> 默认的目录列表加 " 实心园 " <li> 默认的目录列表 " 实心园 " <li> 默认的目录列表 " 实心园 " </dir> <menu> <li> 默认的菜单列表加 " 实心园 " <li> 默认的菜单列表 " 实心园 " <li> 默认的菜单列表 " 实心园 " </menu>

20 <dir> <li type=square> 目录列表 square 加方块 <li type=square> 目录列表 square 加方块 <li type=square> 目录列表 square 加方块 </dir> <menu> <li type=circle> 菜单列表 circle 加空心园 <li type=circle> 菜单列表 circle 加空心园 <li type=circle> 菜单列表 circle 加空心园 </menu> </body>

21 第五章图像的处理图像可以使 html 页面美观生动且富有生机浏览器可以显示的图像格式有 jpeg,bmp,gif 其中 bmp 文件存储空间大, 传输慢, 不提倡用, 常用的 jpeg 和 gif 格式的图像相比较,jpeg 图像支持数百万种颜色, 即使在传输过程中丢失数据, 也不会在质量上有明显的不同, 占位空间比 gif 大,gif 图像仅包括 265 色彩, 虽然质量上没有 jpeg 图像高, 但占位储存空间小, 下载速度快支持动画效果及背景色透明等特点因此使用图像美画页面可视情况而决定使用那种格式 5-1 背景图像的设定式 : 在网页中除了可以用单一的颜色做背景外, 还可用图像设置背景设置背景图像的格 <body background= "image-url"> 其中 "image-url" 指图像的位置实例 :6-1.html <title> 设置背景图像 </title> <body background="imge/11.gif"> <center> <p> </p> <p> </p> <p> </p> <p> </p> <p><font color="#006600" size="+6"> 盼望着, 盼望着, 东风来了, 春天脚步近了.</font> </p> </center> </body> 5-2 网页中插入图片标签 <img> 网页中插入图片用单标签 <img>, 当浏览器读取到 <img> 标签时, 就会显示此标签所设定的图像如果要对插入的图片进行修饰时, 仅仅用这一个属性是不够的, 还要配合其它属性来完成插入图片标签 <img> 的属性属性 src alt 描述图像的 url 的路径提示文字

22 width height dynsrc loop 宽度通常只设为图片的真实大小以免失真, 改变图片大小好用图像工具. 高度通常只设为图片的真实大小以免失真, 改变图片大小好用图像工具. avi 文件的 url 的路径设定 avi 文件循环播放的次数 loopdelay 设定 avi 文件循环播放延迟 start lowsrc 设定 avi 文件的播放方式设定低分辨率图片, 若所加入的是一张很大的图片, 可先显示图片 usemap 映像地图 align border hspace vlign 图像和文字之间的排列属性边框水平间距垂直间距 <IMG> 的格式及一般属性设定 : <img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="logo of PenPals Garden" lowsrc="pre_logo.gif"> 插入普通图片实例 :5-2-1.html <title> 普通插入图片 </title> <BODY> <CENTER> <H2> 爱在深秋 </H2> <IMG src="../../imge/6-5.gif"> </CENTER> <WBR> <p> 秋雨无声无息地下着 <BR>

23 飒飒的秋风不可一世地横行在萧条的郊外无力与秋风抗争的枯叶, 只能带着丝丝牵挂, 无可奈何地飘离留恋的枝头秋蝉哀弱的残声逐渐地少了, 地上落叶多了 <BR> 黄昏, 我漫步在郊外的林间, 想细细地品味秋雨的凄冷 <BR> 然而, 雨到深秋易作霖, 萧萧难会此时心, 此时, 又有谁能听我诉说心中的那份情怀呢?<BR> </p> </WBR> </body> 设定上下左右空白位置 hspace/vspace 实例 :5-2-2.html <title> 设定图像与文本之间的距离 </title> <img src="../../imge/6-5.gif" align="left" hspace="20" vspace="20"> <font size="+3"> 秋雨无声无息地下着 <BR> 飒飒的秋风不可一世地横行在萧条的郊外无力与秋风抗争的枯叶, 只能带着丝丝牵挂, 无可奈何地飘离留恋的枝头秋蝉哀弱的残声逐渐地少了, 地上落叶多了 <BR> 黄昏, 我漫步在郊外的林间, 想细细地品味秋雨的凄冷然而, 雨到深秋易作霖, 萧萧难会此时心, 此时, 又有谁能听我诉说心中的那份情怀呢?</font><BR> </body> 设定字画对其方式图像的对齐 : 1) 单独占一行时, 放在 <p> </p> 中, 用 <p> 的对齐属性进行设置 2) 与文本在同一行时, 用其自身的 align 属性 (top,middle,bottom) 设置图像与文本的垂直对齐其中 :bottom 为默认值 3) 图文混排时, 可实现图像的左右环绕文本, 用 align 属性 (left 图像在左文本在右,right) 实例 :5-2-3.html <title> 控制图像相对于文字基准线的水平对齐方式 </title> <img src="../../imge/6-2.jpg" align="left">

24 此图像相对于文字基准线为靠上对齐的多行文字 <br> 试想在圆月朦胧之夜, 海棠是这样的妩媚而嫣润 ; 枝头的好鸟为什么却双栖而各梦呢? 在这夜深人静的当儿, 那高踞着的一只八哥儿, 又为何尽撑着眼皮儿不肯睡去呢? 他到底等什么来着? 舍不得那淡淡的月儿么? 舍不得那疏疏的帘儿么? 不, 不, 不, 您得到帘下去找, 您得向帘中去找您该找着那卷帘人了? 他的情韵风怀, 原是这样这样的哟! 朦胧的岂独月呢 ; 岂独鸟呢? 但是, 咫尺天涯, 教我如何耐得?<br> 我拚着千呼万唤 ; 你能够出来么? <br> 这页画布局那样经济, 设色那样柔活, 故精采足以动人虽是区区尺幅, 而情韵之厚, 已足沦肌浃髓而有余我看了这画瞿然而惊 : 留恋之怀, 不能自已故将所感受的印象细细写出, 以志这一段因缘但我于中西的画都是门外汉, 所说的话不免为内行所笑那也只好由他了 <p> <hr color="#00ff00"> <img src="../../imge/6-2.jpg" align="right"> 此图像相对于文字基准线为靠上的多行文字对齐 <br> 试想在圆月朦胧之夜, 海棠是这样的妩媚而嫣润 ; 枝头的好鸟为什么却双栖而各梦呢? 在这夜深人静的当儿, 那高踞着的一只八哥儿, 又为何尽撑着眼皮儿不肯睡去呢? 他到底等什么来着? 舍不得那淡淡的月儿么? 舍不得那疏疏的帘儿么? 不, 不, 不, 您得到帘下去找, 您得向帘中去找您该找着那卷帘人了? 他的情韵风怀, 原是这样这样的哟! 朦胧的岂独月呢 ; 岂独鸟呢? 但是, 咫尺天涯, 教我如何耐得?<br> 我拚着千呼万唤 ; 你能够出来么? <br> 这页画布局那样经济, 设色那样柔活, 故精采足以动人虽是区区尺幅, 而情韵之厚, 已足沦肌浃髓而有余我看了这画瞿然而惊 : 留恋之怀, 不能自已故将所感受的印象细细写出, 以志这一段因缘但我于中西的画都是门外汉, 所说的话不免为内行所笑那也只好由他了 <p> <hr color="#00ff00"> <img src="../../imge/6-2.jpg" align="top"> 此图像相对于文字基准线为顶部单行对齐 <p> <hr color="#00ff00"> <img src="../../imge/6-2.jpg" align=bottom> 此图像相对于文字基准线为底线单行对齐 </p> <p> <hr color="#00ff00"> <p><img src="../../imge/6-2.jpg" align="middle"> 此图像相对于文字基准线为置中单行对齐 </p> <p> </p> <p><a href="#" onclick="window.history.back()"> 返回 </a></p> <p> </body> 图片大小设定实例 :5-2-4.html

25 <title> 图像大小的设定 </title> <center> <p> 缩小图像 <p><img src="../../imge/6-3.gif" width="350" height="200"> <p> 原图显示 <p> <img src="../../imge/6-3.gif" width="400" height="236"> <p> 放大图像 <p> <img src="../../imge/6-3.gif" width="500" height="250"> </p> </center> </body> 图像边框的设定实例 :5-2-5.html <title> 设定图像的边框 </title> <center> <div align="center"> <pre><img src="../../imge/xjbjtp22.jpg" border="10"></pre> </div> </body> 5-3 用 <img> 标签插入 avi 文件格式 :<img dynsrc="avi 文件地址 "> <img> 标签插入 avi 文件的属性属性 dynsrc loop loopdelay 描述指定 avi 文件所在路径设定 avi 文件循环次数设定 avi 文件循环延迟

26 start 设定文件播放方式 fileopen/mouseover( 网页打开时即播放 / 当鼠标滑到 avi 文件时播放 ) 实例 :6-4.html <title> 设定图像的边框 </title> <center> <p align="center"> <img dynsrc="../../imge/mmm.avi" loop="-1" start="mouseover"> </p> </center> </body> 第六章建立超链接 HTML 文件中重要的应用之一就是超链接, 超链接是一个网站的灵魂,web 上的网页是互相链接的, 单击被称为超链接的文本或图形就可以链接到其它页面超文本具有的链接能力, 可层层链接相关文件, 这种具有超级链能力的操作, 即称为超级链接超级链接除了可链接文本外, 也可链接各种媒体, 如声音图象动画, 通过它们我们可享受丰富多采的多媒体世界建立超链接的标签为 <A> 和 </A> 格式为 : <A HREF=" 资源地址 " TARGET=" 窗口名称 " TITLE=" 指向连接显示的文字 "> 超链接名称 </A> 说明 : 标签 <A> 表示一个链接的开始,</A> 表示链接的结束 ; 属性 HREF 定义了这个链接所指的目标地址 ; 目标地址是重要的, 一旦路径上出现差错, 该资源就无法访问 TARGET: 该属性用于指定打开链接的目标窗口, 其默认方式是原窗口建立目标窗口的属性属性值描述在上一级窗口中打开, 一般使用分桢的框架页会经 _parent 常使用 _blank 在新窗口打开 _self _top 在同一个桢或窗口中打开, 这项一般不用设置在浏览器的整个窗口中打开, 忽略任何框架 TITLE: 该属性用于指定指向链接时所显示的标题文字 " 超链接名称 " 是要单击到链接的元素, 元素可以包含文本, 也可以包含图像文本带下划线且与其它文字颜色不同, 图形链接通常带有边框显示用图形做链接时只要把显示图像的标志 <img> 嵌套在 <A

27 HREF="URL"></A> 之间就能实现图像链接的效果当鼠标指向 " 超链接名称 " 处时会变成手状, 单击这个元素可以访问指定的目标文件 6-1 链接路径每一个文件都有自己的存放位置和路径, 理解一个文件到要链接的那个文件之间的路径关系是创建链接的根本 URL(Uniform Resourc Locator) 中文名字为 " 统一资源定位器 " 指的就是每一个网站都具有的地址同一个网站下的每一个网页都属于同一个地址之下, 在创建一个网站的网页时, 不需要为每一个连接都输入完全的地址, 我们只需要确定当前文档同站点根目录之间的相对路径关系就可以了因此, 链接可以分以下三种 : 绝对路径如 : 相对路径如 :news/index.html 根路径如 :d /web/news/index.html 1 绝对路径绝对路径 : 包含了标识 INTERNET 上的文件所需要的所有信息文件的链接是相对原文档而定的包括完整的协议名称, 主机名称, 文件夹名称和文件名称其格式为 : 通讯协议 :// 服务器地址 : 通讯端口 / 文件位置.../ 文件名 lnternet 遵循一个重要的协议及 HTTP(Hypertext Transfer Protocol) 超文本传输协议,http 是用于传输 Web 页的客户端 / 服务器协议当浏览器发出 Web 页请求时, 此协议将建立一个与服务器的链接. 当链接畅通后, 服务器将找到请求页, 并将它发送给客户端, 信息发送到客户端后,http 将释放此链接. 这使得此协议可以接受并服务大量的客户端请求. Web 应用程序是指 Web 服务器上包含的许多静态的和动态的资源集合.Web 服务器承但着为浏览器提供服务的责任. 就是资源所在的主机名为 : 通常情况下使用默认的端口号 80, 资源在 WWW 服务器主机 web 文件夹下, 资源的名称为 :index.html. 例 : ( 此网址为假设 ) 表明采用 http 从名为的服务器上的目录 myweb 中获得文件 book.htm 2 相对路径相对路经是以当前文件所在路径为起点, 进行相对文件的查找一个相对的 URL 不包括协议和主机地址信息, 表示它的路径与当前文档的访问协议和主机名相同, 甚至有相同的目录路径通常只包含文件夹名和文件名甚至只有文件名可以用相对 URL 指向与源文档位于同一服务器或同文件夹中的文件此时, 浏览器链接的目标文档处在同一服务器或同一文件夹下如果链接到同一目录下, 则只需输入要链接文件的名称要链接到下级目录中的文件只需先输入目录名, 然后加 "/", 再输入文件名要链接到上一级目录中文件, 则先输入 "../", 再输入文件名相对路径的用法

28 herf="../shouey.html" shouey.html 是本地当前目录的上一级子目录下的文件 shouey.html 是本地当前目录的上两 herf="../../shouey.html" 级子目录下的文件 3 根路径 herf="shouey.html" 根路径目录地含义 shouey.html 是本地当前路径下的文址同样可用于创建内部链接, 但相对路径名件大多数情况下, herf="web/shouey.html" 不建议使用此种 shouey.html 是本地当前路径下称做链接形式根路径目录地址的书写也很简单, 首先以一个斜 "web" 子目录下的文件杠开头, 代表根目录, 然后书写文件夹名, 后书写文件名如果根目录要写盘符, 就在盘符后使用 " ", 而不用 ":" 这点与 DOS 的写法不同如 :/web/highight/shouey.html d /web/highight/shouey.html 也许读者会问, 链接本地机器上的文件时, 应该使用相对路径还是根路径? 在绝大多数情况下使用相对路径比较好, 例如, 用绝对路径定义了链接, 当把文件夹改名或者移动之后, 那么所有的链接都要失败, 这样就必须对你的所有 html 文件的链接进行重新编排, 而一旦将此文夹件移到网络服务器上时, 需要重新改动的地方就更多了, 那是一件很麻烦的事情而使用相对路径, 不仅在本地机器环境下适合, 就是上传到网络或其他系统下也不需要进行多少更改就能准确链接 6-2 超链接的应用书签链接链接文档中的特定位置也叫书签链接, 在浏览页面时如果页面很长, 要不断的拖动滚动条给浏览带来不便, 要是浏览者可以从上头阅读到尾, 又可以选择自己感兴趣的部分阅读, 这种效果就可以通过书签链接来实现, 方法是选者一个目标定位点, 用来创建一个定位标记, 用 <a> 标签的属性 name 的值来确定定位标记名 <a > 然后在网页的任何地方建立对这个目标标记的链接 " 标题 ", 在标题上建立的链接地址的名字要和定位标记名相同, 前面还要加上 "#" 号,<a href= "# 定位标记名 "> 单击标题就跳到要访问的内容书签链接可以在同一页面中链接, 也可以在不同页面中链接, 在不同页面中链接的前提是需要指定好链接的页面地址和链接的书签位置格式 : 在同一页面要使用链接的地址 : <a href="# 书签名称 " target=" 窗口名称 "> 超连链标题名称 </a> 在不同页面要使用链接的地址 : <a href="url 地址 # 书签名称 " target=" 窗口名称 "> 超链接标题名称 </a> 链接到的目的地址 :

29 <a name=" 书签名称 "> 目标超链接名称 </a> name 的属性值为该目标定位点的定位标记点名称, 是给特定位置点 ( 这个位置点也叫锚点 ) 起个名称实例 html <HTML> <HEAD> <TITLE> 唐诗欣赏 </TITLE> </HEAD> <BODY> <a ><H2> 唐诗欣赏 </H2></a> <a ><H2> 李白 </H2></a> <A href="#t.2" target="_blank"> 清平調三首 </A><br> <A href="#t.1"> 長干行 </A><br> <A href="#t.3"> 月下獨酌 </A> <HR> <BR><BR> <H3><A > 清平調三首 </A> </H3> 雲想衣裳花想容,<br> 春風拂檻露華濃 <br> 若非群玉山頭見,<br> 會向瑤台月下逢 <br> 一枝紅艷露凝香,<br> 雲雨巫山枉斷腸 <br> 借問漢宮誰得似?<br> 可憐飛燕倚新妝 <br> 名花傾國兩相歡,<br> 常得君王帶笑看 <br> 解釋春風無限恨,<br> 沈香亭北倚闌干 <H3><A > 長干行 </A> </H3> <PRE> 妾髮初覆額,<br> 折花門前劇 <br> 郎騎竹馬來,<br> 遶床弄青梅 <br> 同居長干里,<br> 兩小無嫌猜 <br> 十四為君婦,<br> 羞顏未嘗開 <br> 低頭向暗壁,<br> 千喚不一回 <br> 十五始展眉,<br> 願同塵與灰 <br> 常存抱柱信,<br> 豈上望夫臺 <br> 十六君遠行,<br> 瞿塘灩澦堆 <br> 五月不可觸,<br> 猿鳴天上哀 <br> 門前遲行跡,<br> 一一生綠苔 <br> 苔深不能掃,<br> 落葉秋風早 <br> 八月蝴蝶來, < br > 雙飛西園草 <br> 感此傷妾心,<br> 坐愁紅顏老 <br> 早晚下三巴,<br> 預將書報家 <br> 相迎不道遠, <br> 直至長風沙 </PRE> <A href="#top"> 唐诗欣赏 </a> <BR><BR> <H3><A > 月下獨酌 </A> </H3> <PRE> 花間一壺酒,<br> 獨酌無相親 <br> 舉杯邀明月,<br> 對影成三人 <br> 月既不解飲,<br> 影徒隨我身 <br> 暫伴月將影,<br> 行樂須及春 <br> 我歌月裴回,<br> 我舞影零亂 <br> 醒時同交歡,<br> 醉後各分散 <br> 永結無情遊,<br> 相期邈雲漢 </PRE> <p><a href=" html#libai"> 李白蔑视权贵 </a></p> </BODY>

30 </HTML> 实例 html <title> 李白 </title> <center> <a href=" html#lb"><h1 align="center"><font color="#339933"> 李白 </font></h1></a> <font color="#339933" size="+2"> 李白 (701~762),<br> 字太白, 号青莲居士 <br> 祖籍陇西成纪 ( 今甘肃省天水市附近的秦安县 ),<br> 隋朝末年其先租因罪住在中亚细亚 <br> 李白的家世和出生地至今还是个谜,<br> 学术界说法不一 <br> 一说李白就诞生在安西都护府所辖的碎叶城,<br> 五岁时随父迁到绵州昌隆县青莲乡 <br> <p> 李白性情豪放,<br> 喜爱纵横家的作风,<br> 爱好任侠之事, 轻视财货 <br> 早年在蜀中度过他的父亲是个富商 <br> 李白二十五岁开始漫游全国,<br> 走过湖北, 江西, 河南, 山东等地.<br></p> <p><a > 李白蔑视权贵 </A>,<br> 传说他喝醉酒,<br> 曾在玄宗面前使高力士给他脱靴 <br> 高力士认为这是很大的耻辱,<br> 就摘取李白诗句激怒杨贵妃 <br> 玄宗每次让李白做官, 杨贵妃就加以阻止 < br > 李白知道玄宗的亲信对他有意见,<br> 于是恳求还家 <br> 玄宗赐给他财物, 放他开.<br></p> <p> 李白是我国唐代伟大的浪漫主义诗人,<br> 被誉为诗仙 <br> 他的诗豪迈瑰丽, 诗里有突破现实的幻想 <br> 也有对当时民生疾苦的反映和对政治黑暗的抨击 <br> 他的散文具有清新明朗,<br> 奔放流畅的特点 </p></font></center> </body> 在站点内部建立链接所谓内部链接, 指的是在同一个网站内部, 不同的 html 页面之间的链接关系, 在建立网站内部链接的时候, 要明确哪个是主链接文件 ( 即当前页 ), 哪个是被链接文件在前面介绍链接路径时, 已经给大家介绍了内部链接概念, 内部链接一般采用相对路径链接比较好下面我们根据如图示, 来看看相对路径的具体的链接方法 : 当前页面被链接页面超链接代码在站点内部建立链接 2-1.html 3-1.html 3-1.html 1-1.html <a href="3-1.html"> 超链接元素 </a> <a href="asm/1-1.html"> 超链接元素 </a>

31 sy.html 2-1.html 1-1.html 1-1.html sy.html sy.html <a href="ssm/asm/1-1.html"> 超链接元素 </a> <a href="../sy.html"> 超链接元素 </a> <a href="../../sy.html"> 超链接元素 </a> sy.html 2-1.html <a href="ssm/2-1.html"> 超链接元素 </a> 外部链接所谓外部链接, 指的是跳转到当前网站外部, 与其它网站中页面或其它元素之间的链接关系这种链接的 URL 地址一般要用绝对路径, 要有完整的 URL 地址, 包括协议名, 主机名, 文件所在主机上的的位置的路径以及文件名常用的外部链接格式是 :<a href=" 网址 ">, 还有其他的格式如下表所示 : URL 外链部接格式服务 URL 格式描述 WWW Ftp Telnet Gopher News 地址 " ftp://"" telnet://"" gopher://"" news://"" 进入万维网站点进入文件传输协议启动 Telnet 方式访问一个 gopher 服务器启动新闻讨论组 //"" 启动邮件链接其它站点 : 站点之间的页面和元素的链接是万维网交流信息的关键, 这种链接用 HTTP 协议来建立网站之间的超链接格式 :<A HREF=" 网址 "> 实例 html <HTML> <HEAD> <TITLE> 链接到 </HEAD> <BODY> <CENTER> <h2> 绝对路径链接 </h2> <HR> <A HREF=" title=" 打开新浪首页 "><img src="../../imgelogo(3).gif/"></a><br><br> <A HREF=" 清华大学 </A><BR><BR> <A HREF=" 北京大学 </A><BR><BR>

32 <A HREF=" target=_blank> 上海外国语学院 </A><BR> </CENTER> </BODY> </HTML> 发送在 HTML 页面中, 可以建立链接当浏览者单击链接后, 系统会启动默认的本地邮件服务系统发送邮件基本语法 :<a href="mailto:e-mali 地址 : subject= 邮件主题 "> 描述文字 </a> 在实际应用中, 用户还可以加入另外的两个参数 "?cc="e-mali 地址 " 和 "&body=?", 这分别表示在发送邮件的同时把邮件抄送给第三者和设定邮件主题内容邮件的参数参数 subject cc body 描述电子邮件主题抄送收件人主题内容 bcc 暗送收件人如果希望同时写下多个参数, 则参数之间使用 "&" 分隔符实例 html <title> 发送邮件 </title> <p> <a href="mailto:zhoujr3071@yahoo.com.cn?cc=benbenmao@163.com&subject= 早安 &bcc=a@b.c &Body= 早安, 笨笨猫祝你度过一个快乐的早晨!"> 向笨笨猫的好友发送邮件 ( 抄送笨笨猫 ) </a> </p> </body> 单击 " 向笨笨猫的好友发送邮件 ( 抄送笨笨猫 )" 后打开了系统的邮件服务软件 Outlook Exqress 发送邮件链接 FTP lnternet 上资源丰富, 通过 ftp 文件传输协议, 就可以获得各种免费软件和其他文件,ftp 协议是使计算机与计算机之间能够相互通信的语言,ftp 使文件和文件夹能够在 lnternet 上公开传输, 通过 ftp 可以访问某个网络或服务器, 而不需要该计算机的账户和授权的密码就可通过 ftp 公开获得数据语法格式 :

33 <a href="ftp://ftp 主机地址 "> 文字链接 </a> 实例 : html <title> 链接 ftp 主机 </title> <p> <a href=ftp://ftp.pku.edu.cn> 北京大学 ftp 站点 </a> </p> </body> 图像的超链接图像的超链接图像的链接和文字的链接方法是一样的, 都是用 <a> 标签来完成, 只要将 <img> 标签放在 <a> 和 </a> 只见就可以了用图像链接的图片的上有蓝色的边框, 这个边框颜色也可以在标签中设定实例 : html <title> 使用图像为选取的对象 </title> <p align="center"> </p> <h1 align="center"> 图片的超链接 </h1> <P> <center> <a href=" target="_blank"><img alt=" 搜狐网站 " src="../../imge/logo[1].gif"></a><p> <a href=" alt=" 百度搜索 " src="../../imge/logo[2].gif"></a><p> <a href=" alt=" 新浪网站 " src="../../imge/logo(3).gif"></a> </center> </body> 图像的影像地图超链接在 HTML 中还可以把图片划分成多个热点区域, 每一个热点域链接到不同网页的资源这种效果的实质是把一幅图片划分为不同的热点区域, 再让不同的区域进行超链接这就是影像地图要完成地图区域

34 超链接要用到三种标签 :<img><map><area> 下面分别介绍这些标签的用法 : Map) 标签的使用格式 : 影像地图 (Image <img src=" 图形文件名 " usemap="# 图的名称 ">  <map name=" 图的名称 ">  <area shape= 形状 coords= 区域座标列表 href="url 资源地址 ">... 可根据需要定义多少个热点区域 <area shape= 形状 coords= 区域座标列表 href="url 资源地址 "> </map> 1 shape -- 定义热点形状 shape=rect: 矩形 shape=circle: 圆形 shape=poly: 多边形 2 coords -- 定义区域点的坐标 a. 矩形 : 必须使用四个数字, 前两个数字为左上角座标, 后两个数字为右下角座标例 : <area shape=rect coords=100,50,200,75 href="url"> b. 圆形 : 必须使用三个数字, 前两个数字为圆心的座标, 后一个数字为半径长度例 :<area shape=circle coords=85,155,30 href="url"> c. 任意图形 ( 多边形 ): 将图形之每一转折点座标依序填入例 :<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="url"> 在制作本文介绍的效果时应注意的几点 : 1 在 <img> 标记不要忘记设置 usemap ismap 参数, 且 usemap 的参数值必须与 <map> 标记中的 name 参数值相同, 也就是说, 图像地图名称要一致 ; 2 同一图像地图中的所有热点区域都要在图像地图的范围内, 即所有 <area> 标记均要在 < map > 与 </map> 之间 ;

35 3 在 <area> 标记中的 cords 参数设定的坐标格式要与 shape 参数设定的作用区域形状配套, 避免出现在 shape 参数设置的矩形作用区域, 而在 cords 中设置的却是多边形区域顶点坐标的现象出现实例 html <title> 影像地图 </title> <img src="../../imge/yxlj.jpg" alt=" 影像地图 " hspace="10" align="left" usemap="#yxdt" border="0"> <map name="yxdt"> <area shape="rect" coords="80,69,180,120" href=" target="_blank" alt=" 点击链接到百度搜索 "> <area shape="circle" coords="283,95,45" href=" target="_blank" alt=" 点击链接到新浪网站 "> </map> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p><a href="#" onclick="window.history.back()"> 返回 </a></p> </body>

36 第七章 TABLE 表格表格在网站应用中非常广泛, 可以方便灵活的排版, 很多动态大型网站也都是借助表格排版, 表格可以把相互关联的信息元素集中定位, 使浏览页面的人一目了然. 所以说要制作好网页, 就要学好表格 7-1 定义表格的基本语法在 html 文档中, 表格是通过 <table>,<th>,<tr>,<td> 标签来完成的, 如下表所示 : 表格标记标签描述 <table>...</table> 用于定义一个表格开始和结束 <caption> 定义表格的标题在表格中也可以不用 </caption> 此标签 <th>...</th> 定义表头单元格表格中的文字将以粗体显示, 在表格中也可以不用此标签,< th > 标签必须放在 <tr> 标签内 <tr>...</tr> <td>...</td> 定义一行标签, 一组行标签内可以建立多组由 <td> 或 <th> 标签所定义的单元格定义单元格标签, 一组 <td> 标签将将建立一个单元格,<td> 标签必须放在 < tr > 标签内注 : 在一个基本的表格中, 必须包含一组 <table> 标签, 一组标签 <tr> 和一组 <td> 标签或 <th> 实例 :7-1.html <HEAD> <TITLE> 一个简单的表格 </TITLE> </HEAD> <BODY> <center> <table> < caption > 表格标题 </caption > <tr> <td> 第 1 行中的第 1 列 </td> <td> 第 1 行中的第 2 列 </td> <td> 第 1 行中的第 3 列 </td> </tr> <tr> <td> 第 2 行中的第 1 列 </td>

37 <td> 第 2 行中的第 2 列 </td> <td> 第 2 行中的第 3 列 </td> </tr> </table> </center> </BODY> </HTML> 7-2 表格 <table> 标签属性 7-2(1) 表格 <table> 标签的常用属性表格标签 <table> 有很多属性, 常用的属性有 : <table> 标签的属性属性描述说明 width height align background bgcolor border 表格的宽度表格的高度表格在页面的水平摆放位置表格的背景图片表格的背景颜色表格边框的宽度 ( 以像素为单位 ) bordercolor 表格边框颜色当 border>=1 时起作用 bordercolorlight 表格边框明亮部分的颜色当 border>=1 时起作用 bordercolordark 表格边框昏暗部分的颜色当 border>=1 时起作用 cellspacing cellpadding 单元格之间的间距单元格内容与单元格边界之间的空白距离的大小实例 :7-2-1.html <title> 无标题文档 </title>

38 <table border=10 bordercolor="#006803" align="center" bgcolor="#ddffdd" width=500 height="200"bordercolorlight="#ffffcc" bordercolordark="#660000" background="../../imge/b0024.gif" cellspacing="2" cellpadding="8"> <tr> <td> 第 1 行中的第 1 列 </td> <td> 第 1 行中的第 2 列 </td> <td> 第 1 行中的第 3 列 </td> </tr> <tr> <td> 第 2 行中的第 1 列 </td> <td> 第 2 行中的第 2 列 </td> <td> 第 2 行中的第 3 列 </td> </tr> </table> </body> 7-2(2) 设置分隔线的显示状态 rules 语法格式 :<table rules=" 值 "> 分隔线的显示状态 rules 的值的设定 rules 的值 all groups rows cols none 描述显示所有分隔线只显示组与组的分隔线只显示行与行的分隔线只显示列与列的分隔线所有分隔线都不显示实例 :7-2-3.html <title> 无标题文档 </title> <TABLE border=6 bgcolor="#ffffcc" rules="cols" bordercolor="#9900ff" width="400" height="160" align="center"> <TR> <TH> 姓名 </TH>

39 <TH> 性别 </TH> <TH> 年龄 </TH> <TH> 专业 </TH> </TR> <TR> <TD> 笨笨猫 </TD> <TD> 女 </TD> <TD>99</TD> <TD> 计算机 </TD> </TR> </TABLE><p> <TABLE border=6 bgcolor="#ffffcc" rules="rows" bordercolor="#9900ff" width="400" height="160" align="center"> <TR> <TH> 姓名 </TH> <TH> 性别 </TH> <TH> 年龄 </TH> <TH> 专业 </TH> </TR> <TR> <TD> 笨笨猫 </TD> <TD> 女 </TD> <TD>99</TD> <TD> 计算机 </TD> </TR> </TABLE> </body> 7-2(3) 表格的边框显示状态 frame 表格的边框分别有上边框下边框左边框右边框这四个边框都可以设置为显示或隐藏状态语法格式 :<table frame=" 边框显示值 "> 表格边框显示状态 frame 的值的设定 frame 的值 box void hsides 描述显示整个表格边框不显示表格边框只显示表格的上下边框

40 vsides above below lhs rhs 只显示表格的左右边框只显示表格的上边框只显示表格的下边框只显示表格的左边框只显示表格的右边框实例 :7-2-2.html <HTML> <HEAD> <TITLE> 表格边框的显示状态 </TITLE> </HEAD> <BODY > <TABLE border=6 bgcolor="#ffffcc" frame="hsides" bordercolor="#9900ff" width="400" height="160"> <TR> <TH> 姓名 </TH> <TH> 性别 </TH> <TH> 年龄 </TH> <TH> 专业 </TH> </TR> <TR> <TD> 卡卡 </TD> <TD> 男 </TD> <TD>50</TD> <TD> 计算机 </TD> </TR> </TABLE> </BODY> </HTML> 7-3 表格行的设定表格是按行和列 ( 单元格 ) 组成的, 一个表格有几行组成就要有几个行标签 <tr>, 行标签用它的属性值来修饰, 属性都是可选的 <tr> 标签的属性属性 height 描述行高

41 align valign bgcolor bordercolor bordercolorlight bordercolordark 行内容的水平对齐行内容的垂直对齐行的背景颜色行的边框颜色行的亮边框颜色行的暗边框颜色 <TR> 的参数设定 ( 常用 ): <tr align="right" valign="middle" bgcolor="#0000ff" bordercolor="#ff00ff" bordercolorlight="#808080" bordercolordark="#ff0000"> 实例 :7-3.html <HTML> <HEAD> <TITLE> 表格行的控制 </TITLE> </HEAD> <BODY> <TABLE border=1 align="center" width="80%" height="150"> <TR ALIGN="CENTER"> <TH> 姓名 </TH> <TH> 性别 </TH> <TH> 年龄 </TH> <TH> 专业 </TH> </TR> <TR ALIGN=CENTER bordercolor="#336600" bgcolor="#c1ffc1"> <TD> 咚咚 </TD> <TD> 男 </TD> <TD>18</TD> <TD> 学生 </TD> </tr> <tr align=center height=50 bordercolor=navy bgcolor="#86b8e1" valign=bottom bordercolorlight="#e1f0fd" bordercolordark="#002346"> <TD> 楠楠 </TD> <TD> 女 </TD> <TD>17</TD> <TD> 学生 </TD> </TR> </TABLE> </BODY> </HTML>

42 7-4 单元格的设定 <th> 和 <td> 都是插入单元格的标签, 这两个标签必须嵌套在 <tr> 标签内是成对出现的 <th> 用于表头标签, 表头标签一般位于首行或首列, 标签之间的内容就是位于该单元格内的标题内容, 其中的文字以粗体居中显示数据标签 <td> 就是该单元格中的具体数据内容,<th> 和 <td> 标签的属性都是一样的, 属性设定如下 : <th> 和 <td> 的属性属性 width/height colspan rowspan align valign bgcolor bordercolor 描述单元格的宽和高, 接受绝对值 ( 如 80) 及相对值 ( 如 80%) 单元格向右打通的栏数单元格向下打通的列数单元格内字画等的摆放贴, 位置 ( 水平 ), 可选值为 : left, center, right 单元格内字画等的摆放贴位置 ( 垂直 ), 可选值为 : top, middle, bottom 单元格的底色单元格边框颜色 bordercolorlight 单元格边框向光部分的颜色 bordercolordark 单元格边框背光部分的颜色 background 单元格背景图片 <td nowrap> 禁止单元格内容自动换行 TD 元素 nowrap 属性的行为与 TD 元素的 width 属性有关, 在设置了 table 元素的 nowrap width 后 : 如未设置 TD 宽度, 则 nowrap 属性起作用 ; 如设置了 TD 宽度, 则 nowrap 属性不起作用注 : 如果不设置 table 元素的 width 属性, nowrap 不起作用 <TD> 的参数设定格式 :

43 例如 : <td width="48%" height="400" colspan="5" rowspan="4" align="right" valign="bottom" bgcolor="#ff00ff" bordercolor="#808080" bordercolorlight="#ff0000" bordercolordark="#00ff00" background="myweb.gif"> 实例 :7-4(1).html <HTML> <HEAD> <TITLE> 单元格的设定 </TITLE> </HEAD> <BODY> <TABLE border=1 align="center" height="150" width="80%"> <TR> <TH width=70 bgcolor="#ffcc00"> 姓名 </TH> <TH bgcolor="#ffccff"> 性别 </TH> <TH background="../../imge/b0024.gif"> 年龄 </TH> <TH background="../../imge/aki-5.gif"> 专业 </TH> </TR> <TR> <TD bordercolor=red align="left"> 笨笨猫 </TD> <TD bordercolorlight="#ffccff" bordercolordark="#ff0000" align="center"> 女 </TD> <TD bgcolor="#ffffcc" valign="bottom" align="center">18</td> <TD bgcolor="#ccffff" align="right"> 学生 </TD> </TR> </TABLE> </BODY> </HTML> 实例 :7-4(2).html <title>wrap 属性研究 </title> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <body bgcolor="#ffffff" text="#000000"> <p> 测试字符串 :</p> <p> 我终于明白, 我其实有一条韧性十足的命, 它远比我想象中的那条命结实得多耐磨的多 </p> <p> 单元格未设置 nowrap 属性的空表 :</p> <table width="100" border="1" cellspacing="0" cellpadding="0"> <tr> <td> </td> </tr> </table>

44 <p> 加入测试字符串 :</p> <table width="100" border="1" cellspacing="0" cellpadding="0"> <tr> <td> 我终于明白, 我其实有一条韧性十足的命, 它远比我想象中的那条命结实得多耐磨的多 </td> </tr> </table> <p> 单元格设置了 nowrap 属性, 未设置 width 属性 :</p> <table width="100" border="1" cellspacing="0" cellpadding="0"> <tr> <td nowrap> 我终于明白, 我其实有一条韧性十足的命, 它远比我想象中的那条命结实得多耐磨的多 </td> </tr> </table> <p> 单元格设置了 nowrap 属性, 也设置了 width 属性 :</p> <table width="200" border="1" cellspacing="0" cellpadding="0"> <tr> <td width="120" nowrap> 我终于明白, 我其实有一条韧性十足的命, 它远比我想象中的那条命结实得多耐磨的多 </td> <td> </td> </tr> </table> </body> 7-5 设定跨多行多列单元格要创建跨多行多列的单元格, 只需在 <TH> 或 <TD> 中加入 ROWSPAN 或 COLSPAN 属性的属性值, 默认值为 1 表明了表格中要跨越的行或列的个数跨多列的语法 : <th colspan=#> <td colspan=#> colspan 表示跨越的列数, 例如 colspan=2 表示这一格的宽度为两个列的宽度跨多行的语法 : <th rowspan=#> <td rowspan=#> rowspan 所要表示的意义是指跨越的行数, 例如 rowspan=2 就表示这一格跨越表格两个行的高度实例 :7-5.html

45 <title> 跨多行跨多列的单元格 </title> <center> <table border=10 width=80% align="center" height="150" background="../../imge/b0024.gif" bordercolorlight="#9999ff" bordercolordark="#9900cc"> <TR ALIGN=center> <TH colspan=3> 学生基本信息 </TH> <TH colspan=2> 成绩 </TH> </TR> <TR ALIGN=center> <TH> 姓名 </TH> <TH> 性别 </TH> <TH> 专业 </TH> <TH> 课程 </TH> <TH> 分数 </TH> </TR> <TR ALIGN=center> <TD> 咚咚 </TD> <TD> 男 </TD> <TD rowspan=2> 计算机 </TD><TD rowspan=2> 程序设计 </TD> <TD>68</TD> </TR> <TR ALIGN=center> <TD> 喃喃 </TD> <TD> 女 </TD> <TD>89</TD> </TR> </table> </body> 7-6 表格的分组表格的行分组 <thead>/<tbody>/<tfoot>

46 html 文档的表格按行分组是由表头标签 <thead> 表格主体标签 <tbody> 和尾注标签 <tfoot> 三个部分组成的其中尾注标签很少用 <thead> 标签是成对标签, 其标签内是由表头标签标识的表头元素 <tbody> 标签用于规定表格主体部分的元素, 可出现多次 <thead> 和 <tbody> 标签的属性和 <th><td> 标签是一样的实例 :7-6-1.html <title> 表格按行分组 </title> <center> <table border=3 width=60% align="center" height="150"> <thead bgcolor="#ccffcc"> <TR ALIGN=center> <TH> 姓名 </TH> <TH> 性别 </TH> <TH> 专业 </TH> </TR> </thead> <tbody bgcolor="#448fbd"> <TR ALIGN=center> <TD> 咚咚 </TD><TD> 男 </TD><TD> 计算机 </TD> </TR> <TR ALIGN=center> <TD> 喃喃 </TD><TD> 女 </TD><TD> 园林 </TD> </TR> </tbody> </table> </body> 表格按列分组 <colgroup> html 使用 <colgroup> 标签来将表格分组语法格式 : <colgroup span=" 数值 " align=" 参数 "> 说明 :<colgroup> 标签有两个属性,span 和 align, 他们都是可选的 span 属性的值是数字, 表示该组包含的列数, 默认值为 1 align 属性用以规定该组所跨列中所有单元格中内容在水平方向上的位置该属性的值为 left,center,right 之一它们表示单元格的内容是左对齐, 水平居中还是右对齐实例 : html

47 <title> 表格按列分组 </title> <center> <table border=10 width=80% height="160" align="center" bordercolorlight="#ccccff" bordercolordark="#9900ff"> <tr> <th> 姓名 </th><th> 性别 </th><th> 专业 </th><th> 分数 </th> </tr> <colgroup span=2 align=center> <colgroup align =left> <colgroup align=right> <tr> <td> 咚咚 </td><td> 男 </td><td> 计算机 </td><td>79</td> </tr> <tr> <td> 喃喃 </td><td> 女 </td><td> 园林 </td><td>90</td> </tr> <tr> <td> 依依 </td><td> 女 </td><td> 微波通信 </td><td>76<td> </tr> </table> </body> 表格的行列分组实例 :7-6-3.html <HTML> <HEAD> <TITLE> 同时进行行列分组 </TITLE> </HEAD> <BODY> <CENTER> <TABLE BORDER=10 WIDTH=80% height="200" align="center" bordercolor="#9900ff"> <COLGROUP SPAN=2 ALIGN=CENTER> <COLGROUP ALIGN=LEFT> <COLGROUP ALIGN=RIGHT> <THEAD bgcolor="#ffffcc"> <TR><TH> 姓名 </TH><TH> 性别 </TH><TH> 专业 </TH><TH> 分数 </TH>

48 <TR> </THEAD> <TBODY bgcolor="#ffccff"> <TR> <TD> 咚咚 </TD><TD> 男 </TD><TD> 计算机 </TD><TD>85</TD> </TR> <TR> <TD> 喃喃 </TD><TD> 女 </TD><TD> 园林 </TD><TD>94</TD> </TR> <TR> <TD> 依依 </TD><TD> 女 </TD><TD> 微波通信 </TD><TD>87</TD> </TR> </TBODY> </TABLE> </BODY> </HTML> 7-7 表格的标题标签 <caption> 表格标题的位置, 可由 ALIGN 属性和 VALIGN 属性来设置,ALIGN 属性设置标题位于文档的左, 中, 右 VALIGN 属性设置标题位于表格的上方和表格的下方下面为表格标题位置的设置格式语法格式 : <caption align=" 值 " valign=" 值 " > 表哥标题 </caption> <caption> 应放在 <table> 标签内, 在表格行标签 <tr> 标签之前 <caption> 标签的默认属性是标题位于表格的上方中间位置实例 :7-7.html <title> 表格的标题标签 </title> <center> <table border=10 width=80% align="center" height="150" background="../../imge/b0024.gif" bordercolorlight="#9999ff" bordercolordark="#9900cc"> <caption> 学生信息表 </caption> <TR ALIGN=center> <TH colspan=3> 学生基本信息 </TH> <TH colspan=2> 成绩 </TH> </TR>

49 <TR ALIGN=center> <TH> 姓名 </TH> <TH> 性别 </TH> <TH> 专业 </TH> <TH> 课程 </TH> <TH> 分数 </TH> </TR> <TR ALIGN=center> <TD> 咚咚 </TD> <TD> 男 </TD> <TD rowspan=2> 计算机 </TD><TD rowspan=2> 程序设计 </TD> <TD>68</TD> </TR> <TR ALIGN=center> <TD> 喃喃 </TD> <TD> 女 </TD> <TD>89</TD> </TR> </body> 7-8 表格的嵌套在 html 页面中, 使用表格排版是通过嵌套来完成的, 即一个表格内部可以嵌套另一个表格, 用表格来排版页面的思路是 : 由总表格规划整体的结构, 由嵌套的表格负责各个子栏目的排版, 并插入到表格的相应位置, 这样就可以使页面的各个部分有条不紊, 互不冲突, 看上去清晰整洁在实际做网页时一般不显示边框, 边框的显示可根据自己的爱好来设定在实例中为了让大家能够看清楚, 都设置了有边框实例 7-8.html <title> 表格嵌套 </title> <body bgcolor="#555555" text="#ffffff"> <table width="560" border="3" cellspacing="1" cellpadding="1" align="center"> <tr> <td width="100" height="69"> 网页标志 </td> <td colspan="2"><div align="center"> 广告条 </div></td> </tr> <tr>

50 <td height="330"> <table width="100" height="321" border="3" align="center" cellpadding="1" cellspacing="1"> <tr> <td> 标题栏 </td> </tr> <tr> <td> 标题栏 </td> </tr> <tr> <td> 标题栏 </td> </tr> <tr> <td> 标题栏 </td> </tr> <tr> <td> 标题栏 </td> </tr> <tr> <td> 标题栏 </td> </tr> <tr> <td> 标题栏 </td> </tr> <tr> <td> 标题栏 </td> </tr> <tr> <td> 标题栏 </td> </tr> <tr> <td height="90"> 内容六 </td> </tr> </table> </td> <td width="275"> <table width="275" height="325" border="3" cellpadding="1" cellspacing="1"> <tr> <td width="263"> 内容一 </td> </tr> <tr> <td> 内容二 </td>

51 </tr> </table> </td> <td width="163"> <table width="157" height="320" border="3" cellpadding="1" cellspacing="1" align="center"> <tr> <td width="136" height="94"> 内容三 </td> </tr> <tr> <td height="62"> 内容四 </td> </tr> <tr> <td height="160"> 内容五 </td> </tr> </table> </td> </tr> </table> </body> 第八章网页的动态多媒体效果在网页的设计过程中, 动态效果的插入, 会使网页更加生动灵活丰富多彩 8-1 滚动字幕 <marquee> <marquee> 标签可以实现元素在网页中移动的效果, 以达到动感十足的视觉效果 <marquee> 标签是一个成对的标签应用格式为 : <marquee>...</marquee> <marquee> 标签有很多属性, 用来定义元素的移动方式 : <marquee> 的属性属性 align bgcolor 描述指定对齐方式 top,middle,bottom 设定文字卷动范围的背景颜色

52 loop height width 设定文字卷动次数, 其值可以是正整数或 infinite 表示无限次默认为无限循环设定字幕高度设定字幕宽度 scrollamount 指定每次移动的速度, 数值越大速度越快 scrolldelay hspace vspace direction 文字每一次滚动的停顿时间, 单位是毫秒时间越短滚动越快指定字幕左右空白区域的大小指定字幕上下空白区域的大小设定文字的卷动方向,left 表示向左,right 表示向右,up 表示往上滚动 behavior 指定移动方式,scroll 表示滚动播出,slibe 表示滚动到一方后停止,alternate 表示滚动到一方后向相反方向滚动 8-1 实例 h8-1.html <center> <font face=" 字体 2" size=6 color="#ff0000"> 滚动字幕 </font><br> <marquee> 啦啦啦 ~~~ 我会跑了 </marquee> <p> <marquee height="200" direction="up" hspace="200"> 啦啦啦 ~~~ 我会往上跑了 <br> 啦啦啦 ~~~ 我会往上跑了 </marquee> <p> <marquee direction="right"> 啦啦啦 ~~~ 我会往右跑了 </marquee> <p> <marquee height="200" direction="down"><center> 啦啦啦 ~~~ 我会往下跑了 </center></marquee> <p> <marquee width="500" behavior="alternate"> 啦啦啦 ~~~ 我来回的跑 </marquee> <p> <marquee behavior="slide"> 啦啦啦 ~~~ 我跑到目的地就该休息了 </marquee> <P> <marquee scrollamount="2"> 啦啦啦 ~~~ 我累了, 要慢慢的溜达 </marquee> <P>

53 <marquee scrolldelay="300"> 啦啦啦 ~~~ 我累了, 我要走走停停 </marquee> <p> <marquee scrollamount="20"> 哈哈 ~ 都没有我跑得快 </marquee> <p> <marquee><img src="../../imge/6-2.jpg"> 啦啦啦 ~~ 图片也可以啊 </marquee> <p> <marquee bgcolor="#ffffcc" width="700" vspace="30"><font size="+3" color="#ff0000"> 啦啦啦 ~~ 滚动文字有背景了 </font></marquee> </center> </body> 8-2 插入多媒体文件在网页中可以用 <embed> 标签将多媒体文件插入, 比如可以插入音乐和视频等用浏览器可以播放的音乐格式有 :MIDI 音乐 WAV 音乐 mp3 AIFF AU 格式等另外在利用网络下载的各种音乐格式中, MP3 是压缩率高, 音质好的文件格式但要说明一点, 虽然我们用代码标签插入了多媒体文件, 但 IE 浏览器通常能自动播放某些格式的声音与影像, 但具体能播放什么样格式的文件. 取决于所用计算机的类型以及浏览器的配置. 浏览器使用 Hn7 或 n7 协议获取多媒体文件,( 可能得花很长时间, 因为多媒体文件通常比较大 ), 浏览器既就决定如何播放通常是调用称为括件的内置程序来播放的事实上. 浏览器仅仅能显示几种文件格式是括件扩展了浏览器的能力. 有许多种不同的括件程序, 每种都能赋予浏览器一种新的能力有时, 不得不分别下栽每个浏览器的多媒体插什程序. 系统小化的安装一般不包括声音与影像播放器另外在播放影音文件时, 若是使用一小部分窗口播放, 大多数的计算机还比较快若是全屏幕播放. 就需要专用的硬件或是性能好的计算机. 对于 IE, 若无预先安装好的插件程序, 它会提示你或是打开文件或是保存文件或是取消下载若打开未知类型的文件, 浏览器会试图使用外部的应用程序显示此文件. 但这要取决于操作系统的配置 <embed> 标签的使用格式 : <EMBED SRC=" 音乐文件地址 "> 常用属性如下 : SRC="FILENAME" AUTOSTART=TRUE/FALSE LOOP=TRUE/FALSE 设定音乐文件的路径是否要音乐文件传送完就自动播放,TRUE 是要,FALSE 是不要, 默认为 FALSE 设定播放重复次数,LOOP=6 表示重复 6 次,TRUE 表示无限次播放, FALSE 播放一次即停止设定乐曲的开始播放时间, 如 20 STARTIME=" 分 : 秒 " 秒后播放写为 STARTIME=00:20 VOLUME=0-100 设定音量的大小如果没设定的话, 就用系统的音量

54 WIDTH HEIGHT HIDDEN=TRUE 设定播放控件面板的大小隐藏播放控件面板 CONTROLS=CONSOLE/SMALLCONSOLE 设定播放控件面板的样子实例 h8-2-1.html <HTML> <HEAD> <TITLE> 插入多媒体文件 </TITLE> </HEAD> <H2 ALIGN="CENTER"> 网页中的多媒体 </H2> <HR> <center> <embed src="../../imge/ 一千零一夜.mid" height=150 width=400 loop="false"> </center> </BODY> </HTML> 实例 h8-2-2.html <HTML> <HEAD> <TITLE> 插入多媒体文件 </TITLE> </HEAD> <H2 ALIGN="CENTER"> 网页中的多媒体 </H2> <HR> <center> <embed src="../../imge/mmm.avi" width="400" height="500" loop="false"> </center> </BODY> </HTML> 实例 h8-2-3.html <HTML> <HEAD> <TITLE> 插入 flash</title> </HEAD> <H2 ALIGN="CENTER"> 网页中的多媒体 </H2> <HR> <center> <embed src="../../imge/023.swf" height="500" width="550"> <embed src="../../imge/023.swf" height="500" width="550" wmode="transparent"><!- 插入透明 flash-->

55 </center> </BODY> </HTML> 实例 h8-2-4.html <title> 在图片上插入透明 flash</title> <body bgcolor=lightblue> <br><center> 在图片上插入透明 Flash 动画 </center><br> <center><table cellspacing=2 cellpadding=2 border=10 bordercolorlight="#00cc99" bordercolordark="#009933" background="../../imge/hai.jpg"><tbody><td><embed src="../../imge/016.swf" width=630 height=480 type=application/x-shockwave-flash quality="high" wmode="transparent"></embed></td></tbody></table></center> </body> 注意长和宽的设定要根据图片的实际大小来设定 8-3 嵌入多媒体文件除了可以使用上述方法插入多媒体文件外, 还可以在网页中嵌入多媒体文件, 这种方式将不调用媒体播放器嵌入背景音乐 <bgsound> 标签用来设置网页的背景音乐但只适用於 IE, 其参数设定不多格式如下 : <BGSOUND src="your.mid" autostart=true loop=infinite> src="your.mid" 设定 midi 档案及路径, 可以是相对或绝对声音文件可以是 wav,midi,mp3 等类型的文件 autostart=true 是否在音乐档传完之後, 就自动播放音乐 true 是,false 否 ( 内定值 ) loop=infinite 是否自动反覆播放 LOOP=2 表示重复两次,Infinite 表示重复多次直到网页关闭为止实 <HEAD> 例 html <HTML> <TITLE> 背景声音 </TITLE> </HEAD> <H4 ALIGN="CENTER" > 网页的背景声音 <H4> <HR> <bgsound src="../../imge/ 小三和弦.mp3" LOOP="3"> </BODY> </HTML> 背景音乐可以放在 </body> 或之间

56 8-3-2 在网页中嵌入视屏文件使用前面学过的标签 <img src=" 路径 ">, 在此就不重述了 8-4 点播音乐将音乐做成一个链接, 只需用鼠标在上面单击, 就可以听到动人的音乐了, 这样做的方法很简单 : <A HREF=" 音乐地址 "> 乐曲名 </A> 例如 : 播放一段 MIDI 音乐 : <A HREF="imge/ 一千零一夜.mid">MIDI 音乐 </A> MIDI 音乐播放一段 AU 格式音乐 : <A HREF="imge/ 小三和弦.mp3"> 小三和弦 -mp3 音乐 </A> 小三和弦 -mp3 音乐把我们喜欢的音乐收集起来, 作成一个音乐库, 随时都可以让自己和别人徜徉在音乐的海洋中, 已经有人这样做了, 你一定已经遇到很多, 而且自己也可以试着去做了! 第九章多视窗口框架 9-1 框架的含义和基本构成框架就是把一个浏览器窗口划分为若干个小窗口, 每个窗口可以显示不同的 URL 网页使用框架可以非常方便的在浏览器中同时浏览不同的页面效果, 也可以非常方便的完成导航工作而所有的框架标记要放在一个 html 文档中 html 页面的文档体标签被框架集标签 <frameset> 所取代, 然后通过 <frameset> 的子窗口标签 <frame> 定义每一个子窗口和子窗口的页面属性语法格式 : <frameset> <frame src="url 地址 1"> <frame src="url 地址 2">... <frameset> Frame 子框架的 src 属性的每个 URL 值指定了一个 html 文件 ( 这个文件必须事先做好 ) 地址, 地址路径可使用绝对路径或相对路径, 这个文件将载入相应的窗口中框架结构可以根据框架集标签 <frameset> 的分割属性分为 3 种 : 1. 左右分割窗口 2. 上下分割窗口 3. 嵌套分割窗口

57 9-2 框架集 <frameset> 控制 <frameset> 的属性属性描述 border 设置边框粗细, 默认是 5 象素. bordercolor frameborder cols rows framespacing="5" noresize 设置边框颜色指定是否显示边框 :"0" 代表不显示边框,"1" 代表显示边框用 " 象素数 " 和 "%" 分割左右窗口,"*" 表示剩余部分用 " 象素数 " 和 "%" 分割上下窗口,"*" 表示剩余部分表示框架与框架间的保留空白的距离设定框架不能够调节, 只要设定了前面的, 后面的将继承 1. 左右分割窗口属性 :cols 如果想要在水平方向将浏览器分割多个窗口, 这需要使用到框架集的左右分割窗口属性 cols. 分割几个窗口其 cols 的值就有几个, 值的定义为宽度, 可以是数字 ( 单位为像素 ), 也可以是百分比和剩余值各值之间用逗号分开其中剩余值用 "*" 号表示, 剩余值表示所有窗口设定之后的剩余部分, 当 "*" 只出现一次时, 表示该子窗口的大小将根据浏览器窗口的大小自动调整, 当 "*" 出现一次以上时, 表示按比例分割剩余的窗口空间 cols 的默认值为一个窗口如 : <frameset cols="40%,2*,*"> 将窗口分为 40%,40%,20% <frameset cols="100,200,*"> <frameset cols="100,*,*"> <frameset cols="*,*,*"> 将 100 像素以外的窗口平均分配将窗口分为三等份 2. 上下分割窗口属性 :rows 上下分割窗口的属性设置和左右窗口的属性设定是一样的, 参照上面所述就可以了 9-3 子窗口 <frame> 标签的设定 <frame> 是个单标签,<frame> 标签要放在框架集 frameset 中,<frameset> 设置了几个子窗口就必须对应几个 <frame> 标签, 而且每一个 <frame> 标签内还必须设定一个网页文件 (src="*.html", 其常用属性有 : <frame> 常用属性属性 src bordercolor 描述指示加载的 url 文件的地址设置边框颜色 frameborder 指示是否要边框,1 显示边框,0 不显示 ( 不提倡用 yes 或 no) border 设置边框粗细

58 name 指示框架名称, 是连结标记的 target 所要的参数 noresize 指示不能调整窗口的大小, 省略此项时就可调整, scorlling 指示是否要滚动条,auto 根据需要自动出现,Yes 有,No 无 marginwidth 设置内容与窗口左右边缘的距离, 默认为 1 marginheight 设置内容与窗口上下边缘的边距, 默认为 1 width align 框窗的宽及高默认为 width="100" height="100" 可选值为 left, right, top, middle, bottom 子窗口的排列遵循从左到右, 从上到下的次序规则一窗口的左右设定 : 实例一 sl9-1.html 首先我们新建一个文件夹, 然后做四个要放到子窗口中的页面,sl1.html sl2.html sl3.html sl4.html <frameset rows="20%,2*,*" framespacing="1" frameborder="yes" border="1" bordercolor="#ff00ff"> <frame src="sl1.html"> <frame src="sl2.html"> <frame src="sl3.html"> </frameset><noframes></noframes> 二窗口的上下设定实例二 sl9-2.html <frameset rows="20%,*,200" framespacing="1" frameborder="yes" border="1" bordercolor="#ff00ff"> <frame src="sl1.html"> <frame src="sl2.html"> <frame src="sl3.html" noresize="noresize"> </frameset><noframes></noframes> 三窗口的嵌套设定实例三 sl9-3.html <frameset cols="20%,*" framespacing="1" frameborder="yes" border="1" bordercolor="#ff00ff">

59 <frame src="sl1.html"> <frameset rows="300,500"framespacing="1" frameborder="yes" border="1" bordercolor="#ff00ff"> <frame src="sl2.html"> <frame src="sl3.html"> </frameset> </frameset><noframes></noframes> 实例四 sl9-4.html <frameset rows="20%,*" framespacing="1" frameborder="yes" border="1" bordercolor="#ff00ff"> <frame src="sl1.html"> <frameset cols="20%,*"framespacing="1" frameborder="yes" border="1" bordercolor="#ff00ff"> <frame src="sl2.html"> <frame src="sl3.html"> </frameset> </frameset><noframes></noframes> 实例五 sl9-5.html <frameset rows="20%,*,15%" framespacing="1" frameborder="yes" border="1" bordercolor="#ff00ff"> <frame src="sl1.html"> <frameset cols="20%,*"framespacing="1" frameborder="yes" border="1" bordercolor="#ff00ff"> <frame src="sl2.html"> <frame src="sl3.html"> </frameset> <frame src="sl4.html"> </frameset><noframes></noframes> 大家看到上面的文件中还有一对 <noframes></noframes> 标签, 即使在做框架集网页时没有这对标签, 文件在很多浏览器解析时也会自动生成 <noframes> 标签, 这对标签的作用是当浏览者使用的浏览器太旧, 不支援框架这个功能时, 他看到的将会是一片空白为了避免这种情况, 可使用 <NOFRAMES> 这个标记, 当使用的浏览器看不到框架时, 他就会看到 <NOFRAMES> 你的浏览器不支持框架网页 </NOFRAMES> 之间的内容, 而不是一片空白这些内容可以是提醒浏览转用新的浏览器的字句, 甚至是一个没有框架的网页或能自动切换至没有框架的版本 9-4 窗口的名称和链接

60 如果在窗口中要做链接, 就必须对每一个子窗口命名, 以便于被用于窗口间的链接, 窗口命名要有一定的规则, 名称必须是单个英文单词, 允许使用下滑线, 但不允许使用 " "," 句点 " 和空格等, 名称必须以字母开头, 不能使用数字, 还不能使用网页脚本中保留的关键字, 在窗口的链接中还要用到一个新的属性 "targe", 用这个属性就可以将被链接的内容放置到想要放置的窗口内下面的实例就是窗口内的命名和链接方法为 : 文件一中的片断代码格式 <a href="sl1.html" target="aa2"> 爱在深秋 </a> <a href="sl2.html" target="aa3"> 图像对文字的水平居中 </a> <a href="sl3.html" target="aa2"> 图像与文本之间的距离 </a> <a href="sl4.html" target="aa3"> 图像大小的设定 </a> <a href=" target="aa3"> 新浪网站 </a> 文件二的片断代码格式为 : <frame src="ml.html" name="aa1"> <frame src="sl1.html" name="aa3"> <frame src="sl2.html" name="aa2" noresize="noresize"> 文件一 : ml.html <title> 无标题文档 </title> <center> <h2> 目录 </h2> <hr> <p><a href="sl1.html" target="aa2"> 爱在深秋 </a></p> <p><a href="sl2.html" target="aa3"> 图像对文字的水平居中 </a></p> <p><a href="sl3.html" target="aa2"> 图像与文本之间的距离 </a></p> <p><a href="sl4.html" target="aa3"> 图像大小的设定 </a></p> <p><a href=" target="aa3"> 新浪网站 </a></p> </center> </body> 文件二 : sl94.html <frameset cols="20%,*,200" framespacing="1" frameborder="yes" border="1" bordercolor="#99ccff"> <frame src="ml.html" name="aa1"> <frame src="sl1.html" name="aa3"> <frame src="sl2.html" name="aa2" noresize="noresize">

61 </frameset><noframes></noframes> 9-5 浮动窗口 <iframe> <iframe> 这标记只适用於 IE 浏览器它的作用是在浏览器窗口中可以嵌入一个框窗以显示另一个文件它是一个围堵标记, 但围著的字句只有在浏览器不支援 iframe 标记时才会显示, 如 <noframes> 一样, 可以放些提醒字句之类通常 iframe 配合一个辨认浏览器的 Java Script 会较好, 若 JavaScript 认出该浏览器并非 Internet Explorer 便会切换至另一版本 <iframe> 的参数设定格式 : <iframe src="iframe.html" name="test" align="middle" width="300" height="100" marginwidth="1" marginheight="1" frameborder="1" scrolling="yes"> <iframe> 属性的含义属性 src 含义浮动窗框中的要显示的页面文件的路径, 可以是相对或绝对 name 此框窗名称, 这是连结标记的 target 参数所要的, align height width marginwidth 可选值为 left, right, top, middle, bottom, 作用不大框窗的高, 以 pixels 为单位框窗的宽, 以 pixels 为单位该插入的文件与框边所保留的空间 marginheight 该插入的文件与框边所保留的空间 sl95.html frameborder scrolling 使用 1 表示显示边框, 0 则不显示 ( 可以是 yes 或 no) 使用 Yes 表示容许卷动 ( 内定 ), No 则不容许卷动 <title> 浮动框架 </title> <body bgcolor="#e1ffe1"> <center> <iframe src="ml1.html" name="aa" width="600" height="400" marginwidth="30" marginheight="20" align="middle" allowtransparency="true"> 这是一个浮动窗口 </iframe> <p><a href="sl1.html" target="aa"> 爱在深秋 </a></p> <p><a href="sl2.html" target="aa"> 图像对文字的水平居中 </a></p>

展开

A-1 HTML A-1-1 HTML 1 HTML JSP HTML HTML HTML JSP A HTML HTML HTML HTML HTML HTML HTML HTML.htm.html HTML Windows NotePad HTML IE [ / ] NotePad A-2

HTML A-1 HTML A-2 A-2 HTML A-8 A-3 A-14 A-4 A-26 A-5 A-30 A-6 A-42 A-1 HTML A-1-1 HTML 1 HTML JSP HTML HTML HTML JSP A HTML HTML HTML HTML HTML HTML HTML HTML.htm.html HTML Windows NotePad HTML IE [ /