[原创]HTML4.0基础教程(IE版)(页 1) - 网站策划与设计 - 【开放注册】苹果手机软件下载论坛|中国苹果用户网|苹果BT下载种子torrent发布

Thirteen 发表于 2003-5-27 11:09

[

<a href="http://hsworkshop.51.net" target="_blank"> </a>
 第一天认识HTML
 <HTML>
 <HEAD>
 <TITLE> 我的页面 </TITLE>
 </HEAD>
 <BODY>
 网页的内容.......
 </BODY>
 </HTML>
 例1-1
 当你点开任何网页的源文件的时候，相信都可以在长长的字符中寻找到上面这些单词,或者你现在把上面这些单词复制到你新建的文档文件中，保存之后把后缀名改成.html，一个网页就诞生了。这就是HTML语言，它不象C++，VB等等程序语言要你摸不清头脑，HTML语言只是一个在SGML定义下的描述性语言，或者说是标识语言。
 既然是标识语言，我们就从标识开始进行学习好了，也许当你完全掌握标识之后，就会发现基本上已经明白什么是HTML了。
 
 标识的写法:
 1.任何标识都应该写在"<"和">"之间，如<html>
 2.标识的字母没有大小写的区分。
 3.在起始标识中加入“/”就是终止标识，一般情况下有起始表示就有终止标识。例如<html>...</html>
 4.有的标识需要加入参数，有的不必，需要注意的是这些参数只能加在起始标识中。
 
 现在我们开始认识第一类标识：文件标识
 事实上你已经见过了这些标识,没错就是<HTML> ； <HEAD> ； <BODY> ； <TITLE> ，
 
 <html>.....</html>
 这段标识告诉浏览器现在运行HTML文件，所以你写HTML文件都应该以<html>开头，</html>.
 
 <head>.....</head>
 这是HTML文件的开头部分，相应的<body>...</body>就是本文部分，开头部分主要是用来记载关于这个页面的一写重要资讯，所以呢大部分的标记都将在本文部分进行应用。
 
 <title>...</title>
 这里的文字就成了你所建立页面的标题，你可以更改一下例1-1中非标记部分。
 这些标记就构成了HTML的基本构架，其中只有<body>具有参数设定,我们就通过一个例子还认识好了
 <BODY text="" link="" alink="" vlink="" background="" bgcolor="" leftmargin= topmargin= bgproperties="fixed">
 
 text=""
 用以设定文字颜色。
 
 link=""
 设定一般文字连结颜色。
 
 alink=""
 设定刚按下时文字连结颜色。
 
 vlink=""
 设定连结后的颜色。（被按过）。
 
 background=""
 设定背景墙纸。
 
 bgcolor=""
 设定背景颜色。
 
 leftmargin=
 设定整份文件显示画面的左方边沿空间，单位为像素。
 
 topmargin=
 设定整份文件显示画面的上方边沿空间。
 
 bgproperties="fixed"
 固定背景墙纸，当卷动文字时墙纸不会跟著卷动。
 
 这里需要说明的是色彩的问题，色彩是用 16 进制的红－绿－蓝(red-green-blue, RGB) 值来表示的，所以一个颜色也就由RRGGBB的格式构成,而16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.
 #000000, 其中红=00，蓝=00,绿=00，色彩即为黑色
 #0000FF，其中红=00,绿=00，蓝=ff,色彩即为蓝色
 如果你想深入了解色彩的问题，你可以查看诸如FLASH等等软件的色彩表.

Thirteen 发表于 2003-5-27 11:09

[

<a href="http://hsworkshop.51.net" target="_blank"> </a>
 第二天 HTML的字体标识
 昨天我们已经了解了文件标识，它告诉我们如何创建一个HTML文件。在一个网页中，文字传达的信息量比其他任何元素都要大，所以文字在一个网页中占有相当大的比重，现在我们就开始学习通过字体标识来美化你网页中的文字。首先必须注意的是，在不通的浏览器下，部分的字体标识所显示出来的效果是不同的，在这里我们着中说明在IE下的效果.
 
 首先我们看,<basefont>
 这两个标识都是用于控制字体的大小，色彩，字体，但<basefont>可以用于<head></head>之间，控制全文的文字;而只应用与<body></body>之间，控制在它选择范围中的文字.两个标识出现在一个html文件中的时候，没有被选择的文字才会受到<basefont>的影响。
 下面我们就来看一个例子：
 <html>
 <head>
 <title>H.S Workshop</title><basefont face="Arial" size="7" color="#000000">
 </head>
 <body>
 欢迎来到H.S Workshop
 </body>
 <html>
 [例2-1]
 我们看到<basrfont>告诉IE全文用7号黑色Arial字体显示，但H.S Workshop被我们用围住了，所以执行的设定.这里有face=,size=,color=三个参数可以进行设定，
 
 face=
 设定字体。
 
 size= (1,2,3,4,5,6,7,-x,+x)
 设定字体大小，这里需要注意的是相对值和绝对值，我们在例2-1中，把的size的值改成"-2"你会发现效果是一样的，相应的把<basefont>的size值改成其他任何小于7的数值，你就会发现改变。我们在这里就把size="-2"称为相对值,被围住的文字在<basefont>的基础上，减少2个字符大小,公式为"n-/+x".当然只有可以设定相对值。
 
 color=
 设定文字色彩.
 这里我们还发现了一个问题，<basefont>没有终止标识，但它一样可以实现它的功能，这就是HTML的空标识，因为我们看到</basefont>没有存在的意义，所以可以忽略，当然如果你在<basefont>后面添加</basefont>对整个html文件也没有影响。其他的我们就称之为围堵标识。
 
 接下来看<Hn>...</Hn>（n=1,2,3,4,5,6)
 这是一个标题标识，从1到6替减，是一个围堵标识，我们需要注意的是这个标识独占一行并自动插入一个空行，你可以自己尝试一下，这里就不举例说明了。
 
 <TT> <SAMP> <CODE> <KBD> <STRIKE> <s> <BIG> <VAR> <CITE> <DFN> <ADDRESS>：
 这是对文字进行一些特殊处理的标识，我们就来看看他们的效果来进行学习好了.
 
 欢迎来到H.S Workshop
 欢迎来到H.S Workshop
 欢迎来到H.S Workshop
 <tt>欢迎来到H.S Workshop</tt>
 <samp>欢迎来到H.S Workshop</samp>
 <code>欢迎来到H.S Workshop</code>
 <kbd>欢迎来到H.S Workshop</kbd>
 欢迎来到H.S Workshop
 <strike>欢迎来到H.S Workshop</strike>
 <s>欢迎来到H.S Workshop</s>
 <big>欢迎来到H.S Workshop</big>
 欢迎来到H.S Workshop
 欢迎来到H.S Workshop
 欢迎来到H.S Workshop
 欢迎来到H.S Workshop
 欢迎来到H.S Workshop
 <var>欢迎来到H.S Workshop</var>
 <cite>欢迎来到H.S Workshop</cite>
 <dfn>欢迎来到H.S Workshop</dfn>
 <address>欢迎来到H.S Workshop</address>
 你是否已经了解了呢，这些就是HTML实现字体特殊效果的标识，唯一特别的是，<address>可以不用插入 换行。至于 是什么，我想看了明天的排版标识我就可以了解了。

Thirteen 发表于 2003-5-27 11:11

[

<a href="http://hsworkshop.51.net" target="_blank"> </a>
 第三天排版标识
 昨天我们已经认识了文字标识，为了让整个网页更清晰美观，我们就不可以少了排版标识，那么现在就要我们开始来认识他们吧。
 现在比较讲知识产权，呵呵~我们就先来看看如何告诉别人这是你的产权好了，当然我们还可以用它来告诉你的工作伙伴，这段开始是什么，那就是
 
 HTML和其他的程序语言一样，可以在代码中添加注释，来告诉别人这里开始写的是什么，当然这也是告诉自己，方便以后的管理，不过你放心，这只存在于你的原代码中，不会在浏览器中发生任何影响。
 
 现在我们开始认识对段落控制的标识，, ,.
 
 
 我们可以把他看做一个空行标识，既在网页中显示一段空白行，一般在DW或者FG等网页编辑工具中，回车即在HTML插入一个，这也是一个空标记，他的常用参数是
 align="#"(#=right, left, center)
 分别表示左对齐，右对齐，居中。默认值为left.
 
 实现一下下面的例子你就明白了:
 <HTML>
 <HEAD>
 </HEAD>
 <BODY>
 H.S Wrokshop
 H.S Wrokshop
 H.S Wrokshop
 H.S Workshop
 </BODY>
 </HTML>
 [例3-1]
 
 ,
 这两个标记分别表示换行和不换行，前者使网页中的元素直接在下一行，不插入空行，后者则表示不换行，对于一些必须在一行中显示的文字，对电话号码等等的显示比较有用。这里的 是个空标识,是围堵标识.需要注意的是align=""在BR中没有的意义.
 
 这时候我们就要通过一个另一个标识来实现对齐效果，<div>....</div>,当然这个标识有它更广泛的用途，在这里只简单的提一下其中的对齐参数运用。下面我们就来看一个简单的例子。
 
 <HTML>
 <HEAD>
 </HEAD>
 <BODY>
 <DIV align="center">H.S Workshop
 H.S Workshop </DIV>
 H.S Workshop H.S Workshop H.S Workshop H.S Workshop H.S Workshop H.S Workshop H.S Workshop
 <DIV align="right">H.S Workshop
 H.S Workshop </DIV>
 </BODY>
 </HTML>
 [例3-2]
 
 这样一来我们就可以实现对 的对齐效果了。
 
 <left>,<center>,<right>
 现在我们把align=""的三个值提出来，发现他们其实自身也是标识，它们可以对单个，单行文字进行围堵，实现他的效果，这样又多了一个途径实现 的对齐效果了，具体的就举例说明了，你可以自行尝试一下，注意，他们可是围堵标识哦。
 
 
 这里把它从换行中分出来，是想大家于 对比一下，这是个建议折行的标识，当用户的分辨率无法完整的显示出一段文字的时候，你就可以插入这个标识,这时候就会发生于 同样的效果,如果达到了条件则没有效果产生，你可以自己尝试一下，它是一个空标识。接着我们来看看HTML两个在排版上非常使用的标识。
 
 <pre>,<listing><xmp>
 预格式化文本标识，他们允许你在HTML原文件里输入空白，并显示出和你在HTML编辑的一模一样的格式，区别就在<pre>显示出来的是设定好了的字体大小，<listing>显示小于设定的一号字体, 〈xmp>则在<pre>的基础上把html里的标识也显示出来。
 
 <pre>
 Please use your card.
 VISA Master
 Here is an order form.
 <ul><li>Fax
 <li>Air Mail</ul>
 </pre>
 
 <listing>
 Please use your card.
 VISA Master
 Here is an order form.
 <ul><li>Fax
 <li>Air Mail</ul>
 </listing>
 
 <xmp>
 Please use your card.
 VISA Master
 Here is an order form.
 <ul><li>Fax
 <li>Air Mail</ul>
 </xmp>
 
 大家可以自己看看三者的效果。
 
 <hr>
 今天的最后一个标识称为水平线。顾名思义，它实现插入一条水平线的效果。
 <HR align="" size="" width="" color="" noshade>。
 
 align=
 设定线条置放位置，可选择：left；right；center 三种设定值。
 
 size=
 设定线条厚度，以像素作单位.
 
 width=
 设定线条长度，可以是绝对值（以像素作单位）或相对值，默认值为 100%。
 
 color=
 设定线条颜色，内定为黑色.
 
 noshade
 设定线条为平面显示，若删去则具阴影或立体，这是默认值。
 
 通过这三天的学习，你是否可以运用已知的标识写出一个网页了呢？呵呵~这就开始尝试一下吧.

Thirteen 发表于 2003-5-27 11:17

[

<a href="http://hsworkshop.51.net" target="_blank"> </a>
 第四天图形标识
 今天我们学习的只有一个标识，重点并不在这个标标识本身，而在于这个标识的参数设置，现在我们就来认识一下吧。
 <img>
 图形对于一个网页来说其占的位置尽次于文字所占的比重，我们同过这个标识在网页中加入一张图片做到图文并茂，它只是一个空连接，现在我们就来看看它的参数设定。
 
 <img src="" width= height= hspace= vspace= border= align="" alt="" lowsrc="">
 
 src=
 首先我们必须向HTML中导入一张图片，这张图片的格式可以是jpg，gif或者png，同时我们还要注意导入图片的途径书写，当你要求导入的图片和显示此图的html在同一个文件夹下，我们就可以只写文件名即可，如则需要完整的途径表示。
 
 width=,height=
 设定图象显示的大小，以象素为单位，不过一般情况下为了保持页面的美观，我们使用真实的大小为佳，通过专业的图形编辑工具来编辑图形的大小。
 
 border=
 设定图象边框的大小，单位也是象素，它可以是任何数值，在现代网页编辑中通常取值为1。
 
 hspace=,vspace=
 设定图象边缘的空白数，hspace设定左右，vspace设定上下，这样可以确保其他元素与图片的距离。
 
 align=（top, middle, bottom, left, right）默认值为 botom
 这个参数昨天我们已经讲过，在这里我们我们需要注意的是它的作用是控制文字的位置，具体的运用我们就通过这下面的例子来看看好了.
 
 alt=
 在图片显示的位置插入一段文字，当图片还没有被读取或这浏览者使用的是文字游览器的时候，这段文字就会显示出来。
 
 lowsrc=
 同样在显示src所显示的图片之前先显示出一张图片，条件也是在src还没有被读取的时候，一般我们用于显示原图片的缩略图，使浏览者不会因为图片读取慢而失去浏览的兴趣。

Thirteen 发表于 2003-5-27 11:18

[

<a href="http://hsworkshop.51.net" target="_blank"> </a>
 第五天表格标识
 表格在网页排版中所占的比重不用说相信大家也都知道，它把整个页面清晰的分成多个区域。专业的网页怎么可以少了对表格的操作呢~现在我们就来看看关于表格的标识。
 
 首先我们必须建立一个表格，我们可以通过<table>着个围堵标识来实现，着个标识的作用就好象<html>告诉浏览器开始处理HTML文件一样，它告诉浏览器现在开始处理表格，其他所有的表格标识都必须写在<table>里面。
 关于它的参数比较多，我们现在一个个来看它有什么作用。
 <table width="" border="" cellspacing="" cellpadding="" align="" valign="" background="" bgcolor="" bordercolor="" bordercolorlight="" bordercolordark="" cols="" rules="" frame="">
 
 windth=
 设定表格的宽度，一般来说在这层我们只需要指定一个表格的宽度就可以了。这个值可以是绝对的也可以是相对的。
 
 border=
 设定表格边框的厚度，当取值为0时或者不用这个参数的时候，表格就不在浏览器中显示出来，但表格中的元素仍然是按表格排列。
 
 cellspacing=
 表格线的厚度，为了和border=区别开来，我们看个例子
 <table width="70" border="1">
 <tr>
 <td>1</td>
 <td>2</td>
 </tr>
 <tr>
 <td>3</td>
 <td>4</td>
 </tr>
 </table>
 
 <table width="70" border="1" cellspacing="5">
 <tr>
 <td>1</td>
 <td>2</td>
 </tr>
 <tr>
 <td>3</td>
 <td>4</td>
 </tr>
 </table>
 [例5-1]
 比较一下这两个例子，我们就可以很清晰的看到两个例子的不同.
 
 cellpadding=""
 文字和格线之间的距离，使文字看起来更清晰。
 
 align=""(left, right, center)
 这个值在前面我们已经重复的介绍过了，这里是对表格的位置进行水平位置设定.
 
 valign=""(top, middle, bottom)
 这是对表格垂直位置的设定.
 
 background=""
 导入表格的背景图片。
 
 bgcolor=""
 设定表格的背景颜色。
 
 bordercolor=""
 设定表格的边框颜色。（注意，当设定border=为0时，这个值无效)
 
 bordercolorlight=""
 设定表格边框向光部分的颜色.
 
 bordercolordark=""
 设定表格边框背光部分的颜色.
 
 cols=""
 表格栏位数目，只是让浏览器在下载表格是先画出整个表格而己.
 
 frame=""(box,above,below,hsides,vsides,lhs,rhs,void)
 显示边框，参数的含义依此是：显示所有边框，只显示上边框，只显示下边框，只显示上下边框，只显示左右边框，只显示左边框，只显示右边框，不显示任何边框.
 
 rules=""(all,groups,rows,cols,none)
 显示分隔线，参数的含义依此是：显示所有分隔线，只显示组与组之间的分隔线，只显示行与行之间的分隔线，只显示列与列之间的分隔线，不显示任何分隔线。
 
 建立了一个表格区，接着我们就要把这个表格分开，那么就必须用到<tr></tr>这个标识，一般我们添加多少个<tr></tr>就表格就会分成多少行。一个表格的基本格式如下:
 <table>
 <tr>
 <td>
 </td>
 </tr>
 </table>
 [例5-2]
 
 现在我们就来看看<tr>的参数设定吧。
 <tr align="" valign="" bgcolor="" bordercolor="" bordercolorlight="" bordercolordark="">
 
 align=""(left, right, center)
 这就不多说了。水平位置的设定.
 
 valign=""(top, middle, bottom)
 垂直位置的设定琀?瑧?瑬;开嫞??????。
 
 bgcolor=""
 这一列的背景色。
 
 bordercolor=""
 这一列的边框颜色。
 
 bordercolorlight=""
 这一列的向光部分.
 
 bordercolordark=""
 这一列的背光部分.
 
 有了列，就要开始设定单元格，可以说单元格就是一个表格的最小单位。我们用过<td></td>来实现.在<tr>下面写入多少个<td></td>就会在这一列中显示出多少个单元格。然后我们来看看对单元格有些什么参数可以设定吧。
 <td width="" height="" colspan="" rowspan="" align="" valign="" bgcolor="" bordercolor="" bordercolorlight="" bordercolordark="" background="">
 
 windth=""
 通过相对值或绝对值设定这个单元格的宽.
 
 height=""
 通过相对值或绝对值设定这个单元格的高.
 
 colspan=""
 rowspan=""
 这里我们看一个例子来说明一下好了.
 
 <table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER">
 <tr>
 <td>第一列第一栏</td>
 <td colspan="2">第一列之第二栏及第三栏</td>
 </tr>
 <tr>
 <td rowspan="2">第二列及第三列之第一栏</td>
 <td>第二列第二栏</td>
 <td>第二列第三栏</td>
 </tr>
 <tr>
 <td>第三列第二栏</td>
 <td>第三列第三栏</td>
 </tr>
 </table>
 第一列第一栏第一列之第二栏及第三栏
 第二列及第三列之第一栏第二列第二栏第二列第三栏
 第三列第二栏第三列第三栏
 
 
 [例5-3]
 同过标识，我们看到这实际上是个三列三行的表格，如果只看第一行第一列是不是认为这是两行两列的呢。没错，colspan就是向右合并单元格，rowspan则是向下合并单元格.
 
 align=""(left, right, center)
 元素水平位置设定.
 
 valign=""(top, middle, bottom)
 元素垂直位置设定.
 
 background=""
 导入单元格的背景图片。
 
 bgcolor=""
 设定单元格的背景颜色。
 
 bordercolor=""
 设定单元格的边框颜色。（注意，当设定border=为0时，这个值无效)
 
 bordercolorlight=""
 设定单元格边框向光部分的颜色.
 
 bordercolordark=""
 设定单元格边框背光部分的颜色.
 
 另一个单元格表示<th></th>，它同样也表示一个单元格，唯一不同的是<TH>所标示的储存格中的文字是以粗体出现，当然若为<TD>所标示的储存格中的文字加上粗体标记便等如<TH>的效果。用它取代<td>即可显示效果,关于它的参数和<td>一样，这里就不详细说明了.
 
 今天最后一个标识<CAPTION>，它可以在表格上显示出一段没有格线的列。通常我们把他来给表格内容命题。关于它的参数有两个,分别是align和valigan,(left, right, center,top, middle, bottom)

Thirteen 发表于 2003-5-27 11:19

[

<a href="http://hsworkshop.51.net" target="_blank"> </a>
 第六天编号标识
 一般我们说明要点的时候，需要对要点分别编上号，这里我们就来看看html中的编号标识。
 <OL> <LI>
 顺次编号，也就是在每一个要点前面加上1,2,3,4……等等编号。它是个围堵标识，常用参数有两个
 <ol type="" start=""></ol>
 
 type=""(1,a,A,i,I)
 选择款式，一共有五种款式，大家可以看看可选值就可以推测出来了。
 
 start=""
 设置第一个编号的数目，它的设定值必须是整数，默认是1。
 
 光有<ol>还是不能在在文字中显示出编号，我们必须对从什么地方开始标记要点进行设定。我们就要通过<LI>着个空标识进行设定。现在我们来看看它的参数。
 <li type="" value="">
 
 type=(disc,circle,square)
 选择标点的款式。需要注意的是这个参数在<ul>中才有效。
 
 value=
 这个参数是设置这一项的编号，和start=的效果用法一样，在这项后面的数值会随之递增,但在前面的则不会改变。
 
 具体的我们就通过一个例子来说明一下好了.
 
 <ol type="a" start="2">
 <li>网页制作
 <li>平面设计
 <li value="1">动画制作
 <li>程序编写
 </ol>
 
 
 网页制作
 平面设计
 动画制作
 程序编写
 
 [例6-1]
 OK?那我们开始认识下一个。
 
 <ul>
 用标点符号表示出要点。常用的参数是type=(disc,circle,square).这就不多说明了吧，看看一个例子相信大家就知道了.
 <ul type="disc">
 <li>网页制作
 <li>平面设计
 <li type="circle">动画制作
 <li type="square">程序编写
 </ul>
 
 
 网页制作
 平面设计
 动画制作
 程序编写
 
 [例6-2]
 
 <MENU> <DIR>
 这两个表示和<ul>的含义一样，这里就不多介绍了。
 
 <DL> <DT> <DD>
 现在我们开始不用<dr>写信试试，呵呵，现在我们就开始用上面三个标识开始吧。首先我们要准备一张信纸，这时候我们就要用到<dl>这个围堵标识，接着我们用<dt>写个头衔，接这呢用<dd>开始写正文部分，试试吧。
 事实上这就是一种分二层的编号标识，所以不用符号及数目.
 
 今天的内容不多，所以可以早点收工了 <img src='images/smiles/smile.gif' smilietext=':)' border='0' style='vertical-align:middle' alt=':)' />

Thirteen 发表于 2003-5-27 11:20

[

<a href="http://hsworkshop.51.net" target="_blank"> </a>
 第七天框架标识
 今天我们会到起点，来认识一下框架。在前面几天里我们已经学习了表格构成一个网页的版面排列。其实在html中版面格式拥有自己的标识，我们可以直接通过框架标识来对网页进行地一次的版面划分。框架标识就是在把网页划分成几个框窗，同时取多个链接。我们也就可以通过这个标识实现在一个页面中同时显示几个页面。这也是许多网站比较常用的排版标识。现在我们就开始今天的学习吧。
 
 <FRAMESET> <FRAME>
 <FRAMESET> 它告诉HTML文件为框架模式，并设定视窗如何分割。 <FRAME> 则只是设定某一个框窗内的参数属性。
 我们现在就来依此看看这两个标识的参数：
 <frameset COLS="" rows="" frameborder="" border= framespacing="" bordercolor="">
 
 cols=""
 垂直切割画面(如分左右两个画面)，接受整数值、百分数， * 则代表占用馀下空间。数值的个数代表分成的视窗数目且以逗号分隔。例如 COLS="30,*,50%" 可以切成三个视窗，第一个视窗是 30 pixels 的宽度，为一绝对分割，第二个视窗是当分配完第一及第三个视窗後剩下的空间，第三个视窗则占整个画面的 50% 宽度为一相对分割。您可自己调整数字。
 
 ROWS=""
 就是横向切割，将画面上下分开，数值设定同上。唯COLS与ROWS两参数尽量不要同在一个<FRAMESET> 标记中，因 Netacape 偶然不能显示这类形的框架，尽量采用多重分割.
 
 frameborder=""
 设定是否显示出边框,它只有两个值0和1，0 表示不要边框，1 表示要显示边框。
 
 border=""
 设定框架的边框厚度，以象素为单位。
 
 bordercolor=""
 设定框架的边框颜色。
 
 framespacing=""
 表示框架与框架间的保留空白的距离。
 
 <frame name="" src="" marginwidth="" marginheight="" scrolling="" frameborder="" noresize framespacing="" bordercolor="">
 
 SRC=""
 设定此框窗中要显示的网页档案名称，每个框窗一定要对应著一个网页档案。你可以使用绝对路径或相对路径。
 
 NAME=""
 设定这个框窗的名称，这样才能指定框架来作连结，必须但任意命名。
 
 frameborder=
 设定框架的边框，其值只有 0 和 1 ， 0 表示不要边框， 1 表示要显示边框。
 
 framespacing=""
 表示框架与框架间的保留空白的距离。
 
 bordercolor=""
 设定框架的边框颜色。
 
 scrolling=""
 设定是否要显示卷轴，YES 表示要显示卷轴，NO 表示无论如何都不要显示， AUTO是视情况显示。
 
 noresize
 设定不让使用者可以改变这个框框的大小，亦没有设定此参数，使用者可以很随意地拉动框架，改变其大小。
 
 marginhight=
 表示框架高度部份边缘所保留的空间。
 
 marginwidth=
 表示框架宽度部份边缘所保留的空间.
 
 呵呵~在这里我想大家自己可以尝试着自己写写，这里提供几个代码自己去分析一下。
 <frameset rows="80,*">
 <frame name="html1" src="html1.html">
 <frame name="html3" src="html3.html">
 </frameset>
 
 <frameset rows="80,*">
 <frame name="html1" src="htm1.html">
 <frameset cols="150,*">
 <frame name="html4" src="html4.html">
 <frame name="html2" src="html2.html">
 </frameset>
 </frameset>
 [例7-1]
 
 <NOFRAMES>
 当别人使用的浏览器太旧，不支援框架这个功能时，他看到的将会是一片空白。为了避免这种情况，可使用 <NOFRAMES> 这个标记，当使用者的浏览器看不到框架时，他就会看到 <NOFRAMES> 与 </NOFRAMES> 之间的内容，而不是一片空白。这些内容可以是提醒浏览转用新的浏览器的字句，甚至是一个没有框架的网页或能自动切换至没有框架的版本亦可。
 
 <frameset rows="80,*">
 <noframes>
 <body>
 很抱歉，馈下使用的浏览器不支援框架功能，请转用新的浏览器。
 </body>
 </noframes>
 <frame name="top" src="a.html">
 <frame name="bottom" src="b.html">
 </frameset>
 若浏览器支援框架，那堋它不会理会 <noframes> 中的东西，但若浏览器不支援框架，由於不认识所有框架标记，不明的标记会被略过，标记包围的东西便被解读出来，所以放在 <noframes>范围内的文字会被显示。
 
 <IFRAME>
 它的作用是在一页网页中间插入一个框窗以显示另一个文件。它是一个围堵标记，但围著的字句只有在浏览器不支援 iframe 标记时才会显示，如<noframes>一样，可以放些提醒字句之类。
 <iframe> 的参数设定如下：
 <iframe src="" name="" align="" width="" height="" marginwidth="" marginheight="" frameborder="" scrolling="">
 
 src=""
 显示此框窗的文件来源除档案名称，必要加上相对或绝对路径。
 
 name=""
 此框窗名称.，
 
 align=""
 可选值为 left, right, top, middle, bottom，这就不解释了.
 
 width="" height=""
 框窗的宽及长，以象素为单位。
 
 marginwidth="" marginheight=""
 该插入的文件与框边所保留的空间。
 
 frameborder=""
 使用 1 表示显示边框， 0 则不显示。（可以是 yes 或 no）
 
 scrolling=""
 使用 Yes 允许卷动（内定）， No 则不允许卷动。
 
 这些就是框架标识了,并不难不是吗？我之所以没有举太多例子说明，是希望大家都可以自己动手动脑去尝试。

Thirteen 发表于 2003-5-27 11:21

[

<a href="http://hsworkshop.51.net" target="_blank"> </a>
 第八天表单标识
 表单是什么，你注册过呢？呵呵~那么你就知道什么是表单了吧。我们通过表单标识来实现一些简单的互交，表单的用处很多，于网上无处不见，当然是配合CGI使用为佳，所以你有意使用或学习CGI的话，表单设计见必需的。一份表单的基本架构是：在<FORM>标记的包围下加上一种或以上的表单输入方式及一个或以上的按键。OK，费话少说，我们开始吧。
 
 <FORM>
 <FORM>是表单的第一个标识，与<html>等等标识性质一样，是为了告诉浏览器现在开始处理表单，其他所有的表单标识都应该写在<form></form>之中。他常用的参数有action=和method=,这两个参数都与cgi有关，action指明cgi的位置，如果你没有cgi程序,你可以把参数设为"mailto:你的Email地址"，这样表单就直接发到你的邮箱。而method则是选择已什么方式传送资料接CGI。它有两个可选值POST和GET。你需要了解的就是POST容许传送大量资料，但GET则只接受低于1K的资料.你可以看看你注册时的源代码，你就回发现methond的值为POST,而如搜索器之类的则为GET.
 
 <INPUT>
 这个标识就是表单中提供给用户的输入形式，这也是今天的一个重点，而这个表示重点就是它的参数设置。（好象是费话哈—_—||）那么我们来仔细看看吧。其实它的常用参数也只有两个,type和name了，其他的参数就在type这个基础上变化，我们一个个的来看，然后总结一下好了
 
 type=(Text, Radio,Checkbox, Password, Submit/Reset, Image, File, Hidden, Button)
 是不是很长，呵呵~没办法，因为功能全嘛~；）我们就从第一个可选值开始。
 
 text
 
 当type=text的时候有以下几个name="",value="",align="",size="",maxlength=""也就是
 <input type="Text" name="" value="" align="" size="" maxlength=""> (下面我们就简单一点写出来好了方便阅读，而重复的参数如果没有什么特别我也不在说明了.)
 
 name=""
 给元件命名。虽说可随便命名，但通常CGI程序中都有指定名称，若转用其它名称便需要修改该CGI程式了，名称可为没空白没特别符号的英文或数字，有大小写的分别.
 
 value=""
 是否在输入栏中加入文字.若不填写则输入栏是空白的，如果在里面添入如Http;\\等等，那么这些文字就会在输入栏中出,当然用户可以删除这些重新键入。
 
 align=""(top, middle, bottom, left, right, texttop, baseline, absmiddle.)
 控制输入文字的位置，一般没有什么用，我们都取默认值.
 
 size=""
 设置输入栏显示的长度.
 
 maxlength=""
 设置可输入字的上限.一个输入栏最大上限是255,一般我们也用不了这么多,象名字最多8个字节就可以了.
 
 <form>
 您的姓名:
 <input type=text name=姓名 maxlength="8" size="10"> 
 您的主页的网址:
 <input type=text name=网址 value=http://>
 </form>
 您的姓名:
 您的主页的网址:
 
 [例8-1]
 
 
 Radio
 <input type="Radio" name="" value="" align="" checked>
 
 value=""
 每一个radio必须及仅有一个 value，（这里没有指定cgi，所以我们不考虑)通常有同时采用两个或以上同 name 不同 value 的 Radio 输入方式，可让使用使任选其一。
 
 checked
 设该Radio为默认被选。同name的各个Radio中只能有一个使用，或全不使用这参数。
 
 <form>
 <input type=radio name=a>
 白色
 <input type=radio name=b checked>
 黑色
 <input type=radio name=c value=huize>
 灰色
 </form>
 白色
 黑色
 
 灰色
 
 
 
 [例8-2]
 
 Checkbox
 <input type="Checkbox" name="" value="" align="" checked>
 
 checked
 设该Checkbox为内定被选。每个Checkbox都是独立的，所以每一个都可使用这参数,不像 Radio。
 
 <form>
 <input type=checkbox name=a>
 白色
 <input type=checkbox name=b checked>
 黑色
 <input type=checkbox name=c value=huize>
 灰色
 </form>
 白色
 黑色
 
 灰色
 
 
 
 [例8-3]
 
 Password
 <input type="Password" name="" value="" align="" size="" maxlength="">
 它和text的区别是他其中的文字是以*号显示出来.
 
 <form>
 您的姓名:
 <input type=text name=姓名 maxlength="8" size="10"> 
 您的密码:
 <input type=Password name=密码 value="1234567">
 </form>
 您的姓名:
 您的密码:
 
 [例8-4]
 
 Submit\Reset
 <input type="Submit" name="" value="" align="">
 <input type="" value="" align="">
 前者为传送按钮，后者为清除按钮.
 
 name=""
 Submit的功能随name的不同而不同,须和 CGI 配合。若你只需要普通的传送键，则是其内定,不必用此参数。
 
 value=""
 这个值不是输给CGI的，而是显示在按键上，可以不用，传送键的内定值为 Submit Query，清除键的内定值为 Reset。
 
 
 <form>
 您的姓名:
 <input type=text name=姓名> 
 您的主页的网址:
 <input type=text name=网址 value=http://> 
 密码:
 <input type=password name=密码> 
 <input type=submit value="发送"><input type=reset value="删除">
 </form>
 您的姓名:
 您的主页的网址:
 密码:
 
 
 [例8-5]
 
 
 Image
 <input type="Image" name="" align="" src="">
 这通常用以取代 Submit 及 Reset 两个按键，因为由程式产生的按键并不漂亮，这 Image 参数便容许你采用自已制造的按键。
 
 name=""
 所要代表的按键，可以是 submit, reset, 或其它。
 
 src=""
 按键图片来源.
 
 <form>
 您的姓名:
 <input type=text name=姓名> 
 您的主页的网址:
 <input type=text name=网址 value=http://> 
 密码:
 <input type=password name=密码> 
 <input type="Image" name="submit" align="BOTTOM" src="hs.jpg">
 <input type="Image" name="reset" align="BOTTOM" src="hs.jpg">
 </form>
 您的姓名:
 您的主页的网址:
 密码:
 
 
 [例8-6]
 
 File
 <input type="File" name="" align="" size="" maxlength="" accept="\l">
 
 name=""
 这文件传输的名称，用以识别之用。
 
 accept=""
 所接受的文件类别，有二十六种选择，但可不设定。
 <FORM>
 <INPUT type=file maxLength=100 name=upload size=30accept="text/html">
 </FORM>
 
 
 [例8-7]
 
 Hidden
 <input type="Hidden" name="" value="">
 
 输入方式为隐藏或内定。它不会显示任何输入介面，而是一个内定值随表单一起传给CGI，列如由CGI产生的会员号码，或传入可更改的参数以调整 CGI 而避免修改CGI程式码。
 
 
 Button
 <input type="Button" name="" value="">
 
 这是一般按键。常配合Java Script作为其启动按键。
 
 value=""
 按键显示名称。
 <form>
 <input type="Button" value="没有事件发生">
 </form>
 
 
 [例8-8]
 
 <SELECT> <OPTION>
 <SELECT>是卷动选单标记，每一选项皆由<OPTION>标识,<SELECT>的常用参数有
 <select name="" size="" multiple>
 
 name=""
 这卷动选单的名称，作识别之用，将会传及 CGI。
 
 size=""
 这卷动选单的列数，即其高度，请自行修改。若使用此参数则不会有Pop Up效果。
 
 multiple
 令这卷动选单容许多重选择。
 
 <OPTION>的常用参数有
 <option value="" selected>
 
 value=""
 这选项的值,将会传及 CGI,不同选项必须有不同的值。
 
 selected
 设该选项为默认被选。一个单选卷动选单只能有一项或零个默认被选。
 我们只对普通的进行举例好了，其他的大家可以自己尝试。 <form>你喜欢什么颜色:
 <select name="1">
 <option value="A1">白色</option>
 <option value="B2" selected>黑色</option>
 <option value="C3">灰色</option>
 </select>
 </form>
 你喜欢什么颜色: 白色黑色灰色
 
 
 [例8-9]
 
 <TEXTAREA>
 <TEXTAREA>是表单文字区块标记，常用于个人简历，个性签名等需要填写大量资料的用途。
 
 <TEXTAREA> 的常用参数有：
 <textarea name="" cols="" rows="" wrap="">
 
 name=""
 这文字区块的名称，作识别之用，将会传及 CGI。
 
 cols=""
 这文字区块的宽度.
 
 rows=""
 这文字区块的高度.
 
 wrap=""(off, physical, virtual)
 设定其折行问题，off 表示不使用此属性，physical 时则会强迫浏览器在送资料到 CGI时，必须将实№文字中的换行并送出，设为 virtual 时则送出连续成串的字（除非使用者按了键盘的 RETURN / ENTER）。
 
 <form> 个人简历:
 <textarea name="comments" cols="40" rows="4" wrap="VIRTUAL">
 在这里输入你的简历.</textarea>
 </form>
 个人简历:
 在这里输入你的简历.
 
 [例8-10]

Thirteen 发表于 2003-5-27 11:22

[

<a href="http://hsworkshop.51.net" target="_blank"> </a>
 第九天多媒体标识
 通过前面的学习，我们可以用HTML实现一个基本的标准网页了。今天呢我们来实现一个多媒体网页。
 
 最常见的是在网页中插入音乐背景，我们就可以通过<BGSOUND>来实现，这个标识的主要参数有
 <BGSOUND src="" autostart= loop=>
 
 src=""
 设定音乐文件的位置。
 
 autostart=(true, false)
 是否在音乐文件下载完之后，就自动播放音乐。true是，false否。
 
 loop=(x,infinite)
 是否自动反覆播放。X代表数值，infinite表示无限次重复。
 
 <EMBED>
 <EMBED> 是用以插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU 等等，区别就在用户可以控制文件的播放.
 <EMBED src="" autostart="" loop="" hidden="" STARTTIME="" VOLUME="" WIDTH="" HIGH="" ALIGN="" CONTROLS="">
 
 src=""
 设定文件来源.
 
 autostart=（true，false）
 是否在文件下载完之后就自动播放音乐。true 是，false 否。
 
 loop=（X，true，false）
 是否自动反覆播放。X代表数值，true 是， false 否。
 
 HIDDEN=""（true，NO）
 是否完全隐藏控制画面，true 为是，no 为否。
 
 STARTTIME="分:秒"
 设定歌曲开始播放的时间。
 
 VOLUME=""
 设定量的大小，数值是0到100之间。内定则为使用者系统本身之设定。
 
 WIDTH="整数" 和 HIGH="整数"
 设定控制画面的宽度和高度。
 
 ALIGN=""(top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、absbottom)
 设定控制画面和旁边文字的对齐.
 
 CONTROLS=""（console，smallconsole，playbutton，pausecutton，stopbutton，volumelever）
 设定控制画面的外貌。默认值是console,console一般正常的面板,smallconsole较小的版面，playbutton 只显示播放按钮,pausecutton 只显示暂停按钮，stopbutton 只显示停止按钮，volumelever 只显示音量调整钮。
 
 现在我们来看看以前我们接触过的一个标识吧，<img>我只所以没有在介绍图形标识的时候描述这个参数，是想大家把他区分开来。我们也可以用这个标识添加视频剪辑.这里就不再重复前面介绍过的标识了，只介绍和多媒体有关的。
 <img src="" dynsrc="" start= controls= loop= loopdelay=>
 
 SRC=
 在视频还没有下载完的时候，在播放视频的位置添加一张图片。
 
 dynsrc=
 设置视频的位置。
 
 start=（fileopen,mouseover）
 告诉浏览器什么时候开始播放视频，fileopen即在链接到含本标记的页面时开始播放，mouseover 是指您把鼠标移到播放区域之上时才开始播放。
 
 CONTROLS=""（console，smallconsole，playbutton，pausecutton，stopbutton，volumelever）
 设定控制画面的外貌。默认值是console,console一般正常的面板,smallconsole较小的版面，playbutton 只显示播放按钮,pausecutton 只显示暂停按钮，stopbutton 只显示停止按钮，volumelever 只显示音量调整钮.
 
 loop=（X，true，false）
 是否自动反覆播放。X代表数值，true 是， false 否。
 
 loopdelay=
 设置重复播放延时的时间。

Thirteen 发表于 2003-5-27 11:23

[

<a href="http://hsworkshop.51.net" target="_blank"> </a>
 第十天链接标记
 众所周知一个网站并不是只有一个网页构成的，我们今天就来说说链接标识，让你的网页连接起来。
 <A>
 连结标识，由 <A> 与 </A> 所围的文字、图片等等可以成为一个连结。
 <a href="http://" target="_blank">
 
 href=\"
 这参数不能与另一参数 name 同时使用，使用这参数才能造成可按的连结。
 当作为一外部连结时（即与其他网页连接起来的时候。）：href所设定的是该连结所要连到的文件名称，若该文件与此html档不是同在一目录请加上适当的路径，相对绝对皆可。
 当作为一内部连结时(即在同一个网页里面跳转): href所设定的是该连结所要连到的同文件内参考点或指定文件之参考点，且不要包围任何字画只加上结束标示</a>便可以
 
 name=""
 这参数是为文件埋下参考点，作为被连结，不会被显示。所以说造成一个内部连结,要使用两次<A>连结标识。我们来看一个例子：
 <a href="http://#zheli" target="_blank">我们看这里</a>
 <a name="zheli">就是这里了</a>
 [例10-1]
 
 target="" (_blank, _parent, _self, _top,框窗名称)
 设定连结被按後之结果所要显示的视窗。
 
 target="框窗名称"
 这只运用於框架中，若被设定则连结结果将显示於该“框窗名称”之框窗中，框窗名称是事先由框架标记所命名。
 
 target="_blank" 或 target="new"
 将连结的画面内容，开在新的浏览视窗中。
 
 target="_parent"
 将连结的画面内容，当成文件的上一个画面。
 
 target="_self"
 将连结的画面内容，显示在目前的视窗中。
 
 target="_top"
 将框架中连结的画面内容，显示在没有框架的视窗中。
 
 <BASE>
 连结基准标记，用以改变文件中所有连结标记的参数内定值。它只能应用於文件的开头部分，即标记 <HEAD> 与 </HEAD> 之间。
 <base href="" target="">
 
 href=""
 设定该页网页中所有HTTP文件及图型（包括相对路径连结及<IMG>图形标记等）的内定路径，其他如<a href="ftp://及gopher://等则不受影响。这参数只可填入一个相对或绝对的路径，不必填入档案名称。一般相对路径连结及" target="_blank">ftp://及gopher://等则不受影响。这参数只...阆喽月肪读

Thirteen 发表于 2003-5-27 11:24

[

<a href="http://hsworkshop.51.net" target="_blank"> </a>
 第十一章其他标识
 通过前面的标识学习，我们已经可以建立一个完整的网站了，今天就让我们结束对HTML标识的学习吧。在这里我们把一些不好归类的标识统一的介绍一下。
 
 <MARQUEE>
 <MARQUEE>译为「跑马灯」如Status Bar的那种，意指走动或卷动的文字，其参数设定如下：
 <marquee behavior="" direction="" bgcolor="" height="" width="" hspace="" vspace="" loop="" scrollamount="" scrolldelay="">
 
 behavior=""(SCROLL, SLIDE,ALTERNATE)
 决定文字的卷动方式：SCROLL一般卷动;SLIDE如幻灯片，一格格的，效果是文字一接触左边便全部消失。
 ALTERNATE文字向左右两边撞来撞去。
 
 direction=""(left,right,up,down)
 设定文字的卷动方向，LEFT表示向左,RIGHT表示向右,up表示向上,down表示向下。
 
 bgcolor=""
 设定文字卷动范围的背景颜色。
 
 height="" width=""
 设定文字卷动范围，可采用相对或绝对值，单位为像素。
 
 hspace="" vspace=""
 设定文字的水平及垂直空白位置。
 
 loop=""(X,INFINITE)
 设定文字卷动次数，其值可以是正整数或INFINITE，INFINITE表示无限次。
 
 scrollamount=""
 每格文字之间的间隔，单位是像素。
 
 scrolldelay=""
 文字卷动的停顿时间，单位是毫秒。
 
 <ISINDEX>
 <ISINDEX> 可让某些Web Server找寻网页内的关键字，假如你的Web Server提供这样的找寻功能，使用者的浏览器也支援这些找寻功能，载入网页时就会看到一个简单的找寻方块。其用法直接，没有参数，本来是要放在<HEAD>标记内的，但把它放在<BODY>标记内亦不见有问题.
 
 <META>
 <META> 是放於 <HEAD>与</HEAD>之间的标记，功用与变化等对，所以我公式化地介绍。
 
 <meta name="Description" content="This is Chris's Home Page">
 该网页的描述，作用於寻找引擎的登录
 
 <meta name="Keywords" content="Chris, Web, Music, photo">
 该网页的关键字，作用於寻找引擎的登录
 
 <meta http-equiv="Expires" content="Tue, 09 Dec 1997 00:00:00 GMT">
 <meta http-equiv="Pragma" content="no-cache">
 以上行功能相同，都是要浏览器重新载入该页，不要使用快取档案，当然可以修改该 Expire 时间。
 
 <meta http-equiv="Content-Type" content="text/html; charset=big5">
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 设定这是 HTML 文件及其编码语系，中文网页请使用 big5 那行，或者不设编码亦可，纯英文网页建议使用 iso-8859-1。
 
 <meta name="GENERATOR" content="Mozilla/4.04 [en] (Win95; I) [Netscape]">
 <meta name="GENERATOR" content="Microsoft FrontPage 3.0">
 这只表示该网页由甚堋编辑器写成。
 
 <meta http-equiv="refresh" content="10; url=http://www.hkiwc.com">
 这一行较为实用，能於预定秒数内自动转到指定的网址。原始码中 10 表示 10秒。
 
 <LINK>
 <LINK> 用来将目前文件与其它 URL 作连结，但不会有连结按钮，用於 <HEAD> 标记间。
 
 到这里为止，我们就已经把HTML的标识认识完了，当然在编著的过程中难免会出现或多或少的错误，希望大家可以指出，方便更过的朋友学习。关于HTML字符在这里就不介绍了，大家可以参考其他的资料。
 
 
 T.L.G[<a href="http://hsworkshop.51.net" target="_blank">http://hsworkshop.51.net</a>]

Thirteen 发表于 2003-5-27 11:36

[

这本教程参照清华大学图书馆资料,太平电脑学院资料已及<a href="http://www.w3.org" target="_blank">http://www.w3.org</a>
 站点资料,主要针对IE4.0以上版本编写,这是偶第一次编教程,难免有所疏漏,还望大家指正.
 部分实例效果请参照本人站点中<a href="http://hsworkshop.51.net/jiaocheng/htmlj.html" target="_blank">HTML基础教程</a>

xiangzi920 发表于 2005-12-9 23:13

[

楼主果然辛苦!!
 我代表广大水名感谢你,
 楼主辛苦了!

页: [1]

【开放注册】苹果手机软件下载论坛|中国苹果用户网|苹果BT下载种子torrent发布's Archiver

[

[

[

[

[

[

[

[

[

[

[

[

[