入门基础教程(一)HTML速成教程

入门基础教程(1)HTML速成教程

入门基础教程

 

目录

入门基础教程... 3

HTML速成教程... 3

1.1.  基本标签... 3

1.1.1.<HTML></HTML>HTML标签... 3

1.1.2.<HEAD></HEAD>头部标签... 3

1.1.3.<TITLE></TITLE>标题标签... 3

1.1.4.<META>概要标签... 3

1.2.  <BODY></BODY>正文标签... 4

1.3.  Character字符,Paragraph 段落和Position位置... 4

1.3.1.<H#></H#>标题标签... 4

1.3.2.<P></P>段落标签... 4

1.3.3.Align对齐属性... 4

1.3.4.<CENTER></CENTER>居中对齐标签... 5

1.3.5.<BR>换行标签... 5

1.3.6.<HR>水平分隔线... 5

1.3.7.&nbsp;空格... 5

1.3.8.<BLOCKQUOTE></BLOCKQUOTE>引用块... 5

1.3.9.<PRE></PRE>预格式化... 5

1.3.10.Comments注释... 6

1.4.  Character Style字符样式... 6

1.4.1.<BASEFONT>默认字体... 7

1.5.  Lists列表标签... 7

1.5.1.Unordered Lists无序列表... 7

1.5.2.Ordered Lists有序列表... 8

1.5.3.Definition Lists定义列表... 8

1.6.  <A>链接... 8

1.7.  Image图片... 9

1.8.  Color颜色... 10

1.9.  Table表格... 10

1.10.   Form表单... 12

1.10.1.Input输入框... 13

1.10.2.Text Area文本区域... 13

1.10.3.Radio Button单选按钮... 13

1.10.4.Check Box多选框... 14

1.10.5.Submit and Reset提交与重置按钮... 14

1.10.6.Password密码输入框... 14

1.10.7.Pull-Down Menu下拉菜单... 14

1.10.8.Scroll-Down Menu滚动菜单... 15

1.11.   Frame框架... 16

 

 

入门基础教程

HTML速成教程

1.1.        基本标签

标签(Tag)是HTML语言的元素,几乎所有标签都有一个打开符号和关闭符号。例如 <HEAD> 标签表示头部信息的开始位置,它拥有一个对应表示关闭的标签 </HEAD>.

1.1.1.         <HTML></HTML>HTML标签

这对标签告诉浏览器此文件是一个HTML文件。每个HTML文档都从 <HTML>标签开始,对应的</HTML>标签是HTML文件的最后一个标签。

1.1.2.         <HEAD></HEAD>头部标签

这对标签之内的内容表示HTML文件的头部,一般用来存放文件相关的重要信息

1.1.3.         <TITLE></TITLE>标题标签

title是一个重要标签,一般表示在浏览器顶部显示的标题。这对标签嵌在<HEAD></HEAD>标签之内

 
     <html>
     <head>
     <title>HTML速成教程</title>
     </head>
     <body>
     </body>
     </html>

1.1.4.         <META>概要标签

另外可嵌入<HEAD></HEAD>标签之内的标签还有 <META>概要标签,一般用于协助搜索引擎去索引一个页面。有以下几种不同的概要元信息:

author作者信息:

 
     <META NAME="author" CONTENT="崔卢李">

description描述信息:

 
<META NAME="description" CONTENT="一个针对初学者的简易HTML速成教程">

keyword关键词信息,注意:使用逗号分隔关键词(SEO中也用不规范 |竖线分隔)

 
<META NAME="keyword" CONTENT="html,tutorial,beginner,web design,教程,初学者,网页设计">

示例:

 
<head>
<title>HTML速成教程</title>
<meta name="Author"  content="崔卢李">
<meta name="Description" content="一个针对初学者的简易HTML速成教程">
<meta name="Keywords" content="html,tutorial,beginner,web design,教程,初学者,网页设计">
</head>

1.2.        <BODY></BODY>正文标签

Body正文标签定义网页的主体部分的开始和结束。在这一对标签之间可以放入各种重要标签,例如:images图片, links链接, text文本, paragraphs段落, forms表单等

1.3.        Character字符,Paragraph 段落和Position位置

1.3.1.         <H#></H#>标题标签

共有H1H66个层级的标题标签,最大的标题为<H1>,最小的标题为<H6>,其他依此类推。这些标签一般用于正文的大纲视图分层级。

 
     <H1>最大文本</H1>
     ......
     <H6>最小文本</H6>

1.3.2.         <P></P>段落标签

P段落标签 <P></P>之间可以放入一个段落,如:

            <p>基本信息</p>

注意:</P>关闭标签可以省略。

1.3.3.         Align对齐属性

可以使用ALIGN标签来定义对齐方式。注意:默认为左对齐。

 
     <p ALIGN="center">段落文本居中对齐</p>  
     <p ALIGN="left"> 段落文本左对齐</p>
     <p ALIGN="right">段落文本右对齐</p> 

1.3.4.         <CENTER></CENTER>居中对齐标签

此标签可以使得网页中的文本居中对齐。

 
     <center><p> 段落居中</p></center>

1.3.5.         <BR>换行标签

可使其后文本新起一行,如:

 
     <p>欢迎光临<br> HTML入门教程官网!</p>

1.3.6.         <HR>水平分隔线

 

可以插入一条水平分隔线,HR标签可设置如下:

 
<hr width="450" align="right" size="5">

1.3.7.         &nbsp;空格

可以在文本中闯入空格 &nbsp;.

1.3.8.         <BLOCKQUOTE></BLOCKQUOTE>引用块

可定义引用的内容块,一般会在块的左右两边进行缩进(增加外边距),而且有时会使用斜体。

 
     <BLOCKQUOTE>    
     <H1>欢迎光临HTML入门教程官网!</H1>
     <p>教程内容</p>
     <p>基础信息</p>
     </BLOCKQUOTE>

1.3.9.         <PRE></PRE>预格式化

可定义预格式化段落文本,使得输入内容和显示内容一致,即所见即所得,经常用来显示源码

 
     <pre>
    物品  单价    数量

    ---------------------------------
      A       34.99        23
      B       25.95        13
    ---------------------------------
     </pre>

1.3.10.     Comments注释

comment注释标签里面的内容不会显示出来,使用如下:

 
     <!-- 这里是注释 -->

1.4.        Character Style字符样式

字符样式包括物理和逻辑字符样式,和字体 Face,大小 Size, 和颜色Color

类别

标签

功能

物理样式

<B>

粗体化文本

<I>

斜体

<U>

加下划线

<Strike>

文本加中划线

<Sup>

文本上标化

<Sub>

文本下标化

<tt>

文本等宽打字机风格化(HTML5 不支持)

逻辑样式

<Strong>

表示文本非常重要

<Em>

表示文本重要

<Cite>

表示文本是书籍或文章的标题

<Address>

表示文本是一个地址

<Dfn>

表示文本是一个定义

<Samp>

表示文本是一个文档中的文本

<kbd>

表示文本是一段键盘输入

<Var>

表示文本是一个变量

<Code>

表示文本是一段代码

 
在最新的 HTML 版本(HTML 4 XHTML)中,字体标签已被废弃。请在新网页中不要使用字体标签而改用CSS

字体

选项

用处

Face

默认

使用浏览器的默认字体 (Times New Roman)

Family

逗号隔开的字体名称 ( Helvetica, Arial, Courier). 指定段落的优先使用字体

(Font name)

使用指定字体显示 (如果系统不存在该字体则会被其他字体替代)

Size

1 7

17为从最小到最大 (默认为3)

+

增加字体的大小(最大为7).

-

减少字体的大小 (最小为1).

Color

"#xxxxxx" White, Red, Blue

定义文本颜色

下列标签将会显示如文字所示效果

 
     <U>下划线文本</U>
     <B>粗体文本</B>
     <I>斜体文本</I>
     <BIG><big>大号文本</big></BIG>
     <SMALL>小号文本</SMALL>
     <TT>等宽打印机文本</TT>
     <BLINK><blink>闪烁文本,仅在Netscape浏览器生效</blink></BLINK> 
     <SUB>可表示<sub>下标</sub></SUB>
     <SUP>可表示<sup> 上标</sup></SUP>
     <STRIKE>中划性强调文本</STRKE>
     <FONT FACE="Arial">文本字体测试</FONT>
     <FONT COLOR="#00FF00">绿色文本</FONT>
     <FONT SIZE="+2">文本字体测试</FONT>

1.4.1.         <BASEFONT>默认字体

该标签可定义网页默认的字体和大小,颜色.只有 Internet Explorer 支持 <basefont> 标签。应该避免使用该标签。

 
     <basefont face="Arial" size="7" color="red">

1.5.        Lists列表标签

有以下三种列表标签:

 
     无序列表<UL></UL>
     有序列表<OL></OL>     
     定义列表 <DL></DL>

1.5.1.         Unordered Lists无序列表

无序列表始于 <UL> 而终于 </UL> 标签. 其中嵌入 <LI> (list item 列表项目)标签;  (<LI>对应的</LI>关闭标签可以省略) :

 
     <UL>
     <LI> 姓名
     <LI> 电话
     <LI> ID
     </UL>

显示效果为:

  • 姓名
  • 电话
  • ID

1.5.2.         Ordered Lists有序列表

有序列表始于 <OL> 而终于 </OL> 标签. 其中嵌入 <LI> (list item 列表项目)标签;  (<LI>对应的</LI>关闭标签可以省略) :

 
     <OL>
     <LI>大学
     <LI>高中
     <LI>小学
     </OL>

显示效果为:

  1. 大学
  2. 高中
  3. 小学

1.5.3.         Definition Lists定义列表

定义列表始于 <DL> 而终于 </DL> 标签. 其中嵌入 <DT></DT>  (definition term 定义条目) <DD></DD>  (definition definition定义条目的定义内容)标签.:

 
 
     <DL>
     <DT> 条目A </DT>
     <DD> A的定义 </DD>
      ...
     <DT> 条目B </DT>
     <DD> B的定义 </DD>
     </DL>

1.6.        <A>链接

链接(Links)可使用户从一个网页导航到本机(通过本机文件路径)或互联网(通过URL网址)上的另一个网页.

如果是链接到当前路径下的文件,用法如:.

 
     <A HREF="bscInfo.html">基本信息</A>

如果是链接到其他路径下的文件,假设该路径为path(可是是绝对路径,也可以是相对路径),用法如:

 
     <A HREF="path/name.html">锚点文本</A>

如果是链接到互联网上的网页,用法如:

 
<A HREF="http://0110.iteye.com/">初学者教程</A>

如果是链接到电子邮件地址,则点击会启动系统默认邮件客户端程序写邮件,用法如:

 
     <A HREF="mailto:changingway@foxmail.com">邮件反馈</A>

如果一个网页内容很长,就可以把它分为几节来导航.在每一节开始处定义一个锚点,用法如: <A NAME="xyz">. 然后可以使用 <A HREF="#xyz"> 这样的标签链接到该锚点.

 
     <BODY>
     <A NAME="TOP"></A>本页标题
     ......
     <A HREF="#TOP"></A>回到顶部</A>
     </BODY>

也可以链接到当前路径下的其他网页上的某个锚点,用法如:

 
     <A HREF="people.html#F3">角色信息</A>

也可以链接到互联网上的其他网页上的某个锚点,用法如:

 
     <A HREF="http://server/path/file#F3">

1.7.        Image图片

绝大多浏览器都支持显示GIFJPEG格式的图片.用法如:

 
     <IMG SRC="ImageName">

<IMG>标签定义一个图片,它没有一个对应的关闭标签.SRC属性指定图片的路径或网址.HEIGHT WIDTH 定义图片的高度和宽度,单位为像素 (pixels) ,用法如:

 
     <IMG SRC="monky.gif" HEIGHT=80 WIDTH=100>

ALIGN属性:(HTML 4.01 中不推荐使用)指定图片相对周围段落文本的纵向(的对齐方式,(默认为bottom底部对齐,还有left左对齐,right右对齐,top,,middle). 用法如:

 
<IMG SRC="ImageName" ALIGN="top">

vspace hspace属性: (HTML 4.01 中不推荐使用)。定义图像顶部底部和左侧右侧的空白。用法如:

    <IMG SRC="monky.gif" vspace="50" hspace="80">

ALT属性定义了图像的替代文本,如果浏览器设置了不显示图像时或者图片地址无效而无法显示图像时,就会显示替代文本.

用法如:

 
     <IMG SRC="monky.gif" ALT="[猴子]">

图片也可以加上超链接,用法如:

 
     <A HREF="animal.html"><IMG SRC="monky.gif"></A>

上例中的图片周围有蓝色的边框,如果想要消除边框,可使用BORDER属性把边框大小设置为0,用法如:

 
     <A HREF="animal.html"><IMG SRC="monky.gif" BORDER=0></A>

可以使用URL来显示互联网上的图片,用法如:

 
     <IMG SRC="http://www.abcd.com/image2.gif">

可以使用图片来作为网页的背景图片,用法如:

 
     <BODY BACKGROUND="ImageName">

为了避免因为载入大尺寸图片而拖慢网页载入,可以使用文本上的超链接来载入图片.用法如:

 
     <A HREF="ImageName">link anchor</A>

也可以使用小尺寸的缩略图片上的超链接来载入大尺寸图片,用法如:

 
     <A HREF="LargerImageName"><IMG SRC="SmallImageName"></A>

1.8.        Color颜色

HTML中各种颜色使用以 "#"(读作hash,C#是音乐中的升号读作sharp)打头加上6位的16进制RGB (red, green, blue,分别从00FF) .000000为黑色(无任何颜色), FFFFFF是白色 (RGB三颜色饱和). FF0000是明亮的纯红色, 00FF00 是蜡光的纯绿色,0000FF是明亮的纯蓝色.

可以在 <BODY> 标签内使用bgcolor, text, link, vlinks (visited links), alinks (active links来指定网页的背景,文本,链接,已访问链接,活动链接的颜色,用法如:

 
<BODY bgcolor="#FFFFFF" text="#000000" 
      link="#0000FF" vlink="#800000" alink="#808000">

HTML中除了RGB,还可以直接使用"black", "red", "blue", "green" 等颜色的单词来定义文本的颜色,用法如:

 
     <FONT color="red"> text </FONT>

这个标签可以和字体的大小(font size)一起使用,用法如:

 
     <FONT color="#00FF00" size="+3"> text </FONT>

1.9.        Table表格

表格的格式是:

 
     <TABLE>
     <TR> <TD> 表格条目 </TD> ... <TD> 表格条目 </TD> 
     </TR>
     ...
     <TR> <TD> 表格条目 </TD> ... <TD> 表格条目 </TD> 
     </TR>
     </TABLE>

表格始于<TABLE>而终于 </TABLE>,表格其中嵌入行,每行始于<TR>而终于 </TR>. 行其中嵌入单元格,每个单元格始于<TD>而终于 </TD>. 单元格内容默认为水平左对齐和垂直居中,可使用 <TD COLSPAN=X> </TD><TD ROWSPAN=X> </TD> 使单元格横跨X列和纵跨X,可使用 <TABLE BORDER=X> </TABLE>来定义表格边框,  用法如:

 
   <CENTER><TABLE BORDER=1 WIDTH="62%" HEIGHT=90>
   <TR>
      <TD WIDTH=82><CENTER> 姓名</CENTER></TD>
      <TD WIDTH=111><CENTER>电话</CENTER></TD>
      <TD WIDTH=91><CENTER>ID</CENTER></TD>
   </TR>
   <TR>
      <TD WIDTH=82><CENTER>John Lee</CENTER></TD>
      <TD WIDTH=111><CENTER>456-968</CENTER></TD>
      <TD WIDTH=91><CENTER>276580</CENTER></TD>
   </TR>
   <TR>
      <TD WIDTH=82><CENTER>Cherry Heitz</CENTER></TD>
      <TD WIDTH=111><CENTER>789-326</CENTER></TD>
      <TD WIDTH=91> <CENTER>908743</CENTER></TD>
   </TR>
   </TABLE></CENTER>

姓名

电话

ID

John Lee

456-968

276580

Cherry Heitz

789-326

908743

宽度 width和高度height可设置为 "xx%" XX,用法如: WIDTH="80%" WIDTH=450. "xx%" 允许表格尺寸随窗体尺寸缩放而缩放.表格边框Border 可设置为0则不显示边框.

CELLSPACING属性表示单元格之间的间隔( space),单位为像素pixels. CELLPADDING属性表示单元格的内部的四边留空(四个边和内容之间的空隔,pad意为填充铺垫) .

用法如下:

 

 
     <TABLE BORDER=10 CELLSPACING=10 CELLPADDING=2>
     <TR><TD></TD><TD></TD></TR>
     <TR><TD></TD><TD></TD></TR>
     </TABLE>

显示效果如下:

 

 

 

 

 

标签元素

描述

<TABLE>

</TABLE>

定义 HTML 表格,(如果使用了BORDER属性,则表格会显示边框)

<CAPTION>

</CAPTION>

定义表格标题,必须紧随 table 标签之后。您只能对每个表格定义一个标题。默认位置为居中于表格之上。
(
可使用ALIGN=BOTTOM属性来定义标题位于表格之下,但不赞成使用ALIGN而应使用CSS样式。)
注意: caption标签内可嵌入使用其他各种标签.

<TR> </TR>

tr 元素定义表格行,可使用ALIGN (LEFT, CENTER, RIGHT)
 VALIGN (TOP, MIDDLE, BOTTOM)
等属性预定义所有行的默认属性.

<TH> </TH>

th 元素定义表头,默认为粗体居中.可使用属性来定义表头的样式

<TD> </TD>

td 元素定义表格单元。默认为水平左对齐和垂直居中.可使用属性来定义其中样式

 

属性

描述

ALIGN (LEFT, CENTER, RIGHT)

单元格的水平对齐样式

VALIGN (TOP, MIDDLE, BOTTOM)

单元格的垂直对齐样式

COLSPAN=n

某单元格横跨的列数

ROWSPAN=n

某单元格纵跨的行数

NOWRAP

单位格内关闭自动换行样式

1.10.  Form表单

表单(Forms)可用来输入信息,如收集用户姓名和电子邮箱等.表单始于<FORM>而终于</FORM>,用法如.

 
     <FORM ACTION="path/script.pl" METHOD="">
     ......
     </FORM>

表单必须使用Action属性来 规定当提交表单时向何处发送表单数据,Method规定用于发送 form-data HTTP 方法

 
     <FORM ACTION="http://www.abc.com/cgi-bin/login.pl" METHOD="post">

1.10.1.     Input输入框

可使用输入框 "input" 输入单行信息,格式如:

 
     <INPUT TYPE="input" NAME=name SIZE=##>

用法如:

 
     <INPUT TYPE="input" NAME="email" SIZE=26>Your Email Address
     <INPUT TYPE="input" NAME="name" SIZE=26>Your Name
     <INPUT TYPE="input" NAME="subject" SIZE=26>Subject

显示效果如:

 
     <input size="26" name="email" /> Your Email Address
     <input size="26" name="firstname" /> Your Name
     <input size="26" name="subject" /> Subject

size尺寸属性的单位为字符, "SIZE=26" 即表示长度为26个字符(13个汉字)

1.10.2.     Text Area文本区域

文本区域(Text Area)可以输入无限数量的多行的文本,文本的默认字体是等宽字体(通常是 Courier)。文本区域开始于 <TEXTAREA NAME=name ROWS=## COLS=##>而终于 </TEXTAREA>标签.用法如:

 
     <TEXTAREA Rows=2 Cols=25 NAME="comments"></TEXTAREA>

显示效果如:

 
     
<textarea cols="25" name="comments" />

1.10.3.     Radio Button单选按钮

可使用单选按钮(Radio Button) 去定义多选一选项,例如:问题为"你喜欢哪一副图画?",问题选项为"猴子", "花朵", "女孩", "建筑", 用法如:

 
     <INPUT TYPE="radio" checked NAME="picture" VALUE="monky">猴子<P>
     <INPUT TYPE="radio" NAME="picture" VALUE="flower">花朵<P>
     <INPUT TYPE="radio" NAME="picture" VALUE="girl">女孩<P>
     <INPUT TYPE="radio" NAME="picture" VALUE="building">建筑<P>

显示效果如:

 
     <input checked="true" type="radio" name="picture" /> 猴子
     <input type="radio" name="picture" /> 花朵
     <input type="radio" name="picture" /> 女孩
     <input type="radio" name="picture" /> 建筑

1.10.4.     Check Box多选框

可使用多选框Checkboxes来从一个列表中选择多个选项,格式为:

 
     <INPUT TYPE="checkbox" NAME="name" VALUE="text">

单选按钮和多选框的区别在于前者同时只能勾选一个选项,而后者可以同时勾选一个或多个选项。例如:问题为"你喜欢哪一些图画?",问题选项为"猴子", "花朵", "女孩", "建筑", 用法如:

 
     <INPUT TYPE="checkbox" NAME="picture" VALUE="monky">猴子<P>
     <INPUT TYPE="checkbox" NAME="picture" VALUE="flower">花朵<P>
     <INPUT TYPE="checkbox" NAME="picture" VALUE="girl">女孩<P>
     <INPUT TYPE="checkbox" NAME="picture" VALUE="building">建筑<P>

显示效果如:

 
     Which picture do you like?
     <input type="checkbox" name="picture" /> 猴子
     <input type="checkbox" name="picture" /> 花朵
     <input type="checkbox" name="picture" /> 女孩
     <input type="checkbox" name="picture" /> 建筑

1.10.5.     Submit and Reset提交与重置按钮

提交 "submit" 按钮点击后可发出表单,重置 "reset" 按钮点击后可清除整个表单的输入内容以重新输入。用法如:

 
     <INPUT TYPE="submit" NAME="submit" VALUE="Send">
     <INPUT TYPE="reset" NAME="reset" VALUE="Clear">

显示效果如:

 
     <input type="submit" name="submit" /><input type="reset" name="reset" />

1.10.6.     Password密码输入框

可使用密码输入框Password来用星号遮盖住输入的敏感信息如密码,用法如:

 
     <INPUT TYPE="password" NAME="pass" SIZE="20">

1.10.7.     Pull-Down Menu下拉菜单

可以使用下拉菜单Pull-Down Menu来定义多选一的单选答案,用法如:

 
     请问你几岁啦? 
     <SELECT NAME="age">
     <OPTION>1-15
     <OPTION SELECTED >16-21
     <OPTION>22-30
     <OPTION>31-45
     <OPTION>46-65
     <OPTION>66-80
     <OPTION>81-up
     </SELECT>

显示效果如:

 
     请问你几岁啦?
     <select size="1" name="age"> <option>1-15</option> 
     <option>16-21</option> <option>22-30</option> 
     <option>31-45</option> <option>46-65</option> <option>66-80</option> 
     <option>81-up</option></select>

1.10.8.     Scroll-Down Menu滚动菜单

滚动菜单有两种,一种是只能多选一:

 
     请问你几岁啦?
     <SELECT NAME="age" SIZE=5>
     <OPTION VALUE="1-15">1-15
     <OPTION VALUE="16-21">16-21
     <OPTION VALUE="22-30">22-30
     <OPTION VALUE="31-45">31-45
     <OPTION VALUE="46-65">46-65
     <OPTION VALUE="66-80">66-80
     <OPTION VALUE="81-up">81-up
     </SELECT>

显示效果如:

 
     请问你几岁啦?
     <select size="5" name="age"> <option value="1-15">1-15</option> 
     <option value="16-21">16-21</option> <option value="22-30">22-30</option> 
     <option value="31-45">31-45</option> <option value="46-65">46-65</option> 
     <option value="66-80">66-80</option> <option value="80-up">80-up</option></select>

一种是可以通过按住shift键不动去多选一或多选多,html中使用 "multiple"属性定义,用法如:

 
     你喜欢做的事情有哪些?
     (按住<i>shift</i>不动以选择多个答案项)
     <SELECT NAME="reading" MULTIPLE size="3">阅读
     <OPTION VALUE="sports">体育
     <OPTION VALUE="travelling">旅行
     <OPTION VALUE="music">音乐
     <OPTION VALUE="cooking">烹调
     <OPTION VALUE="shopping">采购
     <OPTION VALUE="talking">聊天
     </SELECT><P>

 

1.11.  Frame框架

使用 frames框架可以把多个网页同时置于一个浏览器窗口中显示,每个框架可以显示一个网页(), 框架开始于 <FRAMESET>而终于</FRAMSET> 标签。可以使用两个修饰属性 ROWS COLS 来定义框架的大小。用法如:

 
<html>
<head><title></title></head>  
<frameset rows="64,*">
<frame name="banner" scrolling="no" noresize 
         target="contents" src="top.htm">  
<frameset cols="150,*">
<frame name="contents" target="main" 
         src="menu.htm">
<frame name="main" src="home.htm">
</frameset>
<noframes>
<body>
<p>This page uses frames, but your browser doesn't 
support them.</p>
</body>
</noframes>
</frameset> 
</html>

各元素解释如下:

rows="64,*"表示第一个框架纵向占用64行,而第二个占用全部剩余空间(用星号表示)。也可以按比例来定义所占行数,格式如: cols="30%,60%"

<frame>定义一个独立的框架;

name="..."定义框架的名称;

src="..."定义要在框架里面显示的网页的地址;

target="..."定义链接要在哪一个框架里面打开;

scrolling="yes|no|auto"定义框架的滚动条。 "yes" 强制总是显示滚动条 "no"强制总是隐藏滚动条"auto" 表示由浏览器自动选择是否显示滚动条. 默认值为 "auto"

noresize表示框架大小固定不可调整大小;

<noframes>标签用于定义当浏览器不支持框架时显示的 <body></body> 标签包起来的文本;

还有一些要注意的TARGE
"_blank"
定义链接在新的窗口打开;
"_top"
定义链接在整个原窗口打开;
"_self"
定义链接在原框架中打开,经常与 <BASE...> (规定默认地址或默认目标)标签配合使用.
"_parent"
定义链接在原框架的父框架中打开.

用法如:

 
     <A HREF="ah.html" TARGET="_blank">text</A>

TARGET属性也可加到 <FORM> 标签中以使得脚本的输出值返回到指定的框架或窗口。