社会化媒体
了解更多>>
桂ICP备 号
桂公网安备 36号
阅读下一篇
自媒体运营攻略
行业经验交流
Hi，在你登录以后，就可以永久免费的收藏任何您感兴趣的内容，关注感兴趣的作者！
请输入正确的邮箱
已有帐号请点击
帐号创建成功！
我们刚刚给你发送了一封验证邮件
请在48小时内查收邮件,并按照提示验证邮箱
感谢你对微口网的信任与支持
如果你没有收到邮件，请留意垃圾箱 或 重新发送
你输入的邮箱还未注册
还没有帐号请点击
你输入的邮箱还未注册
又想起来了？
邮件发送成功！
我们刚刚给你发送了一封邮件
请在5分钟内查收邮件,并按照提示重置密码
感谢你对微口网的信任与支持
如果你没有收到邮件，请留意垃圾箱 或 重新发送
对不起，你的帐号尚未验证
如果你没有收到邮件，请留意垃圾箱 或
意见与建议
请留下您的联系方式
* 留下您正确的联系方式，以便工作人员尽快与你取得联系
新！变现功能上线
现在，只要登录微口网账号，点击“我要变现”，就能领取任务，轻松推广商品，坐收丰厚佣金，只要一分钟操作，就能获取50%超高提成！
合适的商品更容易推广，你可以根据公众号定位，选择调性最适合推广的商品；如果没有公众号，你也可以选择自己喜爱或者符合自己品味的商品。
优秀的产品文案能让我们赚更多钱，你可以直接使用我们平台提供的文案素材；如果你不想用，那么你可以自己随心撰写合适的产品文案。
关于购买链接
你可以将购买链接粘贴在“阅读原文”处；或者分享购买链接/二维码至社交平台或社交群内。只要有用户通过此链接购买了商品即可获得丰厚提成！
转藏至我的藏点html基础—通俗讲法—教你看懂页面代码
帖子348&缘分币145 Y&阅读权限20&注册时间&
16:27 
html基础—通俗讲法—教你看懂页面代码
喜欢下载下来看的朋友请直接拿附件哦。 希望可以帮助对html零基础的朋友。有问题可以回帖讨论。大家一起研究研究。
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&把他们给包起来。
好了，咱们来大体看看网页的结构：
& &&title&
& &&/title&
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&，有兴趣的朋友可以任意设置他们的值！
HTML基础第三讲---字体
同样我们在这里继续讲一下它的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=#就是从你的电脑获得的字体，大家可以点击
&&7、字符实体(Entities)，字符实体一般用在把html里的符号显示在页面上比如&、&等，如果你单独的打上&，页面也可以显示，但如果你想显示&b&这几个字符，怎么办呢？就是它啦。
&&&#; #=字符实体名称 或者 ascii 值
&&&& && && &&&&
&&&& && && && &&
&&&& && && && &&
& && && && &
&&这些只是一小部分，那么要显示&b&就要写成&b&了。
&&以上学到的我们可以综合使用：比如&font size=2 color=#ff0000&&i&&b&文字&/b&&/i&&/font&
注意写的时候要前后一致前面&b&后边对应的也应该&/b&
&&好了，关于字体就讲完了！
HTML基础第四讲---图像
图像，也就是images，在html语法中用img来表示，其基本的语法是：
& &&img src=#& #=图象的 URL，关于url就是指的是图像在网上的地址。
& &&img alt=#& #=在浏览器尚未完全读入图象时，在图象位置显示的文字；也是图像显示以后，当鼠标放在图片上时所显示的文字。
& &图象在页面中的对齐/布局：
& &语法：&img align=#& #=left, center, right，使用图像的align属性，其实这一属性布置在这里用到，以后我们在学习表格的时候也会遇到align，它的值left, center, right就是他的中文意思，left居左，center居中，right居右。
& &图象和文字的对齐：
& &语法：&img align=#& #=top, middle, bottom，这里的align和上边的实现的效果不一样，大家从它的值可以看出，它所显示出来的是文字在图片的靠上边、中间、底端。大家可以对比这看看各自的效果，很容易记住哦！
& &图像的边框：&img border=#& #=value数字，指的是这个图像的边的宽度！
& &示例：&img src=1.jpg&&border=1&
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）：
&HEAD& &TITLE& Cell Spacing &/TITLE&&/HEAD&
&TABLE BORDER=1&
&CAPTION& Normal Table &/CAPTION&
&TD& First Column &/TD&
&TD&Second Column &/TD&
&TABLE BORDER=1 CELLSPACING=20&
&CAPTION& Table With Cell Spacing &/CAPTION&
&TD& First Column &/TD&
&TD&Second Column &/TD&
&TABLE BORDER=1 CELLPADDING=20&
&CAPTION& Table With Cell Padding &/CAPTION&
&TD& First Column &/TD&
&TD&Second Column &/TD&
控制表格和表项的大小
某些时候你可能想让表格显示出来大一些，你可以用&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的值，下面的例子说明了这个属性的用法：
&HEAD& &TITLE& Table Color &/TITLE& &/HEAD&
&BODY BGCOLOR=white&
&TABLE BGCOLOR=lightblue CELLPADDING=10&
&TD& I have a blue background &/TD&
当这个例子中的文字在浏览器上显示时，它处于一个浅蓝色的框中，这对于突出主页上主体文字中某些特定的文本是很有用的。例如，你可以使用这种方法来突出一个引用、标题或是网页上一个简短的注释。
你也可以为表格中某一行甚至是某一个表项使用BGCOLOR属性。例如，可以用不同的颜色来区分表格中不同列的数据。
BGCOLOR属性的一个更令人兴奋的用处可能是设置你网页的整体颜色，如果你将表格的宽度设为屏幕的宽度，你可以建立一个具有多列的网页，而每一列都具有不同的颜色。下面的例子建立了一个有两列不同颜色的网页：
&HEAD& &TITLE& Two Color Columns &/TITLE& &/HEAD&
&BODY BGCOLOR=white&
&TABLE WIDTH=100% HEIGHT=100%&
&TD BGCOLOR=Olive ALIGN=center& I have a olive background &/TD&
&TD BGCOLOR=Aqua ALIGN=center& I have a aqua background &/TD&
Netscape和Microsoft的浏览器都允许你为表格设定背景图片（见图6.21），你可以通过&TABLE&标识符的BACKGROUND属性来指定一幅图象：
&HEAD& &TITLE& Two Color Columns &/TITLE& &/HEAD&
&BODY BGCOLOR=white&
&TABLE WIDTH=50% HEIGHT=100% BACKGROUND=myimage.gif&
&TD ALIGN=center& I have a checkered background &/TD&
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。在学完下一章后，你就可以设计出任何你曾经看过，甚至想过的。
[ 本帖最后由 hellowwj 于
16:38 编辑 ]
(258.66 KB)
16:38, 下载次数: 739
帖子348&缘分币145 Y&阅读权限20&注册时间&
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&& && && && && &&!--行结束--&
& &&td&A&/td&&td&B&/td&&td&C&/td&&&&!--定义表格的表元--&&&
& &&/table&
(673 Bytes)
& &不带边框的表格：
& &&table&
& &&th&Food&/th&&th&Drink&/th&&th&Sweet&/th&
& &&td&A&/td&&td&B&/td&&td&C&/td&&&
& &&/tr&& &
& &&/table&
(306 Bytes)
& &跨多行、多列的表元(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&
(904 Bytes)
& &跨多行的表元 &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&
&&&th&Food&/th&&th&Drink&/th&&th&Sweet&/th&
& & &td align=left&A&/td&
& & &td align=center&B&/td&
& & &td align=right&C&/td&&&
&&&/table&
(716 Bytes)
& &&tr valign=#&
& &&th valign=#& #=top, middle, bottom, baseline
& &&td valign=#&
& &&table border height=100&
& && && && && &&th&Food&/th&&th&Drink&/th&
& && && && && &&th&Sweet&/th&&th&Other&/th&
& && && && && &&td valign=top&A&/td&
& && && && && &&td valign=middle&B&/td&
& && && && && &&td valign=bottom&C&/td&
& && && && && &&td valign=baseline&D&/td&
& &&/table&
& &好了，表格的基本的应用就是这些了。大家有什么问题，积极发问啊！！！
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. 别急、别急，分割窗口可是一门学问，要分割也是要一步一步来的。看看刚刚那例子，想象画面是一个蛋糕，你要怎么割，才能割成那样呢？
原始码 呈现结果 &HTML&
&TITLE&框窗实作&/TITLE&
&/HTML& 　2. 各位会发现，奇怪，在上面的语法中，怎么都没见到&BODY&&/BODY&熟悉的身影？呵呵...没错，它已经被待会儿要加进去的&FRAMESET&&/FRAMESET&卷标给取代了！也就是说，如果我们要分割画面，就要先用&FRAMESET&卷标告诉计算机说：『喂！我要开始分割了！』此时，&BODY&是派不上用场的，所以躲到一旁凉快去了！&&
3. 现在开始动手割割看啰！我们先将画面分成左右两边（左边就是框窗 1 了，右边就暂定为 2 等一下还要分割呢！），如下图：
原始码 呈现结果
&TITLE&框窗实作&/TITLE&
&FRAMESET COLS=120,* &
　&FRAME SRC=a.htm NAME=1&
　&FRAME SRC=b.htm NAME=2&
&/FRAMESET&
　<font color="#. 在&FRAMESET&中，我们要告诉计算机到底是要左右分（COLS）？还是上下分（ROWS）。一开始我们是左右分，所以我们写成&FRAMESET COLS=120,* &。COLS=120,* 就是说，左边那一栏强制定为 120点，右边则随窗口大小而变。除了直接写点数外，我们亦可用百分比来表示，例如COLS=20%,80%也是可以的。 <font color="#. 然后，再将右边的框窗再割成上下两个画面（也就是框窗 2 和 3 了）。如下图：&&
原始码 呈现结果
&TITLE&框窗实作&/TITLE&
&FRAMESET COLS=120,*&
　&FRAME SRC=a.htm NAME=1&
　&FRAMESET ROWS=100,*&
　　&FRAME SRC=b.htm NAME=2&
　　&FRAME SRC=c.htm NAME=3&
　&/FRAMESET&
&/FRAMESET&
　6. 看见了没？原本的&FRAME SRC=b.htm NAME=2&（在第 3 点的语法中）被另一组&FRAMESET ROWS=100,* &所取代了！所以要注意喔！第二组&FRAMESET ROWS=100,* &是被第一组&FRAMESET COLS=120,* &所包围起来的喔！（乱七八糟了对不对？）
7. 呵呵...不知不觉就大功告成了，其实只要将最后完成的那些语法存成 index.htm，然后再准备三个档 a.htm 、b.htm 、c.htm那么就完工啰！当然，这是一个最简单的分割法，我们会再将一些进阶的卷标在底下一一说明。
【其它卷标参数说明】
&FRAMESET COLS=120,* frameborder=0 framespacing=5&
1. COLS=120,*
就是垂直切割画面啦！你可以一次切成左右两个画面，当然也可以切成三个，很简单只要写成 COLS=30,*,50 （数字随便您自己调整啦！），依此类推，四个以上当然就是四组数字啦！
2. ROWS=120,*
就是横向切割画面，也就是将画面上下分开，切法同上。
3. frameborder=0
设定框架的边框，其值只有 0 和 1 ， 0 就是不要边框， 1 就是要显示边框。边框是无法调整粗细的。
4. framespacing=5
表示框架与框架间的保留空白的距离，以免看起来太挤。
&FRAME SRC=a.htm NAME=1 frameborder=0 scrolling=no noresize marginhight=2 marginwidth=2&
1. SRC=a.htm
设定此框架中要显示的网页名称，每个框架一定要对应一个网页，否则就会产生错误，这里就是要您填入对应网页的名称。（如果该网页在不同目录，记得路径要写清楚）
设定这个框架的名称，这样才能指定框架来作连结，所以一定要设定喔！当然名称随你高兴取名。
3. frameborder=0
设定框架的边框，其值只有 0 和 1 ， 0 就是不要边框， 1 就是要显示边框。边框是无法调整粗细的。
4. scrolling=no
设定是否要显示滚动条，YES是要显示滚动条，NO是无论如何都不要显示，AUTO是视情况显示。
5. noresize
设定不让使用者可以改变这个框框的大小，如果没有设定这个参数，使用者可以很容易的拉动框架，改变其大小。
6. marginhight=2
表示框架高度部份边缘所保留的空间。
7. marginwidth=2
表示框架宽度部份边缘所保留的空间。
【相关用法】
◆ &noframe&
1. 使用方法：&noframe&请换有支持Frame功能的浏览器&/noframe&
2. 卷标解说：有些浏览器较为老旧，无法显示Frame的功能，因此，就要使用此卷标，让这些网友知道，该换换浏览器了。或者，你也可以在这卷标中，摆上没有Frame语法的网页卷标，那么，没有支持Frame功能的浏览器，便会自动显示没有Frame语法的网页。
◆ target=框窗名称
1. 使用方法：&A HREF=d1-1.htm target=3&显示内容&/A&
2. 卷标解说：常常有一个情况是，我想在框窗 1 的地方按下连结，但是希望他的内容出现在框窗 3 中（请参照上面那个图），那应该如何写呢？就像上面加个 target=框窗名称 就行啦！
◆ target=_top
1. 使用方法：&A HREF=http://www.wrclub.net target=_top&网人俱乐部&/A&
2. 卷标解说：有时候，在框窗里会连结到别的站，却发现，新连结的这个站，竟然被框窗包住了，不但难看，而且可能会吃上官司说！所以，这时候你必需加入 target=_top这个参数，那么，这个新连到的网站，就会重新占据整个屏幕啦！
HTML基础第八讲---序列卷标
& &什么叫做序列卷标？其实，这是一个大家都蛮熟悉的东西，只是在网页中换个名称来称呼罢了，序列卷标的功能在WORD里面叫做「项目符号及编号」，也就是将每一要点以数字，如：1.2.3.4…或符号一条一条的清楚的列出的功能。
【无序卷标】
序列卷标基本上可分为两种，一种是「无序条列」，一种是「有序条列」。所谓「无序条列」当然就是意指各条列间并无顺序关系，纯粹只是利用条列式方法来呈现资料而已，此种无序卷标，在各条列前面均有一符号以示区隔。至于「有序条列」就是指各条列之间是有顺序的，从1、2、3…一直延伸下去。
我们先来看看「无序列表卷标」如何使用： 原始码呈现结果 &UL&
&LI&姓名：吴弘凯
&LI&生日：
&LI&星座：双子座
&/UL&姓名：吴弘凯生日：星座：双子座其中&UL&卷标即为「无序列表卷标」，每增加一列内容，就必须加一个&LI&。
前面的符号一定是要圆形的吗？不，我们可以加入TYPE=形状名称属性来改变其符号形状，一共有三个选择：DISK（实心圆）、SQUARE（小正方形）、CIRCLE（空心圆）三种（由于本页使用CSS故仅于Netscape看得出效果。）： 原始码呈现结果 &UL TYPE=CIRCLE&
&LI&姓名：吴弘凯
&LI&生日：
&LI&星座：双子座
&/UL&姓名：吴弘凯生日：星座：双子座【有序卷标】
接下来，我们来看看「有序列表卷标」如何使用： 原始码呈现结果 &OL&
&LI&姓名：吴弘凯
&LI&生日：
&LI&星座：双子座
&/OL&姓名：吴弘凯生日：星座：双子座其中&OL&卷标即为「有序列表卷标」，每增加一列内容，就必须加一个&LI&。
和无序列表卷标一样，我们也可以选择不同的符号来显示顺序，一样是用TYPE属性来作更改，一更有五种符号：1（数字）、A（大写英文字母）、a（小写英文字母）、I（大写罗马字母）、i（小写罗马字母）等五种： 原始码呈现结果 &OL TYPE=A&
&LI&姓名：吴弘凯
&LI&生日：
&LI&星座：双子座
&/OL&姓名：吴弘凯生日：星座：双子座另外，我们亦可指定序列起始的数目，其方法如下： 原始码呈现结果 &OL START=8&
&LI&姓名：吴弘凯
&LI&生日：
&LI&星座：双子座
(560 Bytes)
【定义列表卷标】
接下来我们要说明的这个卷标，是「定义列表卷标」也是属于序列卷标之一。我们先来举个例子，我们常常会在文章中看见这样的格式： CSS（Cascading style sheet）&& CSS是由W3C于1996年12月所公布的一项新技术，什么叫做Cascading style sheet？简单说来他是一种具有阶层性的形式设定，能够让网页设计者在设计网页时，对于网页上的任何对象均有更佳的操控性…
网页里也有可以做到这种效果的卷标喔！现在要来跟各位说的就是这个卷标。咱们先来看看这卷标的用法：我们先来看看「定义列表卷标」如何使用 原始码呈现结果 &DL&
&DD&标题的内容说明
(374 Bytes)
HTML基础第九讲---表单
最基本的留言版应该大家都用过吧！没错这就是一个表单运用很好的例子。表单提供了一个管道让读者发表心声，让网站不再只是设计者的天下，而是能够让更多网友共同参与的地方。另外在商业用途上，表单也扮演着相当吃重的角色，藉由这些表单配合相关程序，使得公司能够在网络上发展电子商务，所以说表单可以说是网页实用化、商务化相当重要的一环喔！
【表单的用途】
对于一般的网页设计初学者而言，表单功能其实并不常用，因为表单通常必须配合着CGI、JAVA Script程序或是ASP程序来运作，不然表单单独存在的意义并不大。不过，一旦有机会将表单运用到网页中时，您的网页将摆脱单向呈现，而开始迈入和使用者互动的阶段喔！ 本单元纯粹以介绍各式表单为主，至于一些CGI或ASP观念在此工友就不提出了，因为提供零碎的观念，倒不如去看看专门介绍CGI的书籍来的妥当。
【各种输入类型】 1. 文字输入列：每个表单之所以会有不同的类型，原因就在于TYPE=表单类型设定的不同而已，我们就先来看看第一个类型：文字输入列。文字输入列的形态就是TYPE=TEXT，其使用方法如下：
　 呈现结果姓名：
(212 Bytes)
原始码&FORM&
姓名：&INPUT TYPE=TEXT NAME=NAME SIZE=20&
&/FORM&2.其有下列可设定之属性：
o NAME=名称，是设定此一字段的名称，程序中常会用到。
o SIZE=数值，是设定此一字段显现的宽度。
o VALUE=预设内容，是设定此一字段的预设内容。
o ALIGN=对齐方式，是设定此一字段的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、ABSBOTTOM（绝对置下）等。
o MAXLENGTH=数值，是设定此一字段可设定输入的最大长度。
3. 单选核软单：利用TYPE=RADIO就会产生单选核软单，单选核软单通常是好几个选项一起摆出来供使用者点选，一次只能从中选一个，故为单选核软单。
　 呈现结果性別：
(223 Bytes)
原始码&FORM&
男 &INPUT TYPE=RADIO NAME=SEX VALUE=BOY&
女 &INPUT TYPE=RADIO NAME=SEX VALUE=GIRL&
&/FORM&4. 其有下列可设定之属性：
o NAME=名称，是设定此一字段的名称，程序中常会用到。
o VALUE=内容，是设定此一字段的内容、值或是意义。
o ALIGN=对齐方式，是设定此一字段的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、ABSBOTTOM（绝对置下）等。
o CHECKED，是设定此一字段为预设选取值。
5. 复选核软单：利用TYPE= CHECKBOX 就会产生复选核软单，复选核软单通常是好几个选项一起摆出来供使用者点选，一次可以同时选好几个，故为复选核软单。
　 呈现结果喜好：
(278 Bytes)
原始码&FORM&
&INPUT TYPE=CHECKBOX NAME=SEX VALUE=MOVIE&电影
&INPUT TYPE=CHECKBOX NAME=SEX VALUE=BOOK&看书
&/FORM&6. 其有下列可设定之属性：
o NAME=名称，是设定此一字段的名称，程序中常会用到。
o VALUE=内容，是设定此一字段的内容、值或是意义。
o ALIGN=对齐方式，是设定此一字段的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、ABSBOTTOM（绝对置下）等。
o CHECKED，是设定此一字段为预设选取值。
7. 密码窗体：利用TYPE= PASSWORD 就会产生一个密码窗体，密码窗体和文字输入窗体长得几乎一样，差别就在于密码窗体在输入时全部会以星号来取代输入的文字，以防他人偷窥。
呈现结果请输入密码：
(212 Bytes)
原始码&FORM&
请输入密码：&INPUT TYPE=PASSWORD NAME=INPUT&
8. 其有下列可设定之属性：
o NAME=名称，是设定此一字段的名称，程序中常会用到。
o SIZE=数值，是设定此一字段显现的宽度。
o VALUE=预设内容，是设定此一字段的预设内容，不过呈现出来仍是星号。
o ALIGN=对齐方式，是设定此一字段的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、ABSBOTTOM（绝对置下）等。
o MAXLENGTH=数值，是设定此一字段可设定输入的最大长度。
9. 送出按钮：通常我们窗体填完之后，都会有一个送出按钮以及清除重写的按钮，分别是利用TYPE= SUBMIT 及TYPE= RESET 来产生，相当的简单易用。
　 呈现结果
(495 Bytes)
原始码&FORM&
&INPUT TYPE=SUBMIT VALUE=送出资料&
&INPUT TYPE=RESET VALUE=重新填写&
&/FORM&10. 其有下列可设定之属性：
o NAME=名称，是设定此一按钮的名称。
o VALUE=文字，是设定此一按钮上要呈现的文字，若是没有设定，浏览器也会自动替您加上「送出查询」、「重设」等字样。
o ALIGN=对齐方式，是设定此一字段的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、ABSBOTTOM（绝对置下）等。
11. 按钮组件：窗体中或是JAVA SCRIPT常会用到按钮来作一些效果，因此，我们可以利用TYPE= BUTTON 来产生一个按钮，相当简单。
　 呈现结果请按下按钮：
(271 Bytes)
原始码&FORM&
请按下按钮：&INPUT TYPE=BUTTON NAME=OK VALUE=我同意&
&/FORM&12. 其有下列可设定之属性：
o NAME=名称，是设定此一按钮的名称。
o VALUE=文字，是设定此一按钮上要呈现的文字。
o ALIGN=对齐方式，是设定此一字段的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、ABSBOTTOM（绝对置下）等。
13. 隐藏字段：窗体中有时有些东西因为某些因素，不想让使用者看到，但因程序需要却又不得不存在，此时，我们就可以利用TYPE= HIDDEN 来产生一个隐藏的字段。
　 呈现结果隐藏字段： 原始码&FORM&
隐藏字段：&INPUT TYPE=HIDDEN NAME=NOSEE VALUE=看不到&
&/FORM&14. 其有下列可设定之属性：
o NAME=名称，是设定此一字段的名称。
o VALUE=文字，是设定此一字段的值、文字或意义。
【大量文字输入组件】
1. 有时候我们会希望让使用者输入比较大量的文字，此时，文字输入列就显得不敷使用，因此我们就可以利用&TEXTAREA&&/TEXTAREA&来产生一个可以输入大量文字的组件，夹在两个卷标中的文字会出现在框框中，可作为预设文字。 呈现结果请输入您的意见：
(743 Bytes)
原始码&FORM&
请输入您的意见：&BR&
&TEXTAREA NAME=TALK COLS=20 ROWS=3&&/TEXTAREA&
2. 其有下列可设定之属性：
o NAME=名称，是设定此一字段的名称。
o WRAP=设定值，是设定此一字段的换行模式。设定值有三种：OFF（输入文字不会自动换行）、VIRTUAL（输入文字在屏幕上会自动换行，不过若是使用者没有自行按下ENTER换行，送出资料时，也视为没有换行）、PHYSICAL（输入文字会自动换行，送出资料时，会将屏幕上的自动换行，视为换行效果送出）。
o COLS=数值，是设定此一字段的行数（横向字数）。
o ROWS=数值，是设定此一字段的列数（垂直字数）。
【下拉式选单】
1. 下拉式选单令整个网页看起来有很专业的感觉，我们只要利用&SELECT NAME=名称&便可以产生一个下拉式选单，另外，还需要配合&OPTION&卷标来产生选项，这样才算完整喔！ 呈现结果您喜欢看书吗？：
(339 Bytes)
原始码&FORM&
您喜歡看書嗎？：
&SELECT NAME=LIKE&
&OPTION VALUE=非常喜欢&非常喜欢
&OPTION VALUE=還算喜欢&還算喜欢
&OPTION VALUE=不太喜欢&不太喜欢
&OPTION VALUE=非常讨厌&非常讨厌
2. 其有下列可设定之属性：
o SIZE=数值，是设定此一字段的大小，默认值为1，若是您的选项有四个，然后您将SIZE设成4，那么，下拉式选单便会变成选项方块，将四个选项一起呈现在方块中。
o MULTIPLE，是设定此一字段为复选，可以一次选好几个选项。
HTML基础第十讲---排版卷标& & 网页的排版部份也是很重要的一环，有些现成的卷标就可以让您轻易的完成缩排或是一些特殊格式的编排喔！ 【文字置左、置中、置右】
1. 使用方法：老实说，刚刚我们学过的分段卷标&p&再加上一些简单的属性设定，就可以让其整个文字段落置左、置中或置右了，就如下表所示： 　 原始码呈现结果&p align=left&文字靠左&/p&文字靠左&p align=center&文字置中&/p&文字置中&p align=right&文字靠右&/p&文字靠右2. 卷标解说：嗯！秘诀就在于「align=对齐位置」而已啦！align是分段卷标&p&的属性之一，这个属性将来会常常在不同卷标中看到，它的功能是专门在设定「水平对齐位置」，其常见的设定值有三个，也就是置左（align=left）、置中（align=center）、置右（align=right）。
【置中卷标】
1. 使用方法：&center&这是置中&/center&
2. 卷标解说：这个卷标是最常用到的卷标了，除了文字，对于图片、表格，任何可以显现在网页上的东西都可以置中喔！
3. 使用范例：
原始码呈现结果&center&这是最中间&/center&& && && && && && &这是最中间【向右缩排卷标】
1. 使用方法：&blockquote&要缩排的文字&/blockquote&
2. 卷标解说：利用&blockquote&&/blockquote&这个卷标可以将其包起来的文字，全部往右缩排。而且加一组卷标，往右缩排一单位，加两组卷标，往右缩排两单位，依此类推。
3. 使用范例：
原始码呈现结果&blockquote&缩排1单位&/blockquote&缩排1单位 &blockquote&&blockquote&缩排2单位&/blockquote&&/blockquote&缩排2单位
【保存原始格式卷标】 1. 使用方法：&pre&文字内容&/pre&
2. 卷标解说：利用&pre&&/pre&这个卷标可以将其包起来的文字排版、格式，原封不动的呈现出来。算是相当好用的卷标之一。
3. 使用范例：
原始码呈现结果&pre&
&/pre&文　字
HTML基础第十一讲---背景标志
您是否老觉得网页「空空的」，没错！一个可能是我们还没有很多内容，另一个可能则是我们还没有设定网页背景。网页背景有这么神奇的功效吗？当然，网页背景是整个网页设计重要的一环，一个设计精美的网站，莫不费尽心思，让网页背景能够和前景图文相结合，做出网页整体感的效果。
【背景卷标】
说穿了，背景卷标只有&BODY&这个卷标，其余的效果，只要加上一些简单的属性便可做到。
1. 使用方法：&body bgcolor=#ffffff background=bg.jpg&
2. 卷标解说：这个卷标其实应该老早就要讲了，毕竟它是构成网页不可或缺的基本要素之一（哎哎哎...现在放马后炮有什么用！）。我们背景颜色或图片的设定以及连结字体的颜色，通通都放在&body&这卷标里面。工友就其属性来一一解说：
背景颜色用法：&body bgcolor=颜色码&设定背景颜色。有人会说：『我已经设定了背景图片，那背景颜色还有用吗？』当然有用！当使用者连结到贵站时，若背景图案还没传输完之前（有的背景图蛮大的），就会先显现背景颜色，您说，是不是比一片灰灰的好看多了呢！原始码&html&
&title&这是标题&/title&
&body bgcolor=#f9e6a2&
这里是本文区
&/html&呈现结果
(296 Bytes)
背景图片用法：&body background=图文件名称、路径&g设定背景图案。图档可以是jpg或gif格式的图档，工友建议：图档不要太大，否则网页加载会蛮慢的。原始码&html&
&title&这是标题&/title&
&body background=bg.jpg&
这里是本文区
&/html& 呈现结果
(10.59 KB)
【内文、连结文字颜色设定】
1. 使用方法：&body text=#000000 link=#0000ff vlink=#ff00ff alink=#ff0000&
2. 卷标解说：用字体卷标中的颜色属性，可以设定文字的颜色，不过，却没有提到文字的颜色内定值该如何修改，这个&body&卷标中，便有设定内文、连结等文字的颜色内定值功能。用法如下：
內文颜色用法：&body text=颜色码&设定一般文字颜色，也就是说，若没有特别去设定文字颜色的话，浏览器就会自动显现您所设定的颜色。原始码&html&
&title&这是标题&/title&
&body text=#0906a2&
这里是文本区
&/html& 呈现结果这里是文本区　 连接颜色用法：&body link=颜色码&设定「连结」的颜色。只要是有连结的地方就会出现你指定的颜色，当然，如果按下连结后，那又会变成另一个颜色了，这底下会说明。原始码&html&
&title&这是标题&/title&
&body link=#ff6600&
&a href=http://www.wrclub.net&连结文字&/a&
&/html& 呈现结果连结时颜色用法：&body alink=颜色码&设定「按下连结」的颜色，也就是当您鼠标按下那连结的瞬间所呈现的颜色。原始码&html&
&title&这是标题&/title&
&body alink=#0099ff&
&a href=http://www.wrclub.net&连结中文字&/a&
&/html& 呈现结果（这个效果请大家在自己的电脑上试验！鼠标点下连结瞬间才会出现我们设定的浅蓝色）已连结顏色用法：&body vlink=颜色码&设定「按下链接后」的颜色，也就是如果该连结已经有被按过了，那么就会呈现的颜色。如此的做法，是要让使用者容易识别到底哪些连结有去过了，哪些没去过。原始码&html&
&title&这是标题&/title&
&body vlink=red&
&a href=http://www.wrclub.net&连结文字&/a&
&/html& 呈现结果（这个效果请大家在自己的电脑上试验！设定已执行过的连结以红色显示）
HTML基础第十二讲---链接标志
没有链接，WWW将失去存在的意义！WWW之所以受欢迎，乃在于她除了有精美的图文之外，更有方便且多样化的链接，让使用者可以很快的找到其所需的资料，也让网络能提供更多的服务！
【WWW链接标志基本概念】
1. 链接基本概念：一般而言，所谓链接就是，在网页中有些字会有特别的颜色，而且字的底下会有条线，当光标移到那些字上时，会变成手指形状，按下去，则会连到别的文章或网站，（以上这段是给超级新手看的...）。
说到链接，最基本来看有『内部链接』及『外部链接』，所谓『内部链接』就是自己网站间网页的链接，至于外部链接我们稍后再来讨论。
要了解内部链接，首先必须先了解一下这两种东西，一个是『相对路径』，一个是『绝对路径』。
现在假设一个情形：我们在自己的计算机里设计网页，所有网页相关的档案我们通通放在 c:\www 里面，现在假设 c:\www 里面目前有 index.htm 、 text1.htm 、 p1.gif 、 p2.gif 这四个档案。ok！
现在我们想在 index.htm 里面设一个链接，能够按一下就连到 text1.htm，那我们该怎么做呢？基本上，有两中方式可以做到，在 index.htm 里面加上下面任一叙述：
&a href=/c|/www/text1.htm&这就是『绝对路径』&a href=text1.htm&这就是『相对路径』
瞧出什么端倪了没有？嗯嗯....没错，『绝对路径』要给计算机一个非常详尽的位置，让计算机寻着这路径去找到档案。而『相对路径』就简单多啦！如果没有特别指定，他就会直接在 index.htm 的所在目录下找，也就是在 c:\www 底下去找text1.htm。
如果说，今天我们将 c:\www 里所有的档案都上传到网络上的网页服务器（总不能做好了只给自己看吧！），且该服务器是别人的计算机，而非你自己架设的主机，那么问题就来了！你猜，哪一种链接会出问题？呵呵...答案是『绝对路径』，您猜对了吗？
为什么说『绝对路径』会出问题呢？因为，当您将档案上传到网络上时，您的整个网页目录架构一定会变，到时候，计算机可能找不到 c:\ （尤其是unix系列的主机）更可能找不到 www 这目录（有些会规定要放在特定的目录下才能显示网页），所以说，没事的话，尽量用『相对路径』来作链接吧！好写又不容易出错。
另外一个情形是：为了整理方便，有些网友喜欢将图档通通放到同一个目录下，如：c:\www\gif\ 底下放进了p1.gif 、 p2.gif两个图，而index.htm 、 text1.htm 依旧在 c:\www 底下。现在我们想在 index.htm 下设个链接到 p1.gif 这图档（链接不限于只能连html文件，图文件、文字文件均可），那我们又该如何来使用『相对路径』呢？他们又不在『同一个目录』下...？
&a href=/c|/www/gif/p1.gif&这是『绝对路径』的写法&a href=gif/p1.gif&这是『相对路径』的写法
如何？不难吧！（只是字有点多，看到脑子发胀）
2. 总结一下：很乱吗？嗯...看看这表，或许会清楚些。
相对路径表示方式代表链接位置&a href=text1.htm&text1.htm在目前的目录中（就例子而言，就是在c:\www中）&a href=docs/text1.htm&text1.htm在名为docs的次目录中（就本例而言，就是在c:\www\docs中）&a href=../text1.htm&text1.htm在目前目录的上一层目录中（就本例而言，就是在c:\底下了）
【网页内部的链接】
1. 使用方法：
（1）. 先在欲链接处作记号：&a name=here1&这里是你想链接的点&/a&
（2）. 设定链接：&a href=#here1&链接&/a&
2. 标志解说：有时候，当某页的内容很多时，我们可以利用网页的内部链接，来使使用者快速的找到资料。其原理不过是：在欲链接处做个记号（网页的任何地方都可以喔！），然后，链接时就寻这记号，就可以快速找到资料。很简单吧！
3. 使用范例：
范例第一步骤第二步骤&a name=m1&欲链接的位置&/a&&a href=#m1&www链接标志基本概念&/a&&a name=m2&欲链接的位置&/a&&a href=#m2&网页内部的链接&/a&&a name=m3&欲链接的位置&/a&&a href=#m3&网页外部的链接&/a&
【网页外部的链接】
1. 标志解说：链接到外面去，可以扩充您网站的实用性及充实性，也正因这功能，才造就了www五彩缤纷的世界。由于网络上的服务五花八门，所以不同的服务有不同的链接方法，工友将之整理在下表。
2. 使用范例：
网站链接&a href=http://www.wrclub.net&好站&/a&电子邮件链接&a href=mailto:&写信给朋友&/a&ftp链接&a href=ftp://ftp.wrclub.net&下载档案&/a&news链接[url=news:news.seed.net.tw]seednet news服务[/url]&a href=news:news.wrclub.net&seednet news服务&/a&gopher链接&a href=gopher://gopher.wrclub.net/&seednet gopher服务&/a&bbs链接&a href=telnet://bbs.wrclub.net/&seednet bbs服务&/a&
【链接标志的参数】
1. 使用方法：在链接后面加入 target=_参数
2. 标志解说：链接的参数并不多，常见的大概就属 target 这参数了，target 的意思是『目标』，也就是网页链接的指向目标，这参数在框窗（frame）里尤为重要！
3. 使用范例：
o target=框窗名称：这在『框架标志』中也有提到，而且也只有在框架（框窗 or frame）中才用得到。正常而言，框窗有各自的名称，因此，我们可以利用此标志，来指定链接的内容显示到哪一个框窗中。
o target=_blank：将链接的画面内容，开在新的浏览窗口中。
o target=_parent：将链接的画面内容，当成文件的上一个画面。
o target=_self：将链接的画面内容，显示在目前的窗口中。
o target=_top：这个参数可以解决新链接的画面内容，被旧框窗包围的困扰，使用这参数，会将整个画面重新显示成链接的画面内容。
画中画效果---谈Iframe标记的使用
　　纵观时下网站，本来网速就有些慢，可是几乎每页都要放什么Banner，栏目图片，版权等一大堆雷同的东西，当然，出于网站风格统一、广告效应的需要，本无可厚非，可毕竟让用户的钱包为这些点缀的东西日益消得钱憔悴了，有没有办法，让这些雷同的东西一次下载后就不用再下载，而只下载那些内容有变化区域的网页内容呢？
&&　　答案很肯定：应用Iframe标记！
&&　　一、Iframe标记的使用
&&　　提起Iframe，可能你早已将之扔到被遗忘的角落了，不过，说起其兄弟Frame就不会陌生了。Frame标记即株记，我们所说的多帧结构就是在一个浏览器窗口中显示多个HTML文件。现在，我们遇到一种很现实的情况：如有一个教程，是一节一节地上，每页末尾做一个上一节、下一节的链接，除了每节教程内容不同之外，页面其它部分内容都是相同的，如果一页一页地做笨页面，这似乎太让人厌烦了，这时突发奇想，如果有一种方法让页面其它地方不变，只将教程做成一页一页的内容页，不含其它内容，在点击上下翻页链接时，只改变教程内容部分，其它保持不变，这样，一是省时，另则以后如教程有个三长两短的变动，也很方便，不致于牵一发而动全军了;更重要的是将那些广告Banner、栏目列表、导航等几乎每页的都有的东西只下载一次后就不再下载了。
&&　　Iframe标记，又叫浮动株记，你可以用它将一个HTML文档嵌入在一个HTML中显示。它不同于Frame标记最大的特征即这个标记所引用的HTML文件不是与另外的HTML文件相互独立显示，而是可以直接嵌入在一个HTML文件中，与这个HTML文件内容相互融合，成为一个整体，另外，还可以多次在一个页面内显示同一内容，而不必重复写内容，一个形象的比喻即画中画电视。
&&　　现在我们谈一下Iframe标记的使用。
&&　　Iframe标记的使用格式是:
&&　　&Iframe src=URL width=x height=x scrolling=[OPTION] frameborder=x&&/iframe&
&&　　src：文件的路径，既可是HTML文件，也可以是文本、ASP等；
&&　　width、height：画中画区域的宽与高；
&&　　scrolling:当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动条；如为Yes，则显示;
&&　　FrameBorder：区域边框的宽度，为了让画中画与邻近的内容相融合，常设置为0。
&&　　&Iframe src=/homepage width=250 height=200 scrolling=no frameborder=0&&/iframe&
&&　　二、父窗体与浮动帧之间的相互控制
&&　　在脚本语言与对象层次中，包含Iframe的窗口我们称之为父窗体，而浮动帧则称为子窗体，弄清这两者的关系很重要，因为要在父窗体中访问子窗体或相反都必须清楚对象层次，才能通过程序来访问并控制窗体。
&&　　1、在父窗体中访问并控制子窗体中的对象
&&　　在父窗体中，Iframe即子窗体是document对象的一个子对象，可以直接在脚本中访问子窗体中的对象。
&&　　现在就有一个问题，即，我们怎样来控制这个Iframe，这里需要讲一下Iframe对象。当我们给这个标记设置了ID 属性后，就可通过文档对象模型DOM对Iframe所含的HTML进行一系列控制。
&&　∪如在example.htm里嵌入test.htm文件，并控制test.htm里一些标记对象：
&&　　&Iframe src=test.htm id=test width=250 height=200 scrolling=no frameborder=0&&/iframe&
&&test.htm文件代码为:
&&　　&html&
&&　　　&body&
&&　　　　&h1 id=myH1&hello,my boy&/h1&
&&　　　&/body&
&&　　&/html&
&&　　如我们要改变ID号为myH1的H1标记里的文字为hello,my dear，则可用:
&&　　document.myH1.innerText=hello,my dear(其中，document可省)
&&　　在example.htm文件中，Iframe标记对象所指的子窗体与一般的DHTML对象模型一致，对对象访问控制方式一样，就不再赘述。
&&　　2、在子窗体中访问并控制父窗体中对象
&&　　在子窗体中我们可以通过其parent即父（双亲）对象来访问父窗口中的对象。
&&　　如example.htm：
&&　　&html&
&&　　　&body &
&&　　　　&Iframe name=tt src=frame1.htm width=250 height=200 scrolling=no frameborder=0&&/iframe&
&&　　　　&h1 id=myH2&hello,my wife&/h1&
&&　　　&/body&
&&　　&/html&
&&　　如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为hello,my friend，我们就可以这样写：
&&　　parent.myH2.innerText=hello,my friend
&&　　这里parent对象就代表当前窗体(example.htm所在窗体)，要在子窗体中访问父窗体中的对象，无一例外都通过parent对象来进行。
&&　　Iframe虽然内嵌在另一个HTML文件中，但它保持相对的独立，是一个独立王国哟，在单一HTML中的特性同样适用于浮动帧中。
&&　　试想一下，通过Iframe标记，我们可将那些不变的内容以Iframe来表示，这样，不必重复写相同的内容，这有点象程序设计中的过程或函数，减省了多少繁琐的手工劳动！另外，至关重要的是，它使页面的修改更为可行，因为，不必因为版式的调整而修改每个页面，你只需修改一个父窗体的版式即可了。
&&　　有一点要注意，Nestscape浏览器不支持Iframe标记，但在时下IE的天下，这似乎也无大碍，广泛采用Iframe标记，既为自己(网站)着了想，又为网友节省了网费，何乐而不为？
[ 本帖最后由 hellowwj 于
09:50 编辑 ]
谢谢您的支持,辛苦了.图片好想看不到哦,麻烦 ...
帖子348&缘分币145 Y&阅读权限20&注册时间&
休息下。发帖果然比较累。
帖子185&缘分币6 Y&阅读权限10&注册时间&
看的我头都快昏了，楼主 可还能简单点啊？
帖子11053&缘分币40836 Y&阅读权限50&注册时间&
回复 地板 手心的梦 的帖子
恩这个可能是格式问题...呵呵
LS滴亲可以一部分一部分慢慢看....
帖子348&缘分币145 Y&阅读权限20&注册时间&
我在编辑的时候图片都能看到的，不知道为什么这里看不到了呀。真奇怪。
帖子348&缘分币145 Y&阅读权限20&注册时间&
同样建议你慢慢看，如果一点基础都不知道的话，不可能一口吃成一个胖子的呀。
边看边理解，同时多练习，学的会比较快。
帖子348&缘分币145 Y&阅读权限20&注册时间&
现在图片都能看到了吧。
原来图片的路径是本地的了，我把图片从文档上面拿下来另存，在上传附件，插入后就能在适当位置显示出来了。呵呵。大家有问题尽管提问哦。
帖子140&缘分币176 Y&阅读权限10&注册时间&
完全不知道，慢慢看，慢慢學。
廢才兔T&&T 我為你拼了！！！
帖子285&缘分币448 Y&阅读权限20&注册时间&
学习中。。。 。。。 谢谢
当前时区 GMT+8, 现在时间是