[转帖]HTML教程

仁武君 · 发表于 2005-4-5 21:50:51

第一章初识HTML 现在的网页设计软件很多，如Dreamweaver、Frontpag等软件都可以用来设计网页，但要想制作出好的网页，仅靠这些是远远不够的。以上两种软件都是自己产生HTML代码，有时那些自己产生的代码会有一些错误，这就需要你亲自去通过HTML修改，如果你不懂HTML，当你打开一个网页的源文件是就会一片茫然。只有当你懂的了HTML，修改起来才会得心应手。 要想成为一个专业的网页设计师仅凭这一点是远远不够的，你要会Photoshop、Fireworks等图象处理软件以及动画制作软件Flash，还要懂几门脚本语言如JavaScript，数据库、ASP、PHP等等，再加上一定的艺术天赋，您一帝国内会成为一个优秀的网页设计师的。 好了，言归正传，我们还是从最简单、最基本的学起，下面我们就开始学习HTML。 1、什么是HTML HTML(HyperText Markup Language)是随着网络普及越来越常用的概念，它的全程是“超文本标识语言”，这是一中种驱动World Wide Web的新型语言。Web页都是用专门的语言---HTML建立的。这种标识语言定义了一系列的标识，每个标识表示一定的意义。我们只要利用这样的标识，就可以按照特定的方式，也就是我们希望的方式，将网页中的数字、文字和图象加以组织，形成个有自己风格而又有一定统一性的网页。 HTML和传统的计算机语言很不相同。严格地说，他并不是一种编程语言，不需要对HTML语言的文件进行便编译和连接，因此由HTML语言写的东西更多的像文档，而不像程序，理解这一点十分重要。不妨这样理解这个过程： (1)写出HTML文件。 (2)用浏览器装载HTML文件。 (3) 浏览器“读”HTML文件时，如果遇到标识，就按照标识的意义来显示它的文本或图形。 好了，我们还是先来举个例子吧，请看下列一段代码： <html> <head> <title>这一个简单HTML的例子</title> </head> <body> <h1>你好，欢迎来到温馨家园！</h1> <img src="TV1.GIF"> <a href="mailtjq_1979@sohu.com">给我写信！</a> </body> </html> 打开记事本，将以上文字复制其上，然后保存。保存时要把保存类型改为所有文件。然后输入一个文件名(如visn.htm或visn.html)，注意，一定要带上扩展名.htm或.html，如下图： 然后单击保存，打开即的得下图： 这个例子运行结果简单单调，但是他的HTML语言源文件却十分典型和简单。你应当注意到以下几点： 每个标识都被包含在尖括号中。 标识一般是成对出现的，后面的个加有斜杠，这表示结束之前的同名设置，例如<title>和</title> 在上面的例子中我们使用了张图片，这个语句：<img src="TV1.GIF">，注意： "TV1.GIF"是路径，本例中所指的该图片和该网页在一个根目录下，如果该图片在一个名为visn的文件夹中，该文件夹和该网页在同一个根目录下该语句要该为：<img src="Visn/TV1.GIF">。否则图片处只显示一个叉号。 <a href="mailtjq_1979@sohu.com">给我写信！</a>表示一个链接，这个链接和一般的链接不大一样。一般链接"mailtjq_1979@sohu.com"是一个以http开头的URL，这个例子中的协议是mailto，这表示我们用普通的E-mail的协议发送邮件。 HTML是如此的简单，却能完成几乎所有的我们希望能在网页中完成的工作。HTML是WWW 中所必需的，也Interent中所必需的。

饶城网络 · 发表于 2005-4-17 13:27:05

显示全部楼层 · 发表于 2005-4-19 20:46:38

提示: 作者被禁止或删除内容自动屏蔽

显示全部楼层 · 发表于 2005-4-19 20:50:18

提示: 作者被禁止或删除内容自动屏蔽

显示全部楼层 · 发表于 2005-4-19 20:59:12

提示: 作者被禁止或删除内容自动屏蔽

仁武君 · 发表于 2005-4-5 21:52:07

第二章 HTML的页面结构 1、HTML的结构安排 通过上一章的例子，对HTML有了初步的认识，上一章的例子虽然简单 但它包含了一张网页中所有的必要元素。HTML的标识是用尖括号括起 的，并且一般都是成对出现的。开头的标识是用尖括号括起的，结尾在 括起的标识前要加一个斜杠，如<html>……</html>，而这对表示中间所夹带 的省略号就是网页的内容。 网页中包含可见部分和不可见部分，即主体(<body>……</body>)和 头部(<head>……</head>)。头部主要是网页的说明部分，如标题，标题 是用<title>……</title>括起的。而网页的那两部分都包含在<html>……</html>中间。 下面我们还是先来学习一下: (1)<body bgcolor=# text=# link=# alink=# vlink=#> bgcolor --- 背景色彩 text ------ 非可链接文字的色彩 link ------ 可链接文字的色彩 alink ----- 正被点击的可链接文字的色彩 vlink ----- 已经点击(访问)过的可链接文字的色彩 #代表“#+6位16进制数”，是用来表示颜色的如： #FF0000、#00FF00、#0000FF、#000000、#AABBCC。我们以“#AABBCC”为例： 其中AA表示红色的强弱，BB表示绿色的强弱，CC表示蓝色的强弱。这种表示方法也就是我们在PHOTOSHOP中所说的RGB模式 (2)<body>的background属性，背景图象 有时为了美化我们的网页，要给网页加一个背景图象，就要用到background=\"image -URL\"这一属性，如<body background=\"bj.gif\">……</body> (3)<body>的bgProperties属性,背景绑定 有时为了渲染气氛，我们要是背景背景固定，而拖动滚动条是只有内容移动这时我们就要在<body>中添加bgProperties=fixed这一属性方法为<body text=#ffffff bgProperties=fixed bgColor=#000000 background= bj.jpg> 我们需要给网页加一个背景图片，因为只有在有背景的情况下才能现出此功能。要看运行结果，请电击此处 2、语言字符集(Charsets)的信息 <meta http-equiv=\"Content-Type\" content=\"text/html;charset=#\"> #为： us-ascii, iso-8859-1, x-mac-roman, iso-8859-2, x-mac-ce, iso-2022-jp, x-sjis, x-euc-jp, euc-kr, iso-2022-kr, gb2312, gb_2312-80, x-euc-tw, x-cns11643-1, x-cns11643-2, big5 一般情况下请把#选为gb2312，否则可能会出现乱码。我们可以试一下，我们把# 选为iso-2022-kr，结果是怎样的呢？可点击此处。要想改正此错误，请点查看，然后在代码的子菜单中选择简体中文(GB2312)即可。当然，我们的读者看到乱码后是没有耐心这样做的，因此为保险起见，我们还是老老实实的加上此语句并选#为gb2312。 3、链接 (1)基本语法:<a href=\"URL\"> ... </a> 例如我们要把本页链接到首页，其做法为：<a href=\"index.htm\">温馨家园</a>，运行结果为：温馨家园 (2)新开窗口： 上面的链接只是页面的跳转，有时我们的链接需要在另一个窗口中开启，这就需要用到<a>的另一属性target=\"Window_Name\"。示例如下：<a href=\"index.htm\" target=\"index.htm\">温馨家园</a>，运行结果为：温馨家园 (3)命名锚记： 有是一张网页内容很多，而我需要的链接是到另一张网页的某个确定的位置，这就需要定义命名锚记，也就是锚点，其定义方法是：<a name=\"name\">……</a>其中name是锚点的名称示例如下：<a name=JavaScript_03><h2 align=\"center \">算术操作符</h2></a>我们要把某个链接连接在此处，其链接方法为：<a href=\"biaoge_javascript.htm#JavaScript_03\">算术操作符</a>。注意：href=\"锚点所在的网页名+#+锚点名\"。要看示例，请点击此处 4、水平线 <hr> <hr> (1)水平线的宽度size=# <hr size=5> (2)水平线的长度width=# <hr width=300> (3)水平线的对齐方式align=# 其中#为left、 right、center <hr width=300 align=\"left\" >： <hr width=300 align=\"center\" >： <hr width=300 align=\"right\" >： (4)标线的颜色color=# 其中#为RGB模式的十六进制表示的数或 Black、Oliv、 Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green,Purple, Silver, Yellow, Aqua等 <hr color=Blue width=300> 5、HTML中的注释

仁武君 · 发表于 2005-4-5 21:53:22

第三章字体 1、标题字 <hn>……</hn> n=1、2、……6 <h1>第三章字体</h1> 第三章字体 <h3>第三章字体</h3> 第三章字体 <h6>第三章字体</h6> 第三章字体 <hn>……</hn>中n为1、2、……其中的字体为加粗的宋体字，颜色为当前网页的文本字颜色。 2、字体font的属性 …… (1)size=\"\":表示字体的大小，为1、2……7。 当前字为三号字！ 当前字为三号字！ 当前字为六号字！ 当前字为六号字！ (2)color=\"#\"：表示字体的颜色，其中#为RGB模式的十六进制的数表示或下列单词表示： Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua 当前颜色为Fuchsia 当前颜色字体为Fuchsia 当前颜色字体为#0000FF 当前颜色字体为#0000FF (3)face=\"\"：表示字体，为黑体、仿宋_GB2312、华文行楷、隶书、宋体、方正舒体、华文彩云、方正姚体、华文新魏、幼圆等等，其中默认字体为宋体。 3、其他 (1)加粗……与…… 粗体字 粗体字 粗体字 粗体字 (2)斜体字……和…… 斜体字 斜体字 >斜体字> 斜体字 ……和……是用在老版本的HTML中，而在新版本的XHTML中常用……和……。

仁武君 · 发表于 2005-4-5 21:54:28

第四章网页中的图片 1、插入图片的基本语法 (1)<img src=#> #=图象的 URL 如：<img src=\"Visn/Picture/TIANSHI1.GIF\"> (2)<img alt=#> #=在浏览器尚未完全读入图象时，在图象位置显示的文字 示例 2、图象和文字的对齐 (1)<img align=#> #=top, middle, bottom，baseline，texttop，absmiddle，absbottom，left，right <img align=\"baseline\"> <img align=\"middle\"> <img align=\"top\"> 天使天使天使 (2) <img src=\"Visn/Picture/TIANSHI4.gif\" align=left>小天使! 可爱的小天使 小天使是吉祥的象征 如果你遇见了小天使，那就意味着不将有好运 小天使! 可爱的小天使 小天使是吉祥的象征 如果你遇见了小天使，那就意味着不将有好运 (3)边框<img border=#> #=value <img src=\"Visn/Picture/TIANSHI4.gif\" border=10> 2、图片“分割线” 前面我们学了HTML自带的分割线<hr>，它要占据一行的位置，并且它只能是横向的。下面我要给大家介绍一个小技巧，用图片做分割线。我们要先做一个黑色的1px×1px大的图片，如右图：（为了便于大家阅读，我们将图片显示为20px×20px）。我们就是用这样一张图片来实现灵活多变的分隔线。 (1)长短的变化 <img src=\"Visn/Picture/fenge1.gif\" width=\"100\" height=\"1\"> <img src=\"Visn/Picture/fenge1.gif\" width=\"200\" height=\"1\"> <img src=\"Visn/Picture/fenge1.gif\" width=\"300\" height=\"1\"> (2)粗细的变化 <img src=\"Visn/Picture/fenge1.gif\" width=\"200\" height=\"2\"> <img src=\"Visn/Picture/fenge1.gif\" width=\"200\" height=\"3\"> <img src=\"Visn/Picture/fenge1.gif\" width=\"200\" height=\"4\"> (3)纵向分割线 A. <img src=\"Web/Visn/Picture/fenge1.gif\" width=\"2\" height=\"120\"> B. <img src=\"Web/Visn/Picture/fenge1.gif\" width=\"2\" height=\"100\"> C. <img src=\"Web/Visn/Picture/fenge1.gif\" width=\"3\" height=\"80\"> 我们在第五章的页面排列中将用到图片分隔线

仁武君 · 发表于 2005-4-5 21:55:49

第五章文字的布局 1、行的控制 (1)段(Paragraph)与段之间要隔一空行…… 如：你好吗？好！谢谢！ 运行结果为： 你好吗？ 好！谢谢！ (2)换行 换行标示 是单个出现的(在Dreamweaver中，击[Enert]是另起一段，也就是要隔一空行，击[Enert]+[Shift]是换行)。 如：你好吗？ 好！谢谢！ 运行结果为： 你好吗？ 好！谢谢 2、文字的对齐(Alignment) (1)<hn align=#>...</hn> #=left, center, right <h3 align=right>Welcome!</h3> Welcome! (2)... #=left, center, right Welcome! Welcome! (3)<center>...</center> <center>Welcome!</center> Welcome! 3、文字的分区(Division)显示 (1)<div align=left> ... </div> <div align=left> 欢迎来到温馨网络学院 今天我们来学习HTML！ </div> 欢迎来到温馨网络学院 今天我们来学习HTML！ (2)<div align=centrt> ... </div> <div align=centrt> 欢迎来到温馨网络学院 今天我们来学习HTML！ </div> 欢迎来到温馨网络学院 今天我们来学习HTML！ (2)<div align=right> ... </div> <div align=right> 欢迎来到温馨网络学院 今天我们来学习HTML！ </div> 欢迎来到温馨网络学院 今天我们来学习HTML！ 4、列表 (1)无序列表 <ul><li>...</ul> 代码如下：运行结果如下： <ul> <li>Windows 98 <li>Windows 20000 <li>Windows XP </ul> Windows 98 Windows 20000 Windows XP <li>的属性type=#：#=disc、circle、square。 代码如下：运行结果如下： <ul> <li type=disc>Windows 95 <li type=circle>Windows 98 <li>Windows Me <li type=square>Windows 20000 <li>Windows XP </ul> Windows 95 Windows 98 Windows Me Windows 20000 Windows XP (2)有序列表 <ol><li>...</ol> 代码如下：运行结果如下： <ol> <li>Windows 98 <li>Windows 20000 <li>Windows XP </ol> Windows 98 Windows 20000 Windows XP a、<li>的属性type=#：#=A-大写字母、a-小写字母、I-大写罗马数字、i-小写罗马数字、l-阿拉伯数字。其中缺省的为阿拉伯数字。 代码如下：运行结果如下： <ol><li type=A>DOS <li>UNIX <li type=a>Linux <li>Windows 95 <li type=I>Windows 98 <li>Windows NT <li>Windows Me <li type=i>Windows 20000 <li>Windows XP </ol> DOS UNIX Linux Windows 95 Windows 98 Windows NT Windows Me Windows 20000 Windows XP b、定制序号起始值<ol start=#>: #=1、2、3…… 代码如下：运行结果如下： <ol start=6> <li>Windows 98 <li>Windows 20000 <li>Windows XP </ol>

仁武君 · 发表于 2005-4-5 21:56:56

第六章滚动字幕 1、基本语法: <marquee>移动的内容</marquee> 例如：<maruee>~~~看我的，我会跑~~~</marquee> ~~~看我的，我会跑~~~ 2、<MARQUEE>的各个属性: (1)方向：direction=# (其中#=right、left、up、down)字幕的运动方向是向#方向运动，缺省值为:left。示例如下： <marquee direction=right>~~~看我的，我会跑~~~ </marquee> ~~~看我的，我会跑~~~ <marquee direction=left>~~~看我的，我会跑~~~ </marquee> ~~~看我的，我会跑~~~ <marquee direction=up>~~~看我的，我会跑~~~ </marquee> ~~~看我的，我会跑~~~ <marquee direction=down>~~~看我的，我会跑~~~ </marquee> ~~~看我的，我会跑~~~ (2)速度:scrollamount=# (其中#=1、2、3、……)示例如下： <marquee scrollamount=16>~~~看我的，我会跑~~~ </marquee> ~~~看我的，我会跑~~~ (3)循环：loop=#(其中#=1、2、3……循环次数)其中loop的缺省值为无限循环。示例如下： <marquee loop=2>~~~看我的，我会跑~~~ </marquee> ~~~看我的，我会跑~~~ (4)底色:bgcolor=#(其中#= Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua )示例如下： <marquee bgcolor=Lime>~~~看我的，我会跑~~~ </marquee> ~~~看我的，我会跑~~~ (5)延时:scrolldelay=#（其中#=100、200……为延时的毫秒数）示例如下： <marquee scrolldelay=400>~~看我的，走一走，停一停~~~ </marquee > ~~~看我的，走一走，停一停！~~~ (6)行为:behavior=#(其中#=scroll、slide、alternate）当#为slide时是只走一次，当#为alternate是来回走。 <marquee behavior=scroll>~~~我在走路~~~</marquee> ~~~我在走路~~~ <marquee behavior=slide>~~~我只走一趟~~~</marquee> ~~~我只走一趟~~~ <marquee behavior=alternate>~~我在散步~~</marquee> ~~我在散步~~ (7)高度height=#和宽度width=#（当＃为100、200……时表示分辨率，当＃为百分比时表示所占的比例）缺省时随所在的表格的大小而定，示例如下： <marquee height=50 width=200 bgcolor=Fuchsia> ~~~ 看我的，我会走~~~ </marquee> ~~~看我的，我会走~~~ 3、运用onMouseover事件和onMouseout事件： 有时可能字幕运动太快而使浏览者不能完整的阅读字幕内容，因此我们要运用onMouseover事件和onMouseout事件，这样当鼠标停留在滚动字幕上时起滚动停止，而当鼠标移开是它有继续滚动。 首先我们要定义ID对象，例如我们可以定义ID=vs，然后我们就可以运用vs的 stop()属性函数和start()属性函数。为了更明了一些，我们还是举个例子吧。<marquee ID=vs onMouseover=vs.stop() onMouseout=vs.start()>~~~别碰我，我要往前走~~~</marquee> ~~~别碰我，我要往前走~~~

仁武君 · 发表于 2005-4-5 21:58:19

第七章表单 一、<form>元素 每个表单元素开始于form元素，它是一个块级元素，可以包含所以的表单控件，还有任何必须的伴随数据，如控件的标签、处理数据的脚本或程序的位置等。form元素至少要有特性：method和action。 method特性是取两个值中的一个：geth或post。这些值决定了表单中已收集数据是用什么样的方法发送到服务器的。我们将在后面学习这些。 真正处理表单的数据脚本或程序是在action属性里，这个值程序或脚本的一个完整的URL。 二、表单的输入控件 (1)文本框控件(type=text) 在输入控件中使用最多的就是文本框了，当要你输入姓名和E-mail地址时，你经常会遇到文本框。 在这个元素的可选属性中，只有type和name是必须的。然而在实际应用时为了统一界面，我们也会用到size。注意input是一个空元素，，在结束括号完成这个标签之前要使用斜线。 文本控件的使用类型值为：type=text input的各个属性见附表 下面我们举个例子： 请输入你的姓名:<input type=\"text\" name=\"vs\" size=\"20\"/> 运行结果为： 请输入你的姓名: (2)密码控件(type=password) 密码控件和文本控件几乎是一样的，仅有的不同功能是用户输入的是由一个屏蔽码代替的。 密码控件的使用类型值为：type=password 示例如下： 请输入你的密码:<input type=\"password\" name=\"vs\" size=\"20\"/> 运行结果为： 请输入你的密码: (3)单选框控件(type=radio) 提供给用户一组选择的方法有多种，单选框就是其中的一种。它限制用户只能选一个选项。他们必须有一样的名字，并和组的名字一样，其属性 value是必须的。示例如下： <input type=\"radio\" name=\"sex\" value=\"男\" />男 <input type=\"radio\" name=\"sex\" value=\"女\" />女 运行结果为： 男女 如果你要预选一个选项，为你的用户做一个提示，就得用到checked=\"checked\"属性。如： <input type=\"radio\" name=\"sex\" value=\"男\" checked />男 <input type=\"radio\" name=\"sex\" value=\"女\" />女 运行结果为： 男女 (4)多选框控件(type=checkbox) 多选框与单选框非常类似，不同之处是它允许用户选择多个选项。示例如下： <input type=checkbox name=\"hobbies1\">旅游 <input type=checkbox name=\"hobbies2\">上网 <input type=checkbox name=\"hobbies3\">体育 <input type=checkbox name=\"hobbies4\">汽车 <input type=checkbox name=\"hobbies5\">情感生活 <input type=checkbox name=\"hobbies6\">服装服饰 <input type=checkbox name=\"hobbies7\">其他 运行结果为： 旅游上网体育汽车情感生活服装服饰其他 当旅游被选中时，则表单数据就会返回值为：hobbies1=on 很多时候你需要的不仅仅是一个简单的\"on\"值，而是具有描述性的值，这就需要你在input元素中加入value属性。 示例如下： <input type=checkbox name=\"hobbies1\" value=\"1\">旅游 <input type=checkbox name=\"hobbies2\" value=\"2\">上网 <input type=checkbox name=\"hobbies3\" value=\"3\">体育 <input type=checkbox name=\"hobbies4\" value=\"4\">汽车 <input type=checkbox name=\"hobbies5\" value=\"5\">情感生活 <input type=checkbox name=\"hobbies6\" value=\"6\">服装服饰 <input type=checkbox name=\"hobbies7\" value=\"7\">其他 运行结果为： 旅游上网体育汽车情感生活服装服饰其他 当旅游被选中时，则表单数据就会返回值为：hobbies1=1 (5)文件输入控件(type=file) 有时我们要用户向我们的站点输入文件，如照片。这就用到文件输入控件。其语法结构如下： <input type=\"file\" name=\"foo\"/> 运行结果为： 有一点你要注意，就是如果你确实已经在表单中包含了一个文件上传选项，你需要在文件<form>元素中加入一个另外的属性：enctype (6)按扭控件(type=button) 按扭控件的type属性的值通常为button，value属性值为按扭的名字。还有两个比较常用的值就是submit 和reset，它们就是默认value属性值为提交和重置。按扭控件通常是和脚本一起使用的，一些旧的浏览器是不支持的。示例如下： <script language=\"JavaScript\">  </script> <input type=\"button\" value=\"时间\" name=\"foo\" onClick=\"jq()\"> 运行结果为： (6)图象控件(type=img) 图象控件与按扭控件十分相似，唯一不同的是多一个src=URL。示例如下： <input type=\"image\" src=\"Visn/Picture/4star01.gif\" value=\"时间\" name=\"foo2\" width=\"60\" height=\"10\" onClick=\"jq()\" > 运行结果为： (7)选择控件 有时我们提供给用户选择的方法时，选项比较多，为了不占用太多的空间。我们可以用选择控件，示例如下： <select name=\"education\" size=1 > <option value=\"2\">高中以下程度</option> <option value=\"3\">高中/中专</option> <option value=\"4\" selected>大学/专科</option> <option value=\"5\">大学以上</option> </select> 运行结果为：学历高中以下程度高中/中专大学/专科大学以上 (8)文本域 有时我们需要收集信息内容很多， <textarea name=\"details\" rows=\"6\" cols=\"50\"></textarea>

仁武君 · 发表于 2005-4-5 21:59:31

第八章表格 1、表格的基本语法 <table>...</table> - 定义表格 <tr> - 定义表行 <th> - 定义表头 <td> - 定义表元 示例一如下： <table width=\"240\" border=\"2\"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> 1 2 3 4 示例二如下： <table width=\"240\" border=\"2\"> <tr> <th>1</th> <th>2</th> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> 1 2 3 4 2、边框的大小border=# #=0、1、2、3……缺省值为0。 示例一如下： <table width=\"240\" border=\"5\"> <tr> <th>1</th> <th>2</th> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> 1 2 3 4 示例二如下： <table width=\"240\" border=\"0\"> <tr> <th>1</th> <th>2</th> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> 1 2 3 4 当border=\"0\"时，在浏览器中不显示，在编辑器中显示为虚线。我们上网时所看到的网页大都是采用表格定位的。你可以下载一张网页并用Dreamweaver打开看一下。我所编的这一套HTML教程全部是采用表格定位。 3、表格的宽度width=#和高度height=# #为数字 示例如下： <table width=\"200\" height=\"200\" border=\"2\"> <tr> <th>1</th> <th>2</th> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> 1 2 3 4 4、表元的背景色彩和背景图象 基本语法：<table bgcolor=#>、<tr bgcolor=#>、<th bgcolor=#>或<td bgcolor=#>和<table background=\"URL\">、<tr background=\"URL\">、<th background=\"URL\">或<td background=\"URL\"> 其中#为RGB模式的十六进制的数表示或下列单词表示： Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua 示例一如下： <table width=\"200\" border=\"2\"> <tr bgcolor=\"#FAB1E6\"> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td bgcolor=\"Blue\">4</td> <td bgcolor=\"#00FF00\">5</td> <td bgcolor=\"Yellow\">6</td> </tr> <tr> <td bgcolor=\"#9933CC\">7</td> <td bgcolor=\"#FF9900\">8</td> <td bgcolor=\"#FF0000\">9</td> </tr> </table> 1 2 3 4 5 6 7 8 9 示例二如下： <table width=\"200\" border=\"2\" > <tr background=\"Visn/

icture/TAO2.GIF\"> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td background=\"Visn/Picture /gexian.GIF\" height=\"21\"> 4</td> <td background=\"Visn/Picture/ gexian.GIF\" height=\"21\">5</td> <td background=\"Visn/Picture/ xing1[1].gif\" height=\"21\">6</td> </tr> <tr> <td background=\"Visn/Picture/ gexian.GIF\">7</td> <td background=\"Visn/Picture/ gexian.GIF\">8</td> <td background=\"Visn/Picture/ javascript.gif\">9</td> </tr> </table> 1 2 3 4 5 6 7 8 9 5、表格边框的色彩<table bordercolor=#> #为RGB模式的十六进制的数表示或下列单词表示： Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua 示例如下： <table width=\"200\" border=\"2\" bordercolor=\"Fuchsia\"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> 1 2 3 4 6、复杂表格 (1)跨多列的表元 <th colspan=#>、<td colspan=#> 示例如下： <table width=\"200\" border=\"2\"> <tr> <th colspan=\"3\">表格</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> 表格 1 2 3 4 5 6 (2)跨多行的表元 <th rowspan=#>、<td rowspan=#> 示例如下： <table width=\"200\" border=\"2\"> <tr> <td rowspan=\"3\">表格</td> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> </table>

仁武君 · 发表于 2005-4-5 22:01:03

第九章框架 1、基本语法： <frameset> <frame src=\"url\"> <noframes> ... </noframes> </frameset> 注意：在<noframes>标记后的文字将只出现在不支持 FRAMES 的浏览器中。 基本结构如下： 代码如下： <HTML> <HEAD> </HEAD> <FRAMESET> <FRAME SRC=\"url\"> <NOFRAMES> ... </NOFRAMES> </FRAMESET> </HTML> 2、各窗口的尺寸设置 (1)纵向排列<frameset cols=#> 代码如下： <title>温馨网络学院教程</title> <frameset cols=30%,20%,50%> <frame src=\"lizi1.htm\"> <frame src=\"lizi2.htm\"> <frame src=\"lizi3.htm\"> </frameset> (2)横向排列<frameset =#> 代码如下： <title>温馨网络学院教程</title> <frameset rows=30%,20%,50%> <frame src=\"lizi1.htm\"> <frame src=\"lizi2.htm\"> <frame src=\"lizi3.htm\"> </frameset> (3)纵横混合排列 代码如下： <title>温馨网络学院教程</title> <frameset cols=20%,*> <frame src=\"lizi1.htm\"> <frameset rows=40%,*> <frame src=\"lizi2.htm\"> <frame src=\"lizi3.htm\"> </frameset> </frameset> (4)不允许各窗口改变大小 <frame noresize> 缺省设置是允许各窗口改变大小的。代码如下： <title>温馨网络学院教程</title> <frameset noresize cols=20%,*> <frame src=\"lizi1.htm\"> <frameset rows=40%,*> <frame noresize src=\"lizi2.htm\"> <frame src=\"lizi3.htm\"> </frameset> </frameset> 3、各窗口间相互操作 (1)窗口标识 <frame name=#> 代码如下： <title>温馨网络学院教程</title> <frameset cols=50%,50%> <frame src=\"A.html\"> <frame src=\"B.html\" name=\"HELLO\"> </frameset> 4、浮动窗口 基本语法：<iframe src=# name=##> ……</iframe> #=初始页面的 URL ##=窗口标识 ……= 此处文字只出现在不支持 FRAMES 的浏览器中。 代码如下： <title>温馨网络学院教程</title> <center> <iframe src=\"lizi2.HTM\" name=\"window\"> Here is a Floating Frame </iframe> <a href=\"lizi1.HTM\" target=\"window\">Load lizi1</A> <a href=\"lizi2.HTM\" target=\"window\">Load lizi2</A> <a href=\"lizi3.HTM\" target=\"window\">Load lizi3</A> <a href=\"lizi4.HTM\" target=\"window\">Load lizi4</A> </center>

柳雪梅该用户已被删除	发表于 2005-4-19 20:46:38 \| 显示全部楼层提示: 作者被禁止或删除内容自动屏蔽
柳雪梅该用户已被删除
	回复支持反对使用道具举报

柳雪梅该用户已被删除	发表于 2005-4-19 20:50:18 \| 显示全部楼层提示: 作者被禁止或删除内容自动屏蔽
柳雪梅该用户已被删除
	回复支持反对使用道具举报

柳雪梅该用户已被删除	发表于 2005-4-19 20:59:12 \| 显示全部楼层提示: 作者被禁止或删除内容自动屏蔽
柳雪梅该用户已被删除
	回复支持反对使用道具举报

[转帖]HTML教程

站长推荐 /1