HTML 初学者指南_[Html教程]_Programming skills(编程技巧)

归海一刀	published in(发表于) 2014/3/30 5:18:01	Edit(编辑)
HTML 初学者指南_[Html教程]

HTML 初学者指南_[Html教程]

HTML 初学者指南_[Html教程] 本文是创建HTML文件的初级读物。HTML 是 WWW（World Wide Web )中使用的超文本标记语言。本指南的目的是介绍如何使用HTML和创建 web 文件。本文中的链接指向一些附加的信息。你还可以到你本地的书店查看一下，那里可能会有很多有价值的关于 Web 和 HTML 的资料。前言术语 WWW World Wide Web Web World Wide Web SGML Standard Generalized Markup Language--标准通用标记语言，描述标记语言的一个标准 DTD Document Type Definition--文本类型定义, 这是一个用SGML写成的标记语言的正式说明 HTML HyperText Markup Language-- 超文本标记语言, 它是一个SGML DTD HTML 是一套独立于平台的格式定义( 用标记说明 ) , 用来描述World Wide Web 文档中的各个组成部分. HTML 是Tim Berners-Lee 在 CERN (在日内瓦的欧洲粒子物理实验室) 发明的. 本文不包括的内容本指南假设读者具有以下基础: 知道如何使用 NCSA Mosaic 或者其它的 Web browser 对Web 服务器和客户 browsers 有一般的理解可以访问 Web 服务器 (或者你只是想用本地方式创建个人使用的HTML 文档) HTML 版本本指南参考最新的说明--HTML 2.0-- 加上一些已经在 browsers 中广泛实现的附加特性. 以及正在发展的一些新特性. HTML 文档什么是 HTML 文档 HTML 文档是普通文本 ( ASCII) 文件, 它可以用任意编缉器(如UNIX 中的Emacs 或 vi, Macintosh 中的BBEdit, Windows中的Notepad)生成. 你也可以使用字处理软件, 不过要记住存文件时要存成“带回车的纯文本”。 HTML 编辑器现在有一些 WYSIWYG 编辑器 (如., 可用在多种平台的 HotMetal, 或者可用在 Macintosh 机的 Adobe PageMill ). 在你学了一些 HTML 标记的基本知识之后，你可能希望使用它们. 你会发现掌握足够的 HTML 编码知识对于判断一个 WYSIWYG 编辑器是否适用是很有益处的如果你还没有选定使用哪种软件, 可以参考本站软件下载 HTML 编辑器的在线例表 (按应用平台分类) ，帮助你寻找应用软件. 把文件存放到服务器上如果你在学校或者单位可以访问 Web 服务器, 和你的 WEB 管理员webmaster (维护服务器的人) 联系，看看如何把你的文件存放到 Web 上. 否则，如果在学校或单位不能访问, 可以看看你的社区是否有免费网络FreeNet, 一种提供免费 Internet 访问服务的基于社区的网络. 如果也没有免费网络, 你可以当地的 Internet 服务提供者联系，他们可以把你的文档存放到服务器上，不过要收取费用. (你可以在当地的报纸上找到广告with your Chamber of Commerce for the names of companies.) 标记说明一个元素 element 是一个文档结构的基本组成部分. 元素的例子有头 heads, 表格tables, 段落 paragraphs, 列表 lists 等. 你可以这样理解: 你用 HTML 标记为浏览器标出文件的各个元素 . 元素中可以包含普通文本，其他元素，或二者都有. 在 HTML 文档中使用tags表示各种元素. HTML 标记由一个左尖括号 (<), 一个标记名, 和一个右尖括号 (>) 组成. 标记通常成对出现 (如, 和 ) 以指出标记作用的范围. 结束标记和起始标记相似，只是在括号中的标记名中以斜杠 (/) 领头. HTML 标记在下文中列出. 有些元素可能含有一个属性 attribute, 它是包含在起始标记中的附加信息说明. 例如, 通过在图象文件的 HTML 代码中包含适当的属性，你可以指明一幅图象的位置 (顶端, 中间, 或底部) . 具有可选属性的标记如下. 注意: HTML 不区分大小写. 等价于 <TITLE> 或 <TiTlE>. 有几个例外的情况列在下文中的转义序列中. <P>并非所有的 World Wide Web 浏览器都支持所有的标记. 如果一个浏览器不支持某个标记, 它通常只是忽略之. <P>最小的 HTML 文档<BR>每个 HTML 文档应该包含一些标准 HTML 标记. 每个文档都包含头 head 和正文 body text 两部分. 头中含有标题 title, 正文中含有实际构成段落，列表和其他元素的文本. 浏览器需要具体的信息是因为它们都是根据 HTML 和 SGML 说明编程的. <P>下面的源文档举例说明必须的元素: <P><html><BR><head><BR><TITLE>A Simple HTML Example HTML is Easy To Learn Welcome to the world of HTML. This is the first paragraph. While short it is still a paragraph! And this is the second paragraph. 必须的元素有 , , , 和 <body> 标记 (和它们相应的结束标记). 由于在每个文件中你都要包括这些标记, 你可以创建一个含有这些标记的模板文件. ( 有些浏览器会自动正确地规格化你的 HTML 文件，哪怕你没有包含这些标记. 但是有些浏览器不会这样! 因此你要确保包含这些标记.)</P><P>一个教学工具<BR>要看到你的浏览器当前窗口所显示信息的原始文件, 可以选择浏览器菜单中的 View Source (或者等价操作) 选项. 文件的内容和所有的 HTML 标记将显示在一个新窗口中. <P>这是学习使用 HTML 和掌握技巧和构造的一个非常好的方式. 当然, 你看的 HTML 不一定在技术上是正确的. 当你熟悉了 HTML 并且看了很多这方面的参考资料，你将能够区分 "好的" 和 "不好的" HTML. <P>记住你可以保存 HTML 编码的源文件，用做你的 Web 页的模板，或者把它修改之后用做其他用途. <P>HTML 标记<BR>HTML<BR>该元素指明你的文件包含 HTML-编码信息. 文件扩展名 .html 也指明该文件是一个 HTML 文档而且必须使用. (如果你的系统受 8.3 制文件名的限制 (如., LeeHome.htm）, 可以用 .htm 做扩展名.) <P>HEAD<BR>头元素 head 是你的 HTML-编码文档中包含标题 title 的第一部分. 标题是作为你的浏览器窗口的一部分来显示的 (见下文). <P>TITLE<BR>标题 title 元素含有你的文档标题并且作为一种全局上下文识别其内容. 标题通常显示在浏览器窗口的某个位置 (通常在顶端), 而不是在文本区. 标题同时也用于热点列表 hotlist 或书签列表 bookmark list 中的显示, 因此标题的选择因当是描述性的, 独特的, 和相对简洁的. 标题在 WAIS 服务中还用于搜索服务器. <P>例如, 你可能在一章的内容中包含一个短小的书本的标题: NCSA Mosaic 指南 (Windows): 安装. 这个标题说明了软件的名称, 使用平台, 和本章内容, 它比简单地把该文档称为安装. 要好得多。一般你的标题应该不超过 64 个字符. <P>BODY<BR>HTML 文档的第二部分，也是最大的部分是正文 body, 它含有你的文档的内容 (显示在你的浏览器窗口文本区的部分). 下面介绍的标记用在 HTML 文档的正文 body 内. <P>标题字体Headings<BR>HTML 有六级标题字体, 从 1 到 6 编号, 1 号最小. 标题字体的显示比普通文本字体大或者粗. 每个文档中的第一个标题字体应该标记为 <H1>. <P>标题字体元素的语法为: <BR><Hy>标题字体文本 </Hy> <BR>其中 y 是从 1 到 6 的数字，指明标题字体的等级. <P>在你的文档中不要跳跃使用标题字体等级. 例如, 不要用一级标题 (<H1>) 开始，然后跟随一个三级标题 (<H3>) . <P>段落Paragraphs<BR>不同于多数字处理器中的文档, HTML 文件中的换行是不重要的. 你不用担心你的文本中行的长度 ( 当然最好不要超过 72 个字符). 在你的源文件中任何地方可以使用换行, 多个空白在你的浏览器中被重叠成为一个空白. <P>在“最小的 HTML 文档”中给出的例子中第一段的编码为 <P><P>Welcome to the world of HTML. <BR>This is the first paragraph. <BR>While short it is<BR>still a paragraph!</P> <P>源文件中各行之间有换行. Web 浏览器忽略这些换行，只有遇到另一个 <p> 标记时才开始新段落 <P> <P>要点: 你必须用 <P> 元素指明段落. 浏览器忽略源文件中的任何缩进或空行. 如果没有 <P> 元素, 文档将被看作一个大段落处理. (一个例外的情况是把文本标记为 "preformatted," 下文中将做介绍.) 例如, 下面的内容的输出和第一个 HTML 例子完全相同: <P><H1>Level-one heading</H1> <P>Welcome to the world of HTML. This is the <BR>first paragraph. While short it is still a<BR>paragraph! </P> <P>And this is the second paragraph.</P> <P>为了保持 HTML 文件的可读性, 标题字体应该独占一行, 在开始一个新的部分之前加一到两行空行，段落之间也用空行隔开( 除了用<P> 标记以外). 这些额外的空白在你编辑文件时将会有用 ( 但是你的浏览器将忽略这些空白因为它有自己的关于空白的规则，不依赖于你源文件中的空白). <P>注意: 结束标记 </P> 可以省略. 这是因为当浏览器遇到一个 <P> 标记时, 它认为前一个段落到此结束. <P>使用 <P> 和 </P> 作为段落标记使得你可以通过在源文件中使用 ALIGN=alignment 属性使一个段落居中排列. <P><P ALIGN=CENTER><BR>这是一个居中的段落. [见下面的输出形式]<BR></P> <P>这是一个居中的段落. </P><P>列表Lists<BR>HTML 支持不编号 unnumbered, 编号numbered, 和定义definition 三种列表. 你也可以嵌套列表, 但是不要嵌套过多，否则会使读者感到不清晰。 <P>不编号列表Unnumbered Lists <P>制作一个不编号的，公告式列表, <P>用开始标记 <UL> ( unnumbered list 的简记) 开始 <BR>输入 <LI> (list item) 标记，后面跟独立的项; 不需使用 </LI> 标记 <BR>用 </UL> 标记结束整个列表 <BR>下面是一个有三个项的列表: <P><UL><BR><LI> apples<BR><LI> bananas<BR><LI> grapefruit<BR></UL> <P>输出形式为: <P>apples <BR>bananas <BR>grapefruit <BR><LI> 项可以含有多个段落. 用段落标记 <P> 指明. <P>编号列表Numbered Lists <P>编号列表 (也称为有序列表ordered list) 和不编号列表相同, 只是用 <OL> 代替 <UL>. 各项同样用 <LI> 标记. 下面的 HTML 代码: <P><OL><BR><LI> oranges<BR><LI> peaches<BR><LI> grapes<BR></OL> <P>产生的输出为: <P>oranges <BR>peaches <BR>grapes <BR>定义列表Definition Lists <P>定义列表 (编码为 <DL>) 通常含有交替出现的定义术语definition term (编码为 <DT>) 和定义描述definition definition (编码为 <DD>). Web 浏览器通常另起一行显示定义描述. <P>下面是一个定义列表的例子: <P><DL><BR><DT> NCSA<BR><DD> NCSA, the National Center for Supercomputing Applications,<BR>is located on the campus of the University of Illinois <BR>at Urbana-Champaign. <BR><DT> Cornell Theory Center<BR><DD> CTC is located on the campus of Cornell University in Ithaca,<BR>New York. <BR></DL> <P>输出形式为: <P>NCSA <BR>NCSA, the National Center for Supercomputing Applications, is located on the campus of the University of Illinois at Urbana-Champaign. <BR>Cornell Theory Center <BR>CTC is located on the campus of Cornell University in Ithaca, New York. <BR><DT> 和 <DD> 项可以包含多个段落 (用 <P> 标记指示), 列表, 或其他的定义信息. <P>COMPACT 属性可能会被经常使用，如果你的定义术语很简短的话. 例如，如果你想显示一些计算机选项, 它们可以和定义的开始处于同一行中. <P><DL COMPACT><BR><DT> -i<BR><DD>invokes NCSA Mosaic for Microsoft Windows using the <BR>initialization file defined in the path<BR><DT> -k<BR><DD>invokes NCSA Mosaic for Microsoft Windows in kiosk mode<BR></DL> <P>输出形式为: <P>-i <BR>invokes NCSA Mosaic for Microsoft Windows using the initialization file defined in the path. <BR>-k <BR>invokes NCSA Mosaic for Microsoft Windows in kiosk mode. <BR>嵌套列表Nested Lists <P>列表可以嵌套. 在每个列表项中，你还可以含有多个段落，每个段落含有嵌套列表.</P><P>这里是一个嵌套列表的例子: <P><UL><BR><LI> A few New England states:<BR><UL><BR><LI> Vermont<BR><LI> New Hampshire<BR><LI> Maine<BR></UL><BR><LI> Two Midwestern states:<BR><UL><BR><LI> Michigan<BR><LI> Indiana<BR></UL><BR></UL> <P>这个嵌套列表的显示： <P>A few New England states: <BR>Vermont <BR>New Hampshire <BR>Maine <BR>Two Midwestern states: <BR>Michigan <BR>Indiana <BR>预排格式文本Preformatted Text<BR>用<PRE> 标记 (表示 "preformatted") 可以产生固定宽度的字体. 该标记同时使空格，新行，和制表键 tabs 有效 (多个空格显示为多个空格, 源文件中的换行也在浏览器中产生换行). 这对于程序清单和其他一些情况是很有用的. 例如, 下面的行: <P><PRE><BR>#!/bin/csh <BR>cd $SCR <BR>cfs get mysrc.f:mycfsdir/mysrc.f <BR>cfs get myinfile:mycfsdir/myinfile <BR>fc -02 -o mya.out mysrc.f <BR>mya.out <BR>cfs save myoutfile:mycfsdir/myoutfile <BR>rm * <BR></PRE> <P>显示为: <P>#!/bin/csh <BR>cd $SCR <BR>cfs get mysrc.f:mycfsdir/mysrc.f <BR>cfs get myinfile:mycfsdir/myinfile <BR>fc -02 -o mya.out mysrc.f <BR>mya.out <BR>cfs save myoutfile:mycfsdir/myoutfile <BR>rm * <P><PRE> 标记可以带一个宽度属性 WIDTH ，指明一行中最多允许的字符数. WIDTH 同时通知浏览器选择一个合适的字体以及文本的缩排. <P>在 <PRE> 作用的部分中也可以加超链. 但是其他的 HTML 标记应该避免在 <PRE> 的区间中使用. <P>注意，由于<, >, 和 & 在 HTML 文件中有特殊含义, 在你输入这些字符的时候必须使用它们的转义序列 (分别为<, >, 和 &) . 详细内容参见转义序列 . <P>大范围引用Extended Quotations<BR>使用 <BLOCKQUOTE> 标记可以在屏幕上用分离的块显示大段的引用. 多数浏览器通常改变引用部分的页边界，以和周围的文本区分开. <P>在下面的例子中: <P><BLOCKQUOTE><BR><P>Omit needless words.</P><BR><P>Vigorous writing is concise. A sentence should contain no <BR>unnecessary words, a paragraph no unnecessary sentences, for the <BR>same reason that a drawing should have no unnecessary lines and a <BR>machine no unnecessary parts.</P><BR>--William Strunk, Jr., 1918<BR></BLOCKQUOTE> <P>显示结果为: <P>Omit needless words. <P>Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts. <P>--William Strunk, Jr., 1918 </P><P>地址Addresses<BR><ADDRESS> 标记通常用于说明文档的作者, 与作者联系的方法 (如, 一个电子邮件地址), 和一个修订日期. 它一般是一个文件的最后部分. <P>例如, 本在线指南的最后一行为: <P><ADDRESS><BR>A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu / revised April 96<BR></ADDRESS> <P>结果为: <P>A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu / revised April 96<BR>注意: <ADDRESS> 不用于普通邮政地址. 关于普通邮政地址参见下文的 "强制换行" . <P>强制换行Forced Line Breaks/邮政地址Postal Addresses<BR><BR> 标记强制产生一个换行，行间没有间隙. 对于由较短的行组成的文本，如邮政地址， <P> 元素产生的附加空行会使你觉得不必要. 例如, 使用 <BR>: <P>National Center for Supercomputing Applications<BR><BR>605 East Springfield Avenue<BR><BR>Champaign, Illinois 61820-5518<BR> <P>输出为: <P>National Center for Supercomputing Applications<BR>605 East Springfield Avenue<BR>Champaign, Illinois 61820-5518 <P><BR>水平线Horizontal Rules<BR><HR> 标记产生一个和浏览器窗口等宽的水平线. 水平线对于你分割文档中的各个部分很有用. 例如，很多人在他们的文本结束和 <address> 信息开始之前加一个水平线. <P>你可以改变一条线的尺寸 (粗) 和宽度 ( 水平线延伸长度占窗口的百分比). 你可以试着改变设置，直到对显示效果满意. 例如: <P><HR SIZE=4 WIDTH="50%"> <P>显示为: <P><BR>---------------------------------------------------------- <P><BR>字符格式<BR>HTML 有针对单个字符或句子的两种风格: 逻辑风格和物理风格logical and physical. 逻辑风格Logical styles 根据文本的内容进行标记, 而物理风格 physical styles 指明一个部分的显示效果. 例如, 在前面的句子中, "logical styles" 这个单词标记为一个 "定义definition." 同样的效果 (斜体) 可以通过其他的标记告诉你的浏览器 "把这些字变成斜体" 来实现。 <P>注意：有些浏览器对 <DFN> 标记不做任何风格解释, 因此你可能没有发现前面段落中的单词显示成斜体。 <P>逻辑风格和物理风格Logical Versus Physical Styles<BR>如果物理风格和逻辑风格能够产生相同的效果, 为什么不合二为一呢? <P>在理想的 SGML 概念中, 内容和它的显示是分开的. 因此 SGML 标记一个一级标题字体为一级标题字体, 但是并不指明一级标题字体应该显示多大, 例如, 24点粗体加倍集中24-point bold Times centered. 这种处理的好处（类似于很多字处理软件的 style sheets ) 是，如果你决定把一级标记字体改为 20-point left-justified Helvetica, 你只需要改变你的浏览器中一级标题字体的定义就可以了. 今天确实有很多浏览器允许你按你的希望定义多种 HTML 标记在屏幕上的实际效果. <P>逻辑标签的另一个优点在于它们有助于在你的文档中保持一致性. 标记 <H1> 比 24-point bold Times center 或其它描述要好记得多. 例如, 对 <STRONG> 标记. 多数浏览器用粗体解释. 但是, 某个读者可能喜欢把这部分显示为红色. 逻辑风格提供了这种灵活性. <P>当然, 假设如果你想用斜体显示一些内容而不想受浏览器的设置的影响, 你就需要使用物理风格 . 因此，物理风格提供一种另一种一致性：在你的文档中用某种方式显示的内容在别的地方也会以同样的方式显示. <P>你应该固定地使用某一种风格. 如果你用物理风格标记, 则在一篇文档中全都使用物理风格. 如果你使用逻辑风格, 则在文档中坚持使用逻辑风格. 记住，将来的 HTML 可能不再支持物理风格, 这意味着浏览器将不解释物理风格的编码. </P><P>逻辑风格Logical Styles<BR><DFN> <BR>用于被定义的单词. 一般用斜体显示. (NCSA Mosaic is a World Wide Web browser.) <BR><EM> <BR>用于强调. 通常用斜体显示. (Consultants cannot reset your password unless you call the help line.) <BR><CITE> <BR>用于书籍的标题, 等. 通常斜体显示. (A Beginner's Guide to HTML) <BR><CODE> <BR>用于计算机编码. 用固定宽度字体显示. (The <stdio.h> header file) <BR><KBD> <BR>用于用户键盘输入. 通常用无格式固定宽度字体显示. (Enter passwd to change your password.) <BR><SAMP> <BR>用于字母序列. 用固定宽度字体显示. (Segmentation fault: Core dumped.) <BR><STRONG> <BR>用于着重强调. 通常用粗体显示. (NOTE: Always check your links.) <BR><VAR> <BR>用于变量, 你将用确定的信息代替这个变量. 通常用斜体显示. (rm filename deletes the file.) <BR>物理风格标记<BR><B> <BR>粗体文本 <BR><I> <BR>斜体文本 <BR><TT> <BR>打字机文本typewriter text, 如固定宽度文本. <BR>转义序列Escape Sequences (a.k.a. Character Entities)<BR>字符有两种功能: <P>转义特殊字符 <BR>显示普通 ASCII 字符集中不包含的字符 ( 带有可区别标记的基本字符) <BR>有三个 ASCII 字符--左尖括号(<), 右尖括号 (>), 和ampersand (&)--在 HTML 中有特殊含义，因此不能按照原样用在文本中. (尖括号用于指示 HTML 标记的开始和结束, ampersand 用于指示一个转义序列的开始.) 双引号可以原样使用，但是也可以使用字符实体("). <P>如果在 HTML 文档中使用上述三个字符, you must enter its escape sequence instead: <P>< <BR>< 的转义序列; <BR>> <BR>> 的转义序列; <BR>& <BR>& 的转义序列; <BR>其它的转义序列支持重读字符, 如: <P>ö <BR>带元音变音的小写字母 o : * <BR>ñ <BR>小写字母n 带 tilde: * <BR>È <BR>大写字母 E 带低重音（ grave accent）: * <BR>你可以用其它字母替代上面的 o, n, 和 E. 参考特殊字符清单. <P>注意: 转义序列是区分大小写的，这一点不同于 HTML 的其它部分。例如，你不能用 &LT; 代替 <. <P>链接 Linking<BR>HTML 的主要长处在于它能够链接文本和/或图象到另一个文档或者文档的一部分中. 浏览器用颜色和/或下划线突出指定的文本或图象，以说明它是一个超文本链接hypertext link (通常简写为 hyperlink 或 link). <P>HTML 的单个与超文本链接有关的标记为 <A>, 表示 anchor. 在文档中包含 anchor: <P>用 <A 开始一个 anchor ( A 后面要留一个空白) <BR>指明你要连接的文档：HREF="filename" ，后面个跟一个右尖括号 (>) <BR>输入在当前文档中作为超链文本的部分 <BR>输入 anchor 结束标记: </A> ( anchor 结束标记之前不需空白 ) <BR>以下是一个含有超文本链接到 US.html: 的例子 <P><A HREF="MaineStats.html">Maine</A> <P>上面的例子中，单词 Maine 被作为指向文档 MaineStats.html的超链，它和第一个文档在同一个目录下. <P>相对路径名和绝对路径名<BR>你可以通过和当前文档的相对路径relative path指明链接到其它目录的文档. 例如, 到 AtlanticStatesa 子目录的文件 NYStats.html 的链接为: <P><A HREF="AtlanticStates/NYStats.html">New York</A> <P>它们之所以被称为相对路径链接是因为你指定到连接文件的路径是相对于当前文件的位置而言的. 你也可以使用文件的绝对路径 (完整的 URL), 但是相对路径在访问一个服务器时效率更高. <P>路径名使用标准 UNIX 格式. 在 UNIX 格式中，父目录(包含当前目录的目录) 表示为 "..". (更详尽的信息请参考 UNIX 入门参考手册如 Learning the UNIX Operating System from O'Reilly and Associates, Inc.) <P>假设你在 NYStats.html 文件中，想要参考原始文档 US.html, 你的链接如下: <P><A HREF="../US.html">United States</A> <P>一般地, 你应该使用相对链接，因为: <P>移动一组文件到另一个位置会比较容易(因为相对路径名依然有效) <BR>和服务器的连接更有效率 <BR>需要键入的信息更少 <BR>但是，如果指向的文档和当前文档没有直接联系，就需要绝对路径名. 例如, 考虑构成一个用户手册的一组文档. 这组文档内部的链接应该采用相对链接. 而到其它文档的链接 ( 可能指向一个相关的软件) 应该用绝对链接. 这样，当你把用户手册移到一个新目录下时，所有的链接都不必改变. </P><P>URLs<BR>World Wide Web 使用标准资源定位 Uniform Resource Locators (URLs) 指明其它服务器中的文件. 一个 URL 包括访问资源的类型(例如, Web, gopher, WAIS), 服务器的地址, 和文件的位置. 语法格式为: <P>scheme://host.domain [:port]/path/ filename <P>其中 scheme 是以下的一个 <P>file <BR>本地系统的一个文件 <BR>ftp <BR>匿名FTP 服务器中的文件 <BR>http <BR>World Wide Web 服务器中的文件 <BR>gopher <BR>Gopher 服务器中的文件 <BR>WAIS <BR>WAIS 服务器中的文件 <BR>news <BR>Usenet 的一个新闻组newsgroup <BR>telnet <BR>到一个基于Telnet 的服务的连接 <BR>端口port 号通常可以省略. (除非对方告诉你使用它，否则忽略它) <P>例如，在你的文档中链接本指南: <P><A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html"> <BR>NCSA's Beginner's Guide to HTML</A> <P>它将文本 NCSA's Beginner's Guide to HTML 标记为一个超链，连到当前文档中 . <P>到指定部分的链接<BR>锚链也可以用于引导读者到一篇文档（可以是当前文档或其他文档）中的特定区域，而不一定到缺省的顶端位置. 这种类型的锚链通常称为一个命名锚链named anchor ，因为创建链接时, 你需要在文档中插入 HTML 名字. <P>本指南是在同一篇文档中使用命名锚链的很好的例子. 它作成一篇文档以便于打印. 但是当你只是想了解关于HTML 的一部分信息时，在这样一篇（长）文档中浏览是比较费时的. 内部的超链用于在文档开始创建一个"内容索引table of contents". 这些超链使你可以从文档中的一个位置移到另一个位置。(到本文的顶端点击内容索引中到指定部分的链接. 你就会返回这里.) <P>你还可以链接到另一篇文档中的指定部分. 首先提这一点是因为这会有助于帮助你理解一篇文档内部的链接. <P>不同文档中指定部分之间的链接<BR>假设你想从文档A (documentA.html)　中建立一条到另一篇文档(MaineStats.html)中的一个指定部分的链接. <P>输入HTML编码指向一个命名链接: <P>documentA.html: <P>In addition to the many state parks, Maine is also home to <BR><a href="MaineStats.html#ANP">Acadia National Park</a>. <P>井号（＃）后面的字符串可以看作文件MaineStats.html 中的一个标签. 这个标签说明了当该链接被激活时浏览器从什么地方开始显示. 在上例中，显示的第一行将是 Acadia National　Park heading. <P>第二步, 在MaineStats.html中创建命名锚链 (本例中为 "ANP") <P><H2><A NAME="ANP">Acadia National Park</a></H2> <P>这些元素都作好以后，你就可以让读者直接找到MaineStats.html中Acadia 的参考信息了. <P>注意: 要想链接到另一篇文档中的指定位置，你需要对那篇文档具有写权限，或者那篇文档中已经含有文档内部的命名锚链.　例如，你可以在你所写的文档中包含指向本指南的锚链，因为本文中已经含有命名锚链 (使用浏览器中的 View　Source 看一看编码). 但是如果本文档没有命名锚链, 你就不能制作到特定位置的链接，因为你不能编辑NCSA服务器中的原始文件. <P>指向当前文档内指定部分的链接<BR>语法和前文相同，只是文件名省略. <P>例如, 要从 MaineStats中链接到　ANP : <P>...More information about <A HREF="#ANP">Acadia National Park</a> <BR>is available elsewhere in this document. <P>注意确保你的文档中在链接指向的部分包含 <A NAME=> 标记(<H2><A NAME="ANP">Acadia National Park</a></H2>). <P>当你认为读者可能需要打印全部文档，或者在一个文件中有很多短信息需要在线说明的情况下非常有用. <P>邮件发送Mailto<BR>在超链中包含mailto属性，可以方便读者给某个人或别名发送电子邮件. 格式为: <P><A HREF="mailto:emailinfo@host">Name</a> <P>例如, 输入: <P><A HREF="mailto:pubs@ncsa.uiuc.edu">NCSA Publications Group</a> <P>可以创建一个已经配置好的发往 BUPT Publications Group的邮件窗口. (你当然应该换用另一个地址!) </P><P>嵌入行中的图象<BR>多数 Web 浏览器可以显示嵌入行中的X 位图(XBM), GIF, 或 JPEG 格式的图象(即和文本想邻的图象) . 其他格式的图象正在合并到Web 浏览器中[如, Portable Network Graphic (PNG) 格式]. 每个图象都花费处理时间并降低文档显示的速度. 仔细选择你的文档中的图象和图象的个数. <P>包含一个嵌入行中的图象, 输入: <P><img SRC=图象名><BR>ALT="FORWARD" HEIGHT=32 WIDTH=32> <P>其中图象名是图象文件的URL . <P><img SRC> URLs 的语法格式和锚链HREF使用的格式相同. 如果图象文件是GIF 文件, 则图象名中的文件名部分必须以.gif结束. X 位图格式的文件必须以.xbm结尾; JPEG 图象文件必须以.jpg或 .jpeg结束; Portable Network Graphic 文件必须以.png结束. <P>图象大小属性<BR>在<img> 标记中你应该包含其它两个属性，用于通知浏览器正在和文本一起下载的图象的大小. HEIGHT 和 WIDTH 属性使浏览器在下载文件其它部分的时候为图象留出适当的空间（象素）. (从你的图象处理软件如Adobe Photoshop中可以得到象素大小.) <P>例如, 要在文件中包含一幅自己的肖像, 输入: <P><img src="http://127.0.0.1/Files/BeyondPic/2006-6/13/0661313162193204.gif" HEIGHT=100 WIDTH=65><BR>ALT="FORWARD" HEIGHT=32 WIDTH=32> <P>注意: 当图象大小与属性描述大小不一致时，有些浏览器使用 HEIGHT 和 WIDTH属性来扩大或缩小一幅图象以使它适用于分配的空间. 并非所有的浏览器开发者都赞同放大／缩小图象. 因此，在安排时不要假设你的读者都可以使用这种特性. 最好查看一下图象大小，使用正确的尺寸. <P>图象定位<BR>对于图象的显示你具有一定的灵活性. 你可以让图象和文本分开，把图象放在左边，右边，或者中间. 或者你可以让图象和文本在同一行。你可以尝试多种形式，看一看哪种最好 <P>使图象和文本在同一行<BR>缺省情况下图象的底部和随后的文本在同一行显示，就象现在的这段. 你也可以通过把ALIGN= 属性的值设为 TOP 或 CENTER，把图象放到一段的顶端或中间。 <P>这段文本与图象的顶端在同一行(<img SRC = "BarHotlist.gif" ALIGN=TOP>). 注意只有一行文本如此，其他行跳到图象的底部显示. <P>这一行文本显示在图象中间(<img SRC = "BarHotlist.gif" ALIGN=CENTER>). 同样，只有一行显示在中间，其他行在图象的下面. <P>不带文本的图象 <BR>如果要显示一幅不带文本的图象(例如，你的组织的徽标), 只要把它作为单独的一段即可. 使用段落标记的 ALIGN=属性把图象调整到窗口的中间或右边，如下所示: <P><p ALIGN=CENTER><BR><img SRC = "BarHotlist.gif"><BR></p> <P>结果为: <P>图象显示在中间; 本段从它下面靠左开始. <P>图象的替换文本<BR>一些 World Wide Web 浏览器--主要是那些在 VT100 终端上运行的浏览器--不能显示图象. 有些用户会关掉图象下载功能，就算他们的软件可以显示图象(特别是如果他们是 modem 或低速线路的用户). HTML 提供一种机制使得读者知道他们看到的页面上缺少了什么. <P>ALT 属性使你可以指定一段可以替代图象来显示的文本. 例如: <P><img src="http://127.0.0.1/Files/BeyondPic/2006-6/13/0661313162177410.gif" ALT="Up"><BR>ALT="" HEIGHT=48 WIDTH=50> <P>其中 UpArrow.gif 是一个向上的箭头.在具有图象显示功能并且图象下载打开的浏览器中，你可以看到一个上箭头的图形。在VT100 浏览器中或者图象下载关闭的情况下, 你的窗口中将显示 Up 这个单词. <P>你应该对出现在你的文档中的每个图象都使用一个替换文本, 这是一种对读者的礼貌. <P>背景图象<BR>新版本的 Web 浏览器可以下载一幅图象用做显示一个主页时的背景. 有些人喜欢使用背景，有些人不喜欢. 通常，如果你想包含一个背景, 你要确保你的文本在背景上依然可以被很清晰地阅读. <P>背景图象可以是一个物体的组织 (例如亚麻布纸张)或图象 (可能是一个徽标). 你可以象生成其他任何图象一样来生成背景图象。 <P>不过你只需要制作一个很小的图象. 浏览器会使用一种称之为“盖瓦”tiling的特性重复显示这个图象，填满整个浏览器窗口。简单地说，你只要生成一幅图象，浏览器会自动重复多次，直到填满你的窗口。当你使用下面说明的标记时，这个动作会自动执行. <P>包含背景图象的标记包含在 <BODY> 标记描述中作为一个属性: <P><BODY BACKGROUND="filename.gif"> <P>背景颜色<BR>缺省情况下浏览器使用灰底黑字显示文本. 但是, 你可以改变它们. 一些 HTML 作者选择一个背景颜色，配以文本颜色的相应改变. <P>对于这种改变一定要预先看一看，是否还易于阅读. (例如, 不少人用黑底红字，非常难以阅读!) <P>使用<BODY>标记的多种属性，你可以改变文本，链接，看过的链接和活动链接的颜色. 例如, 输入: <P><BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC"> <P>将创建一个窗口，背景为黑色 (BGCOLOR), 文本为白色 (TEXT), 超链为银色 (LINK). <P>六位的数字和字母的组合代表颜色，它给出某种颜色的 RGB (红red, 绿green, 蓝blue)的值. 这个六位数字实际上是三个顺序排列的两位数, 代表从00到FF的红，绿，蓝比重的十六进制值。例如, 000000 表示黑色(没有任何颜色), FF0000 是亮红, FFFFFF 是白色 (所有三种颜色全部饱和). 这些数字和字母的组合的含义是模糊的. 幸运的是有一个在线资源可以帮助你了解各种组合与颜色的对应关系: <P>ColorPro Web server <BR>外部图象，声音，和动画<BR>你可能希望当用户激活你的文档中一个单词或小的图象作成的链接时，把一幅图象作为单独的文档打开. 这种情况称为一个外部图象, 当你不想由于大的图象而降低主文档的下载速度时，它是很有用的. <P>要包含一个外部图象的链接, 输入: <P><A HREF="MyImage.gif">link anchor</A> <P>你也可以用一个小的图象作为到大图象的链接. 输入: <P><A HREF="LargerImage.gif"><img src="http://127.0.0.1/Files/BeyondPic/2006-6/13/066131316214468.gif"></A><BR>ALT="" HEIGHT=48 WIDTH=50> <P>读者看到图象 SmallImage.gif ，点击它就可以打开文件 LargerImage.gif . <P>使用同样的语法链接外部动画和声音. 唯一的不同在于链接文件的扩展名. 例如, <P><A HREF="AdamsRib.mov">link anchor</A> </P><P>指明一个到QuickTime 电影的链接. 一些通常的文件类型和其扩展名为: <P>文件类型扩展名 <BR>纯文本plain text .txt <BR>HTML 文档 .html <BR>GIF 图象 .gif <BR>TIFF 图象 .tiff <BR>X 位图图象 .xbm <BR>JPEG 图象 .jpg 或 .jpeg <BR>PostScript 文件 .ps <BR>AIFF 声音文件 .aiff <BR>AU 声音文件 .au <BR>WAV 声音文件 .wav <BR>QuickTime 电影 .mov <BR>MPEG 电影 .mpeg 或 .mpg <P>记住你假设的读者和他们使用的软件. 例如，多数UNIX 工作站不能播放QuickTime 电影. <P>表格Tables<BR>在 HTML 制定表格标记之前, HTML 作者不得不在<PRE> 标记中仔细安排他们的表格式的信息，计算空格的个数，预览输出效果。表格不仅对描述表格式信息十分有用，对于那些经常性的 HTML 作者来说，它可以使他们可以方便地完成大量的 Web 页. (请看 NCSA Relativity Group's pages ，一个很好的例子.) <P>根据下面的编码解释考虑你的表格式信息. 一个表格得有一些表头，用于说明每行/列包含什么内容，行rows表示信息, 单元cells表示每个项. 在下面的表格中, 第一列包含表头信息, 每行说明一个 HTML 表格标记, 每个单元含有一对标记或者对标记功能的解释. <P>表格元素 <BR>元素描述 <BR><br/>... <br/>定义一个表格。如果使用了 BORDER 属性, 浏览器显示一个带边界的表格. <BR><CAPTION> ... </CAPTION> 定义表格标题的caption . 标题的缺省位置在表格的顶部. 属性 ALIGN=BOTTOM可以用于指定标题显示在表格底部 <BR>注:caption标记内可以使用任意其他标记. <BR><br/>... <br/>说明表格中的一行. 你可以定义整个行的缺省属性: ALIGN (LEFT, CENTER, RIGHT) 和/或 VALIGN (TOP, MIDDLE, BOTTOM). 详细内容参考本表格末尾的"表格属性"部分. <BR><TH> ... </TH> 定义一个表格头单元. 缺省状态该单元的文本为粗体居中. 该单元可以包含其他属性,说明单元属性和/或单元内容. 详细内容参见本表格底部的"表格属性"部分. <BR><br/>... <br/>定义一个表格数据单元. 缺省情况下该单元内的文本为水平方向靠左对齐, 垂直方向居中排放. 该单元可以包含其他属性,说明单元属性和/或单元内容. 详细内容参见本表格底部的"表格属性"部分. <BR>表格属性 <BR>注: 在<TH> ... </TH> 或 <br/>... <br/>单元中定义的属性将覆盖( override ) <br/>... <br/>中的缺省定义. <BR>属性描述 <BR>ALIGN (LEFT, CENTER, RIGHT) <BR>VALIGN (TOP, MIDDLE, BOTTOM) <BR>COLSPAN=n <BR>ROWSPAN=n <BR>NOWRAP <BR>一个单元的水平位置分配. <BR>一个单元的垂直位置分配. <BR>一个单元跨多少列(n). <BR>一个单元跨多少行(n). <BR>关闭一个单元中的自动换行（word wrapping）. <P><BR>通用表格格式<BR>一个表格的通用格式形式为: <P><br/><== 表格定义的开始<BR><CAPTION> caption 内容 </CAPTION> <== caption 定义 <P><br/><== 第一行定义的开始<BR><TH> 单元cell 内容 </TH> <== 第一行的第一个单元 (一个头head)<BR><TH> 单元内容 </TH> <== 第一行最后一个单元(一个头 head)<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/>标记必须把整个表格括起. 表格中的第一个项是 CAPTION, 它是可选部分. 然后你可以用 <br/>和 <br/>标记定义任意多行. 在一行内也可以有用<br/>...<br/>或 <TH>...</TH> 标记定义的任意数目的单元. 表格中的每一行在本质上是和它的上下行独立编排格式的. 这使得你可以很容易地显示象上文中的只有一个单元的表格, 例如表格属性, 跨越表格中的多个列. <P>非表格式信息使用的表格<BR>有些 HTML 作者使用表格描述非表格化信息. 例如, 因为链接可以包含在表格单元中, 一些作者使用没有边界的表格组合一些分离的图象创建“一个”图象. 可以显示表格的浏览器可以无缝隙地显示这些实际分离的图象, 使得合成的图象类似于一个图象映象image map (一个带有矩形超链区域的图象). <P>使用带有图象边界的表格也可以得到很好的显示效果. 不妨试一试，看看自己喜欢哪种风格. <P>填充 Form (Fill-out Forms)<BR>Web form 使读者可以向 Web 服务器返回信息以产生某种动作. 例如, 假设你想收集名字和电子邮件地址以便向提出要求的读者发送电子邮件. 对每个输入他/她的姓名和地址的人, 你需要得到要发送的信息和加到数据库中的响应者的项目. <P>这种输入数据的处理工作通常是由script(描述式语言：译者注)描述函数或者用 Perl 或其他处理文本，文件和信息的语言编写的程序来完成的. 如果你写不出能够处理输入数据的程序或script函数, 你就得找其他人替你完成. <P>Form 本身倒是比较简单. 它们也使用 HTML 标记来生成. 可能不同的地方在于接受并处理递交数据的程序或script描述函数. 由于需要说明专门的处理输入信息的script描述函数, 在本指南中不讨论填充forms. </P><P>疑难解答<BR>避免标记重叠<BR>请看这个 HTML 例子: <P><B>This is an example of <DFN>overlapping</B> HTML tags.</DFN> <P>overlapping 这个单词被同时包含在 <B> 和 <DFN> 两个标记中. 浏览器在这种情况下会无所适从，因而你可能得不到预期的效果. <P>通常情况下应该避免标记重叠. 检查你的标记，让它们成对出现. 成对使用的标记(显然，结束标记可以省略的元素除外, 如段落标记) 中间不应该被打断. 再看看上面的例子. 在中间的标记(DFN)尚未结束前，你不能使粗体标记<B>结束. 在你把文件放入服务器中之前，应该先检查以下是否含有类似上述情况的错误. <P>只嵌入锚链和字符标记mbed Only Anchors and Character Tags<BR>HTML 协议允许你在其他 HTML 标记中嵌入超链: <P><H1><A HREF="Destination.html">My heading</A></H1> <P>不要在一个锚链中嵌入 HTML 标记: <P><A HREF="Destination.html"><BR><H1>My heading</H1><BR></A> <P>尽管当前的多数浏览器能够处理第二个例子, HTML 的正式说明是不支持这种结构的，你的文件也许在将来的浏览器中将发生问题. 记住，一个浏览器显示不正确编码的文件是可以被原谅的. 但是这种宽容可能不会延续到该软件的下一个版本！当发生疑问时, 就根据 HTML 说明的规定来书写 (参见下面的其它信息 ). <P>字符标记可以用在其它元素中改变文本显示模式: <P><UL><BR><LI><B>A bold list item</B><BR><LI><I>An italic list item</I><BR></UL> <P>避免嵌入其它类型的 HTML 元素标记. 例如, 你可能想在一个列表中嵌入标题字体以增大一些字符的显示: <P><UL><BR><LI><H1>A large heading</H1><BR><LI><H2>Something slightly smaller</H2><BR></UL> <P>尽管有些浏览器可以很好地显示这种编码, 这种格式将来是否有效是很难说的，因为它是未定义的 . 为了保证对所有浏览器兼容, 你应该避免使用这种结构. (Netscape 支持一种 <FONT> 标记, 用于指定某个字符在浏览器中显示的大小, 也不是当前官方 HTML 说明中的定义.) <P>在 <LI> 标记中插入 <B> 标记与在 <LI> 标记中插入 <H1> 标记有什么不同呢? 在訦TML 语义说明中 <H1> 的含义是一个文档中主标题字体的开始，它后面应该跟当前文档的内容. 因此在一个列表中出现 <H1> 时是没有含义的. <P>字符格式标记通常也不可以附加. 例如, 你可能想这样写: <P><B><I>some text</I></B> <P>期望得到一种加粗的斜体文本. 有些浏览器确实可以; 另外一些浏览器则只解释最内层的标记. <P>最后的步骤 <BR>使你的编码有效<BR>当你把一篇文档放入一个 Web 服务器时, 要确保格式和每个链接正确(包括命名锚链在内). 理想的情况是在你认为一篇文档完成了的时候让其他人浏览一遍并且给出评论. <P>你可以通过 HTML 有效性服务来验证你的文件是否符合目前普遍接受的 HTML 的标准. 如果你不知道你的文档是否符合 HTML 说明, 这个服务是一个有用的教学工具. 这个服务允许你选择一个校验的级别(如, 严格校验strict, 二级校验level 2, 三级校验level 3).如果你想使用一些非标准的格式，这种自由是很有用的. <P>替代图像<BR>当<img SRC> 标记指向的图像不存在时, 你的浏览器会使用一个替代图像. 在你最后检查你的文件时如果出现了这种情况, 应该确保所指向的图像文件确实存在, 超链使用的 URL 信息正确, 以及文件属性被正确设置(对所有人可读). 然后再检查一遍! <P>更新你的文件<BR>如果一个文件的内容是静态的 (例如George Washington的个人传记), 可能不会需要更新. 但是对于和时间关系密切的内容，或者包含的领域是经常变化的, 记住不断更新你的文件! <P>当文件含有诸如每周计划或事件的最后期限这一类信息时，更新是非常重要的. 删除过时的文件或注明为什么有些过期的信息依然在服务器中 (例如, 某个事件在下一轮中的要求和当前内容是相同的，所以该文件过一段时间后仍有参考价值). <P>浏览器的区别<BR>不同的 Web 浏览器显示的 HTML 元素不尽相同. 记住不是所有的浏览器都能够解释 HTML 文件中所有的标记元素. 不过，浏览器对于不能识别的标记通常只是忽略而已. <P>你可能花费了很多时间是你的文件在你当前使用的浏览器上“看上去非常漂亮”. 如果你用另一个浏览器察看你的文件, 它很可能看起来不太一样，甚至很不相同. 因此请记住这个建议：使用正确的 HTML 来书写你的文件. 把解释工作留给浏览器，争取得到最好的效果. <P>注释你的文件<BR>在你的HTML文件中你可能需要留一些注释. HTML 中的注释类似于计算机程序中的注释--你输入的文本不是用于给浏览器显示的，读者也无法直接看到它们，就象计算机程序中的注释是不被程序本身使用的，程序使用者也看不到这些注释. 不过，如果读者看原始文件的话，将可以看到注释. <P>一般的注释包括更新文件的作者姓名, 生成一个文件所使用的软件和其版本, 或者一些较小的改动信息等. <P>加入一段注释的格式为: <P><br/><P>你必须包含叹号和连字符. <P>其他信息<BR>本指南只是一个关于 HTML 的简介, 而不是一个详尽的参考. 下面是一些其他的参考信息. 别忘了先到附近的书店查一查 Web 和 HTML 的书籍. <BR></P></SPAN> </SPAN><br/> <BR/><br/>　<br/>　<br/>　<br/>　<br/>　<br/> </div> </td> </tr> <tr> <td colspan='3' style='width:800px; height:auto;'> <iframe id='iframepage' name='iframepage' src='../../ForJavaScript1.aspx?newsId=15149&pageIndex=1' scrolling=no frameborder='0' width='100%' onLoad='iFrameHeight()' > </iframe> </td> </tr> </table> </center> </div> </td> <td style='width:200px; height:auto; vertical-align:top;'> <div> <table> <tr> <td style='width:200px; height:auto;'> <div><script language="JavaScript" src="../../js/guanggaointexthtmlright1.js" type="text/javascript"></script></div> </td> </tr> <tr> <td style='width:200px; height:auto;'> <div><script language="JavaScript" src="../../js/guanggaointexthtmlright2.js" type="text/javascript"></script></div> </td> </tr> </table> </div> </td> </tr> </table> <hr style="width:1200px; height:1px;" /> <table> <tr> <td align="left"> <div><script language="JavaScript" src="../../js/guanggaoinhtmlend.js" type="text/javascript"></script></div> </td> </tr> <tr> <td align="left"> <div><script language="JavaScript" src="../../js/guanggaoinhtmlend2.js" type="text/javascript"></script></div> </td> </tr> </table> </center> </div> </form> </center> <hr style="width:1200px; height:1px;" /> <center> <a href="http://del.icio.us/post" onclick="window.open('http://del.icio.us/post?v=4&noui&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=700,height=400'); return false;"><img alt="添加到del.icio.us" src='../ico_share/ico_delicious.gif' border="0" /></a> <a href="javascript:d=document;t=d.selection?(d.selection.type!='None'?d.selection.createRange ().text:''):(d.getSelection?d.getSelection():'');void(vivi=window.open('http://vivi.sina.com.cn/collect/icollect.php?pid=2008&title='+escape(d.title)+'&url='+escape(d.location.href)+'&desc='+escape(t),'vivi','scrollbars=no,width=480,height=480,left=75,top=20,status=no,resizable=yes'));vivi.focus();" title="收藏的网页将被永久地保存到爱问ViVi收藏夹http://vivi.sina.com.cn"><img alt="添加到新浪ViVi" src='../ico_share/ico_vivi.gif' border="0" /></a> <a href="javascript:window.open('http://cang.baidu.com/do/add?it='+encodeURIComponent(document.title.substring(0,76))+'&iu='+encodeURIComponent(location.href)+'&fr=ien#nw=1','_blank','scrollbars=no,width=600,height=450,left=75,top=20,status=no,resizable=yes'); void 0" style="color:#000000;text-decoration:none;font-size:12px;font-weight:normal"><img alt="添加到百度搜藏" src='../ico_share/ico_baidu.gif' border="0" /></a> <a href="javascript:d=document;t=d.selection?(d.selection.type!='None'?d.selection.createRange ().text:''):(d.getSelection?d.getSelection():'');void(vivi=window.open('http://my.poco.cn/fav/storeIt.php?t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t),'_blank','scrollbars=no,width=475,height=575,left=75,top=20,status=no,resizable=yes'));" title="收藏到POCO网摘http://share.poco.cn"><img alt="添加到POCO网摘" src='../ico_share/ico_poco.gif' border="0" /></a> <a href="javascript:d=document;t=d.selection?(d.selection.type!='None'?d.selection.createRange().text:''):(d.getSelection?d.getSelection():'');void(keyit=window.open('http://www.365key.com/storeit.aspx?t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t),'keyit','scrollbars=no,width=475,height=575,left=75,top=20,status=no,resizable=yes'));keyit.focus();" title="功能强大的网络收藏夹，一秒钟操作就可以轻松实现保存带来的价值、分享带来的快乐"><img alt="添加到天天网摘365Key" src='../ico_share/ico_365key.gif' border="0" /></a> <a href="javascript:t=document.title;u=location.href;e=document.selection?(document.selection.type!='None'?document.selection.createRange().text:''):(document.getSelection?document.getSelection():'');void(open('http://bookmark.hexun.com/post.aspx?title='+escape(t)+'&url='+escape(u)+'&excerpt='+escape(e),'HexunBookmark','scrollbars=no,width=600,height=450,left=80,top=80,status=no,resizable=yes'));"><img alt="添加到和讯网摘" src='../ico_share/ico_hexun.gif' border="0" /></a> <a href="javascript:d=document;t=d.selection?(d.selection.type!='None'?d.selection.createRange().text:''):(d.getSelection?d.getSelection():'');void(yesky=window.open('http://hot.yesky.com/dp.aspx?t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t)+'&st=2','_blank','scrollbars=no,width=400,height=480,left=75,top=20,status=no,resizable=yes'));yesky.focus();"title="推荐到天极网摘 http://hot.my.yesky.com [鼠标划选本文摘要，然后点击本图片]"><img alt="添加到天极网摘" src='../ico_share/ico_yesky.gif' border="0" /></a> <a href="javascript:desc='';via='';if(document.referrer)via=document.referrer;if(typeof(_ref)!='undefined')via=_ref;if(window.getSelection)desc=window.getSelection();if(document.getSelection)desc=document.getSelection();if(document.selection)desc=document.selection.createRange().text;void(open('http://www.hemidemi.com/user_bookmark/new?title='+encodeURIComponent(document.title)+'&url='+encodeURIComponent(location.href)+'&description='+encodeURIComponent(desc)+'&via='+encodeURIComponent(via)));"><img alt="添加到黑米书签" src='../ico_share/ico_hemidemi.gif' border="0" /></a> <a href="javascript:window.open('http://shuqian.qq.com/post?from=3&title='+encodeURIComponent(document.title)+'&uri='+encodeURIComponent(document.location.href)+'&jumpback=2&noui=1','favit','width=930,height=470,left=50,top=50,toolbar=no,menubar=no,location=no,scrollbars=yes,status=yes,resizable=yes');void(0)"><img alt="添加到QQ书签" src='../ico_share/ico_qq.gif' border="0" /></a> <a href="#" onclick="window.open('http://myweb.cn.yahoo.com/popadd.html?url='+encodeURIComponent(document.location.href)+'&title='+encodeURIComponent(document.title), 'Yahoo','scrollbars=yes,width=780,height=550,left=80,top=80,status=yes,resizable=yes');"><img alt="添加到雅虎收藏" src='../ico_share/ico_yahoo.gif' border="0" /></a> <a title="推荐到diglog" href="javascript://" onclick="javascript:d=document;t=d.selection?(d.selection.type!='None'?d.selection.createRange().text:''):(d.getSelection?d.getSelection():'');void(keyit=window.open('http://www.diglog.com/submit.aspx?title='+escape(d.title)+'&url='+escape(d.location.href)+'&description='+escape(t),'keyit','resizable,location,menubar,toolbar,scrollbars,status'));keyit.focus();"><img alt="添加到奇客发现" src='../ico_share/ico_diglog.gif' border="0" /></a> <a href="#" onclick="var s=document.createElement('script');s.type='text/javascript';s.src='http://www.diigo.com/javascripts/webtoolbar/diigolet_b_h_b.js';document.body.appendChild(s);"><img alt="diigo it" src='../ico_share/ico_diigo.gif' border="0" /></a> <a href="javascript:var d=document,w=window,f='http://fanfou.com/share',l=d.location,e=encodeURIComponent,p='?u='+e(l.href)+'?t='+e(d.title)+'?d='+e(w.getSelection?w.getSelection().toString():d.getSelection?d.getSelection():d.selection.createRange().text)+'?s=bl';if(!w.open(f+'r'+p,'sharer','toolbar=0,status=0,width=600,height=400')){l.href=f+'.new'+p;}void(0)"><img alt="添加到饭否" src='../ico_share/ico_fanfou.gif' border="0" /></a> <a target=_blank href="http://www.feedou.com/addchannelservlet?commandkey=takersslog&url=http://digimarketing.cn/modules/article/xml.php?rss"><img alt="添加到飞豆订阅" src='../ico_share/ico_feedou.gif' border="0" /></a> <a target=_blank href="http://www.zhuaxia.com/add_channel.php?sourceid=102&url=http%3A%2F%2Fdigimarketing.cn"><img alt="添加到抓虾收藏" src='../ico_share/ico_zhuaxia.gif' border="0" /></a> <a target="_blank" href="http://www.xianguo.com/subscribe.php?url=digimarketing.cn"><img alt="添加到鲜果订阅" src='../ico_share/ico_xianguo.gif' border="0" /></a> <a href="javascript:;" onclick="window.open('http://digg.com/submit?phase=2&url=' + encodeURIComponent(location.href) + '&title=' + encodeURIComponent(document.title)); return false;"><img alt="digg it" src='../ico_share/ico_digg.gif' border="0" /></a> <a target=_blank href="http://funp.com/push/submit/add.php?&via=tools" title="貼到funP"><img alt="貼到funP" src='../ico_share/ico_funp.gif' border="0" /></a> <a target="_blank" href="http://reader.yodao.com/b.do?url=digimarketing.cn"><img alt="添加到有道阅读" src='../ico_share/ico_yodao.gif' border="0" /></a> <a href="javascript:;" onclick="window.open('http://favorites.live.com/quickadd.aspx?url=' + encodeURIComponent(location.href) + '&title=' + encodeURIComponent(document.title)); return false;"><img alt="Live Favorites" src='../ico_share/ico_windows.gif' border="0" /></a> <a href="javascript:;" onclick="window.open('http://www.newsvine.com/_tools/seed&save?popoff=0&u=' + encodeURIComponent(location.href) + '&h=' + encodeURIComponent(document.title)); return false;"><img alt="添加到Newsvine" src='../ico_share/ico_newsvine.gif' border="0" /></a> <a onclick="javascript:window.print();" href="javascript:;"><img src="../ico_share/ico_print.gif" alt="打印本页" border="0" /></a> <a onclick='javascript:window.location="mailto:?subject=[ Enter your own subject line ]& body=" + "Check out this link: " + window.location;' href="javascript:;"><img alt="用Email发送本页" src='../ico_share/ico_mail.gif' border="0" /></a> <script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436,scrollbars=1, resizable=1');return false;}</script> <a href="http://www.facebook.com/share.php?u=<url>" onclick="return fbs_click()" target="_blank" class="fb_share_link"><img alt="在Facebook上分享" src='../ico_share/ico_fb.jpg' border="0" /></a> </center> <hr style="width:1200px; height:1px;" /> <center > <!--网站底部--> <div style=" width:1200px; height:100px; background-color:#FFFFFF;"> <hr style=" width:1200px; height:1px;"/> <table> <tr style=" height:50px; width:1200px;"> <td align="center" style="height:50px;"> <a href="../../disclaimer.html" style="font-family:黑体; font-size:small; color:#555;" target="_blank">Disclaimer</a> </td> <td align="center" style="height:50px;"> <a href="../../privacy policy.html" style="font-family:黑体; font-size:small; color:#555;" target="_blank">Privacy Policy</a> </td> <td align="center" style="height:50px;"> <a href="../../AboutUs.html" style="font-family:黑体; font-size:small; color:#555;" target="_blank">About us</a> </td> <td align="center" style="height:50px;"> <a href="../../SiteMap.html" style="font-family:黑体; font-size:small; color:#555;" target="_blank">Site Map</a> </td> <td align="center" style="height:50px;"> <!--百度网站统计--> <script type="text/javascript"> var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fcd1d276abd98aad311a7e9ab1f772b56' type='text/javascript'%3E%3C/script%3E")); </script> </td> <td align="center" style="height:50px;"> </td> <td align="center" style="height:50px;"> <a href="http://webscan.360.cn"><img border="0" src="http://webscan.360.cn/status/pai/hash/494b6dad04e216e4d1f270ad7bfe37f4"/></a> </td> </tr> </table> <hr style=" width:1200px; height:1px;"/> If you have any requirements, please contact webmaster。(如果有什么要求，请联系站长) <hr style=" width:1200px; height:1px;"/> <table> <tr> <td><img src="../../images/mmqrcode1435163607101.png" alt=""/></td> <td></td> <td><img src="../../images/mmqrcode1435163324094.png" alt=""/></td> </tr> <tr> <td align="right"> Copyright ©2011-</td> <td align="left"><div id="yearTime"></div> </td> <td align="left"> uuhomepage.com, Inc. All rights reserved. </td> <td> <div><script language="JavaScript" src="../../js/guanggao6.js" type="text/javascript"></script></div> </td> </tr> </table> </div> </center> </body> </html>

和

HTML is Easy To Learn