欢迎使用WebCHM(原WebSeizer测试版)

软件简介

： WebCHM
： 全站下载打包仪
： 2.06版
： 朱晓峰
：zhu_xfcn@163.com
： 比较上一版本增加了为CHM文件生成标题搜索的功能。

WebCHM（原WebSeizer测试版）是多线程离线浏览软件，专业的下载大型网站的工具，大小1000KB左右，支持断点续传，支持在线升级，具有对下载信息进行分类管理的功能，操作方便，体贴用户。它可以方便地下载书库网站中的某一篇你感兴趣的文章，甚至可以将整个网站拉到硬盘慢慢看。在下载了喜欢的文章后，还可以用WebSeizer直接打包为CHM格式的电子书籍，既方便浏览，又节省空间。由于宽带上网的普及，将整个大型网站下载下来不再是梦想，而WebSeizer这一强力工具应运而生，经过测试，可以下载容量达到10GB以上，文件数量达到100万个以上的网站。WebSeizer对小型网站的支持也很有力，是目前唯一能下载java链接的离线浏览器软件，而且支持需要登陆的网站，以前很难下载的论坛、BBS等，现在除了一些结构特别复杂的，大部分也可用WebSeizer下载。 具体功能如下：

1、可以下载整个网站所有的网页、文件，也可以灵活地指定下载范围和下载的层次，如只下载同一个目录的文件，或者下载特定的几个目录内的文件。

2、是目前唯一能下载java链接的离线浏览器软件。

3、1.7版以后增加了将下载后的网页打包为CHM格式的电子书籍的功能。也是唯一不使用其他辅助程序就可独立完成CHM打包的离线浏览软件。

4、1.9版以后增加了CHM任务，非常适用于文件数量很多的任务，所谓CHM任务,就是在网页下载后的文件不保存到硬盘，而是直接压缩到到CHM文件制成电子书，可以节省大量空间。

5、在下载大型网站的技术上有独到之处，可以下载容量达到数个GB，文件数量达到10万个以上网站。

6、支持需要登陆的网站，如：论坛、BBS等.

7、支持HTTP代理服务器。

8、支持‘修补’功能，能修复一次下载不成功的网页/文件。

9、支持‘更新’功能，在任务下载数月后执行更新功能，就可以自动识别下载过的网页/文件在网上是否更新过，减少重复下载。

10、支持‘自动更新’功能，能在下载的同时判断图片/文件是否在硬盘上已经存在，并且判断是否最新文件，减少重复下载。

11、支持多线程下载。

12、可根据URL地址设置过滤，只下载所需网页/文件。

13、支持任务和目录的拖拽操作，更方便用户分类管理任务。

14、支持‘重新开始’功能，能重新启动下载任务。

15、可以为CHM文件生成书签、目录、标题搜索等辅助阅读功能。


安装说明

： WebCHM
： 全站下载打包仪
： 2.06版
： 朱晓峰
：zhu_xfcn@163.com
： 比较上一版本增加了为CHM文件生成标题搜索的功能。

离线浏览软件WebCHM的发布形式是一个自解压缩文件，运行此文件后就会在释放所有文件到WebCHM文件夹。解压完成后，就会运行软件，并在桌面上生成一个快捷方式。除此之外，软件对系统改动很小，所以删除软件时不需要运行控制面板的“添加/删除程序”，只需要运行软件自带的反安装程序就可以了。


快速入门

实例1-下载一本书
以《爬爬书库》里收录的文章《龙枪编年史》为例，它的下载地址是http://www.3320.net/blib/c/read/3/1210/index.html，共有三大卷，一百多章，如果要一篇一篇地下载，显然要花不少的时间。而用WebSeizer只要点击几下鼠标就可以解决这个问题。先在WebSeizer主界面的"首页地址"栏中输入上述的网址，然后点击第一个工具按钮--"任务"按钮来新建一个任务，或者在任务菜单选取“新建”菜单项。点击后，会出现设置选项的对话框，如图所示：

在下载范围中选择"只下载当前目录"，也就是只下载目录http://www.3320.net/blib/c/read/3/1210/ 下的文件。下载层数选择缺省的"-1"。下载层数为"-1"，指的是下载从首页开始点击无数次鼠标能浏览到的网页，由于限定了下载范围是"当前目录"，所以就只下载这个目录下的所有文件。如果下载层数为"1"，指的是下载从首页开始点击一次鼠标能浏览到的网页，下载层数为"3"，指的是下载从首页开始点击三次鼠标能浏览到的网页。点击"OK"确认过后，再指定一下保存的地址就开始下载了，简单吧。下载完第一个页面，会跳出一个目录选择对话框，让你选择除了当前目录，还要下载哪些目录的内容，这是为那些文章的索引与内容不在同一个目录下准备的，这里不用选择直接点击"OK"跳过就可以了。几分钟之后，文章就都下载完了，出现一个对话框，显示"任务结束，共下载162个文件，2714632字节"，点击"OK"后就可以慢慢观看了。下载后的文件保存在一开始指定的目录下，而且按原来网站的目录结构保存，所以文章就保存在目录
/指定的目录/www.3320.net/blib/c/read/3/1210/下面。
另外一种下载方案是下载层数选择1，下载范围选择"当前域名"。软件就会下载网站内从http://www.3320.net/blib/c/read/3/1210/index.html开始点击一次鼠标能浏览到的网页。这种方案下载会下载一些多余的内容，但是适合于网站结构比较复杂，而你又不想设置目录选择对话框的情况。

实例2-下载整个网站
 如果您的野心比较大，要下载整个《书库》，制作整个网站的镜像，软件WebSeizer完全可以满足您的要求，只要在设置里将下载范围改为"当前域名"就可以了，下载层数还是选择缺省的"-1"。经过测试WebSeizer完全可以满足下载大型网站的要求，下载容量可达数个GB，文件数十万个也没有问题。一次下载不完可以保存任务，下一次上网的时候载入任务并且运行它，直到下完为止。

实例3-下载新闻网站
 比如说，要下载新闻网站http://news.sohu.com/,此时的下载范围不能用"当前域名"，而要改为"当前网站"。因为有一部分的新闻在http://it.sohu.com/、http://yule.sohu.com/等域名中。选用"当前网站"就可以下载类似于http://***.sohu.com/的所有域名下的文件。


制作CHM格式的电子书籍

WebSeizer中制作CHM格式的电子书籍有好几种方式，可以灵活选择：
一、将任务中的文件压缩到一个CHM文件，适用于文件数量较小的任务。
如：要将《猛虎王朝》这本书制成电子书。先选取任务，点击右键，弹出右键菜单，将任务载入内存，再选取“压缩成CHM文件到”子菜单，就可以将任务中的文件打包压缩到指定的路径。一开始，子菜单中没有路径名称，需要在“发送路径设置”中添加发送路径。添加后就会增加相应的路径子菜单项。
注意：为了方便PDA（掌上电脑）用户阅读CHM电子书，当下载范围是“当前目录”，就只发送当前目录的网页文件，而不发送其它目录的图片等其它文件，以简化CHM文件结构，以防止复杂的目录结构PDA软件阅读不了。

二、建立CHM任务，适用于文件数量很多的任务。
所谓CHM任务，就是网站下载后的文件不保存到硬盘，而是直接压缩到到CHM文件中。建立CHM任务的好处有很多，如;
1、节省空间。
2、便于将CHM文件删除、复制、剪贴，当任务中文件数量很多时，效果特别明显，因为此时删除、复制文件将花费巨量的时间。
当文件数量>10000个时，会自动分卷压缩，分卷后的CHM文件名为 任务名.chm、任务名1.chm、任务名2.chm、......
具体的情况将在下一章“建立CHM任务”中介绍。

三、将任务中的一个目录打包压缩为CHM格式的电子书籍。
方法是：任务载入后在“工具”菜单中“任务结构”，选取“目录结构”，选择需要打包的目录，点击右键，在弹出菜单中选择“将此目录打包为CHM文件”。

四、CHM文件浏览器
WebSeizer内置了一个简单的CHM文件浏览器，可以查看CHM文件内部的目录、文件，并且可以解压小型的CHM文件。在工具菜单中点击"CHM文件浏览器"就可以使用这个工具。


建立CHM任务

CHM任务非常适用于文件数量很多的任务。所谓CHM任务,就是网页下载后的文件不保存到硬盘，而是直接压缩到到CHM文件制成电子书。当任务中文件数量很多时，删除、复制文件将花费巨量的时间,而建立CHM任务后,文件占用的空间大大减小了,而且当文件数量>10000个时，会自动分卷压缩，分卷后的CHM文件名为 任务名.chm、任务名1.chm、任务名2.chm、......,网站的目录建立在CHM文件的内部,系统在复制,删除CHM文件时不用在处理文件目录上花时间,速度会加快10倍以上,甚至更多。建立CHM任务的好处还有很多，有;

1、节省磁盘空间。CHM压缩文件本身就使用LZX算法对文件进行压缩，而且再算上由于小文件产生的磁盘空隙，目录占用的空间等原因，节省的空间更多。

2、便于文件的删除、复制、剪贴等操作。

3、CHM任务可以使用软件自带的CHM工具生成标题搜索功能,可以更快地找到文件。

4、CHM文件有书签功能,可以保存喜爱的文章的位置。

一、如何建立CHM任务

在新建任务时,在对话框的"建立CHM任务"选择项中选上勾就可以了。CHM任务的图标与一般的任务图标不一样,一般任务的图标是电脑形状,而CHM任务的图标是CHM文件的图标,如下图所示:

二、用CHM工具对CHM任务进行处理

在CHM任务下载完成后,仅仅是将下载的文件保存在CHM文件里,虽然可以当作电子书来阅读,但是还不具备目录,标题搜索等辅助阅读功能,使用起来还不方便,这就需要使用CHM工具进行处理。在下载过程中遇到死机等异常情况,会导致CHM文件损坏,也需要CHM工具来修补,修补过程中可能要丢失一些文件,可以使用CHM工具的复核功能来检查哪些文件丢失了,并将那些文件置为"未下载"状态以便于重新下载。CHM文件还有一个特性,在CHM压缩文件中删除一个文件,被删的文件所占用的磁盘空间不会被释放,在下载过程中会删除一些临时文件,所以必要时可以使用CHM工具的压缩功能来减小CHM文件大小。

当载入一个CHM任务后,点击此任务名,会在工具栏的"停止"与"更新"按钮的中间出现"CHM工具"按钮。

点击"CHM工具"按钮后,会出现一个对话框,其中有很多选项,选择要进行的处理后确定就可以了。一般建议下载完成后最好要选择"生成目录"和"生成标题搜索功能"。为了节省生成的时间,目前只为一个目录的Index.htm,Index.asp等文件生成目录和标题搜索功能,一般书库网站的一本书的文章都存放在一个目录下,所以这样可以照顾到每一本书,花的时间也最少。而且“CHM工具”只为网页的标题生成搜索，花费的时间极少，而不是像常规的生成全文搜索（Full Text Search）那样，为了生成搜索花的时间比下载的时间还要多，占用的空间也相当于原有文件的总大小。


版本变化

各个版本的变化

/WebSeizer 1.6.1780 生成托盘图标。
/WebSeizer 1.7 增加了将下载后的网页打包为CHM格式的电子书籍的功能。
/WebSeizer 1.7.2108 增加了支持HTTP代理服务器的功能。
/WebSeizer 1.9.3508 可以在网站下载后不保存，而是直接压缩到到CHM文件制成电子书,当文件数目太多时(>10000)，可以分成数个CHM文件分卷压缩。
/WebSeizer 1.9.4473 增加CHM文件修补、压缩、生成目录（Table of Content）等功能。
/WebSeizer 1.10-1.12 完善了CHM任务的下载、解析等，能自动修改网页中不适合在CHM文件中显示的元素，使之能正常显示。对数据结构作了优化，提高了解析速度。
/WebSeizer 1.13 可以为CHM文件生成标题搜索功能。


常见问题

问:
你好，我是天津的，我正在用你开发的webseizer软件，很不错，很是佩服你。现在有几个问题想向你请教，我用这个软件下载小型的网站感觉很不错，下载完以后基本上都可以连接上，可当我下载像新华网这样的大网站的时候，我用了三天才基本上下载完，不过下载的时候很多都出错了，到了第二层就全都链接不上了，不知道是怎么回事，我在设置下载属性的时候，选择的是下载网站所有内容，当前域名，层数是-1，只下载本站内容，可下载完以后还是连不上，很奇怪，请你指教，谢谢！！！！
答:
  感谢帮助测试本软件。您所说新华网的问题原因是这样的：
由于下载范围选择了“当前域名”只能下载http://www.xinhuanet.com/域名下的文件，而第二层链接有许多是http://news.xinhuanet.com域名下的文件。所以要想下载这样的大型网站，下载范围应当选择“当前网站”，这样就能将所有类似于http://？？？.xinhuanet.com的域名下的文件都下载下来。希望继续支持本软件。

问:
我用这个下载http://ro.cga.com.cn\map\bigmap8.htm
结果只能下载1页，不知道这个网站用了什么方式，我对这个不太了解，你能帮我看看为什么只能下载1页，不能下载其他东西下来好吗？
答:
只要注意以下几个问题就可以顺利下载。
1、最主要的问题是设置中，下载范围要选择“当前域名”，而不能选择“本目录”，因为下一层连接如“http://ro.cga.com.cn/fild/mjolnir_02.htm”不在同一个目录下。
2、此网页的正确写法是：http://ro.cga.com.cn/map/bigmap8.htm

问:
webseizer确实是个好软件，建议喜欢看小说的朋友都用一用，它的强大功能不用我说了比webzip或OfflineExplorer好用多了。但最近在使用时遇到一个问题，比如我下载某个网站但没下完，后来我把WebSiezer所在的文件夹包括websiezer程序本身和相关的程序移动到另外一个文件夹里，这是再打开websiezer发现原来没完成的任务消失了，重新载入那个没完成的任务后发现已下载的信息全部丢失，包括下载文件数和下载大小等等，没办法我只好从头在来。
答:
yemao,您好！
谢谢你对本软件的关心。文件夹移动后会导致软件找不到原来的路径，解决的办法是在文件菜单中导入原来的任务文件（以.web为后缀的文件）。


陶吧-->HTML手册|CSS手册|JScript手册|VbScript手册|ASP手册|PHP手册|SQL手册|网页特效|ADO手册


· 解析用图片的URL引用提高网站排名的方法
· 推荐一些免费空间网站和提供商
· 网页播放器实现全屏的方法总结
· 40亿美元来华 社区论坛成风险投资新宠
 · 分析网站被百度取消的原因
· 张醒生投资第三代智能网络视频监控领域
· 如何在自己机器上架设电影服务器
· 一位网友整理出来的网页播放器参数


网页陶吧_软件_天极Yesky
建站指南 | 网站制作 | 网站推广 | 网页素材 | 网络创业 | 主题社区
网站类型介绍 | 网站模式介绍 | 建站流程介绍
网页工具 | 标记语言 | 网页特效
网页优化 | 搜索引擎 | 推广方式

韩国网站的设计好在哪里
网站制作的简易流程介绍
Google发布在线网页制作工具
Google搜索Cookie存活期30年
05年美国博客数量超过5千万

·推荐一些免费空间网站和提供商
·在自己机器上架设电影服务器
·从零开始搭建Discuz!4.1论坛
·AJAX成为时尚的十大主要理由
·个人网站如何转型成商业网站
·建设个人网站的一点心得

几个有用的Javascript脚本
最窄770px最宽1024px布局
网页设计—网页的排版与布局
Css不朽的经典—3D文字特效
根据浏览器和分辨率调用CSS

·网页播放器实现全屏的方法总结
·一位网友整理的网页播放器参数
·初级JavaScript学习教程（六）
·初级JavaScript学习教程（五）
·初级JavaScript学习教程（四）
·初级JavaScript学习教程（三）

网站推广之网页优化:网站推广一直是广大站长朋友非常关注……

·google analytics网站利器
·将wap群发回复率提高到10％
·搜索2.0模式浮出水面
·网页特效：滚动条的彩色显示
·网页的排版与布局思考
·天极网页陶吧读者导航系统
Web2.0 Blog Wiki RSS Alexa研究 搜索引擎 网站推广 网站模式 网站登录 网页素材 网页特效 网页工具 网络创业 Google Baidu 网页优化 网页制作速查手册

·新版网页陶吧完成改版
·新版网页陶吧征稿启事
·网页陶吧征集友情链接
·到陶吧主题社区留言去

陶吧聚宝盆
  • HTML标记语言速查手册
  • CSS样式表语言手册
  • JScript脚本语言手册
  • VbScript脚本语言手册
  • JavaScript特效千例
  • 经典脚本收藏夹
  • ASP编程语言速查手册
  • PHP编程语言速查手册
  • SQL结构化查询语言速查手册
  • T-SQL手册
  • Mysql数据库应用速查手册
  • MS ADO程序员开发参考手册
  • HTML转JS转换器
  • JS转HTML转换器
  • 下拉菜单代码生成器
  • web页在线开发器
  • 网页加密解密
  • 滚动条样式编辑器
  • 颜色快速选择器
  • 弹出窗口代码生成器
  • 特殊符号大全
  • CSS样式在线编辑器
  • web页在线开发器
  • 下拉菜单代码生成器
动物图片 美食餐饮 艺术作品 星座图片 游戏人物 汽车图片 建筑图片 节日图片 GIF动画 卡通图片
精美LOGO图片集 | 网站LOGO大全 | 表情头像图片大全 | 精美图标图片大全 | 数字字母图片大全
网页按钮图片大全 | 精美商标标志图片集 | 精美游戏人物图片集 | 精美卡通人物大全 | 精美卡通人物大全
图标大全 背景图片 数字字母 按钮图标 Logo大全 banner精品 设计图片 商标标志 表情头像 花卉图片 风景图片 动画图片
    网站类型介绍
more.
·谈最大赢利值的网络创业模式
·个人网站如何转型成商业网站
·转：中国网站最恶心行为TOP10
·构建WAP网站全攻略
·08年中国网上交友用户规模超亿
·给成功企业Blogger的十条建议
    网页优化
more.
·转：中国网站最恶心行为TOP10
·HTML网页制作技巧汇编
·网页meta标签的奥妙
·网页设计中META标签写法
·建设个人网站的一点心得
·探讨 怎样的网站才是成功的
    搜索引擎
more.
·google analytics网站利器
·百度WIKI：越堕落才越有前途？
·Google面对点击欺诈拷问
·搜索2.0模式浮出水面
·十条优秀的网站设计经验
·robots.txt和Robots META标签
    推广方式
more.
·Alexa又在戏弄中国网站？
·学习网站友情链接制作技巧
·网站互惠链接与链接广泛度分析
·正确认识搜索引擎优化策略
·Google中国拉商家推免费排名
·再谈个人站点提高访问量谋略
    网络创业
more.
·网站不能瞄着人性弱点赚钱
·谈最大赢利值的网络创业模式
·给菜鸟—不可不知的Blog知识
·关于Web2.0的最后几句话
·给成功企业Blogger的十条建议
·关于Web 2.0 网站的创业思考
    网站模式介绍
more.
·社区论坛成风险投资新宠
·奇虎携5000社区网站做搜索
·AJAX成为时尚的十大主要理由
·WAP常见问题问答大全(一)
·给菜鸟—不可不知的Blog知识
·web2.0—使媒体开始重建秩序
    网站流程介绍
more.
·推荐一些免费空间网站和提供商
·在自己机器上架设电影服务器
·从零开始搭建Discuz!4.1论坛
·WAP建站入门教程
·用QuickWAP组件建设Wap站点
·七成人不知web2.0的不同解读
    网页工具
more.
·Google Sitemap详细制作教程
·构建WAP网站全攻略
·介绍几款WAP模拟浏览工具
·介绍几款WAP网页字符转换工具
·介绍几款WAP网站图形处理工具
·介绍几款WAP网页制作工具
    标记语言
more.
·初级JavaScript学习教程（三）
·Window.ShowModalDialog使用手册
·介绍三种网页播放器好代码
·UBB中轻松实现歌词同步播放
·HTML网页制作技巧汇编
·网页meta标签的奥妙
    网页特效
more.
·网页播放器实现全屏的方法总结
·一位网友整理的网页播放器参数
·初级JavaScript学习教程（六）
·初级JavaScript学习教程（五）
·初级JavaScript学习教程（四）
·初级JavaScript学习教程（三）

构建WAP网站全攻略

网页陶吧：网页特效连连看

天极网页陶吧读者导航系统

CSS绝配HTML进行网页设计

好站推介
·ICP信息在线备案
·网站排名收录查询
·提交Google搜索
·提交baidu百度搜索
·提交sogou搜狗搜索
·hao123网址之家
·全球网站排行查询
·alexa资料提交(英)
·关键词搜索量查询
·网站网页加秘解秘
·武林免费流量统计

原创：新版网页陶吧征集友情链接
原创：新版网页陶吧征稿启事
原创：新版网页陶吧出来啦哇
求助：求网页设计知识
求助：急！求网页制作软件
问题：怎样成为一名优秀的设计师

责任编辑：龙犊

·我要给龙犊留言

·网页陶吧征稿函

·关于新版陶吧

·关于征集友情链接

· 龙犊在线

天极Chinabyte: 新闻 | 评论 | 通信 | 互联网 | 科学 | E企业 | 解决方案 | 商用系统 | 服务器 | 存储 | 原创 | 他说 | ERP | CRM
天极Yesky: 消费导购 商情 | 手机 | 数码 | MP3 | 数码相机 | 笔记本 | 硬件 | 品牌机 | 网络 | 投影机 | 扫描仪 | 数字家庭 | 评测
天极Yesky: IT技术 软件 | Windows | DIY | 网管 | Linux | 设计 | Photoshop | 交换技术 | 开发 | MSDN | 安全 | 教育 | 论坛
天极Yesky: 数字生活 e时代 | 游戏 | 网游 | 竞技 | 电脑 | 电视 | 攻略 | 动漫 | COSPLAY | 图片 | 网摘 | 博客 | 下载
IT专家网: 数据库 | 移动计算 | 网络 | 安全 | 存储 | Windows安全 | 中小企业IT | Exchange | Web服务 | CIO | WinSystem | Whatis
欢迎投稿 | 天极服务 | 关于我们 | 网站律师 | 电子杂志 | RSS订阅 | 友情合作 | 加入我们 | 网站地图 | 设定天极为首页
Copyright (C) 2005 Chinabyte.com, All Rights Reserved 版权所有 天极网络
渝ICP证B2-20030003号 如有意见请与我们联系 Powered by 天极内容管理平台CMS4i


 天极友情链接系统
IT业界
新闻 评论 通信 互联网
E企业
解决方案 商用系统 服务器
IT专家
数据库 移动计算 存储 Web服务 安全 中小企业IT管理
IT技术
软件 Windows DIY 网管 Linux 设计 Photoshop 交换技术 开发 MSDN 安全 教育 论坛
数字生活
e时代 游戏 图片 网摘 博客 下载
消费导购
商情 手机 数码： MP3随身听 数码相机 数码摄像机 笔记本 硬件： 品牌机 配件 外设 网络 显卡 数字家庭： 平板电视 新潮家电
热点推荐：评测 智能手机 手机游戏 投影机 扫描仪 网游 竞技 电脑 电视 COSPLAY 动漫 攻略 网校 交友 整蛊 Wap 语音 彩图 笑话 铃声
 |  |  |  | 价格比较网 | 北斗手机网 | 数码博客网
搜狐手机频道 |  | Ezit手机频道 | MobileBurn |  |  |
PCnow手 | 智能手机家园 |  |  |  | 联合上网导航 |
免费游戏下载 |  |  |  | 恒安网络 |  | MOHAPP
 | 手机玩家 | 网易学院 |  | 世纪亿柏下载 |  | 【看看网址】
【看看网址】 |  |  |  |  |  |
新浪手机频道 |  |  | 动态网站制作 |  |  | 域名注册
 | 健康中国 |  |  |  |  |
手机之家 |  | 网中鱼网 |  | 哈酒娱乐网 |  |
 |  |  | TOM手机频道 | 塞班智能手机 | 网易手机频道 | zcom电子杂志
下载 [35] | IT资讯 [29] | 论坛 [17] | bbs [16]
笔记本 [13] | 社区 [12] | 软件下载 [11] | 电子商务 [10]
手机相关咨询 [9] | 游戏 [9] | 电脑导购 [8] | 软件 [8]
电脑�� [7] | 硬件资讯 [7] | IT技术 [6] | 网上商城 [6]
网址导航 [6] | 摄影 [6] | 娱乐 [6] | 休闲娱乐 [5]
硬件 [5] | 教育类 [5] | IT教程网站 [4] | 信息港 [4]
动漫 [4] | 手机 [4] | 教育培训 [4] | 个人网站 [4]
博客 [4] | IT资讯网站 [3] | 游戏网站 [3] | 手机咨询 [3]
手机资讯社区 [3] | 建站资源站 [3] | 教育网站 [3] | 软件开发 [3]
合作站点 [3] | 综合 [3] | 域名空间 [3] | 娱乐休闲 [3]
下载站 [3] | 手机游戏 [3] | 商城 [3] | 综合网站 [3]
程序源码 [3] | 综合性网站 [3] | 电脑教程 [2] | 小说 [2]
综合娱乐社区 [2] | 数码 [2] | 房地产 [2] | 大学 [2]
BBS论坛 [2] | blog [2] | IT [2] | IT导购网 [2]
常用软件下载 [2] | 广告艺术 [2] | 设计 [2] | 文学社区 [2]
艺术 [2] | 网摘站 [2] | 同类网站 [2] | 资源下载 [2]
综合社区 [2] | 教育教学 [2] | 驱动下载 [2] | 手机销售 [2]
各类资讯论坛 [1] | 个人主页 [1] | 个人网址导航 [1] | 即时通讯 [1]
软件交流论坛 [1] | 人才网 [1] | mp3网站 [1] | QQ下载 [1]
PDA [1] | PC [1] | Java [1] | IT综合 [1]
卡易点卡超市 [1] | 精品源码下载 [1] | 教育、娱乐 [1] | 价格搜索引擎 [1]
技术 [1] | 电玩游戏 [1] | 电脑与网络 [1] | 电脑硬件 [1]
IT网站 [1] | IT技术点评 [1] | 91电子邮箱 [1] | 3G [1]
18900 [1] | 个人网摘服务 [1] | 个人建站 [1] | 风讯站长资讯 [1]
房地产 社区 [1] | 儿童小游戏 [1] | 多媒体制作 [1] | 动漫部落 [1]
天极Chinabyte: 新闻 | 评论 | 通信 | 互联网 | 科学 | E企业 | 解决议案 | 商用系统 | 服务器 | 存储 | 原创 | 他说 | ERP | CRM
天极Yesky: 消费导购 商情 | 手机 | 数码 | MP3 | 数码相机 | 笔记本 | 硬件 | 品牌机 | 网络 | 投影机 | 扫描仪 | 数字家庭 | 评测
天极Yesky: IT技术 软件 | Windows | DIY | 网管 | Linux | 设计 | Photoshop | 交换技术 | 开发 | MSDN | 安全 | 教育 | 论坛
天极Yesky: 数字生活 e时代 | 游戏 | 网游 | 竞技 | 电脑 | 电视 | 攻略 | 动漫 | COSPLAY | 图片 | 网摘 | 博客 | 下载
IT专家网TechTarget.com.cn: 数据库 | 移动计算 | 网络 | 安全 | 存储 | Windows安全 | 中小企业IT | Exchange | Web服务 | Whatis
欢迎投稿 | 天极服务 | 关于我们 | 电子杂志 | RSS订阅 | 在QQ上看天极 | 加入我们 | 网站地图 | 设定天极为首页
Copyright (C) 2004 Chinabyte.com, All Rights Reserved 版权所有 天极网络
渝ICP证B2-20030003号 如有意见请与我们联系 Powered by 天极内容管理平台CMS4i


域名注册


Html速查手册索引-网页陶吧

 HTML 标记(Tag)的索引
    • 页面(Page)
      • 文件结构
      • 语言字符集信息
      • 背景色彩和文字色彩
      • 页面空白
      • 链接
      • 开新窗口
      • 标尺线
    • 字体(Font)
      • 标题
      • 字号
      • 物理字体
      • 逻辑字体
      • 颜色
      • 客户端字体
      • 字符实体
    • 文字布局(Text Style)
      • 行的控制
      • 文字的对齐
      • 文字的分区
      • 列表
      • 定制列表元素
      • 预格式化文本
      • 空白
      • 多列文本
    • 图象(Image)
      • 基本语法
      • 和文字的对齐
      • 在页面中的对齐/布局
      • 边框
      • 客户端图象映射图
    • 表单(Form)
      • 基本语法
      • 文字和密码
      • 复选和单选
      • 图象坐标
      • 隐藏表单的元素
      • 列表框
      • 文本区域
    • 表格(Table)
      • 基本语法
      • 跨多行、多列的表元
      • 尺寸设置
      • 文字的对齐/布局
      • 在页面中的对齐/布局
      • 标题
    • 表格进阶(Advanced)
      • 色彩
      • 分组显示
      • 边框
      • 分隔线
    • 多窗口页面(Frames)
      • 基本语法
      • 尺寸设置
      • 窗口间相互操作
      • 外观
      • 浮动窗口
    • 会移动的文字(Marquee)
      • 基本语法
      • 移动属性的设置
      • 外观设置
    • 多媒体页面(Alternative Inline Elements)
      • 嵌入多媒体文本
      • 背景音乐
      • 视频剪辑


HTML 速查手册 - 网页陶吧

此网页使用了框架，但您的浏览器不支持框架。


HTML速查手册概要-网页陶吧

Basic tags | 基 本 标 签
<html></html> | Creates an HTML document | 创 建 一 个HTML 文 档
<head></head> Sets off the title and other
information that isn't displayed
on the Web page itself 		设 置 文 档 标 题 以 及 其 他 不 在WEB 网 页 上 显 示 的 信 息
<body></body> Sets off the visible portion of
the document 		设 置 文 档 的 可 见 部 分

Header tags
 标 题 标 签
<title></title> Puts the name of the document
in the title bar 		将 文 档 的 题 目 放 在 标 题 栏 中

Body attributes
 文 档 整 体 属 性
<body bgcolor=?> Sets the background color,
using name or hex value 		设 置 背 景 颜 色， 使 用 名 字 或 十 六 进 制 值
<body text=?> Sets the text color, using
name or hex value 		设 置 文 本 文 字 颜 色， 使 用 名 字 或 十 六 进 制 值
<body link=?> Sets the color of links,
using name or hex value 		设 置 链 接 颜 色， 使 用 名 字 或 十 六 进 制 值
<body vlink=?> Sets the color of followed
links, using name or hex value 		设 置 已 使 用 的 链 接 的 颜 色， 使 用 名 字 或 十 六 进 制 值
<body alink=?> | Sets the color of links on click | 设 置 正 在 被 击 中 的 链 接 的 颜 色， 使 用 名 字 或 十 六 进 制 值

Text tags
 文 本 标 签
<pre></pre> | Creates preformatted text | 创 建 预 格 式 化 文 本
<h1></h1> | Creates the largest headline | 创 建 最 大 的 标 题
<h6></h6> | Creates the smallest headline | 创 建 最 小 的 标 题
<b></b> | Creates bold text | 创 建 黑 体 字
<i></i> | Creates italic text | 创 建 斜 体 字
<tt></tt> Creates teletype, or
typewriter-style text 		创 建 打 字 机 风 格 的 字 体
<cite></cite> Creates a citation, usually
italic 		创 建 一 个 引 用， 通 常 是 斜 体
<em></em> Emphasizes a word (with italic
or bold) 		加 重 一 个 单 词（ 通 常 是 斜 体 加 黑 体）
<strong></strong> Emphasizes a word (with italic
or bold) 		加 重 一 个 单 词（ 通 常 是 斜 体 加 黑 体）
<font size=?></font> | Sets size of font, from 1 to 7 | 设 置 字 体 大 小， 从 1 到 7
<font color=?></font> Sets font color, using name or
hex value 		设 置 字 体 的 颜 色， 使 用 名 字 或 十 六 进 制 值

Links
 链 接
<a href="URL"></a> | Creates a hyperlink | 创 建 一 个 超 链 接
<a href="mailto:EMAIL">
</a> 		Creates a mailto link 创 建 一 个 自 动 发 送 电 子 邮 件 的 链 接
<a name="NAME"></a> Creates a target location within
a document 		创 建 一 个 位 于 文 档 内 部 的 靶 位
<a href="#NAME"></a> Links to that target location
from elsewhere in the document 		创 建 一 个 指 向 位 于 文 档 内 部 靶 位 的 链 接

Formatting
 格 式 排 版
<p> | Creates a new paragraph | 创 建 一 个 新 的 段 落
<p align=?> Aligns a paragraph to the left,
right, or center 		将 段 落 按 左、 中、 右 对 齐
<br> | Inserts a line break | 插 入 一 个 回 车 换 行 符
<blockquote>
</blockquote> 		Indents text from both sides 从 两 边 缩 进 文 本
<dl></dl> | Creates a definition list | 创 建 一 个 定 义 列 表
<dt> | Precedes each definition term | 放 在 每 个 定 义 术 语 词 之 前
<dd> | Precedes each definition | 放 在 每 个 定 义 之 前
<ol></ol> | Creates a numbered list | 创 建 一 个 标 有 数 字 的 列 表
<li> Precedes each list item, and adds
a number 		放 在 每 个 数 字 列 表 项 之 前， 并 加 上 一 个 数 字
<ul></ul> | Creates a bulleted list | 创 建 一 个 标 有 圆 点 的 列 表
<li> Precedes each list item, and adds
the bullet 		放 在 每 个 圆 点 列 表 项 之 前， 并 加 上 一 个 圆 点
<div align=?> A generic tag used to format large
blocks of HTML, also used for
stylesheets 		一 个 用 来 排 版 大 块HTML 段 落 的 标 签， 也 用 于 格 式 化 表

Graphical elements
 图 形 元 素
<img src="name"> | Adds an image | 添 加 一 个 图 像
<img src="name" align=?> Aligns an image: left, right,
center; bottom, top, middle 		排 列 对 齐 一 个 图 像： 左 中 右 或 上 中 下
<img src="name" border=?> Sets size of border around an
image 		设 置 围 绕 一 个 图 像 的 边 框 的 大 小
<hr> | Inserts a horizontal rule | 加 入 一 条 水 平 线
<hr size=?> | Sets size (height) of rule | 设 置 水 平 线 的 大 小（ 高 度）
<hr width=?> Sets width of rule, in percentage
or absolute value 		设 置 水 平 线 的 宽 度（ 百 分 比 或 绝 对 像 素 点）
<hr noshade> | Creates a rule without a shadow | 创 建 一 个 没 有 阴 影 的 水 平 线

Tables
 表 格
<table></table> | Creates a table | 创 建 一 个 表 格
<tr></tr> | Sets off each row in a table | 开 始 表 格 中 的 每 一 行
<td></td> | Sets off each cell in a row | 开 始 一 行 中 的 每 一 个 格 子
<th></th> Sets off the table header (a
normal cell with bold, centered
text) 		设 置 表 格 头： 一 个 通 常 使 用 黑 体 居 中 文 字 的 格 子
Table attributes | 表 格 属 性
<table border=#> Sets width of border around
table cells 		设 置 围 绕 表 格 的 边 框 的 宽 度
<table cellspacing=#> Sets amount of space between table
cells 		设 置 表 格 格 子 之 间 空 间 的 大 小
<table cellpadding=#> Sets amount of space between a
cell's border and its contents 		设 置 表 格 格 子 边 框 与 其 内 部 内 容 之 间 空 间 的 大 小
<table width=# or %> Sets width of table - in pixels
or as a percentage of document width 		设 置 表 格 的 宽 度－ 用 绝 对 像 素 值 或 文 档 总 宽 度 的 百 分 比
<tr align=?> or <td align=?> Sets alignment for cell(s) (left,
center, or right) 		设 置 表 格 格 子 的 水 平 对 齐（ 左 中 右）
<tr valign=?> or <td valign=?> Sets vertical alignment for cell(s)
(top, middle, or bottom) 		设 置 表 格 格 子 的 垂 直 对 齐（ 上 中 下）
<td colspan=#> Sets number of columns a cell should
span (default=1) 		设 置 一 个 表 格 格 子 应 跨 占 的 列 数（ 缺 省 为 1）
<td rowspan=#> Sets number of rows a cell should
span (default=1) 		设 置 一 个 表 格 格 子 应 跨 占 的 行 数（ 缺 省 为 1）
<td nowrap> Prevents the lines within a cell
from being broken to fit 		禁 止 表 格 格 子 内 的 内 容 自 动 断 行 回 卷

Frames | 窗 框
<frameset></frameset> | Precedes the <body> tag in a frames document; can also be nested in other framesets | 放 在 一 个 窗 框 文 档 的 <body> 标 签 之 前，也 可 以 嵌 在 其 他 窗 框 文 档 中
<frameset rows="value,value"> Defines the rows within a frameset,
using number in pixels, or percentage
of width 		定 义 一 个 窗 框 内 的 行 数， 可 以 使 用 绝 对 像 素 值 或 高 度 的 百 分 比
<frameset cols="value,value"> Defines the columns within a frameset, using number in pixels, or percentage
of width 		定 义 一 个 窗 框 内 的 列 数， 可 以 使 用 绝 对 像 素 值 或 宽 度 的 百 分 比
<frame> | Defines a single frame - or region - within a frameset | 定 义 一 个 窗 框 内 的 单 一 窗 或 窗 区 域
<noframes></noframes> Defines what will appear on browsers
that don't support frames 		定 义 在 不 支 持 窗 框 的 浏 览 器 中 显 示 什 么 提 示

Frames attributes | 窗 框 属 性
<frame src="URL"> Specifies which HTML document should
be displayed 		规 定 窗 框 内 显 示 什 么HTML 文 档
<frame name="name"> Names the frame, or region, so it may
be targeted by other frames 		命 名 窗 框 或 区 域 以 便 别 的 窗 框 可 以 指 向 它
<frame marginwidth=#> | Defines the left and right margins for the frame; must be equal to or greater than 1 | 定 义 窗 框 左 右 边 缘 的 空 白 大 小， 必 须 大 于 等 于1
<frame marginheight=#> | Defines the top and bottom margins for the frame; must be equal to or greater than 1 | 定 义 窗 框 上 下 边 缘 的 空 白 大 小， 必 须 大 于 等 于1
<frame scrolling=VALUE> Sets whether the frame has a scrollbar; value may equal "yes," "no," or "auto." The default, as in ordinary documents,
is auto. 		设 置 窗 框 是 否 有 滚 动 栏， 其 值 可 以 是 "yes", "no", "auto"， 缺 省 时 一 般 为 "auto"
<frame noresize> | Prevents the user from resizing a frame | 禁 止 用 户 调 整 一 个 窗 框 的 大 小

Forms | 表 单
For functional forms, you'll have to run a CGI script. The HTML just creates the appearance of a form. | 对 于 功 能 性 的 表 单，一 般 需 要 运 行 一 个 CGI 小 程 序，HTML仅 仅 是产 生 表 单 的 表 面 样 子。
<form></form> | Creates all forms | 创 建 所 有 表 单
<select multiple name="NAME" size=?></select> | Creates a scrolling menu. Size sets the number of menu items visible before you need to scroll. | 创 建 一 个 滚 动 菜 单，size 设 置 在 需 要 滚 动 前 可 以 看 到 的 表 单 项 数 目
<option> | Sets off each menu item | 设 置 每 个 表 单 项 的 内 容
<select name="NAME"></select> | Creates a pulldown menu | 创 建 一 个 下 拉 菜 单
<option> | Sets off each menu item | 设 置 每 个 菜 单 项 的 内 容
<textarea name="NAME" cols=40 rows=8></textarea> | Creates a text box area. Columns set the width; rows set the height. | 创 建 一 个 文 本 框 区 域，列 的 数 目 设 置 宽 度，行 的 数 目 设 置 高 度
<input type="checkbox" name="NAME"> | Creates a checkbox. Text follows tag. | 创 建 一 个 复 选 框，文 字 在 标 签 后 面
<input type="radio" name="NAME" value="x"> Creates a radio button. Text follows
tag 		创 建 一 个 单 选 框，文 字 在 标 签 后 面
<input type=text name="foo" size=20> Creates a one-line text area. Size
sets length, in characters. 		创 建 一 个 单 行 文 本 输 入 区 域，size 设 置 以 字 符 计 的 宽 度
<input type="submit" value="NAME"> | Creates a Submit button | 创 建 一 个 submit（提 交）按 钮
<input type="image" border=0 name="NAME" src="name.gif"> | Creates a Submit button using an image | 创 建 一 个 使 用 图 象 的 submit（提 交）按 钮
<input type="reset"> | Creates a Reset button | 创 建 一 个 reset（重 置）按 钮


LOVINGBOX--HTML语言教程

字符实体(ENTITIES)名称列表

+ HTML2.0 字符实体名称列表

&nbsp;           &iexcl;          &cent;           &pound;          &curren;         &yen;            &brvbar;         &sect;           &uml;            &copy;           &ordf;           &laquo;          &not;            &shy;            &reg;            &macr;           &deg;            &plusmn;         &sup2;           &sup3;           &acute;          &micro;          &para;           &middot;         &cedil;          &sup1;           &ordm;           &raquo;           &frac14;         &frac12;         &iquest;

+ HTML3.2 字符实体名称列表

&trade;         &trade;

+ ISO 字符实体名称列表

Following entities for ISO 8859 Latin-1 ignore when using other character sets. Anyway, you can specify charset of html source with meta tag.

&AElig;         &Aacute;        &Acirc;         &Agrave;        &Aring;         &Atilde;        &Auml;          &Ccedil;        &ETH;           &Eacute;        &Ecirc;         &Egrave;        &Euml;          &Iacute;        &Icirc;         &Igrave;        &Iuml;          &Ntilde;        &Oacute;        &Ocirc;         &Ograve;        &Oslash;        &Otilde;        &Ouml;          &THORN;         &Uacute;        &Ucirc;         &Ugrave;        &Uuml;          &Yacute;        &aacute;        &acirc;         &aelig;         &agrave;        &aring;         &atilde;        &auml;          &ccedil;        &eacute;        &ecirc;         &egrave;        &eth;           &euml;          &iacute;        &icirc;         &igrave;        &iuml;          &ntilde;        &oacute;        &ocirc;         &ograve;        &oslash;        &otilde;        &ouml;          &szlig;         &thorn;         &uacute;        &ucirc;         &ugrave;        &uuml;          &yacute;        &yuml;          &#161;          &#162;          &#163;          &#165;          &#166;          &#167;          &#168;          &#169;          &#170;          &#171;          &#172;          &#173;          &#174;          &#175;          &#176;          &#177;          &#178;          &#179;          &#180;          &#181;          &#182;          &#183;          &#184;          &#185;          &#186;          &#187;          &#188;          &#189;          &#190;          &#191;          &#215;          &#222;          &#247;

返回教程中“字符实体(Entities)”一处


LOVINGBOX--HTML语言教程

字体(FONT)标记(TAGS)

+ 标题字体(Header)

<h#> ... </h#> #=1, 2, 3, 4, 5, 6

<h1>今天天气真好！</h1> 今天天气真好！

<h2>今天天气真好！</h2> 今天天气真好！

<h3>今天天气真好！</h3> 今天天气真好！

<h4>今天天气真好！</h4> 今天天气真好！

<h5>今天天气真好！</h5> 今天天气真好！
<h6>今天天气真好！</h6> 今天天气真好！
  • <hn>---</hn> 这些标记显示黑体字。
  • <hn>---</hn> 这些标记自动插入一个空行，不必用 <p>标记再加空行。
    因此在一行中无法使用不同大小的字体。
  +    字体大小

<font size=#> ... </font> #=1, 2, 3, 4, 5, 6, 7 or +#,-#
<basefont size=#> #=1, 2, 3, 4, 5, 6, 7
<font size=7>今天天气真好！</font> 今天天气真好！
 <font size=6>今天天气真好！</font> 今天天气真好！
 <font size=5>今天天气真好！</font> 今天天气真好！
 <font size=4>今天天气真好！</font> 今天天气真好！
 <font size=3>今天天气真好！</font> 今天天气真好！
 <font size=2>今天天气真好！</font> 今天天气真好！
 <font size=1>今天天气真好！</font> 今天天气真好！

  +    物理字体(Physical Style)
<b>今天天气真好！</b> 今天天气真好！
 <i>今天天气真好！</i> 今天天气真好！
 <u>今天天气真好！</u> 今天天气真好！
 <tt>今天天气真好！</tt> 今天天气真好！
 <sup>今天天气真好！</sup> 今天天气真好！
 <sub>今天天气真好！</sub> 今天天气真好！
 <s>今天天气真好！</s> 今天天气真好！
 <strike>今天天气真好！</strike> 今天天气真好！

  +    逻辑字体(Logical Style)
<em>今天天气真好！</em> 今天天气真好！
 <strong>今天天气真好！</strong> 今天天气真好！
 <code>今天天气真好！</code> 今天天气真好！
 <samp>今天天气真好！</samp> 今天天气真好！
 <kbd>今天天气真好！</kbd> 今天天气真好！
 <var>今天天气真好！</var> 今天天气真好！
 <dfn>今天天气真好！</dfn> 今天天气真好！
 <cite>今天天气真好！</cite> 今天天气真好！
 <small>今天天气真好！</small> 今天天气真好！
 <big>今天天气真好！</big> 今天天气真好！

  +    指定“字体大小”的标记和“指定字体”的标记的组合使用
<i><font size=5>        <b>今天</b> 天气<font size=6> 真好！</font></font></i>
今天 天气 真好！
  +    字体颜色

指定颜色 <font color=#> ... </font>
#=rrggbb 16 进制数码，或者是下列预定义色彩：
Black, Olive,Teal, Red, Blue,Maroon, Navy,Gray, Lime,
Fuchsia, White,Green, Purple,Silver, Yellow,Aqua
<font color=ffffff>White</font> &
<font color=white>White</font>
White & White
  +    客户端字体(Font Face)

<font face="#, #, ..., #"> ... </font>
#=客户端可获得的字体
<font face="Arial, Helvetica"> Hellow World!</font>
Hellow World!

客户端字体(Font     Face)示例
  +    字符实体(Entities)

&#; #=字符实体名称 或者 ascii 值
HTML2.0 的字符集
&amp;           &&lt;            <&gt;            >&quot;          "
HTML2.0   字符实体名称列表
HTML3.2   字符实体名称列表
ISO   字符实体名称列表


LOVINGBOX--HTML语言教程

表单(FORM)标记(TAGS)

+ 基本语法

表单的基本语法

<form action="url" method=*>
...
...
<input type=submit> <input type=reset>
</form>

*=GET, POST

表单中提供给用户的输入形式

<input type=* name=**>

*=text, password, checkbox, radio, image, hidden, submit, reset

**=Symbolic Name for CGI script

+ 文字输入和密码输入

*=text, password

<input type=*>
<input type=* value=**>

<form action=/cgi-bin/post-query method=POST>您的姓名: <input type=text name=姓名><br>您的主页的网址: <input type=text name=网址 value=http://><br>密码: <input type=password name=密码><br><input type=submit value="发送"><input type=reset value="重设"></form>

您的姓名:
您的主页的网址:
密码:

<input type=* size=**>
<input type=* maxlength=**>
<form action=/cgi-bin/post-query method=POST><input type=text name=a01 size=40><br><input type=text name=a02 maxlength=5><br><input type=submit><input type=reset></form>

  +    复选框(Checkbox) 和 单选框(RadioButton)

<input type=checkbox>
<input type=checkbox checked>
<input type=checkbox value=**>
<form action=/cgi-bin/post-query method=POST><input type=checkbox name=水果1>        Banana<p><input type=checkbox name=水果2 checked>        Apple<p><input type=checkbox name=水果3 value=橘子>        Orange<p><input type=submit><input type=reset></form>
Banana
 Apple
 Orange

<input type=radio value=**>
<input type=radio value=** checked>
<form action=/cgi-bin/post-query method=POST><input type=radio name=水果>        Banana<p><input type=radio name=水果 checked>        Apple<p><input type=radio name=水果 value=橘子>        Orange<p><input type=submit><input type=reset></form>
Banana
 Apple
 Orange

  +    图象坐标
在下面选则一个系数后，在图象上点一下，就知道什么是图象坐标了！
<input type=image src=url>
<form action=/cgi-bin/post-query method=POST><input type=image name=face src=f.gif><p><input type=radio name=zoom value=2 checked>x2<input type=radio name=zoom value=4>x4<input type=radio name=zoom value=6>x6<p><input type=reset></form>

x2 x4x6

  +    隐藏表单的元素
<input type=hidden value=*>
<form action=/cgi-bin/post-query method=POST><input type=hidden name=add value=hoge@hoge.jp>Here is a hidden element. <p><input type=submit><input type=reset></form>
Hereis a hidden element.
  +    列表框(Selectable Menu)

基本语法
<select name=*>
<option> ...
</select>

<option selected>
<option value=**>
<form action=/cgi-bin/post-query method=POST><select name=fruits>        <option>Banana        <option selected>Apple        <option value=My_Favorite>Orange</select><p><input type=submit><input type=reset></form>

<select size=**>
<form action=/cgi-bin/post-query method=POST><select name=fruits size=3>        <option>Banana        <option selected>Apple        <option value=My_Favorite>Orange        <option>Peach</select><p><input type=submit><input type=reset></form>

<select size=** multiple>
注意，是用 Ctrl 键配合鼠标实现多选。
(和 MS-WINDOWS 的 File Manager 一样)
<form action=/cgi-bin/post-query method=POST><select name=fruits size=3 multiple>        <option selected>Banana        <option selected>Apple        <option value=My_Favorite>Orange        <option selected>Peach</select><p><input type=submit><input type=reset></form>
  +    文本区域
<textarea name=* rows=** cols=**> ... <textarea>
<form action=/cgi-bin/post-query method=POST><textarea name=comment rows=5 cols=60></textarea><P><input type=submit><input type=reset></form>
对于很长的行是否进行换行的设置(Word Wrapping)
<textarea wrap=off> ... </textarea>
不换行，是缺省设置。

<textarea wrap=soft> ... </textarea>
“软换行”，好象 MS－WORD 里的“软回车”。
<form action=/cgi-bin/post-query method=POST>
<textarea wrap=soft name=comment rows=5 cols=25> </textarea><P>
<input type=submit><input type=reset>
</form>

<textarea wrap=hard> ... </textarea>
“硬换行”，好象 MS－WORD 里的“硬回车”。
<form action=/cgi-bin/post-query method=POST>
<textarea wrap=hard name=comment rows=5 cols=25> </textarea><P>
<input type=submit><input type=reset>
</form>


LOVINGBOX--HTML语言教程

多窗口页面(Frames)

+ 基本语法

<frameset> ... </frameset>
<frame src="url">
<noframes> ... </noframes>

在 <noframes> 标记后的文字将只出现在不支持 FRAMES 的浏览器中。

        <HTML>        <HEAD>        </HEAD>        <FRAMESET>             <FRAME SRC="url">             <NOFRAMES> ... </NOFRAMES>        </FRAMESET>        </HTML>

+ 各窗口的尺寸设置

<frameset cols=#>

纵向排列多个窗口：
<frameset cols=30%,20%,50%><frame src="A.html"><frame src="B.html"><frame src="C.html"></frameset>示例
A B C

<frameset rows=#>
横向排列多个窗口：

<frameset rows=25%,25%,50%><frame src="A.html"><frame src="B.html"><frame src="C.html"></frameset>示例
A
B
C

COLS & ROWS
纵横排列多个窗口：

<frameset cols=20%,*><frame src="A.html">     <frameset rows=40%,*>     <frame src="B.html">     <frame src="C.html">     </frameset></frameset>示例
A  B
C

不允许各窗口改变大小 <frame noresize>
缺省设置是允许各窗口改变大小的。
  +    各窗口间相互操作(Frame Target)

窗口标识(Frame Name)
<frame name=#>
<a href=url target=#>

<frameset cols=50%,50%><frame src="A.html"><frame src="B.html" name="HELLO"></frameset>示例
A  B

特殊的 4 类操作(很有用喔)
<a href=url target=_blank> 新窗口
<a href=url target=_self> 本窗口
<a href=url target=_parent> 父窗口
<a href=url target=_top> 整个浏览器窗口
示例
  +    Frame 的外观(Appearance)

各窗口边框的设置 <frame frameborder=#> #=yes, no / 1, 0

<frameset rows=30%,*><frame src="Acol.html" frameborder=1><frameset cols=30%,*>     <frame src="Bcol.html" frameborder=0>     <frame src="Ccol.html" frameborder=0></frameset></frameset>示例
   (A 有边框，B、C 没有)
A
B  C

各窗口间空白区域的设置
  <frameset framespacing=#> #=空白区域的大小

<frameset rows=30%,* framespacing=100><frame src="Acol.html"><frameset cols=30%,*>     <frame src="Bcol.html">     <frame src="Ccol.html"></frameset></frameset>示例
A
B  C

边框色彩 <frameset bordercolor=#>
#=rrggbb 16 进制 RGB 数码, 或者是下列预定义色彩名称：
Black, Olive,Teal, Red, Blue,Maroon, Navy,Gray, Lime,
Fuchsia, White,Green, Purple,Silver, Yellow,Aqua

<frameset rows=30%,* bordercolor=red><frame src="Acol.html"><frameset cols=30%,*>     <frame src="Bcol.html">     <frame src="Ccol.html"></frameset></frameset>示例
A
B  C

页面空白(Margin) <frame marginwidth=# marginheight=#>

<frameset cols=50%,50%><frame src="A.html"><frame src="A.html"     marginwidth=50     marginheight=50></frameset>示例
AAAA  AA
AA

卷滚条设置 <frame scrolling=#> #=yes, no, auto
#=缺省值是 auto。
  +    浮动窗口(Floating Frame)

<FRAME src=# name=##> ... </FRAME>
#=初始页面的 URL
##=窗口标识(Frame Name)(之后可对此标识进行各窗口间相互操作)
... = 此处文字将只出现在不支持 FRAMES 的浏览器中。

<center><FRAME src="A.html" name="window">   Here is a Floating Frame</FRAME><br><br><a href="A.html" target="window">Load A</A><BR><a href="B.html" target="window">Load B</A><BR><a href="Ccol.html" target="window">Load C</A><BR></center>示例
Display A.html

Load A
Load B
Load C


LOVINGBOX--HTML语言教程

图象(IMAGE)标记(TAGS)

+ 链入图象的基本语法

<img src=#> #=图象的 URL

<img alt=#>
#=在浏览器尚未完全读入图象时，在图象位置显示的文字。

<img src="f.gif" alt="MY FACE :-)">

MY FACE :-)

  +    图象和文字的对齐
<img align=#> #=top, middle, bottom
<img src=URL align=top> My face!
     My Face!
<img src=URL align=middle> My face!
     My Face!
<img src=URL align=bottom> My face!
     My Face!
  • 只有一行文字才可以放在图象的两边。（不知道翻译的对不对？)
  • Only one text line can be flown into the both side of Image.
  +    图象在页面中的对齐/布局(Floating Image)

<img align=left>
<img src=URL align=left>My Face!<br>
It is always<br>
smiling.<br>
Hahaha....<br>
  My   Face!
It is always
smiling.
Hahaha....

<img align=right>
  My   Face!
It is always
smiling.
Hahaha....

<br clear=all>
<img src=URL align=left>My Face!<br>
It is always
<br clear=all>
smiling.<br>
Hahaha....<br>
  My   Face!
It is always

smiling.
Hahaha....

<img vspace=# hspace=#> #=value
<img src=URL align=left vspace=10 hspace=20>My Face!<br>
It is always<br>
smiling.<br>
Hahaha....<br>
  My   Face!
It is always
smiling.
Hahaha....

  +    边框

<img border=#> #=value
<a href="URL">
<img src=URL border=15>
</a>

  +    客户端图象映射图(Client   Side Image Map)


LOVINGBOX--HTML语言教程

多媒体页面(Alternative Inline Elements)

+ 嵌入多媒体文本(EMBED)

基本语法 <embed src=#> #=URL

本标记可以用来在主页中嵌入多媒体文本，如：
电影(movie), 声音(sound), 虚拟现实语言(vrml)... ...
体会 <embed> 标记，您需要把 plugin 安装完备。
请注意：embed attributes are different between each plugins.

  +    背景音乐

<bgsound src=#> #=WAV 文件的 URL
<bgsound loop=#> #=循环数
<bgsound src="sound.wav" loop=3>
示例
  + 插入视频剪辑

<img src="url.gif" dynsrc="url.avi">
用 url.avi 这一 AVI(Video for MS－WINDOWS) 文件来播放视频；
用 url.gif 这一 GIF 图象作为视频的封面，即：在浏览器
尚未完全读入 AVI 文件时，先在 AVI 播放区域显示该图象。
<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI">

何时开始播放 AVI <img start=#> #=fileopen, mouseover
缺省值是 #=fileopen，即在链接到含本标记的页面(如本页)时开始播放 AVI。
mouseover 是指您把鼠标移到 AVI 播放区域之上时才开始播放 AVI。
也可以两者同时设置：<img start=fileopen,mouseover>
另外，用鼠标在 AVI 播放区域点击一下，也将令浏览器开始播放该 AVI。

<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI" start=mouseover>

控制条 <img controls>
用来在视频窗口下附加 MS－WINDOWS 的 AVI 播放控制条。
<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI" controls>

循环播放 <img loop=#>
<loop=infinite> 将循环播放不止。

<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI" loop=3>

延时 <img loopdelay=#> #=毫秒数
<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI"  loop=3 loopdelay=250>


LOVINGBOX--HTML语言教程

客户端图象映射图
(Client Side Image Map)

+ 客户端图象映射图(Client Side Image Map)

请在下图中用鼠标到处点一点，就会理解“客户端图象映射图”的意思了。

<img src=img.gif usemap="MAP-Name">

<map name="MAP-Name">
<area shape="#" coords="#" href="url">
</map>

#
shape="rect" coords="A,A',B,B'"
(A,A')=Upper Left, (B,B')=Lower Right
shape="circle" coords="A,A',R'"
(A,A')=Center, R=Radius
shape="poly" coords="A,A',B,B',C,C'..."
(A,A'>=First Corner, (B,B')=Second Corner, ...

<img src="mapimg.gif" usemap="#Face"><map name="Face"><!Text BOTTON>   <area shape="rect"         href="page.html"          coords="140,20,280,60"><!Triangle BOTTON>   <area shape="poly"         href="image.html"         coords="100,100,180,80,200,140"><!FACE>   <area shape="circle"          href="new.html"          coords="80,100,60"></map>
返回教程中“图象”一节


LOVINGBOX--HTML语言教程

会移动的文字(Marquee)

+ 基本语法

<marquee> ... </marquee>

<marquee>啦啦啦，我会移动耶！</marquee>

啦啦啦，我会移动耶！

  + 文字移动属性的设置
方向 <direction=#> #=left, right
<marquee direction=left>啦啦啦，我从右向左移！</marquee> <P>
<marquee direction=right>啦啦啦，我从左向右移！</marquee>
啦啦啦，我从右向左移！
啦啦啦，我从左向右移！
方式 <bihavior=#> #=scroll, slide, alternate
<marquee behavior=scroll>啦啦啦，我一圈一圈绕着走！</marquee><P>
<marquee behavior=slide>啦啦啦，我只走一次就歇了！</marquee> <P>
<marquee behavior=alternate>啦啦啦，我来回走耶！</marquee>
啦啦啦，我一圈一圈绕着走！
啦啦啦，我只走一次就歇了！
啦啦啦，我来回走耶！
循环 <loop=#> #=次数；若未指定则循环不止(infinite)
<marquee loop=3 width=50% behavior=scroll>啦啦啦，我只走 3 趟哟！</marquee><P>
<marquee loop=3 width=50% behavior=slide>啦啦啦，我只走 3 趟哟！</marquee><P>
<marquee loop=3 width=50% behavior=alternate>啦啦啦，我只走 3 趟哟！</marquee>
啦啦啦，我只走 3 趟哟！
啦啦啦，我只走 3 趟哟！
啦啦啦，我只走 3 趟哟！
速度 <scrollamount=#>
<marquee scrollamount=20>啦啦啦，我走得好快哟！</marquee>
啦啦啦，我走得好快哟！

延时 <scrolldelay=#>
<marquee scrolldelay=500 scrollamount=100>啦啦啦，我走一步，停一停！</marquee>
啦啦啦，我走一步，停一停！
  +    外观(Layout)设置
对齐方式(Align) <align=#> #=top, middle, bottom
<font size=6>
<marquee align=# width=400>啦啦啦，我会移动耶！</marquee>
</font>
对齐上沿、中间、下沿。
啦啦啦，我会移动耶！对齐上沿。
啦啦啦，我会移动耶！对齐中间。
啦啦啦，我会移动耶！对齐下沿。
底色 <bgcolor=#>
#=rrggbb 16 进制数码，或者是下列预定义色彩：
Black, Olive,Teal, Red, Blue,Maroon, Navy,Gray, Lime,
Fuchsia, White,Green, Purple,Silver, Yellow,Aqua
<marquee bgcolor=aaaaee>啦啦啦，我会移动耶！</marquee>
啦啦啦，我会移动耶！
面积 <height=# width=#>
<marquee height=40 width=50% bgcolor=aaeeaa>
啦啦啦，我会移动耶！
</marquee>
啦啦啦，我会移动耶！
空白(Margins)<hspace=# vspace=#>
********************************************<br>
嗨,
<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>啦啦啦，我会移动耶！</marquee>
大家好！<br>
********************************************
********************************************
嗨, 啦啦啦，我会移动耶！大家好！
********************************************


LOVINGBOX--HTML语言教程

页面(PAGE)标记(TAGS)

+ HTML 文件结构(Document Structures)

<html>...</html>
<head>...</head>
<body>...</body>

<HTML><HEAD>     <title>, <base>, <link>, <isindex>, <meta></HEAD><BODY>    HTML 文件的正文写在这里... ... </BODY></HTML>

+ 语言字符集(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

可在 HTML 文件中设置 MIME 字符集信息。
您在浏览主页时，最好自己在浏览器的选项菜单内选择相应的语言(language encoding)。
但是如果 HTML 文件里写明了设置，浏览器就会自动设置语言选项。
尤其是主页里用到了字符实体(entities)，则该主页就应该写明字符集信息。
否则，您在浏览该主页时，若未正确设置语言选项，显示将可能混乱。

  +    背景色彩和文字色彩
<body bgcolor=# text=# link=# alink=# vlink=#>
bgcolor --- 背景色彩
text --- 非可链接文字的色彩
link --- 可链接文字的色彩
alink --- 正被点击的可链接文字的色彩
vlink --- 已经点击(访问)过的可链接文字的色彩
#=rrggbb
色彩是用 16 进制的 红－绿－蓝(red-green-blue, RGB) 值来表示。
16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.

背景图象 <body background="image-URL">
  Non Scrolling Background <body bgproperties=FIXED>
  +    页面空白(Margin)

页面左边的空白 <body leftmargin=#>
页面上方的空白(天头) <body topmargin=#> #=margin amount
  +    链接(Link)

基本语法 <a href="URL"> ... </a>
这是一个
<a href="samp/link.html">链接的例子</a>。
点一下带下划线的文字!
这是一个链接的例子。   点一下带下划线的文字!

跳转到页面的另外一个地方
<a href="#name"> ... </a>
<a name="name"> ... </a>
<a href="#jump-test">跳转到下一个"链接点"</a><P>
<a name="jump-test">下一个链接点</a>
跳转到下一个"链接点"
 下一个链接点
跳转到另一个页面的某个地方
<a href="URL#name"> ... </a>
<a name="name"> ... </a>
跳转到另一个页面的<a href="samp/link.html#jump-test">某个地方</a>。
跳转到另一个页面的某个地方。
  +    开一个新的(浏览器)窗口 (Target Window)

<a href="URL" target="Window_Name"> ... </a>
<a href="samp/window.html" target="window_name">
开一个新窗口!
</a>
开一个新窗口!
  +    标尺线
<hr>
<hr>
<hr size=#>
<hr size=10>
<hr width=#>
<hr width=50>
<hr width=50%>
<hr align=#> #=left, right
<hr width=50% align=left>
<hr width=50% align=right>
<hr noshade>
<hr noshade>
<hr color=#>
#=rrggbb 16 进制 RGB 数码，或者是下列预定义色彩：
Black, Olive,Teal, Red, Blue,Maroon, Navy,Gray, Lime,
Fuchsia, White,Green, Purple,Silver, Yellow,Aqua
<hr color="red">


LOVINGBOX--HTML语言教程

表格(TABLE)标记(TAGS)

+ 表格的基本语法

<table>...</table> - 定义表格
<tr> - 定义表行
<th> - 定义表头
<td> - 定义表元(表格的具体数据)

带边框的表格：
<table border><tr><th>Food</th><th>Drink</th><th>Sweet</th><tr><td>A</td><td>B</td><td>C</td>      </table>
Food | Drink | Sweet
A | B | C

不带边框的表格：

<table><tr><th>Food</th><th>Drink</th><th>Sweet</th><tr><td>A</td><td>B</td><td>C</td>      </table>
Food | Drink | Sweet
A | B | C
  +    跨多行、多列的表元(Table Span)

跨多列的表元 <th colspan=#>
<table border><tr><th colspan=3> Morning Menu</th><tr><th>Food</th>       <th>Drink</th>  <th>Sweet</th><tr><td>A</td><td>B</td><td>C</td></table>
Morning Menu
Food | Drink | Sweet
A | B | C

跨多行的表元 <th rowspan=#>
<table border><tr><th rowspan=3> Morning Menu</th>        <th>Food</th> <td>A</td></tr><tr><th>Drink</th> <td>B</td></tr><tr><th>Sweet</th> <td>C</td></tr></table>
Morning Menu | Food | A
 | Drink | B
 | Sweet | C
  +    表格尺寸设置

<table border=#>
边框尺寸设置：
<table border=10><tr><th>Food</th><th>Drink</th><th>Sweet</th><tr><td>A</td><td>B</td><td>C</td>      </table>
Food | Drink | Sweet
A | B | C

<table border width=# height=#>
表格尺寸设置：
<table border width=170 height=100><tr><th>Food</th><th>Drink</th><th>Sweet</th><tr><td>A</td><td>B</td><td>C</td>      </table>
Food | Drink | Sweet
A | B | C

<table border cellspacing=#>
表元间隙设置：
<table border cellspacing=10><tr><th>Food</th><th>Drink</th><th>Sweet</th><tr><td>A</td><td>B</td><td>C</td>      </table>
Food | Drink | Sweet
A | B | C

<table border cellpadding=#>
表元内部空白设置：
<table border cellpadding=10><tr><th>Food</th><th>Drink</th><th>Sweet</th><tr><td>A</td><td>B</td><td>C</td>      </table>
Food | Drink | Sweet
A | B | C
  +    表格内文字的对齐/布局

<tr align=#>
<th align=#> #=left, center, right
<td align=#>
<table border width=160><tr>                <th>Food</th><th>Drink</th><th>Sweet</th><tr>                <td align=left>A</td>                <td align=center>B</td>                <td align=right>C</td>  </table>
Food | Drink | Sweet
A | B | C

<tr valign=#>
<th valign=#> #=top, middle, bottom, baseline
<td valign=#>
<table border height=100><tr>                <th>Food</th><th>Drink</th>                <th>Sweet</th><th>Other</th><tr>                <td valign=top>A</td>                <td valign=middle>B</td>                <td valign=bottom>C</td>                <td valign=baseline>D</td></table>
Food | Drink | Sweet | Other
A | B | C | D
  +    表格在页面中的对齐/布局(Floating Table)

<table align=left>
<table align="left" border><tr><th>Food</th><th>Drink</th><th>Sweet</th><tr><td>A</td><td>B</td><td>C</td></table>My favorites...<br>cookies, chocolates, and more.
Food | Drink | Sweet
A | B | C
My favorites...
cookies, chocolates, and more.

<table align=right>
Food | Drink | Sweet
A | B | C
My favorites...
cookies, chocolates, and more.
<table vspace=# hspace=#> #=space value
<table align="left" border vspace=20 hspace=30><tr><th>Food</th><th>Drink</th><th>Sweet</th><tr><td>A</td><td>B</td><td>C</td></table>My favorites...<br>cookies, chocolates, and more.
Food | Drink | Sweet
A | B | C
My favorites...
cookies, chocolates, and more.
  +    表格的标题

<caption align=#> ... </caption> #=left, center, right
<table border><caption align=center>Lunch</caption><tr><th>Food</th><th>Drink</th><th>Sweet</th><tr><td>A</td><td>B</td><td>C</td>      </table>
Lunch
Food | Drink | Sweet
A | B | C

<caption valign=#> ... </caption> #=top, bottom
  • valign=top is default.
<table border><caption valign=bottom>Lunch</caption><tr><th>Food</th><th>Drink</th><th>Sweet</th><tr><td>A</td><td>B</td><td>C</td>      </table>
Lunch
Food | Drink | Sweet
A | B | C


LOVINGBOX--HTML语言教程

表格进阶(TABLE ADVANCED)

+ 表格的色彩

表元的背景色彩和背景图象
<th bgcolor=#>
<th background="URL">

#=rrggbb 16 进制 RGB 数码, 或者是下列预定义色彩名称：
Black, Olive,Teal, Red, Blue,Maroon, Navy,Gray, Lime,
Fuchsia, White,Green, Purple,Silver, Yellow,Aqua
<table border><tr><th bgcolor=ffaa00>Food</th>    <th bgcolor=Red>Drink</th>    <th rowspan=2 background="image.gif">Sweet</th><tr bgcolor=white><td>A</td><td>B</td></table>
Food | Drink | Sweet
A | B

表格边框的色彩
<table bordercolor=#>
<table cellspacing=5 border=5 bodercolor=#ffaa00><tr><th>Food</th><th>Drink</th><th>Sweet</th><tr><td>A</td><td>B</td><td>C</td>      </table>
Food | Drink | Sweet
A | B | C

表格边框色彩的亮度控制
<table bordercolorlight=#>
<table bordercolordark=#>
<table cellspacing=5 border=5      bordercolorlight=White bordercolordark=Maroon><tr><th>Food</th><th>Drink</th><th>Sweet</th><tr><td>A</td><td>B</td><td>C</td>      </table>
Food | Drink | Sweet
A | B | C
  +    表格的分组显示(Structured Table)

按行分组
<thead> ... </thead> - 表的题头(Header)
<tbody> ... </tbody> - 表的正文(Body)
<tfoot> ... </tfoot> - 表的脚注(Footer)
<table border><thead>     <tr><th>Food</th><th>Drink</th><th>Sweet</th></thead><tbody>     <tr><td>A</td><td>B</td><td>C</td>     <tr><td>D</td><td>E</td><td>F</td></tbody></table>
Food | Drink | Sweet
A | B | C
D | E | F

按列分组
<colgroup align=#> #=left, right, center
<table border width=160><colgroup align=left><colgroup align=center><colgroup align=right>     <thead>          <tr><th>Food</th><th>Drink</th><th>Sweet</th>     </thead>     <tbody>          <tr><td>A</td><td>B</td><td>C</td>          <tr><td>D</td><td>E</td><td>F</td>     </tbody></table>
Food | Drink | Sweet
A | B | C
D | E | F

列的属性控制
<col span=#> #=从左数起，具有指定属性的列的列数
<col align=#> #=left, right, center
<table border width=160><colgroup>     <col align=center span=2><colgroup align=right>     <thead>          <tr><th>Food</th><th>Drink</th><th>Sweet</th>     </thead>     <tbody>          <tr><td>A</td><td>B</td><td>C</td>          <tr><td>D</td><td>E</td><td>F</td>     </tbody></table>
Food | Drink | Sweet
A | B | C
D | E | F
  +    表格中边框的显示

显示所有 4 个边框 <table frame=box>
<table border frame=box><thead>     <tr><th>Food</th><th>Drink</th><th>Sweet</th></thead><tbody>     <tr><td>A</td><td>B</td><td>C</td>     <tr><td>D</td><td>E</td><td>F</td></tbody></table>
Food | Drink | Sweet
A | B | C
D | E | F

只显示上边框 <table frame=above>
Food | Drink | Sweet
A | B | C
D | E | F

只显示下边框 <table frame=below>
Food | Drink | Sweet
A | B | C
D | E | F

只显示上、下边框 <table frame=hsides>
Food | Drink | Sweet
A | B | C
D | E | F

只显示左、右边框 <table frame=vsides>
Food | Drink | Sweet
A | B | C
D | E | F

只显示左边框 <table frame=lhs>
Food | Drink | Sweet
A | B | C
D | E | F

只显示右边框 <table frame=rhs>
Food | Drink | Sweet
A | B | C
D | E | F

不显示任何边框 <table frame=void>
Food | Drink | Sweet
A | B | C
D | E | F
  +    表格中分隔线(Rules)的显示

显示所有分隔线 <table rules=all>
<table border rules=all><colgroup><col align=center span=2><colgroup align=right>     <thead>          <tr><th>Food</th><th>Drink</th><th>Sweet</th>     </thead>     <tbody>          <tr><td>A</td><td>B</td><td>C</td>          <tr><td>D</td><td>E</td><td>F</td>     </tbody>     <tbody>          <tr><td rowspan=3 align=right>Total $-00.0</td>     </tbody></table>
Food | Drink | Sweet
A | B | C
D | E | F
Total $-00.0

只显示组(Groups)与组之间的分隔线 <table rules=groups>
Food | Drink | Sweet
A | B | C
D | E | F
Total $-00.0

只显示行与行之间的分隔线 <table rules=rows>
Food | Drink | Sweet
A | B | C
D | E | F
Total $-00.0

只显示列与列之间的分隔线 <table rules=cols>
Food | Drink | Sweet
A | B | C
D | E | F
Total $-00.0

不显示任何分隔线 <table rules=none>
Food | Drink | Sweet
A | B | C
D | E | F
Total $-00.0


LOVINGBOX--HTML语言教程

HTML 标记(Tag)的索引(Index)

标记索引
 标记属性(Attribute)索引

标记(Tags)

a
Link

area
Map

b
Physical Font Style

basefont
Default Font Size

big
Logical Font Style

blink
Other text element

blockquote
Other text element

body
Document Structure
 Background Color

br
Line Control
 Floating Image

caption
Caption

center
Centering

cite
Logical Font Style

code
Logical Font Style

dd
Basic Listings

dfn
Logical Font Style

div
Division

dl
Basic Listings

dt
Basic Listings

em
Logical Font Style

fig
Floating Image

font
Font Size
Font Color
Font Face

form
Form Basic Structure

frame
Frames

frameset
Frames

h1 ... h6
Header
 Centering

head
Document Structures

hr
Horizontal Rules

html
Document Structures

i
Physical Font Style

img
Basic Rules of Image

input
Form Basic Structure

kbd
Logical Font Style

left
Math Basic Control

li
Basic Listings
 Customized listing items

listing
Preformatted Text

map
Map

marquee
Marquee

math
Math Basic Control

nobr
Line Control

noframes
Frames

ol
Basic Listings
 Customized listing items

option
Selectable Menu

over
Fraction

p
Line Control

pre
Preformatted Text

right
Math Basic Control

s
Other Style

select
Selectable Menu

small
Logical Font Style

strong
Logical Font Style

sub
Other Style

sup
Other Style

table
Table Basic Tags

textarea
Text Area

td
Table Basic Tags

th
Table Basic Tags

tr
Table Basic Tags

tt
Physical Font Style

u
Physical Font Style

ul
Basic Listings

var
Logical Font Style

xmp
Preformatted Text

标记(Tag)属性(Attributes)

action
Form Basic Structure

align
Horizontal Rules
 Centering
 Division
 Image aligned with Text
 Floating Image
 Table Text Layout
 Floating Table
 Marquee

alink
Background and Text Color

alt
Basic Rules of Image

background
Background and Text Color

behavior
Marquee

bgcolor
Background and Text Color
 Cell Color
 Marquee

border
Border Line
 Table Size

cellpadding
Table Size

cellspacing
Table Size

checked
Checkbox & Radio

clear
Floating Image

color
Font Color

cols
Text Area
Frame Size

colspan
Table Span

compact
Basic Listings

coords
Map

direction
Marquee

face
Font Face

height
Table Size
Marquee

href
Link

Map

hspace
Floating Image
Marquee

link
Background and Text Color

loop
Marquee

marginheight
Frame Margin

marginwidth
Frame Margin

maxlength
Text & Password

method
Form Basic Structure

multiple
Selectable Menu

name
Form Basic Structure
Link
Frame

noresize
Frame Size

rows
Text Area
Frame Size

rowspan
Table Span

scrollamount
Marquee

scrolldelay
Marquee

scrolling
Scroll Bar

selected
Selectable Menu

shape
Map

size
Horizontal Rules
 Font Size
 Text & Password
 Selectable Menu

src
Basic Rules of Image

Image coordinates

start
Customized listing items

target
Target Windows

text
Background and Text Color

type
Customized listing items
 Form Basic Structure

valign
Table Text Layout

value
Text & Password
 Checkbox & Radio
 Hidden Elements
 Selectable Menu

vlink
Background and Text Color

vspace
Floating Image
Marquee

width
Horizontal Rules
 Table Size
 Marquee

wrap
Textarea Word Wrapping


LOVINGBOX--HTML语言教程

文字布局(TEXT STYLE)标记(TAGS)

+ 行的控制

段(Paragraph) (可以看作是空行) <p>

你好吗？<p>很好。

你好吗？

很好。

换行 <br>
你好吗？<br>很好。
你好吗？
很好。

不换行<nobr>
<nobr>
请改变您浏览器窗口的宽度， 使之小于这一行的宽度， 看看这个标记的作用！
</nobr>
请改变您浏览器窗口的宽度，使之小于这一行的宽度，看看这个标记的作用！
  +    文字的对齐(Alignment)

<hn align=#>...</hn>
<p align=#>...</p> #=left, center, right
<h3 align=center>Hello<\h3>
<h3 align=right>Hello<\h3>
Hello
Hello

<center>...</center>
<center>Hello</center>
Hello
  +    文字的分区(Division)显示

<div align=left> ... </div>
<div align=left>
Can you feel happiness without unpleasant? <br>
Please show me your smile.
</div>

Can you feel happiness without unpleasant?
  Please show me your smile.
<div align=center> ... </div>
Can you feel happiness without unpleasant?
    Please show me your smile.
<div align=right> ... </div>
Can you feel happiness without unpleasant?
Please show me your smile.
  +    列表

无序列表 <ul><li>...</ul>
<ul>
<li>Today
<li>Tommorow
</ul>
  • Today
  • Tommorow

有序列表 <ol><li>...</ol>
<ol>
<li>Today
<li>Tommorow
</ol>
  1. Today
  2. Tommorow

定义列表(Definition lists) <dl><dt>...<dd>...</dl>
<dl>
<dt>Today
<dd>Today is yesterday.
<dt>Tomorrow
<dd>Tomorrow is today.
</dl>
Today
Today will be yesterday.
Tomorrow
Tomorrow will be today.

Definition lists Compact <dl compact><dt>...<dd>...</dl>
Today
Today will be yesterday.
Next
Tomorrow will be today.
         <dl compact>
<dt>Today
<dd>Today is yesterday.
<dt>Tomorrow
<dd>Tomorrow is today.
</dl>
  +    定制列表元素

定制表中的标记 <li type=#> #=disk, circle, square
<ul>
<li type=disc>ONE
<li type=circle>TWO
<li type=square>THREE
</ul>
  • ONE
  • TWO
  • THREE

定制有序列表表中的序号 <li type=#> #=A, a, I, i, 1
<ol><li type=A>ONE-ONE
<li>ONE-TWO</ol>
  1. ONE-ONE
  2. ONE-TWO
<ol><li type=a>ONE-ONE
<li>ONE-TWO</ol>
  1. ONE-ONE
  2. ONE-TWO
<ol><li type=I>ONE-ONE
<li>ONE-TWO</ol>
  1. ONE-ONE
  2. ONE-TWO
<ol><li type=i>ONE-ONE
<li>ONE-TWO</ol>
  1. ONE-ONE
  2. ONE-TWO
<ol><li type=1>ONE-ONE
<li>ONE-TWO</ol>
  1. ONE-ONE
  2. ONE-TWO

定制有序列表表中的序号的起始值 <ol start=#> #=number
<ol start=5><li type=A>ONE-ONE<li>ONE-TWO        <ol start=10>        <li>TWO-ONE        <li type=i>TWO-TWO</ol></ol>

  5. ONE-ONE
  6. ONE-TWO
    10. TWO-ONE
    11. TWO-TWO
  +    预格式化文本(Preformatted Text)

<pre>...</pre>
<pre>
Please use your card.
VISA Master
<b>Here is an order form.</b>
<ul><li>Fax
<li>Air Mail</ul>
</pre>
Please use your cardVISA    MasterHere is an order form.
  • Fax
  • Air Mail

<listing>...</listing>
<listing>
Please use your card.
VISA Master
<b>Here is an order form.</b>
<ul><li>Fax
<li>Air Mail</ul>
</listing>
Please use your card.VISA    MasterHere is order form.
  • Fax
  • Air Mail

<xmp>...</xmp>
<xmp>
Please use your card.
VISA Master
<b>Here is an order form.</b>
<ul><li>Fax
<li>Air Mail</ul>
</xmp>
Please use your card.VISA    Master<b>Here is order form.</b><ul><li>Fax<li>Air Mail</ul>
  +    空白(Spacer)

<spacer type="horizontal" size=#> #=水平空白宽度
<spacer type="vertical" size=#> #=竖直空白高度
YESTERDAY <spacer type="horizontal" size=50> TODAY
<spacer type="vertical" size=50> TOMORROW
YESTERDAY TODAY TOMORROW

<spacer type="block" width=# height=# align=##>
#=空白的尺寸
##=top, middle, bottom, left, right
<spacer type="block" width=150 height=50 align=left>
YESTERDAY<br> TODAY<br> TOMORROW
YESTERDAY
TODAY
TOMORROW
  +    多列文本

<multicol cols=#> ... </multicol> #=列的数目
<multicol cols=2> text text text... </multicol>
     例子

<multicol gutter=#> ... </multicol> #=列间的空白
<multicol cols=2 gutter=100> text text text... </multicol>
     例子

<multicol width=#> ... </multicol> #=列的宽度
<multicol cols=2 width=400> text text text... </multicol>
     例子

  +    其它

块引用(Blockquote) <blockquote>...</blockquote>
Her Song:
<blockquote>
When I was young, I listened to the radio
waiting for my favorite songs....
</blockquote>
Her Song:
When I was young, I listened to the radio waiting for my favorite songs....

闪烁 <blink>...</blink>
<BLINK> 闪烁！闪烁！ </BLINK>
闪烁！闪烁！


A
This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page. This is a smaple page.


A

<a href="C.html" target="HELLO">
点击此处，C 窗口将被显示在 B 窗口中。
</a>

<a href="C.html">
点击此处，C 窗口将被显示在 A 窗口中。
</a>


A Color

This page was saved using WebZIP 7.0.3.1030 offline browser (Unregistered) on 02/07/06 下午 04:12:21.
Address: http://www.qianren.com/lovingbox/study/html/frame/Acol.html
Title: A Color • Size: 80 • Last Modified: Thu, 12 Sep 2002 02:11:58 GMT

A


B


B

本窗口被标识为 "HELLO" 窗口。


B Color

This page was saved using WebZIP 7.0.3.1030 offline browser (Unregistered) on 02/07/06 下午 04:12:21.
Address: http://www.qianren.com/lovingbox/study/html/frame/Bcol.html
Title: B Color • Size: 80 • Last Modified: Thu, 12 Sep 2002 02:11:58 GMT

B


C


C Color

This page was saved using WebZIP 7.0.3.1030 offline browser (Unregistered) on 02/07/06 下午 04:12:21.
Address: http://www.qianren.com/lovingbox/study/html/frame/Ccol.html
Title: C Color • Size: 80 • Last Modified: Thu, 12 Sep 2002 02:12:00 GMT

C


黄金书屋 - INTERNET 教室 - HTML 语言教程

Here is a Floating Frame

读入页面 A
读入页面 B
读入页面 C


黄金书屋 - INTERNET 教室 - HTML 语言教程

  • <a href="target01.html" target="_blank">
    点击此处将打开一个新的浏览器窗口...来显示这 3 个 frames </a>

  • <a href="target01.html" target="_self">
    点击此处将在本窗口内...来显示这 3 个 frames </a>

  • <a href="A.html" target="_parent">
    点击此处将在这 3 个 frames 的父窗口(FRAMESET)内...来显示 A 窗口 </a>

  • <a href="A.html" target="_top">
    点击此处将用整个浏览器窗口...来显示 A 窗口 </a>


LOVINGBOX--HTML语言教程

This page was saved using WebZIP 7.0.3.1030 offline browser (Unregistered) on 02/07/06 下午 04:12:21.
Address: http://www.qianren.com/lovingbox/study/html/samp/face.html
Title: LOVINGBOX--HTML语言教程 • Size: 3702 • Last Modified: Thu, 12 Sep 2002 02:12:12 GMT

客户端字体(Font Face)示例

<font face="Arial">Arial...</font>
Arial --- ABCdef123

<font face="Comic Sans MS">ComicSans MS...</font>
Comic Sans MS --- ABCdef123

<font face="Courier">Courier...</font>
Courier --- ABCdef123

<font face="Courier New">CourierNew...</font>
Courier New --- ABCdef123

<font face="Modern">Modern...</font>
Modern --- ABCdef123

<font face="MS Sans Serif">MS SansSerif...</font>
MS Sans Serif --- ABCdef123

<font face="MS Serif">MS Serif...</font>
MS Serif --- ABCdef123

<font face="MS-DOS CP 932">MS-DOSCP 932...</font>
MS-DOS CP 932 --- ABCdef123

<font face="Roman">Roman...</font>
Roman --- ABCdef123

<font face="Script">Script...</font>
Script --- ABCdef123

<font face="Small Fonts">Small Fonts...</font>
Small Fonts --- ABCdef123

<font face="Symbol">Symbol...</font>
Symbol --- ABCdef123

<font face="Times Roman">Times Roman...</font>
Times Roman --- ABCdef123

<font face="Times New Roman">TimesNew Roman...</font>
Times New Roman --- ABCdef123

<font face="WingDings">WingDings...</font>
WingDings --- ABCdef123


LOVINGBOX--HTML语言教程

This page was saved using WebZIP 7.0.3.1030 offline browser (Unregistered) on 02/07/06 下午 04:12:21.
Address: http://www.qianren.com/lovingbox/study/html/samp/link.html
Title: LOVINGBOX--HTML语言教程 • Size: 470 • Last Modified: Thu, 12 Sep 2002 02:12:12 GMT

您链接到这里来啦！

请点击您所用浏览器的 Back 按钮， 以便返回 "链接(Link)" 一节。

您好? 啊哈！
这里就是“另一个页面的某个地方”！
请点击带下划线的文字返回教程的“跳转到另一个页面的某个地方”一处。
这里是页末。


LOVINGBOX--HTML语言教程

您点中了“地图”中的圆形区域！
  返回


LOVINGBOX--HTML语言教程

您点中了“地图”中的多边形区域！
  返回


LOVINGBOX--HTML语言教程

您点中了“地图”中的方形区域！
  返回


LOVINGBOX--HTML语言教程

This page was saved using WebZIP 7.0.3.1030 offline browser (Unregistered) on 02/07/06 下午 04:12:21.
Address: http://www.qianren.com/lovingbox/study/html/samp/multicol01.html
Title: LOVINGBOX--HTML语言教程 • Size: 1584 • Last Modified: Thu, 12 Sep 2002 02:12:14 GMT

<multicol cols=2>

What is our Aim?

Transmitting the information can be said as communication between senderand clinets. How can we design better communication through the networks?
Now we have many method such as Web, E-mail, Realtime video and more tocommunicate on the Internet. It is quite different from ordinary media,and there should be new designing rules. To find them, we provide the tipsto put up the information to the net, make research into communicationdesign, and have mailing list as discussion space.

Aspects of Design

The word "design" has some aspects. One aspect is surfacedesign such as layout, coloring, video editting etc. Another is systematicdesign such as data base, transfer sytem, link structure, etc. We needto think about those aspects together as "design" to make bettercommunication on the net.

Better Browsingwe try to create NCD pages included available functions:HTML2.0 (basic tags), Netscape and Internet Explorer Extensions, but wealways care that these pages can be browsed by any kind of browsers. Now,there is no browser supports all kinds of functions. So it is better touse some different browsers, and take a look their different appearance.</multicol>

返回教程


LOVINGBOX--HTML语言教程

This page was saved using WebZIP 7.0.3.1030 offline browser (Unregistered) on 02/07/06 下午 04:12:21.
Address: http://www.qianren.com/lovingbox/study/html/samp/multicol02.html
Title: LOVINGBOX--HTML语言教程 • Size: 1606 • Last Modified: Thu, 12 Sep 2002 02:12:14 GMT

<multicol cols=2 gutter=100>

What is our Aim?

Transmitting the information can be said as communication between senderand clinets. How can we design better communication through the networks?
Now we have many method such as Web, E-mail, Realtime video and more tocommunicate on the Internet. It is quite different from ordinary media,and there should be new designing rules. To find them, we provide the tipsto put up the information to the net, make research into communicationdesign, and have mailing list as discussion space.

Aspects of Design

The word "design" has some aspects. One aspect is surfacedesign such as layout, coloring, video editting etc. Another is systematicdesign such as data base, transfer sytem, link structure, etc. We needto think about those aspects together as "design" to make bettercommunication on the net.

Better Browsingwe try to create NCD pages included available functions:HTML2.0 (basic tags), Netscape and Internet Explorer Extensions, but wealways care that these pages can be browsed by any kind of browsers. Now,there is no browser supports all kinds of functions. So it is better touse some different browsers, and take a look their different appearance.</multicol>

返回教程


LOVINGBOX--HTML语言教程

This page was saved using WebZIP 7.0.3.1030 offline browser (Unregistered) on 02/07/06 下午 04:12:21.
Address: http://www.qianren.com/lovingbox/study/html/samp/multicol03.html
Title: LOVINGBOX--HTML语言教程 • Size: 1604 • Last Modified: Thu, 12 Sep 2002 02:12:14 GMT

<multicol cols=2 width=400>

What is our Aim?

Transmitting the information can be said as communication between senderand clinets. How can we design better communication through the networks?
Now we have many method such as Web, E-mail, Realtime video and more tocommunicate on the Internet. It is quite different from ordinary media,and there should be new designing rules. To find them, we provide the tipsto put up the information to the net, make research into communicationdesign, and have mailing list as discussion space.

Aspects of Design

The word "design" has some aspects. One aspect is surfacedesign such as layout, coloring, video editting etc. Another is systematicdesign such as data base, transfer sytem, link structure, etc. We needto think about those aspects together as "design" to make bettercommunication on the net.

Better Browsingwe try to create NCD pages included available functions:HTML2.0 (basic tags), Netscape and Internet Explorer Extensions, but wealways care that these pages can be browsed by any kind of browsers. Now,there is no browser supports all kinds of functions. So it is better touse some different browsers, and take a look their different appearance.</multicol>

返回教程


LOVINGBOX--HTML语言教程

This page was saved using WebZIP 7.0.3.1030 offline browser (Unregistered) on 02/07/06 下午 04:12:21.
Address: http://www.qianren.com/lovingbox/study/html/samp/sound.html
Title: LOVINGBOX--HTML语言教程 • Size: 422 • Last Modified: Thu, 12 Sep 2002 02:12:14 GMT

听见了吗???

如果没有，检查一下您的机器上的声卡工作正常吗？

返回


LOVINGBOX--HTML语言教程

This page was saved using WebZIP 7.0.3.1030 offline browser (Unregistered) on 02/07/06 下午 04:12:21.
Address: http://www.qianren.com/lovingbox/study/html/samp/window.html
Title: LOVINGBOX--HTML语言教程 • Size: 274 • Last Modified: Thu, 12 Sep 2002 02:12:16 GMT

新开的窗口耶！

返回教程中“开一个新的(浏览器)窗口”一处。


工具软件_软件_天极yesky

软件文章搜索: 下级栏目: 下级栏目: 标题关键字:


手册导航-网页制作-网页陶吧

网页陶吧-->HTML手册|CSS手册|JScript手册|VbScript手册|ASP手册|PHP手册|SQL手册|网页特效|ADO手册 →[收藏]