BitComet 旗下网站

转到日志 22255 HTML 14425 网络 30 博客 947 教程 21649 POPMO社

[如何做博客]之HTML的使用教程(一)

楼主 发表于:2008-02-12 19:15:01 [回复]

HTML教程第一章至第五章

第一章 HTML概述与基本结构

     一、HTML的概述< Web的缩写,也可简写WEB、中文叫做万维网) Wide 文档时所遵循的规则和进行的操作.HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准.用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台,自1990年以来HTML就一直被用作WWW(是World HTML Language,即超文本标记语言,是一种用来制作超文本文档的简单标记语言。超文本传输协议规定了浏览器在运行 Marked HTML的英语意思是:Hypertext>

   所谓超文本,是因为它可以加入图片、声音、动画、影视等内容,事实上每一个HTML文档都是一种静态的网页文件,这个文件里面包含了HTML指令代码,这些指令代码并不是一种程序语言,它只是一种排版网页中资料显示位置的标记结构语言,易学易懂,非常简单。HTML的普遍应用就是带来了超文本的技术----通过单击鼠标从一个主题跳转到另一个主题,从一个页面跳转到另一个页面与世界各地主机的文件链接。直接获取相关的主题。如下所示:

       通过HTML可以表现出丰富多彩的设计风格:

               图片调用:<IMG SRC="文件名">
               文字格式: <FONT SIZE="+5 " COLOR="#00FFFF">文字</FONT>

       通过HTML可以实现页面之间的跳转: 

               页面跳转:〈A HREF="文件路径/文件名"></A> 

       通过HTML可以展现多媒体的效果: 

                声频:<EMBED SRC="音乐地址" AUTOSTART=true>
                视频:<EMBED SRC="视频地址" AUTOSTART=true>

    从上面我们可以看到HTML超文本文件时需要用到的一些标签。在HTML中每个用来作标签的符号都是一条命令、它告诉浏览器如何显示文本。这些标签均由"<"和">"符号以及一个字符串组成。而浏览器的功能是对这些标记进行解释,显示出文字、图像、动画、播放声音。这些标签符号用“<标签名字 属性>”来表示。

    HTML只是一个纯文本文件。创建一个HTML文档,只需要两个工具,一个是HTML编辑器,一个WEB浏览器。HTML编辑器是用于生成和保存THML文档的应用程序。WEB浏览器是用来打开WEB网页文件,提供给我们查看WEB资源的客户端程序。

      二、 HTML的基本结构< P>

    一个HTML文档是由一系列的元素和标签组成.元素名不区分大小写.HTML用标签来规定元素的属性和它在文件中的位置,

    HTML超文本文档分文档头和文档体两部分,在文档头里,对这个文档进行了一些必要的定义,文档体中才是要显示的各种文档信息。

下面是一个最基本的html文档的代码:1-1.html

<HTML> ----------------------------------------     开始标签

<HEAD>   --------------------------------------
<TITLE> 一个简单的HTML示例 </TITLE>             |     头部标签
</HEAD>  --------------------------------------

<BODY> ----------------------------------------
<CENTER>                                       |
<H1>欢迎光临我的主页</H1>                      |
<BR>                                           |
<HR>                                           |     文件主体
<FONT SIZE= 7 COLOR= red>                      |
这是我第一次做主页                             |
</FONT>                                        |
</CENTER>                                      |
</BODY> ---------------------------------------

</HTML> ---------------------------------------     结尾标签

    

     <HTML></HTML>在文档的最外层, 文档中的所有文本和html标签都包含在其中,它表示该文档是以超文本标识语言(HTML)编写的。事实上,现在常用的Web浏览器都可以自动识别HTML文档,并不要求有 <html>标签,也不对该标签进行任何操作,但是为了使HTML文档能够适应不断变化的Web浏览器,还是应该养成不省略这对标签的良好习惯。

    <HEAD></HEAD>是HTML文档的头部标签, 在浏览器窗口中,头部信息是不被显示在正文中的,在此标签中可以插入其它标记, 用以说明文件的标题和整个文件的一些公公属性。若不需头部信息则可省略此标记,良好的习惯是不省略。

    <title>和</title>是嵌套在<HEAD>头部标签中的,标签之间的文本是文档标题,它被显示在浏览器窗口的标题栏。

    <BODY> </BODY>标记一般不省略,标签之间的文本是正文,是在浏览器要显示的页面内容。

    上面的这几对标签在文档中都是唯一的,HEAD标签和BODY标签是嵌套在HTML标签中的。

      三、 HTML的标签与属性< P>

    对于刚刚接触超文本的朋友,遇到的最大的障碍就是一些用“<”和 “>”括起来的句子,我们称它为标签,是用来分割和标签文本的元素,以形成文本的布局、文字的格式及五彩缤纷的画面。标签通过指定某块信息为段落或标题等来标识文档某个部件。属性是标志里的参数的选项,

    HTML的标签分单标签和成对标签两种。成对标签是由首标签<标签名> 和尾标签</标签名>组成的,成对标签的作用域只作用于这对标签中 的文档。单独标签的格式<标签名>,单独标签在相应的位置插入元素就可以了,大多数标签都有自己的一些属性, 属性要写在始标签内,属性用于进一步改变显示的效果, 各属性之间无先后次序,属性是可选的,属性也可以省略而采用默认值;其格式如下:

           <标签名字 属性1 属性2 属性3 … >内容</标签名字>

    作为一般的原则,大多数属性值不用加双引号。但是包括空格、%号,#号等特殊字符的属性值必须加入双引号。为了好的习惯,提倡全部对属性值加双引号。如:

               <font color="#ff00ff" face="宋体" size="30">字体设置</font>

    注意事项:输入始标签时,一定不要在“<”与标签名之间输入多余的空格,也不能在中文输入法状态下输入这些标签及属性,否则浏览器将不能正确的识别括号中的标志命令,从而无法正确的显示你的信息。

 

第二章 HTML主体标签及属性、颜色的设定

   为了使你的网页绚丽多姿,吸引更多的浏览者阅读,可以给网页添加更多的标签及属性,这是为了对网页中的元素进行修饰、布局。下面就来逐一介绍这些标签。

  
一、 html的主体标签

   在<body>和</body>中放置的是页面中所有的内容,如图片、文字、表格、表单、超链接等设置。

   <body>标签有自己的属性,设置 <body>标签内的属性,可控制整个页面的显示方式。

 <body>标签的属性

属 性 描  述
link 设定页面默认的连接颜色
alink 设定鼠标正在单击时的连接颜色
vlink 设定访问后连接文字的颜色
background 设定页面背景图像
bgcolor 设定页面背景颜色
leftmargin 设定页面的左边距
topmargin 设定页面的上边距
bgproperties 设定页面背景图像为固定,不随页面的滚动而滚动
text 设定页面文字的颜色

    格式:
    <body text="#000000" link="#000000" alink="#000000" vlink="#000000" background="gifnam.gif" bgcolor="#000000" leftmargin=3 topmargin=2 bgproperties="fixed">

实例:2-1.html

<html>
<head>
<title>bady的属性实例</title>
</head>
<body bgcolor="#FFFFE7" text="#ff0000" link="#3300FF" alink="#FF00FF" vlink="#9900FF">
<center>
<h2>设定不同的连接颜色</h2>
测试body标签<p>
<a href="http://www.baidu.com/">默认的连接颜色</a>
<p>
<a href="http://www.sina.com.cn">正在按下的连接颜色,</a>
<p>
<a href="http://www.sohu.com/">访问过后的连接颜色,</a>
<P>
<a href="#" >返回</a>
</conter>
</body>
</html>

实例说明:
    
    <body>的属性设定了页面的背景颜色,文字的颜色,链接的颜色为#3300ff,单击的连接颜色为#ff00ff,单击过后的颜色为#9900ff。

    Body里面的是页面中的链接标签,对于属性可根据页面的效果来定,用那个属性就设定那个属性。对于上面的属性在后面的章节中还会介绍,在这里就不逐一引用了,我们的学习目的主要是掌握标签及属性的使用方法。

          二、 颜色的设定

 

 

 

 

 

 

 

 

 

    颜色值是一个关键字或一个RGB格式的数字。在网页中用得很多,在此就先介绍一下。

    颜色是由 "red" "green" "blue " 三原色组合而成的,在 HTML 中对颜色的定义是用十六进位的,对於三原色 HTML 分别给予两个十六进位去定义,也就是每个原色可有 256 种彩度,故此三原色可混合成16777216种颜色。
   
    例如: 
白色的组成是 red=ff, green=ff, blue= ff,RGB 值即为ffffff
            红色的组成是 red=ff, green= 00, blue= 00, RGB值即为ff0000 
            绿色的组成是 red=00, green=ff, blue= 00, RGB值即为 00ff00    
            蓝色的组成是 red=00, green= 00, blue= ff, RGB值即为0000ff    
            黑色的组成是 red=00, green=00, blue=00, RGB 值即为 000000  
    
     应用时常在每个 RGB 值之前加上“ # “ 符号,如:bgcolor="#336699" 用英文名字表示颜色时直接写名字。如 bgcolor=green

      RGB颜色可以有四种表达形式::

  • 如,
  • , rgb(0%,80%,0%)

        Windows VGA(视频图像阵列)形成了16各关键字:  aqua,black, blue,fuchsia, gray,green, lime,maroon,navy,olive, purple,red,silver,teal,white,and yellow

    下面是部分颜色的RGB代码图表:

     

    第三章 文字版面的编辑

    3-1 换行标签
        换行标签是个单标签,也叫空标签,不包含任和内容,在html文件中的任何位置只要使用了<br>标签,当文件显示在浏览器中时,该标签之后的内容将显示下一行。

    3-1html

     

    3-2 换段落标签

    <>


    其中,ALIGN是<p>标签的属性,属性有三个参数left,center,right.这三个参数设置段落文字的左,中,右位置的对齐方式.

    3-2html

    <html>
    <head>
    <title>测试分段控制标签</title>
    </head>
    <body>
    <p>花儿什么也没有。它们只有凋谢在风中的轻微、凄楚而又无奈的吟怨,
    就像那受到了致命伤害的秋雁,悲哀无助地发出一声声垂死的鸣叫。</p>
    <p align="right">或许,这便是花儿那短暂一生最凄凉、最伤感的归宿。</p>
    <p align=center>而美丽苦短的花期</p>
    <p align="left">却是那最后悲伤的秋风挽歌中的瞬间插曲。</p>
    </body>
    </html>

    3-3 原样显示文字标签< STRONG>

    < 要保留原始文字排版的格式,就可以通过<pre>标签来实现,方法是把制作好的文字排版内容前后分别加上始标签<pre>和尾标签<>

    3-3html

    <>

    <>

    <>


    </PRE>
    </BODY>
    </HTML>

    3-4 居中对齐标签

    < 文本在页面中使用<center>标签进行居中显示,<center>是成对标签,在需要居中的内容部分开头处加<center>,结尾处加<>

    3-4html

     

    《送孟浩然之廣陵》<p>

    故人西辭黃鶴樓,

    煙花三月下揚州。

    孤帆遠影碧山盡,

    惟見長江天際流。
    </CENTER>
    </BODY>
    </HTML>

    3-5 引文标签<>

    <>

    3-5html


    <PRE>
    <BLOCKQUOTE>
    盼望着,盼望着,东风来了,春天脚步近了。<br>
    一切都像刚睡醒的样子,欣欣然张开了眼。山朗润起来了,水涨起来了,太阳的脸红起来了。
    小草偷偷地从土里钻出来,嫩嫩的,绿绿的。园子里,田野里,瞧去一大片一大片满是的。坐着,躺着,打两个滚,踢几脚球,赛几趟跑,捉几
    回迷藏。风轻悄悄的,草软绵绵的。
    </BLOCKQUOTE>
    <BLOCKQUOTE><BLOCKQUOTE>
    桃树、杏树、梨树,你不让我,我不让你,都开满了花赶趟儿。红的像火,粉的像霞,白的像雪。花里带着甜味儿;闭了眼,村上仿佛已
    经满是桃儿、杏儿、梨儿。花下成千成百的蜜蜂嗡嗡地闹着,大小的蝴蝶飞来飞去。野花遍地是:杂样儿,有名字的,没名字的,散在草
    丛里像眼睛,像星星,还眨呀眨的。
    “吹面不寒杨柳风”,不错的,像母亲的手抚摸着你。风里带来些新翻的泥土的气息,混着青草味儿,还有各种花的香,都在微微润湿的
    空气里酝酿。鸟儿将巢安在繁花嫩叶当中,高兴起来了,呼朋引伴地卖弄清脆的喉咙,唱出宛转的曲子,跟轻风流水应和着。牛背上牧童
    的短笛,这时候也成天嘹亮地响着。
    雨是最寻常的,一下就是三两天。可别恼。看,像牛毛,像花针,像细丝,密密地斜织着,人家屋顶上全笼着一层薄烟。树叶儿却绿得发
    亮。小草儿也青得逼你的眼。傍晚时候,上灯了,一点点黄晕的光,烘托出一片安静而和平的夜。在乡下,小路上,石桥边,有撑着伞慢
    慢走着的人;地里还有工作的农民,披着蓑戴着笠。他们的房屋,稀稀疏疏的,在雨里静默着。
    </BLOCKQUOTE></BLOCKQUOTE>
    <BLOCKQUOTE><BLOCKQUOTE><BLOCKQUOTE>
    天上风筝渐渐多了,地上孩子也多了。城里乡下,家家户户,老老小小,也都赶趟儿似的,一个个都出来了。舒活舒活筋骨,抖擞
    抖擞精神,各做各的一份事儿去。
    “一年之计在于春”,刚起头儿,有的是工夫,有的是希望。
    春天像刚落地的娃娃,从头到脚都是新的,它生长着。
    春天像小姑娘,花枝招展的,笑着,走着。
    春天像健壮的青年,有铁一般的胳膊和腰脚,他领着我们上前去。
    </BLOCKQUOTE></BLOCKQUOTE></BLOCKQUOTE>
    </PRE>
    </BODY>
    </HTML>

    3-6水平分隔线标签

    <>

    <hr>标签的属性

    属性

    参数

    功能

    单位

    默认值

    size

     

    设置水平分隔线的粗细

    pixel(像素)

    2

    width

     

    设置水平分隔线的宽度

    pixel(像素)、%

    100%

    align

    left enter right

    设置水平分隔线的对齐方式

     

    center

    color

     

    设置水平分隔线的颜色

     

    black

    noshade

     

    取消水平分隔线的3d阴影

     

     

    3-6html


    <HR >
    春眠不觉晓,
    <hr size="6">
    处处闻啼鸟。
    <hr width="40%">
    夜来风雨声,
    <hr width="60" align="left">
    花落知多少?
    <hr size="6" width="30%" align="center"  noshade color=red >
    </CENTER>
    </BODY>
    </HTML>

    3-7署名标签

    < <address>署名标签一般用于说明这个网页是由谁或是由哪个公司编写的,以及其它相关信息。在<address><>

    3-7html


    <HR WIDTH="50%" SIZE="5" COLOR="FFCC00" ALIGN=CENTER>
    <PRE>
    向晚意不适,
    驱车登古原。
    夕阳无限好,
    只是近黄昏。
    </PRE>
    <HR WIDTH="50%" SIZE="5" COLOR="FFCC00" ALIGN=CENTER>
    <ADDRESS>
    [唐] 李商隐
    </ADDRESS>
    </BODY>
    </HTML>

    3-8特殊字符

    < 在HTML文档中,有些字符没办法直接显示出来,例如?.>

    HTML几种常见特殊字符及其代码表

    特殊或专用字符

    字符代码

     

     

     

     

     

     

             

    特殊或专用字符

             字符代码          <          &lt;          ©          &copy;          >          &gt;          ×          &times;          &          &amp;          ®          &reg;          "          &quot;          空格          &nbsp;

 

实例3-8html

<HTML>
<HEAD>
<TITLE>特殊字符</TITLE>
</HEAD>
<BODY>
<CENTER>
&lt;赋得古原草送别&gt;
<HR WIDTH="49%" SIZE="5" ALIGN=CENTER NOSHADE>
<PRE>
离离原上草,
一岁一枯荣。
野火烧不尽,
春风吹又生。
</PRE>
<HR WIDTH="49%" SIZE="5" ALIGN=CENTER NOSHADE>
<ADDRESS>
白居易 &copy;
</ADDRESS>
</BODY>
</HTML>

3-9注释标签

    在HTML文档中可以加入相关的注释标记,便于查找和记忆有关的文件内容和标识,这些注释内容并不会在浏览器中显示出来。

    注释标签的格式有如下:

                    <!--注释的内容-->
                   

实例3-9html

<HTML>
<HEAD>
<TITLE>注释标签</TITLE>
</HEAD>
<BODY>
<!--body标签是主体内容-->
<CENTER>
&lt;赋得古原草送别&gt;
<HR WIDTH="49%" SIZE="5" ALIGN=CENTER NOSHADE>
<PRE>
<! pre代表原样显示排版格式>
离离原上草,
一岁一枯荣。
野火烧不尽,
春风吹又生。
</PRE>
<HR WIDTH="49%" SIZE="5" ALIGN=CENTER NOSHADE>
<ADDRESS>
白居易 &copy;
</ADDRESS>
</BODY>
</HTML>

3-10字体属性

3-10-1标题文字标签<hn>

    <hn>标签用于设置网页中的标题文字,被设置的文字将以黑体或粗体的方式显示在网页中。

    标题标签的格式:<hn align=参数〉标题内容</hn>

    说明:<hn>标签是成对出现的,<hn>标签共分为六级,在<h1>...</h1>之间的文字就是第一级标题,是最大最粗的标题;<h6>...</h6>之间的文字是最后一级,是最小最细的标题文字。align属性用于设置标题的对齐方式,其参数为 left(左), enter(中), right (右)。<hn>标签本身具有换行的作用,标题总是从新的一行开始。

实例3-10-1html

<HTML>
<HEAD>
<TITLE>设定各级标题</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">一级标题。</H1>
<H2>二级标题。</H2>
<H3>三级标题。</H3>
<H4>四级标题。</H4>
<H5 ALIGN="RIGHT">五级标题。</H5>
<H6 ALIGN="LEFT">六级标题。</H6>
</BODY>
</HTML>

3-10-2文字格式控制标签<FONT>

    <FONT>标签用于控制文字的字体,大小和颜色。控制方式是利用属性设置得以实现的。

FONT标签的属性

属性

使用功能

默认值

face

设置文字使用的字体

宋体

size

设置文字的大小

3

color

设置文字的颜色

黑色

    格式:<font face=值1 size=值2 color=值3〉文字 </font>

    说明:如果用户的系统中没有face属性所指的字体,则将使用默认字体。size属性的取值为1~7。也可以用"+"或"-"来设定字号的相对值。color属性的值为:rgb颜色"#nnnnnn"或颜色的名称

实例3-10-2html

<html>
<head>
<title>控制文字的格式</title>
</head>
<body>
<center>
<font face=黑体 size=6 color="red" >盼望着,盼望着,东风来了,春天脚步近了。</font> <p>
<font  face=隶书 size=+3 color="green">
一切都像刚睡醒的样子,欣欣然张开了眼。<p>山朗润起来了,水涨起来了,太阳的脸红起来了。
</font><p>
<font  face=楷体 size=4 color="#ff00ff">
小草偷偷地从土里钻出来,嫩嫩的,绿绿的。<p>园子里,田野里,瞧去一大片一大片满是的。<p>坐着,躺着,打两个滚,踢几脚球,赛几趟跑,捉几回迷藏。<p>风轻悄悄的,草软绵绵的。
</font>
</center>
</body>
</html>

3-10-3特定文字样式标签

    在有关文字的显示中,常常会使用一些特殊的字形或字体来强调、突出、区别以达到提示的效果。在html中用于这种功能的标签可以分为两类,物理类型和逻辑类型。

1、物理类型

(1)  粗体标签<b>
                   放在<b>与</b>标签之间的文字将以粗体方式显示。

(2)  斜体标签<i>
                   放在<i>与</i>标签之间的文字将以斜体方式显示。

(3)  下划线标签<u>
                   放在<u>与</u>标签之间的文字将以下划线方式显示。

实例3-10-31html

<html>
<head>
<title>字体的物理类型</title>
</head>
<body>
<center>
<font color="#FF0000" size="+2"><b>这些文字是粗体的</b></font><br><br>
<i>这些文字是斜体的</i> <br><br>
<u>这些文字带有下划线</u>
</center>
</body>
</html>

2、逻辑类型

    逻辑类型是使用一些标签来改变字体的形态和式样,以便产生一些浏览者习惯的或约定的显示效果,常用的逻辑类型标签有八种,放在标签之间的文字受其控制。下面请看常用逻辑标签的实例

实例3-10-32htrml

<html>
<head>
<title>字体的逻辑类型</title>
</head>
<body>
<pre>
      em标签:<em>用于强调的文本,一般显示为斜体字</em>
  strong标签:<strong>用于特别强调的文本,显示为粗体字</strong>
    cite标签:<cite>用于引证和举例,通常是斜体字</cite>
    code标签:<code>用来指出这是一组代码</code>
   small标签:<small>规定文本以小号字显示</small>
     big标签:<big>规定文本以大号字显示</big>
    samp标签:<samp>显示一段计算机常用的字体,即宽度相等的字体</samp>
     kbd标签:<kbd>由用户输入文本,通常显示为较粗的宽体字</kbd>
     var标签:<var>用来表示变量,通常显示为斜体字</var>
     dfn标签:<dfn>表示一个定义或说明,通常显示为斜体字</dfn>
     sup标签:12<sup>2</sup>=144
     sub标签:硫酸亚铁的分子式是Fe<sub>2</sub>SO<sub>4</sub>
</pre>
</body>
</html>

 

第四章 建立超链接请大家下载素材

   HTML文件中最重要的应用之一就是超链接,超链接是一个网站的灵魂,web上的网页是互相链接的,单击被称为超链接的文本或图形就可以链接到其它页面。超文本具有的链接能力,可层层链接相关文件,这种具有超级链能力的操作,即称为超级链接。超级链接除了可链接文本外,也可链接各种媒体,如声音、图象、动画,通过它们我们可享受丰富多采的多媒体世界。

建立超链接的标签为<A>和</A>

   格式为:<A HREF="资源地址"  TARGET="窗口名称" TITLE="指向连接显示的文字">超链接名称</A>

     说明:标签<A>表示一个链接的开始,</A>表示链接的结束;

     属性“HREF”定义了这个链接所指的目标地址;目标地址是最重要的,一旦路径上出现差错,该资源就无法访问

     TARGET:该属性用于指定打开链接的目标窗口,其默认方式是原窗口。

建立目标窗口的属性

属性值

描 述

_parent

在上一级窗口中打开,一般使用分桢的框架页会经常使用

_blank

在新窗口打开

_self

在同一个桢或窗口中打开,这项一般不用设置

_top

在浏览器的整个窗口中打开,忽略任何框架

 

    TITLE:该属性用于指定指向链接时所显示的标题文字。

     "超链接名称"是要单击到链接的元素,元素可以包含文本,也可以包含图像。文本带下划线且与其它文字颜色不同,图形链接通常带有边框显示。用图形做链接时只要把显示图像的标志<img>嵌套在<A HREF="URL"></A>之间就能实现图像链接的效果。当鼠标指向"超链接名称"处时会变成手状,单击这个元素可以访问指定的目标文件。

4-1 链接路径

    每一个文件都有自己的存放位置和路径,理解一个文件到要链接的那个文件之间的路径关系是创建链接的根本。

    URL(Uniform Resourc Locator)中文名字为"统一资源定位器"。指的就是每一个网站都具有的地址。同一个网站下的每一个网页都属于同一个地址之下,在创建一个网站的网页时,不需要为每一个连接都输入完全的地址,我们只需要确定当前文档同站点根目录之间的相对路径关系就可以了。因此,链接可以分以下三种:

  • 绝对路径
    如:http://www.sina.com.cn
  • 相对路径
    如:news/index.html
  • 根路径
    如:d│/web/news/index.html

     1、绝对路径

      绝对路径:包含了标识INTERNET上的文件所需要的所有信息。文件的链接是相对原文档而定的。包括完整的协议名称,主机名称,文件夹名称和文件名称

    其格式为 : 通讯协议 ://服务器地址:通讯端口/文件位置....../文件名。

   lnternet遵循一个重要的协议及HTTP(Hypertext Transfer Protocol)超文本传输协议,http是用于传输Web页的客户端/服务器协议。当浏览器发出Web页请求时,此协议将建立一个与服务器的链接.当链接畅通后,服务器将找到请求页,并将它发送给客户端,信息发送到客户端后,http将释放此链接.这使得此协议可以接受并服务大量的客户端请求.

    Web应用程序是指Web服务器上包含的许多静态的和动态的资源集合.Web服务器承但着为浏览器提供服务的责任.

   www.sina.com.cn就是资源所在的主机名为:通常情况下使用默认的端口号80,资源在WWW服务器主机web文件夹下,资源的名称为:index.html.。

例 :http://www.163.net/myweb/book.htm(此网址为假设)
表明采用 http 从名为 www.163.net 的服务器上的目录 myweb 中获得文件book.htm

     2、相对路径

      相对路经是以当前文件所在路径为起点,进行相对文件的查找。一个相对的URL不包括协议和主机地址信息,表示它的路径与当前文档的访问协议和主机名相同,甚至有相同的目录路径。通常只包含文件夹名和文件名。甚至只有文件名。可以用相对URL指向与源文档位于同一服务器或同文件夹中的文件。此时,浏览器链接的目标文档处在同一服务器或同一文件夹下。

  • 如果链接到同一目录下,则只需输入要链接文件的名称。
  • 要链接到下级目录中的文件。只需先输入目录名,然后加"/",再输入文件名。
  • 要链接到上一级目录中文件,则先输入"../",再输入文件名。

  相对路径的用法

相对路径名

含 义

herf="shouey.html"

shouey.html 是本地当前路径下的文件

herf="web/shouey.html" shouey.html 是本地当前路径下称做"web"子目录下的文件
herf="../shouey.html" shouey.html 是本地当前目录的上一级子目录下的文件
herf="../../shouey.html" shouey.html 是本地当前目录的上两级子目录下的文件

    3、根路径

     根路径目录地址同样可用于创建内部链接,但大多数情况下,不建议使用此种链接形式。

     根路径目录地址的书写也很简单,首先以一个斜杠开头,代表根目录,然后书写文件夹名,最后书写文件名。
如果根目录要写盘符,就在盘符后使用"│",而不用":"  这点与DOS的写法不同。

  如:/web/highight/shouey.html
      d│/web/highight/shouey.html

    也许读者会问,链接本地机器上的文件时,应该使用相对路径还是根路径?在绝大多数情况下使用相对路径比较好,例如,用绝对路径定义了链接,当把文件夹改名或者移动之后,那么所有的链接都要失败,这样就必须对你的所有html文件的链接进行重新编排,而一旦将此文夹件移到网络服务器上时,需要重新改动的地方就更多了,那是一件很麻烦的事情。而使用相对路径,不仅在本地机器环境下适合,就是上传到网络或其他系统下也不需要进行多少更改就能准确链接。

4-2  超链接的应用<>

4-2-1书签链接< P>

    链接文档中的特定位置也叫书签链接,在浏览页面时如果页面很长,要不断的拖动滚动条给浏览带来不便,要是浏览者可以从上头阅读到尾,又可以选择自己感兴趣的部分阅读,这种效果就可以通过书签链接来实现,方法是选者一个目标定位点,用来创建一个定位标记,用<a>标签的属性name的值来确定定位标记名 <a > 。然后在网页的任何地方建立对这个目标标记的链接"标题",在标题上建立的链接地址的名字要和定位标记名相同,前面还要加上"#"号,<a href= "#定位标记名">。单击标题就跳到要访问的内容。

   书签链接可以在同一页面中链接,也可以在不同页面中链接,在不同页面中链接的前提是需要指定好链接的页面地址和链接的书签位置

 

     格式:

  • 在同一页面要使用链接的地址:
    <a href="#书签名称" target="窗口名称">超连链标题名称</a>
  • 在不同页面要使用链接的地址:
    <a href="URL地址#书签名称" target="窗口名称">超链接标题名称</a>
  • 链接到的目的地址:
    <a >目标超链接名称</a>

     name

实例4-2-11html

<HTML>
<HEAD>
<TITLE>唐诗欣赏</TITLE>
</HEAD>
<BODY>
<a ><H2>唐诗欣赏</H2></a>
<a ><H2>李白</H2></a>
<A href="#T.2" target="_blank">清平調三首</A><br>
<A href="#T.1">長干行</A><br>
<A href="#T.3">月下獨酌</A>
<HR>

<BR><BR>
<H3><A >清平調三首</A> </H3>

雲想衣裳花想容,<br>春風拂檻露華濃。<br>若非群玉山頭見,<br>會向瑤台月下逢。<br>一枝紅艷露凝香,<br>雲雨巫山枉斷腸。<br>借問漢宮誰得似?<br>可憐飛燕倚新妝。<br>名花傾國兩相歡,<br>常得君王帶笑看。<br>解釋春風無限恨,<br>沈香亭北倚闌干。

<H3><A >長干行</A> </H3>
<PRE>
妾髮初覆額,<br>折花門前劇。<br>郎騎竹馬來,<br>遶床弄青梅。<br>同居長干里,<br>兩小無嫌猜。<br>十四為君婦,<br>羞顏未嘗開。<br>低頭向暗壁,<br>千喚不一回。<br>十五始展眉,<br>願同塵與灰。<br>常存抱柱信,<br>豈上望夫臺。<br>十六君遠行,<br>瞿塘灩澦堆。<br>五月不可觸,<br>猿鳴天上哀。<br>門前遲行跡,<br>一一生綠苔。<br>苔深不能掃,<br>落葉秋風早。<br>八月蝴蝶來,<br>雙飛西園草。<br>感此傷妾心,<br>坐愁紅顏老。<br>早晚下三巴,<br>預將書報家。<br>相迎不道遠,<br>直至長風沙。

</PRE>
<A href="#top">唐诗欣赏</a>
<BR><BR>
<H3><A >月下獨酌</A> </H3>
<PRE>
花間一壺酒,<br>獨酌無相親。<br>舉杯邀明月,<br>對影成三人。<br>月既不解飲,<br>影徒隨我身。<br>暫伴月將影,<br>行樂須及春。<br>我歌月裴回,<br>我舞影零亂。<br>醒時同交歡,<br>醉後各分散。<br>永結無情遊,<br>相期邈雲漢。
</PRE>
<p><a href="4-2-12.html#libai">李白蔑视权贵</a></p>
</BODY>
</HTML>

 

实例4-2-12html

<html>
<head>
<title>李白</title>
</head>
<body>
<center>
<a href="4-2-11.html#lb"><h1 align="center"><font color="#339933">李白</font></h1></a>
<font color="#339933" size="+2">李白(701~762),<br>字太白,号青莲居士。<br>祖籍陇西成纪(今甘肃省天水市附近的秦安县),<br>隋朝末年其先租因罪住在中亚细亚。<br>李白的家世和出生地至今还是个谜,<br>学术界说法不一。<br>一说李白就诞生在安西都护府所辖的碎叶城,<br>五岁时随父迁到绵州昌隆县青莲乡。<br>
<p>李白性情豪放,<br>喜爱纵横家的作风,<br>爱好任侠之事,轻视财货。<br>早年在蜀中度过。他的父亲是个富商。<br>李白二十五岁开始漫游全国,<br>走过湖北,江西,河南,山东等地.<br></p>

<p><A >李白蔑视权贵</A>,<br>传说他喝醉酒,<br>曾在玄宗面前使高力士给他脱靴。<br>高力士认为这是很大的耻辱,<br>就摘取李白诗句激怒杨贵妃。<br>玄宗每次让李白做官,杨贵妃就加以阻止。<br>李白知道玄宗的亲信对他有意见,<br>于是恳求还家。<br>玄宗赐给他财物,放他开.<br></p>
<p>李白是我国唐代伟大的浪漫主义诗人,<br>被誉为“诗仙”。<br>他的诗豪迈瑰丽,诗里有突破现实的幻想。<br>也有对当时民生疾苦的反映和对政治黑暗的抨击。<br>他的散文具有清新明朗,<br>奔放流畅的特点。</p></font></center>
</body>
</html>

 4-2-2在站点内部建立

    所谓内部链接,指的是在同一个网站内部,不同的html页面之间的链接关系,在建立网站内部链接的时候,要明确哪个是主链接文件(即当前页),哪个是被链接文件。在前面介绍链接路径时,已经给大家介绍了内部链接概念,内部链接一般采用相对路径链接比较好。下面我们根据如图示,来看看相对路径的具体的链接方法:

在站点内部建立链接

当前页面 被链接页面 超链接代码
2-1.html 3-1.html <a href="3-1.html">超链接元素</a>
3-1.html 1-1.html <a href="asm/1-1.html">超链接元素</a>
sy.html 1-1.html <a href="ssm/asm/1-1.html">超链接元素</a>
2-1.html sy.html <a href="../sy.html">超链接元素</a>
1-1.html sy.html <a href="../../sy.html">超链接元素</a>
sy.html 2-1.html <a href="ssm/2-1.html">超链接元素</a>

4-2-3 外部链接

    所谓外部链接,指的是跳转到当前网站外部,与其它网站中页面或其它元素之间的链接关系。这种链接的URL地址一般要用绝对路径,要有完整的URL地址,包括协议名,主机名,文件所在主机上的的位置的路径以及文件名。

最常用的外部链接格式是:<a href="http://网址">,还有其他的格式如下表所示:

URL外链部接格式

服 务 URL格式 描 述
WWW http://"地址" 进入万维网站点
Ftp ftp://"" 进入文件传输协议
Telnet telnet://"" 启动Telnet方式
Gopher gopher://"" 访问一个gopher服务器
News news://"" 启动新闻讨论组
Email email://"" 启动邮件

4-2-31 链接其它站点:

  站点之间的页面和元素的链接是万维网交流信息的关键,这种链接用HTTP协议来建立网站之间的超链接。 

格式:<A HREF="HTTP://"网址">  

实例4-2-31.html

<HTML>
<HEAD>
<TITLE>链接到http://</TITLE>
</HEAD>
<BODY>
<CENTER>
<h2>绝对路径链接</h2>
<HR>
<A HREF="http://www.sina.com.cn" title="打开新浪首页"><img src="../../imgelogo(3).gif/"></A><BR><BR>
<A HREF="http://www.tsinghua.edu.cn">清 华 大 学</A><BR><BR>
<A HREF="http://www.pku.edu.cn">北 京 大 学</A><BR><BR>
<A HREF="http://www.shisu.edu.cn" target=_blank>上海外国语学院</A><BR>
</CENTER>
</BODY>
</HTML>

4-2-32 发送E-mail

    在HTML页面中,可以建立E-mail链接。当浏览者单击链接后,系统会启动默认的本地邮件服务系统发送邮件。

    基本语法:<a href="mailto:E-mali 地址: subject=邮件主题">描述文字</a>

   在实际应用中,用户还可以加入另外的两个参数"?cc="E-mali地址"和"&body=?",这分别表示在发送邮件的同时把邮件抄送给第三者和设定邮件主题内容。

邮件的参数

参   数 描   述
subject 电子邮件主题
cc 抄送收件人
body 主题内容
bcc 暗送收件人

    如果希望同时写下多个参数,则参数之间使用"&"分隔符。

实例4-2-32.html

<html>
<head>
<title>发送邮件</title>
</head>
<body>
<p>
<a href="mailto:zhoujr3071@yahoo.com.cn?cc=benbenmao@163.com&Subject=早安&bcc=a@b.c
&Body= 早安,笨笨猫祝你度过一个快乐的早晨!"> 
向笨笨猫的好友发送邮件(抄送 笨笨猫)
</a> 
</p> 
</body> 
</html>

    单击"向笨笨猫的好友发送邮件(抄送 笨笨猫)"后打开了系统的邮件服务软件Outlook Exqress发送邮件。

4-2-33 链接FTP

    lnternet上资源丰富,通过ftp文件传输协议,就可以获得各种免费软件和其他文件,ftp协议是使计算机与计算机之间能够相互通信的语言,ftp使文件和文件夹能够在lnternet上公开传输,通过ftp可以访问某个网络或服务器,而不需要该计算机的账户和授权的密码就可通过ftp公开获得数据

   语法格式:

    <a href="ftp://ftp主机地址">文字链接</a>

实例:4-2-33.html

<html>
<head>
<title>链接ftp主机</title>
</head>
<body>
<p>
<a href=ftp://ftp.pku.edu.cn>北京大学ftp站点</a> 
</p> 
</body> 
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

第五章 建立列表

   在html页面中,合理的使用列表标签可以起到提纲和格式排序文件的作用。

   列表分为两类,一是无序列表,一是有序列表,无序列表就是项目各条列间并无顺序关系,纯粹只是利用条列来呈现资料而已,此种无序标签,在各条列前面均有一符号以示区隔。而有序条列就是指各条列之间是有顺序的,比如从1、2、3…一直延伸下去。

列表的主要标签
标 签

描 述

<UL> 无序列表
<OL> 有序列表

<DIR>

目录列表
<DL> 定义列表
<MENU> 菜单列表
<DL>/<DT>/<DD> 定义列表的标记
<LI> 列表项目的标记
   5-1 无序列表

    无序列表使用的一对标签是<ul></ul>,无序列表指没有进行编号的列表,  每一个列表项前使用<LI>。<LI>的属性type有三个选项,这三个选项都必须小写:
        
        disc实心园
        circle空心园
        square小方块
    
<ul>如果不使用其项目<li>的属性值,即默认情况下的<ul>会加"实心园"。

    格式1:

         <UL>
       <LI>第一项
       <LI>第二项
       <LI>第三项
      </UL>

    格式2

        <ul>
          <li type=disc>第一项
          <li type=circle>第二项
          <li type=square>第三项
        </ul>

示例5-1.html

<html>
<head>
<title>无序列表</title>
</head>
<body>
<ul>
  <li>默认的无序列表加"实心园"
  <li>默认的无序列表"实心园"
  <li>默认的无序列表"实心园"
</ul>
<ul>
    <li type=square>无序列表square加方块
  <li type=square>无序列表square加方块
  <li type=square>无序列表square加方块
</ul>
<ul>
    <li type=circle>无序列表circle加空心园
  <li type=circle>无序列表circle加空心园
  <li type=circle>无序列表circle加空心园
</ul>
</body>
</html>

 5-2 有序列表

    有序列表和无序列表的使用格式基本相同,它使用标签<ol></ol>,每一个列表项前使用<li>。<ol>列表的结果是带有前后顺序之分的编号。如果插入和删除一个列表项,编号会自动调整。

   顺序编号的设置是由<ol>的两个属性type和start来完成的。start=编号开始的数字,如start=2则编号从2开始,如果从1开始可以省略,或是在<li>标签中设定value="n"改变列表行项目的特定编号,例如<li value="7">。type=用于编号的数字,字母等的类型,如type=a,则编号用英文字母。为了使用这些属性,把它们放在<ol>或<li>的的初始标签中。

有序列表type的属性

type 类 型 描 述
type=1 表示列表项目用数字标号(1,2,3...)
type=A 表示列表项目用大写字母标号(A,B,C...)
type=a 表示列表项目用小写字母标号(a,b,c...)
type=I 表示列表项目用大写罗马数字标号(Ⅰ,Ⅱ,Ⅲ...)
type=i 表示列表项目用小写罗马数字标号(i,ii,iii...)

格式1
    <ol type=编号类型 start=value>
        <li>第1项
        <li>第2项
        <li>第3项
    </ol>

格式2
    <ol>
        <li>第1项
        <li>第2项
        <li>第3项
    </ol>

实例5-2.html

<html>
<head>
<title>有序列表</title>
</head>
<body>
    <ol>
        <li>默认的有序列表
        <li>默认的有序列表
        <li>默认的有序列表
    </ol>
    <ol  type=a start=5>
        <li>第1项
        <li>第2项
        <li>第3项
        <li value= 20>第4项
    </ol>
    <ol  type= I start=2>
        <li>第1项
        <li>第2项
        <li>第3项
    </ol>
</body>
</html>

5-3 嵌套列表

    将一个列表嵌入到另一个列表中,作为另一个列表的一部分,叫嵌套列表。无论是有序列表和无序列表的嵌套,浏览器都可以自动地分成排列。

实列5-3.html

<HTML>
<HEAD>
<TITLE>嵌套列表</TITLE>
</HEAD>
<BODY>
<h3>目录</h3>
 <ol type=a>
     <li>这是以序号类型a开头第一行内容</li>
     <li>这是以序号类型a开头第二行内容</li>
         <ol type=A start=3>
         <li>这是以序号A类型C开头第一行内容</li>
         <li>这是以序号A类型C开头第二行内容</li>
             <ol type=1 start=51>
             <li>这是以序号数字51开头第一行内容</li>
             <li>这是以序号数字51开头第二行内容</li>
             <li>这是以序号数字51开头第三行内容</li>
             </ol>
         <li>这是以序号A类型C开头第三行内容</li>
         </ol>
       <li>这是以序号类型a开头第三行内容</li>
 </ol>
<HR>
</BODY>
</HTML>

5-4 定义列表

    定义列表的标记也叫描述性列表,定义列表默认为两个层次,第一层为列表项标签<DT>,第二层为注释项标签<DD>。<DT>和<DD>标签通常是成对使用的。也可以一个列表项对应于几个解释项,这种方式很少用。<DD>默认的注释是显示在另一行中,当使用<dl compact="compact">后,注释项和列表项将显示在同一行。其格式为:

    <dl>
        <dt>第1项 <dd>注释1
        <dt>第2项 <dd>注释2
        <dt>第3项 <dd>注释3
    </dl>

实例5-4.html
<html>
<head>
<title>定义性列表</title>
</head>
<body>
定义性列表<P>
<dl>
 <dt>  WWW:<dd> WWW是(World wide web)的缩写,也可简写web;
  <dt> WWW:<dd> WWW又叫万维网;
  <dt> WWW:<dd> internet提供的最常用的服务是WWW;
</dl>
</body>
</html>

5-5 目录列表

<dir>为目录列表标签,<menu>为菜单列表标签,它们的格式和无序列表<ul>是一样的,例如:
格式1:
<dir>
  <li>第一项
  <li>第二项
  <li>第三项
</dir>

格式2
<menu>
  <li type=disc>第一项
  <li type=circle>第二项
  <li type=square>第三项
</menu>

实例5-5.HTML

<html>
<head>
<title>无序列表</title>
</head>
<body>
<ul>
  <li>默认的无序列表加"实心园"
  <li>默认的无序列表"实心园"
  <li>默认的无序列表"实心园"
</ul>
<dir>
  <li>默认的目录列表加"实心园"
  <li>默认的目录列表"实心园"
  <li>默认的目录列表"实心园"
</dir>
<menu>
  <li>默认的菜单列表加"实心园"
  <li>默认的菜单列表"实心园"
  <li>默认的菜单列表"实心园"
</menu>

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

 

 

 

 

 

 

 

 

春风吹,战鼓擂,俺是流氓俺怕谁?

1楼 发表于:2008-02-12 19:23:38 [回复]

靠!晕倒了!

爱你,不想让你受伤,爱你,只想让你最好。现在我明白了,其实爱一个人在不在身边并不重要,重要的是你(我)是不是在我(你)的心里?

2楼 发表于:2008-02-12 19:56:08 [回复]

太长了,需要长时间消化

脚不能到达的地方,眼睛可以到达;眼睛不能到达的地方,精神可以到达。

3楼 发表于:2008-02-12 20:14:09 [回复]

我也是这样认为.

春风吹,战鼓擂,俺是流氓俺怕谁?

4楼 发表于:2008-02-19 10:29:39 [回复]

太多了

全新的电影 全新的生活 全新的世界 在这里进入你的完美世界 经典电影 精彩无限 New film new life here in the new world you enter a perfect world classic movie brilliant unl

5楼 发表于:2008-03-03 01:44:11 [回复]

http://www.tudou.com/home/pigpigpi123

6楼 发表于:2008-07-13 00:48:22 [回复]

笨笨来了

Something ends, something begins, and something never changes......

登录后发贴