分页: 169/196 第一页 上页 164 165 166 167 168 169 170 171 172 173 下页 最后页 [ 显示模式: 摘要 | 列表 ]
Mar 23
 本文是创建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 标记由一个左尖括号 (<), 一个标记名, 和一个右尖括号 (>) 组成. 标记通常成对出现 (如, <H1> 和 </H1>) 以指出标记作用的范围. 结束标记和起始标记相似,只是在括号中的标记名中以斜杠 (/) 领头. HTML 标记在下文中列出.

有些元素可能含有一个属性 attribute, 它是包含在起始标记中的附加信息说明. 例如, 通过在图象文件的 HTML 代码中包含适当的属性,你可以指明一幅图象的位置 (顶端, 中间, 或底部) . 具有可选属性的标记 如下.

注意: HTML 不区分大小写. <title> 等价于 <TITLE> 或 <TiTlE>. 有几个例外的情况列在下文中的转义序列中.

并非所有的 World Wide Web 浏览器都支持所有的标记. 如果一个浏览器不支持某个标记, 它通常只是忽略之.

最小的 HTML 文档
每个 HTML 文档应该包含一些标准 HTML 标记. 每个文档都包含头 head 和正文 body text 两部分. 头中含有标题 title, 正文中含有实际构成段落,列表和其他元素的文本. 浏览器需要具体的信息是因为它们都是根据 HTML 和 SGML 说明编程的.

下面的源文档举例说明必须的元素:

<html>
<head>
<TITLE>A Simple HTML Example</TITLE>
</head>
<body>
<H1>HTML is Easy To Learn</H1>
<P>Welcome to the world of HTML.
This is the first paragraph. While short it is
still a paragraph!</P>
<P>And this is the second paragraph.</P>
</body>
</html>

必须的元素有 <html>, <head>, <title>, 和 <body> 标记 (和它们相应的结束标记). 由于在每个文件中你都要包括这些标记, 你可以创建一个含有这些标记的模板文件. ( 有些浏览器会自动正确地规格化你的 HTML 文件,哪怕你没有包含这些标记. 但是有些浏览器不会这样! 因此你要确保包含这些标记.)
Mar 22
meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的<head>与</head>中,meta 标签的用处很多。meta 的属性有两种:name和http-equiv。name属性主要用于描述网页,对应于content(网页内容),以便于搜索引擎机器人查找、分类(目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类)。这其中最重要的是description(站点在搜索引擎上的描述)和keywords(分类关键词),所以应该给每页加一个meta值。比较常用的有以下几个:

name 属性
1、<meta name="Generator" contect="">用以说明生成工具(如Microsoft FrontPage 4.0)等;
2、<meta name="KEYWords" contect="">向搜索引擎说明你的网页的关键词;
3、<meta name="DEscription" contect="">告诉搜索引擎你的站点的主要内容;
4、<meta name="Author" contect="你的姓名">告诉搜索引擎你的站点的制作的作者;
5、<meta name="Robots" contect="all|none|index|noindex|follow|nofollow">
其中的属性说明如下:
设定为all:文件将被检索,且页面上的链接可以被查询;
设定为none:文件将不被检索,且页面上的链接不可以被查询;
设定为index:文件将被检索;
设定为follow:页面上的链接可以被查询;
设定为noindex:文件将不被检索,但页面上的链接可以被查询;
设定为nofollow:文件将不被检索,页面上的链接可以被查询。

http-equiv属性
1、<meta http-equiv="Content-Type" contect="text/html";charset=gb_2312-80">和 <meta http-equiv="Content-Language" contect="zh-CN">用以说明主页制作所使用的文字以及语言;又如英文是ISO-8859-1字符集,还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集;
2、<meta http-equiv="Refresh" contect="n;url=http://yourlink">定时让网页在指定的时间n内,跳转到页面http;//yourlink;
3、<meta http-equiv="Expires" contect="Mon,12 May 2001 00:20:00 GMT">可以用于设定网页的到期时间,一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式;
4、<meta http-equiv="Pragma" contect="no-cache">是用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出;
5、<meta http-equiv="set-cookie" contect="Mon,12 May 2001 00:20:00 GMT">cookie设定,如果网页过期,存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式;
6、<meta http-equiv="Pics-label" contect="">网页等级评定,在IE的internet选项中有一项内容设置,可以防止浏览一些受限制的网站,而网站的限制级别就是通过meta属性来设置的;
7、<meta http-equiv="windows-Target" contect="_top">强制页面在当前窗口中以独立页面显示,可以防止自己的网页被别人当作一个frame页调用;
8、<meta http-equiv="Page-Enter" contect="revealTrans(duration=10,transtion= 50)">和<meta http-equiv="Page-Exit" contect="revealTrans(duration=20,transtion=6)">设定进入和离开页面时的特殊效果,这个功能即FrontPage中的“格式/网页过渡”,不过所加的页面不能够是一个frame页面。

以上是常用的几个meta属性,有个人主页的朋友不妨在你的主页中加上它,效果可是不一样的哦!
Mar 21
点击在新窗口中浏览此图片
刘芳菲
点击在新窗口中浏览此图片
张泽群
点击在新窗口中浏览此图片
朱军
点击在新窗口中浏览此图片
周涛
点击在新窗口中浏览此图片
董卿
点击在新窗口中浏览此图片
李咏
Mar 21
如果你的网页中有<a href=“#”> .......</a> 这样的连接,而且已经出现的滚动条,并且下拉了一些,那么当点击这个连接的时候就会返回页面顶部,很是讨厌。以下几中方法可以防止这个问题:

1.将<a href=“#”>.......</a>改为<a href=“javascript:;”> .......</a>

2.将<a href=“#”> .......</a>改为<a href=“#”onclick="return false"> .......</a>

3.如果实在不需要一个连接,而只是想让浏览者把鼠标放在这里的时候让鼠标变成手,那么你也可以将........前的<a> 去掉,用<span style="cursor:hand">代替也可以

4.将<a href=“#”> .......</a>改为<a href=“####”>.......</a>

5.将<a href==“#”> .......</a>改为<a href="javascript:void(0)">.....</a>
Mar 21
超文本链接指针是html最吸引人们优点之一。使用超文本链接指针可以使顺序存放的文件具有一定程度上随机访问的能力,这更加符合人类的思维方式。人的思维是跳跃的、交叉的,而每一个链接指针正好代表了作者或者读者的思维跳跃。因而组织得好的链接指针不仅能使读者跳过他不感兴趣的章节(比如一些枯燥的数据),而且有助于更好地理解作者的意图。
  一个超文本链接指针由两部分组成。一是被指向的目标,它可以是同一文件的另一部分,也可以是世界另一端的一个文件,还可以是动画或音乐;另一部分是指向目标的链接指针。



  §3.1 统一资源定位器URL统一资源定位器(uuiform Resource Locator)是文件名的扩展。在单机系统中,定位一个文件需要路径和文件
名,对于遍布全球的Internet网,显然还需要知道文件存放在哪个网络的哪台主机中才行。与单机系统不一样的是在单机系统中,所有的文件都由统一的操作系统管理,因而不必给出访问该文件的方法;而在Internet上,各个网络,各台主机的操作系统都不一样,因此必须指定访问该文件的方法。一个URL包括了以上所有的信息。它的构成为:
  protocol:// machine.name[:port]/directory/filename其中protocol是访问该资源所采用的协议,即访问该资源的方法,它可以是:
 http 超文本传输协议,该资源是html文件
  file 文件传输协议,用ftp访问该资源
  ftp 文件传输协议,用ftp访问该资源
  gopher gopher协议,该资源是gopher文件
  news 表明该资源是网络新闻



   madcine.name 是存放该资源主机的IP 地址,通常以字符形式出现,如 sun.ihep.ac.cn port端口号,是服务器在该主机所使用的端口号。一般情况下端口号不需要指定。 只有当服务器所使用的端口号不是缺省的端口号时才指定。
  directory和filename是该资源的路径和文件名。
  一个典型的URL为http://www.ihep.ac.cn 它表示中科院高能所WWW服务器上的起始html文件。(文件具体存放的路径及文件名取决于该WWW服务器的配置情况)。
  与单机系统绝对路径,相对路径的概念类似,统一资源定位器也有绝对URL和相对URL之分。上文所述的是绝对URL。相对URL是相对于你最近访问的URL。比如你正在观看一个URL为http://www.inep.ac.cn/index.html的文件,如果想看同一个目录下的另一个文件china.html,你可以直接使用china.html,这时china.html就是一个相对url,它的绝对url为http://www.ihep.ac.cn/china.html



  §3.2 指向一个目标<a>
  在html文件中用链接指针指向一个目标。其基本格式为:<a href="url">字符串</a>href属性中的统一资源定位器(url)是被指向的目标,随后的“字符串”在html文件中充当指针的角色, 它一般显示为蓝色。当读者用鼠标点这个字符串时,浏览器就会将url处的资源显示在屏幕上。例如:
  <a href="http://www:ihep.ac.cn">IHEP CHINA homepage</a>用户用鼠标点取IHEP china homepage,即可看到高能所编写的关于中国情况的介绍。在这个例子中, 充当指针的是IHEP china homepage,下面我们将看到用图象做为指针的例子。
  在编写html文件时,需要知道目标的url。如何才能得到目标的url呢?对于自己主机内的文件,它的url 可以根据该文件的实际情况决定。对于Interner上的资源, 我们在用浏览器观看时,它的url会在浏览器的Location一栏中显示出来,把它抄下来写到你的html文件中即可。
  在编写html文件时,对有能确定关系的一组资源(比如在同一个目录中)应采用相对url, 这不仅简化你的html文件,而且便于维护。比如当你需要将某个目录整个搬到另外一个地方或把某一主机的资源移到另一台主机时,用相对url写的html文件用不看更新其中的url(只要它们的相对关系没有改变)。但如果你用绝对url编写html,你就不得不逐字修改每个链接指针中的url,这是一件很乏味也很容易出错的工作。对于各个资源之间没有固定的关系,比如你的html文件是介绍各大学情况的,它所指向的目标分布在全球的主机中,这时你就只能用绝对url了。
  在本章的末尾,作者给出一个完整的html文件,该文件使用了前三章介绍的全部元素,以便于读者理解。
  
  §3.3 标记一个目标
   上节提到的链接指针可以使读者在整个Interner网上方便地链接。但如果你编写了一个很长的html文件,从头到尾地读很浪费时间,能不能在同一文件的不同部分之间也建立起链接,使用户方便地在上下方之间跳转呢?答案是肯定的。前面曾提到过一个超文本链接指针包括两个部分,一个指向目标的链接指针,另一个是被指向的目标。对于一个完整的文件,我们可以用它的url来唯一地标识它, 但对于同一文件的不同部分,我们怎样来标识呢?下面的内容将介绍链接指针元素的另外的一个用途,标识目标。
  标识一个目标的方法为:
  <a name="name">text</a>
    name属性将放置该标记的地方标记为“name”,name是一个全文唯一的标记串,text部分可有可无。这样,我们就把放置标记的地方做了一个叫做“name”的标记。
  做好标记后,可以用下列方法来指向它,<a href="url#name">text </a>url是放置标记的html文件的url name是标记名,对于同一个
文件,可以写为 <a href="#name">text </a>这时就可以点取text跳转到标记名为name的部分了。
  §3.4 目标窗口
    如果希望被指向的目标在一个新的窗口中显示,可以使用target属性来修饰链接指针元素。
  <a href="url" target="window-name">text </a>将url代表的资源显示在一个新的窗口中,该窗口的名字叫window-name。
  注意:仅用于Netscape2.0浏览器。



  §3.5 图象链接指针图象也可以做为链接指针。格式为:<a href="url"><img src="url"></a>可以看出,上例中用<img src="url">取代了链接指针中text的位置。
  <img src="url">是图象元素,它表明显示url代表的图象文件,参见图象一章。
  下面是一个简单的图象链接指针。
 <a href="www.ihep.ac.cn">China home page<img src="flag.gif"></a>
  §3.6 图象地图(image map)
    上一节介绍的图象链接指针每幅图只能指向一个地点,而图象地图可以把图象分成多个区域,每个区域指向不同的地点。你可以用图象地图编出很漂亮的html文件。
  使用图象地图稍微复杂一点。图象地图不仅需要在html文件中说明,它还需要一个后缀为.map的文件,用来说明图象分区及其指向的url的信息。 在.map文件中说明分区信息的格式如下:
  rect url 左上角坐标,右下角坐标
  poly url 各顶点坐标
  circle url 直径两端点坐标
  default url
  rect指定一个矩形区域,该区域的位置由左上角坐标和右下角坐标说明。poly指定一多边形区域,该区域的位置由各顶点坐标说明。circle 指定一圆形区域, 该区域的位置由垂直通过圆心的直径与该圆的交点坐标说明。default 指定图象地图其它部分的url。坐标的写法为:x,y ,各点坐标之间用空格分开。下面是一个完整的说明文件,
 default http://www.ihep.ac.cn
  rect http://www.ibm.com 140,20 280,60
  poly http://www.microsoft.com 180,80 200,140
  circle http://www.yahoo.com 80,140 80,100



   图象地图需要一个特殊的处理程序 imagemap,imagemap放在/cgi-bin 中。在html 文件中引用图象地图的 格式为:<a href="/cgi-bin/imagemap/mymap.map"><img src="mymap.gif" ismap></a>可以看出这是一个包含图象元素的链接指针元素。图象元素指明用于图象地图的图象的url,并用Ismap属性说明。需要说明的是链接指针中的href属性,它由两部分组成,第一部分是/cgi-bin/imagemap ,它指出用哪个程序来处理图象地图,它必须原样写入,第二部分才是图形地图的说明文件mymap.map。/cgi-bin/imagemap/mymap.map绝不表示
mymap.map在/cgi-bin/imagemap目录中。在netscape扩展中,图象地图可以用一种比较简化的方式来表示,这就是客户端图象地图。用户端地图可以将图象地图的说明文件写在html文件中,而且不需要另外的程序来处理。这就使html作者可以用同别的元素相一致的写法来写图象地图。
    客户端图象地图还有一个优点,当鼠标指向图象地图的不同区域时,浏览器能显示出各个区域所指向的url。但目前只有netscape2.0以上版本才支持这一扩展。
  用户端图象地图的格式为:<img src="url" usemap="#mymap">src="url" 指定用作图象地图的图象
  usemap属性指明这是客户端图象地图"#mymap"是图象文件说明部分的标记名,浏览器寻找名字为mymap的<map>元素并从中得到图象地图的分区信息。客户端图象地图的分区信息用<map name=mapname>元素说明,name属性命名<map>元素。图象地图的各个区域用<area shape="形状" coords="坐标" href="url">说明,形状可以是:rect矩形,用左上角,右下角的坐标表示,各个坐标值之间用逗号分开; poly多边形,用各顶点的坐标值表示;circle圆形,用圆心及半径表示,前两个参数分别为圆心的横、纵坐标, 第三个参数为半径。href="url",表示该区域所指向的 资源的url,也可以是nohref,表示在该区域鼠标点取无效。客户端图象地图各个区域可以重叠,重叠区以先说明的条目为准,下面是一个例子:
源程序:
  <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="nes.html"
coords="80,100,60>
</map>
分页: 169/196 第一页 上页 164 165 166 167 168 169 170 171 172 173 下页 最后页 [ 显示模式: 摘要 | 列表 ]