20 12
发新话题
打印

[分享] HTML基础-基本教程.

本主题由 crsky 于 2008-3-4 10:17 提升

HTML基础-基本教程.



================================================

1#  HTML基础-第一讲

2#  HTML基础-第二讲

3#  HTML基础第三讲---字体

4#  HTML基础第四讲---图像

5#  HTML基础第五讲---控制表格及其表项的对齐方式

6#  HTML基础第六讲---表格

7#  HTML基础第七讲---框架

8#  HTML基础第八讲---序列卷标

9#  HTML基础第九讲---表单

10#  HTML基础第十讲---排版卷标

11#  HTML基础第十一讲---背景标志

12#  HTML基础第十二讲---链接标志

13#  “画中画”效果---谈Iframe标记的使用

================================================
本帖最近评分记录
  • huidabbs 校币 +20 感谢分享 2007-10-20 16:55
不了解FTP下载的朋友请注意----FTP的格式是→→[ftp://用户名:密码@地址:端口]←←

TOP

HTML基础-第一讲







    HTML是网页主要的组成部分,基本上一个网页都是由HTML语言组成的,所以要学习网站怎样建设,必须从网页的基本语言学起。




   先简单的介绍一下HTML语言(我们在这灌输大家的是能够实际操作),HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。神奇吗?一点都不神奇,因为现在你看到的就是这种语言写的页面。



   是呀,HTML并不是很神奇,只是因为你不是很了解它,现在咱们就开始接她的面纱:



   一、HTML的组成结构(头部、眼睛、身体----好像一个人一样是不是?)



     1、头部。只要你学过英语,你应该知道头怎么用英文写吧!yes,HEAD就是了;所以,头部的HTML写法就是<head>头部的内容</head>,简单不,大家注意一下,这两个非常相似,只是后一个比前一个多了“/”符号。类似这样的以后会经常用到。



     2、眼睛。就好像人的眼睛一样,它是心灵的窗口,而一个网页的眼睛应该就是它的页面的标题了,标题怎么说呢?title,yes!大家知道眼睛是长在头上的,所以啦:<title>标题</title>这些应放在<head>和</head>之间。也就是
<head><title>标题</title></head>



     3、身体。身体是网页最主要的部分了,因为前面讲的都不是页面所显现出来的,而大家所看到的页面页就是他的身体部分了(当然它的TITLE可以在浏览器的最左上角可以看到),身体----BODY,他的写法也就是:<body>页面内容</body>
     
     最后,别忘了把这些部分组成一体----网页,所以咱们就用<html></html>把他们给包起来。
好了,咱们来大体看看网页的结构:
<html>
<head>
   <title>
   标题
   </title>
</head>
<body>
页面内容
</body>
</html>
                                        第一讲完
不了解FTP下载的朋友请注意----FTP的格式是→→[ftp://用户名:密码@地址:端口]←←

TOP

HTML基础-第二讲







我们在第一讲里概括了一下网页的主要框架,现在我们来详细的研究网页的内部细则:




先从它的身体部分(body) 开始:
欣赏一个网页时,一般先注意到的是这个页面的背景,如果有背景音乐,那就更吸引人了!是不是呀,那么这些是怎么实现的呢?看下边:



1、背景颜色
<body bgcolor="red">我们发现多了个bgcolor其实就是backgroundcolor(背景颜色)的意思,bgcolor="red"设置网页的背景颜色为红色,现在颜色一般都是#ff0000样式的。



2、背景图片
<body backgroud="back-ground.gif">中“backgroud”就是设置背景图片的啦,back-ground.gif是背景图片的名字,为什么有的朋友也是如此写的,而网页却没有背景图片呢?其实back-ground.gif是该图片相对于这个页面的位置,比如你做的这个页面放在c:\我的网站\,而背景图片的位置放在c:\我的网站\images\,那么就得这样写了:<body backgroud="images\back-ground.gif">,注意两者的区别!

3、背景音乐
背景音乐和上边介绍的两个有很大的不同,它的代码是放在页面的头部<head></head>里,为什么在这里讲呢?就是因为它也是显示网页的时候我们首先接受到的信息。看看它的代码吧:
<bgsound src="background_sound.mid" loop="-1">
bgsound 不用说了吧背景声音,background_sound.mid是音乐的文件名,当然也得写它的相对路径哦(关于相对路径,可能有的网友,一下子不能搞明白,我们将会在其他板块介绍的)!loop,循环,那么loop="-1"是什么意思呢?loop是bgsound 的一个属性,当然src也是了,后边跟得就是属性值了,那么loop="-1"就是无限循环的意思,只要是页面打开,音乐不会停止的,loop="1"说明循环一次,等于0就是不循环了,呵呵,简单不!
  
4、body其它属性:topmargin,leftmargin。有的朋友再做页面的时候,感觉文字或者表格怎么也不能靠在浏览器的最上边和最左边,怎么回事呢?因为一般我们用的制作软件或者说html语言默认的都是topmargin和leftmargin值等于12,如果你把他们的值设为0,你看看会有什么效果!如下比较一下<body>和<body topmargin=0 leftmargin=0>,有兴趣的朋友可以任意设置他们的值!

好了,这一节先讲到这里!大家在自己的电脑上实习一下,呵呵!
不了解FTP下载的朋友请注意----FTP的格式是→→[ftp://用户名:密码@地址:端口]←←

TOP

HTML基础第三讲---字体



http://www.wrclub.net/ 8/9/2002 网人俱乐部



同样我们在这里继续讲一下它的body,因为它能直观的让大家观察到你所学到的成果。




  这一讲,我们来学习字体及其属性,然后大家在学习完后制作一下,看看它的每一个属性所表现的效果。



  字体,英文font,这html语言中也是它---font,下面咱们来研究一下font:
  
  1、标题字体<h#> 文字 </h#>  # =1,2,3,4,5,6
  比如:<h1>今天天气真好!</h1>
  注意:这些一般的用在标题上,所以起名叫标题字体;<h#> ...</h#> 这些标记显示黑体字;这些标记自动插入一个空行,不必用 <p> 标记再加空行,因此在一行中无法使用不同大小的字体。



  2、字体的大小,用于一般文字。
  <font size=#> 文字</font> #=1, 2, 3, 4, 5, 6, 7 or +#, -#
  <basefont size=#> #=1, 2, 3, 4, 5, 6, 7
  例子:<font size=7>今天天气真好!</font>

  3、逻辑字体(Logical Style)
  下划线:<u>文字</u>,代码:<code>文字</code>,删除线:<strike>文字</strike>,闪烁:<blink>文字</blink>,增强:<strong>文字</strong>,强调:<em>文字</em>,示例:<samp>文字</samp>,还有老多,一般的这些了解一下就可以。
   
  4、字体的标志,很常用的。粗体:<b>文字</b>,斜体:<i>文字</i>



  5、字体颜色
  指定颜色 <font color=#> 文字 </font> # ="#rrggbb" 16 进制数码,或者是下列预定义色彩:
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
  对于16 进制编码的颜色,我们可以这样理解rrggbb六个字符:前两个表示红色,中间的两个表示绿色,后两个表示蓝色;那么,红色(red)ff0000,同样绿色(green)00ff00,蓝色0000ff;其它的颜色就是这几个字符(0-9,a-f)的组合。
  比如:<font color=red> 文字 </font> 红色文字
        <font color=#ff0000> 文字 </font> 红色文字
  大家看看<font color=#rrggbb> 文字 </font>是什么颜色的文字



  6、客户端字体(Font Face)
  <font face="#, #, ..., #"> ... </font> #=客户端可获得的字体,什么是客户端,通俗的讲,就是你的电脑,face="#"就是从你的电脑获得的字体,大家可以点击
客户端字体(Font Face)示例 。



  7、字符实体(Entities),字符实体一般用在把html里的符号显示在页面上比如"<"、"&"等,如果你单独的打上<,页面也可以显示,但如果你想显示<b>这几个字符,怎么办呢?就是它啦。
  &#; #=字符实体名称 或者 ascii 值
  &           &
  <            <
  >            >
  "          "
  这些只是一小部分,那么要显示<b>就要写成<b>了。



  以上学到的我们可以综合使用:比如<font size=2 color=#ff0000><i><b>文字</b></i></font>
注意写的时候要前后一致前面<b>后边对应的也应该</b>



  好了,关于字体就讲完了!

不了解FTP下载的朋友请注意----FTP的格式是→→[ftp://用户名:密码@地址:端口]←←

TOP

HTML基础第四讲---图像







图像,也就是images,在html语法中用img来表示,其基本的语法是:
   <img src=#> #=图象的 URL,关于url就是指的是图像在网上的地址。
   <img alt=#> #=在浏览器尚未完全读入图象时,在图象位置显示的文字;也是图像显示以后,当鼠标放在图片上时所显示的文字。

   图象在页面中的对齐/布局:
   语法:<img align=#> #=left, center, right,使用图像的align属性,其实这一属性布置在这里用到,以后我们在学习表格的时候也会遇到align,它的值left, center, right就是他的中文意思,left居左,center居中,right居右。



   例子:<img src="http://kkk.yesku.net/forum/images/cid4u-2.jpg"  align=left> 网人交流论坛欢迎您的光临!
   
   图象和文字的对齐:
   语法:<img align=#> #=top, middle, bottom,这里的align和上边的实现的效果不一样,大家从它的值可以看出,它所显示出来的是文字在图片的靠上边、中间、底端。大家可以对比这看看各自的效果,很容易记住哦!



   图像的边框:<img border=#> #=value数字,指的是这个图像的边的宽度!
   示例:<img src="http://kkk.yesku.net/forum/images/cid4u-2.jpg"  border=1>



   大家可以在自己的机子上按照我给你的语法,写下来,看看效果就行了。
不了解FTP下载的朋友请注意----FTP的格式是→→[ftp://用户名:密码@地址:端口]←←

TOP

HTML基础第五讲---控制表格及其表项的对齐方式







缺省情况下,表格在浏览器屏幕上左对齐,你可以使用<TABLE>的ALIGN属性来指定表格的对齐方式。ALIGN属性可以取值“left”、“center”和“right”。例如,让一个表格在屏幕中央显示可以使用:
 

<TABLE ALIGN=“CENTER”>

注意

使用<TABLE>的ALIGN属性要小心,不是所有的浏览器都能识别它。如果你要让表格显示在屏幕中央,使用<CENTER>标识符来包含表格会更安全些。

你可以使用<TR>的ALIGN属性来设置表格中每行元素的水平对齐方式,这个属性也可以取值“left”、“center”和“right”。要设置某一行中所有元素的竖直对齐方式,可以使用<TR>的VALIGN属性,它可以取值“top”、“middle”和“botton”(缺省情况下取值“middle”)。

要更好地控制表格中某个表头或元素的排列方式,可以使用<TH>和<TD>标识符的ALIGN和VALIGN属性,这两个属性的取值范围与<TR>相同,然而<TH>的<TD>ALIGN和VALIGN属性将会覆盖任何为整个一行指定的排列方式。

控制表项的空间

当浏览器显示一个表格时,它将每一列的宽度设置为这一列中最长表项的宽度。浏览器尽可能地占用较小的屏幕空间来紧密地排列表格中的每一项。你可以使用<TABLE>的CELLPADDING和CELLSPACING属性来改变这一缺省值。

通过使用CELLPADDING属性,你可以为表格中的每一项安排一个更大的空间,使用CELLSPACING属性,你可以为表项之间留出一定的空间。这两个属性的值都以象素来指定。下面的例子说明了如何使用这两个属性(见图6.20):

<HTML>

<HEAD> <TITLE> Cell Spacing </TITLE></HEAD>

<BODY>

<TABLE BORDER=1>

<CAPTION> Normal Table </CAPTION>

<TR>

<TD> First Column </TD>

<TD>Second Column </TD>

</TR>

</TABLE>

<HR>

<TABLE BORDER=1 CELLSPACING=20>

<CAPTION> Table With Cell Spacing </CAPTION>

<TR>

<TD> First Column </TD>

<TD>Second Column </TD>

</TR>

</TABLE>

<HR>

<TABLE BORDER=1 CELLPADDING=20>

<CAPTION> Table With Cell Padding </CAPTION>

<TR>

<TD> First Column </TD>

<TD>Second Column </TD>

</TR>

</TABLE>

</BODY>

</HTML>

控制表格和表项的大小

某些时候你可能想让表格显示出来大一些,你可以用<TABLE>的WIDTH属性来控制表格的宽度,你可以为WIDTH属性提供宽度的绝对值或相对值。

当为WIDTH属性提供宽度的绝对值时,你用象素来表示。例如,要建立一个宽为100个象素的表格,可以用<TABLE WIDTH=100>。当然,并不能保证表格显示出来恰好是你指定的宽度,表项中的内容可能会迫使表格显示出来比WIDTH属性指定的值要宽。

另外,你也可以用相对值来指定表格的宽度,例如,如果你想让表格占有整个浏览器屏幕那么宽,你可以用<TABLE WIDTH=“100%”>,同样地,如果你在WIDTH属性中指定的百分数太小的话,浏览器显示出来的表格就不是那个宽度。

<HEIGHT>属性可以用来指定表格的整体高度,同样这个属性可取绝对值和相对值。但使用这个属性时要小心,即使Microsoft和Netscape的浏览器都能正确解释它,但它并不是HTML 3.2规范中的一部分。

你也可以用<TD>和<TH>标识符的WIDTH和HEIGHT属性来控制表格中某一表项的大小,你必须用绝对象素值来指定这些属性的值。你要知道当你设置这些值时,只不过是在为浏览器提供建议,浏览器尽量按你的意愿去做,但也有可能不能完全按你指定的方式来显示一个表格。

在表格中加入颜色和图象

根据HTML 3.2规范,表格不具有任何颜色属性。然而,值得庆幸的是Netscape和Microsoft都扩展了HTML来让表格具有自己的背景色,两种浏览器都能识别<TABLE>标识符的BGCOLOR属性。

你可以使用颜色名或RGB值来设定BGCOLOR的值,下面的例子说明了这个属性的用法:

<HTML>

<HEAD> <TITLE> Table Color </TITLE> </HEAD>

<BODY BGCOLOR=“white”>

<CENTER>

<TABLE BGCOLOR=“lightblue” CELLPADDING=10>

<TR>

<TD> I have a blue background </TD>

</TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

当这个例子中的文字在浏览器上显示时,它处于一个浅蓝色的框中,这对于突出主页上主体文字中某些特定的文本是很有用的。例如,你可以使用这种方法来突出一个引用、标题或是网页上一个简短的注释。

你也可以为表格中某一行甚至是某一个表项使用BGCOLOR属性。例如,可以用不同的颜色来区分表格中不同列的数据。

BGCOLOR属性的一个更令人兴奋的用处可能是设置你网页的整体颜色,如果你将表格的宽度设为屏幕的宽度,你可以建立一个具有多列的网页,而每一列都具有不同的颜色。下面的例子建立了一个有两列不同颜色的网页:

<HTML>

<HEAD> <TITLE> Two Color Columns </TITLE> </HEAD>

<BODY BGCOLOR=“white”>

<CENTER>

<TABLE WIDTH=“100%” HEIGHT=“100%”>

<TR>

<TD BGCOLOR=“Olive” ALIGN=“center”> I have a olive background </TD>

<TD BGCOLOR=“Aqua” ALIGN=“center”> I have a aqua background </TD>

</TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

Netscape和Microsoft的浏览器都允许你为表格设定背景图片(见图6.21),你可以通过<TABLE>标识符的BACKGROUND属性来指定一幅图象:

<HTML>

<HEAD> <TITLE> Two Color Columns </TITLE> </HEAD>

<BODY BGCOLOR=“white”>

<CENTER>

<TABLE WIDTH=“50%” HEIGHT=“100%” BACKGROUND=“myimage.gif”>

<TR>

<TD ALIGN=“center”> I have a checkered background </TD>

</TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

Netscape Navigator 4.0和Internet Explorer 3.0及4.0还允许你在表格的某一行或某个表项使用BACKGROUND属性,通过为不同的表项使用不同的背景图象,你可以建立一个可视性非常强的网页。

表格作为子页

<TABLE>标识符最初被引入HTML是用来格式化地显示信息。然而,随着时间的推移,这个标识符的属性被大大地扩充了,现在可以将<TABLE>看成是用来在网页中建立一个子页的标识符。这个标识符被扩展出了那么多的属性,以致于现在它很象<BODY>标识符了。在Netscape 和Microsoft的浏览器上,<TABLE>具有许多和<BODY>相同的属性,你可以为表格指定它自己的背景色和图象。另外<TABLE>标识符还能包含所有能在<BODY>中包含的HTML标识符。

然而,<TABLE>具有一个比<BODY>更大的优势,每一个HTML文件必须有且只有一个<BODY>标识符,但对于<TABLE>来说,则没有这种限制,你可以在HTML文件中包含任意数目的<TABLE>。

当你设计网页时,不要让<TABLE>这个名字愚弄了你。<TABLE>不仅仅用于建立表格,还可以在你的网页上建立子页,当你想把单个网页分成多个部分时,就用<TABLE>标识符。

小结

本章讲述了一些重要的HTML标识符。例如,你现在知道了如何建立HTML窗体来让你的网页具有交互性。你还学习了一些对信息进行列表的有用的HTML标识符。最后,你学习了怎样用表格来组织信息,以及怎样用表格来为你的网点进行高级网页布局。

下一章将介绍一些HTML中高级的标识符,你将学习怎样使用image map、框架及cascading style sheets。在学完下一章后,你就可以设计出任何你曾经看过,甚至想过的。
不了解FTP下载的朋友请注意----FTP的格式是→→[ftp://用户名:密码@地址:端口]←←

TOP

HTML基础第六讲---表格







上一讲,风行鹤朋友给我们讲了关于《控制表格及其表项的对齐方式》,在这里我要讲讲表格及其属性 ,然后大家在复习一下上一节的内容,这样就会有事半功倍的感觉。

  表格,一般的用于对网页的内容进行排版,比如文字放在页面的某个位置,你就可以做个表格,然后设置一下表格的属性,它文字放在表格的某个单元个里,就行了;其实用过word的朋友应该非常明白的。除了页面的排版外,表格还可以制作出非常好看的效果,比如按钮、变色、边线等等。大家要会灵活的运用。

  看看表格的基本语法:<table>...</table> - 定义表格
                      <tr> ...</tr>- 定义表行
                      <th> ...</th>- 定义表头
                      <td> ...</td>- 定义表元
  下面看看它的示例:
   <table border="1">  <!--border是表格的边框属性,=“1”,即边框的宽为一象素-->
   <tr>                <!--定义表格的行-->
   <th>Food</th><th>Drink</th><th>Sweet</th><!--定义表格的表头,即标题-->
   </tr>               <!--行结束-->
   <tr>
   <td>A</td><td>B</td><td>C</td>  <!--定义表格的表元-->  
   </tr>
   </table>
   
 

   不带边框的表格:
   <table>
   <tr>
   <th>Food</th><th>Drink</th><th>Sweet</th>
   </tr>
   <tr>
   <td>A</td><td>B</td><td>C</td>  
   </tr>   
   </table>
   
Food Drink Sweet
A      B     C

   跨多行、多列的表元(Table Span)
   跨多列的表元 <th colspan=#>

   <table border>
   <tr><th colspan=3> Morning Menu</th>  <!--colspan=3,跨三列表元-->
   <tr><th>Food</th>       <th>Drink</th>  <th>Sweet</th>
   <tr><td>A</td><td>B</td><td>C</td>
   </table>

   

   跨多行的表元 <th rowspan=#>

   <table border>
   <tr><th rowspan=3> Morning Menu</th><!--rowspan=3,跨三行表元-->
       <th>Food</th> <td>A</td></tr>
   <tr><th>Drink</th> <td>B</td></tr>
   <tr><th>Sweet</th> <td>C</td></tr>
   </table>

   

   表格尺寸设置 <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>
   

   <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>
   

   <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>
   

   <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>
   

   表格内文字的对齐/布局
   <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>
   

   <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>
   

   好了,表格的基本的应用就是这些了。大家有什么问题,积极发问啊!!!












不了解FTP下载的朋友请注意----FTP的格式是→→[ftp://用户名:密码@地址:端口]←←

TOP

HTML基础第七讲---框架

   框架(Frame)也就是所谓的分割窗口、分割画面、框窗效果(还真是五花八门),这个技巧在运用上问题比较多,用的好的话,有助于网友快速且有条理的浏览网页,整理不好的话,呵呵...那笑话可就闹大了。  
【框架的基本概念】


1. 首先,各位先看看右手边这张图,我们将利用这张图来作解说,这样子,讲起来可能会清楚一点。 OK!我们可以看见,右边的这个窗口,一共分为 1 、 2 、 3 三个框架,每一个框架,各有其显示的内容分别是a.htm、b.htm、c.htm三个档案。然而左下角的那个 index.htm 是做什么用的呢?  

2. 原来,左下角的这个档案 index.htm,就是要告诉计算机,我们要将画面分割成这样,也就是说,所有Frame的卷标,其实都只摆在 index.htm 这个档案里。(当然,不是档名一定要叫做 index.htm 取其它档名也是可以的。
3. 这样明白了吗?总之,您要分割几个框框,就一定会有几个对应的html档案(假如您要分割100个框框,就要有100个html档就对了。),另外,还会多一个档案是来告诉计算机要如何分割的。(也就是例中的 index.htm 档啦!
【开始分割】
1. 别急、别急,分割窗口可是一门学问,要分割也是要一步一步来的。看看刚刚那例子,想象画面是一个蛋糕,你要怎么割,才能割成那样呢?
原始码
呈现结果
框窗实作

 
2. 各位会发现,奇怪,在上面的语法中,怎么都没见到熟悉的身影?呵呵...没错,它已经被待会儿要加进去的卷标给取代了!也就是说,如果我们要分割画面,就要先用卷标告诉计算机说:『喂!我要开始分割了!』此时,是派不上用场的,所以躲到一旁凉快去了!  
3. 现在开始动手割割看啰!我们先将画面分成左右两边(左边就是框窗 1 了,右边就暂定为 2 等一下还要分割呢!),如下图:
原始码
呈现结果

框窗实作

 
 


  
 
4. 在中,我们要告诉计算机到底是要左右分(COLS)?还是上下分(ROWS)。一开始我们是左右分,所以我们写成。COLS="120,*" 就是说,左边那一栏强制定为 120点,右边则随窗口大小而变。除了直接写点数外,我们亦可用百分比来表示,例如COLS="20%,80%"也是可以的。
5. 然后,再将右边的框窗再割成上下两个画面(也就是框窗 2 和 3 了)。如下图:  
原始码
呈现结果

框窗实作
 
 

  
  

 
  
 
6. 看见了没?原本的(在第 3 点的语法中)被另一组所取代了!所以要注意喔!第二组是被第一组所包围起来的喔!(乱七八糟了对不对?
7. 呵呵...不知不觉就大功告成了,其实只要将最后完成的那些语法存成 index.htm,然后再准备三个档 a.htm 、b.htm 、c.htm那么就完工啰!当然,这是一个最简单的分割法,我们会再将一些进阶的卷标在底下一一说明。
【其它卷标参数说明】

1. COLS="120,*"
就是垂直切割画面啦!你可以一次切成左右两个画面,当然也可以切成三个,很简单只要写成 COLS="30,*,50" (数字随便您自己调整啦!),依此类推,四个以上当然就是四组数字啦!
2. ROWS="120,*"
就是横向切割画面,也就是将画面上下分开,切法同上。
3. frameborder=0
设定框架的边框,其值只有 0 和 1 , 0 就是不要边框, 1 就是要显示边框。边框是无法调整粗细的。

4. framespacing=5
表示框架与框架间的保留空白的距离,以免看起来太挤。

1. SRC="a.htm"
设定此框架中要显示的网页名称,每个框架一定要对应一个网页,否则就会产生错误,这里就是要您填入对应网页的名称。(如果该网页在不同目录,记得路径要写清楚
2. NAME="1"
设定这个框架的名称,这样才能指定框架来作连结,所以一定要设定喔!当然名称随你高兴取名。
3. frameborder=0
设定框架的边框,其值只有 0 和 1 , 0 就是不要边框, 1 就是要显示边框。边框是无法调整粗细的。
4. scrolling="no"
设定是否要显示滚动条,YES是要显示滚动条,NO是无论如何都不要显示,AUTO是视情况显示。
5. noresize
设定不让使用者可以改变这个框框的大小,如果没有设定这个参数,使用者可以很容易的拉动框架,改变其大小。
6. marginhight=2
表示框架高度部份边缘所保留的空间。
7. marginwidth=2
表示框架宽度部份边缘所保留的空间。
【相关用法】
◆  
1. 使用方法:请换有支持Frame功能的浏览器
2. 卷标解说:有些浏览器较为老旧,无法显示Frame的功能,因此,就要使用此卷标,让这些网友知道,该换换浏览器了。或者,你也可以在这卷标中,摆上没有Frame语法的网页卷标,那么,没有支持Frame功能的浏览器,便会自动显示没有Frame语法的网页。
◆ target=框窗名称
1. 使用方法:target=3>显示内容
2. 卷标解说:常常有一个情况是,我想在框窗 1 的地方按下连结,但是希望他的内容出现在框窗 3 中(请参照上面那个图),那应该如何写呢?就像上面加个 target=框窗名称 就行啦!
◆ target=_top
1. 使用方法:target=_top>网人俱乐部
2. 卷标解说:有时候,在框窗里会连结到别的站,却发现,新连结的这个站,竟然被框窗包住了,不但难看,而且可能会吃上官司说!所以,这时候你必需加入 target=_top这个参数,那么,这个新连到的网站,就会重新占据整个屏幕啦!
不了解FTP下载的朋友请注意----FTP的格式是→→[ftp://用户名:密码@地址:端口]←←

TOP

HTML基础第八讲---序列卷标







    什么叫做序列卷标?其实,这是一个大家都蛮熟悉的东西,只是在网页中换个名称来称呼罢了,序列卷标的功能在WORD里面叫做「项目符号及编号」,也就是将每一要点以数字,如:1.2.3.4…或符号一条一条的清楚的列出的功能。
【无序卷标】

序列卷标基本上可分为两种,一种是「无序条列」,一种是「有序条列」。所谓「无序条列」当然就是意指各条列间并无顺序关系,纯粹只是利用条列式方法来呈现资料而已,此种无序卷标,在各条列前面均有一符号以示区隔。至于「有序条列」就是指各条列之间是有顺序的,从1、2、3…一直延伸下去。

我们先来看看「无序列表卷标」如何使用: 原始码 呈现结果  
<UL>
<LI>姓名:吴弘凯
<LI>生日:1973/6/16
<LI>星座:双子座
</UL> 姓名:吴弘凯
生日:1973/6/16
星座:双子座


其中<UL>卷标即为「无序列表卷标」,每增加一列内容,就必须加一个<LI>。

前面的符号一定是要圆形的吗?不,我们可以加入TYPE="形状名称"属性来改变其符号形状,一共有三个选择:DISK(实心圆)、SQUARE(小正方形)、CIRCLE(空心圆)三种(由于本页使用CSS故仅于Netscape看得出效果。): 原始码 呈现结果  
<UL TYPE="CIRCLE">
<LI>姓名:吴弘凯
<LI>生日:1973/6/16
<LI>星座:双子座
</UL> 姓名:吴弘凯
生日:1973/6/16
星座:双子座


【有序卷标】
接下来,我们来看看「有序列表卷标」如何使用: 原始码 呈现结果  
<OL>
<LI>姓名:吴弘凯
<LI>生日:1973/6/16
<LI>星座:双子座
</OL> 姓名:吴弘凯
生日:1973/6/16
星座:双子座


其中<OL>卷标即为「有序列表卷标」,每增加一列内容,就必须加一个<LI>。

和无序列表卷标一样,我们也可以选择不同的符号来显示顺序,一样是用TYPE属性来作更改,一更有五种符号:1(数字)、A(大写英文字母)、a(小写英文字母)、I(大写罗马字母)、i(小写罗马字母)等五种: 原始码 呈现结果  
<OL TYPE="A">
<LI>姓名:吴弘凯
<LI>生日:1973/6/16
<LI>星座:双子座
</OL> 姓名:吴弘凯
生日:1973/6/16
星座:双子座


另外,我们亦可指定序列起始的数目,其方法如下: 原始码 呈现结果  
<OL START="8">
<LI>姓名:吴弘凯
<LI>生日:1973/6/16
<LI>星座:双子座
</OL> 姓名:吴弘凯
生日:1973/6/16
星座:双子座


【定义列表卷标】
接下来我们要说明的这个卷标,是「定义列表卷标」也是属于序列卷标之一。我们先来举个例子,我们常常会在文章中看见这样的格式: CSS(Cascading style sheet)   CSS是由W3C于1996年12月所公布的一项新技术,什么叫做Cascading style sheet?简单说来他是一种具有阶层性的形式设定,能够让网页设计者在设计网页时,对于网页上的任何对象均有更佳的操控性…

网页里也有可以做到这种效果的卷标喔!现在要来跟各位说的就是这个卷标。咱们先来看看这卷标的用法:
我们先来看看「定义列表卷标」如何使用 原始码 呈现结果  
<DL>
<DT>小标题
<DD>标题的内容说明
</DL> 小标题
标题的内容说明
不了解FTP下载的朋友请注意----FTP的格式是→→[ftp://用户名:密码@地址:端口]←←

TOP

截图了






不了解FTP下载的朋友请注意----FTP的格式是→→[ftp://用户名:密码@地址:端口]←←

TOP

 20 12
发新话题
 

惠大论坛 | 用户协议 | 管理团队 | 友情链接 | 广告联系 | 点击这里给我发消息

Copyright © 2008 - 2009 惠大论坛 www.huidabbs.com All Rights Reserved.
粤ICP备07034655号

站务管理员:小白 紧急手机:13428066758 QQ:704012066

声明:惠大论坛所有文章或图片仅代表发帖人个人观点,与本论坛立场无关。

遵守网络道德,拒绝任何人以任何形式在本论坛发表与国家现行法律、法规相抵触的言论。

版权声明:本站信息转载于其他网站,真实性未经证实,仅供您参考。如无意中侵犯了您的权益,请即刻联系本站,我们将在第一时间内删除该信息!