学习网页制作基础入门教程_第1页
学习网页制作基础入门教程_第2页
学习网页制作基础入门教程_第3页
学习网页制作基础入门教程_第4页
学习网页制作基础入门教程_第5页
已阅读5页，还剩44页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

学习网页制作基础入门教程目录1网页编写 31.1用记事本编写代码 31.2标签解释： 51.3浏览刚做好的网页 61.4制作网页的规则 72排版标签 72.1文字上的分隔标签 72.2文字置左、置中、置右 82.3置中标签 82.4向右缩排标签 92.5保存原始格式标签 92.6分隔线标签 103字体标签 133.1标题标签 133.2设定字体大小标签 143.3字型变化标签 143.4文字颜色设定 153.5文字字型设定 163.6特殊字元 164图象标签 184.1图象标签 184.2网页图象的重要概念 205背景标签 225.1背景标签 225.2网页内容、连接文字颜色设定 236连接标签 266.1网页内部的连接 266.2网页外部的连接 266.3连接标签的参数 277表格标签 297.1表格单元格对齐位置设定 29合并表格单元格 307.2表格单元格对齐位置设定 317.3表格背景、底色设定 327.4表格边框线的设定 347.5表格间距设定 358框架标签 368.1框架概念 368.2开始分割 368.3其他标签参数说明 388.4其他标签 409序列标签 419.1无序标签 419.2有序标签 4210表单标签 4410.1文字输入列 4410.2单选表单 4510.3复选表单 4510.4密码表单 4610.5送出按钮 4710.6按钮元件 4810.7大量文字输入元件 4910.8下拉式选单 491网页编写1.1用记事本编写代码1.首先打开“记事本”程序（方法是「开始」-「程序」-「附件」-「记事本」）2.将下面代码复制好粘贴到记事本上，如图-1所示。（按鼠标右键选择粘贴就可以了！）<html>

<head>

<title>这里是标题</title>

</head>

<body>

这里是放置网页内容的文本区域

</body>

</html>【图-1说明】利用鼠标右键的“粘贴”或者按CTRL+V都可以将复制的内容粘贴上的。

【图-2说明】点击“文件”里的“保存”就可以文件保存了。将文件保存了，就大功告成了！（在硬盘下建立建一个子目录，我们就在E:盘下建立一个

myweb的子目录，并将我们的网页保存为就可以了。）

【图-3说明】网页文件的扩展名是htm或是html，所以千万记得，请输入完整的文件名，否则记事本将存为.txt的文本文件，那么浏览器就浏览不出效果来了。1.2标签解释：1.以上看到的就是一个最简单架构的网页。没错，网页其实就是一堆标签（所谓标签就是指被<>包起来的语法）集合起来的，透过浏览器的整理，就便成了美丽漂亮的网页了。2.简单而言，通常一份完整的网页包含了二个部分：头部（HEAD）、文件主体（BODY）。也就是大家在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。3.在头部里面<HEAD></HEAD>中，另有一组标签<TITLE></TITLE>。打在<TITLE></TITLE>这里的文字会出现在浏览器窗口的最上面兰色部分里，当作一个网页的主题。4.您可能会发现，为什么一直没有提到<HTML></HTML>这一组标签呢，恩！因为它可有可无。这一组标签是告诉浏览器：我是一份HTML文件！也就是说它是一个网页的格式！通常都包在网页的最上下两端，将所有的原始码都包起来了。1.3浏览刚做好的网页1.刚刚保存了文件了，我们存的网页文件在e:\myweb\。2.在您的浏览器的地址栏内输入e:\myweb\或是file:///e|/myweb\吧！（因为每个浏览器打开硬盘中文件的方式都不太一样，所以用这样的方法比较一致。）3.如何，看到您的第一个网页了吧！【图-4说明】要浏览我们刚做网页是非常简单的，首先我们打开浏览器，然后输入我们刚刚保存的文件e:\myweb\看看，看是否能正确显示无误。您也可以按网页范例【】，立即看看这篇网页的样子。1.4制作网页的规则1.一般而言，一个网站的首页名称为或是一定要小写，只要一进该网站，浏览器便会自动的找出这个文件，并且自动的去浏览的內容。2.文件大小写一定要注意，没事的话，文件名最好全部用「英文小写字母」来命名，因为，在我们的电脑中，和是一样的文件，但是上了网络之后，网站服务器可是会认为这是不同的两个文件，此时，若是没注意，那可就！3.你发现了吗？同一个标签，好象都有两个，唯一不同的是，后面的那一个多了一个“/”，如：<BODY></BODY>。前面的<BODY>是开始标签，后面的</BODY>是结束标签。大部分的标签都是两个一组，不过也有单一的，这在以后给大家讲解。2排版标签2.1文字上的分隔标签1.使用方法：强制断行标签<BR>、强制分段标签<P>2.标签解说：我们在写文章时，有时候在特定的地方会强迫断行（<BR>），或是在写完某一段的时候便会分段（<P>），制作网页也一样，而且更需要断行及分段的功能，以免整个网页看起来乱糟糟的。3.使用范例：原始代码显示结果

这是一个断行的例子<BR>看出来了吗？网页教学网这是一个断行的例子

看出来了吗？网页教学网这是一个分段的例子<P>看出来了吗？网页教学网这是一个分段的例子看出来了吗？网页教学网2.2文字置左、置中、置右1.使用方法：老实说，刚刚我们学习过分段标签<P>再加上一些简单的属性设定，就可以让其整个文字段落置左、置中或置右了，就如下表所示：2.标签解说：秘诀就在于「ALIGN=对齐位置」而已！ALIGN是分段标签<P>的属性之一，这个属性将会常常在不同标签中看到，它的功能是专门在设定「水平对齐位置」，其常见的设定值有三个，也就是置左（ALIGN="LEFT"）、置中（ALIGN="CENTER"）、置右（ALIGN="RIGHT"）。3.使用范例：原始代码显示结果<PALIGN="LEFT">文字靠左</P>文字靠左<PALIGN="CENTER">文字置中</P>文字置中<PALIGN="RIGHT">文字靠右</P>文字靠右2.3置中标签1.使用方法：<CENTER>这是置中</CENTER>2.标签解说：这个标签是最常用到的标签了，除了文字，对于图片、表格，任何可以显现在网页上的内容都可以置中！3.使用范例：原始代码显示结果

<CENTER>这是中间</CENTER>这是中间

2.4向右缩排标签1.使用方法：<BLOCKQUOTE>要缩排的文字</BLOCKQUOTE>2.标签解说：利用<BLOCKQUOTE></BLOCKQUOTE>这个标签可以将其包起来的文字，全部往右缩排。而且加一组标签，往右缩排一单位，加两组标签，往右缩排两个单位，依此类推。3.使用范例：原始代码显示结果<BLOCKQUOTE>缩排1单位</BLOCKQUOTE>缩排1单位<BLOCKQUOTE><BLOCKQUOTE>缩排2单位</BLOCKQUOTE></BLOCKQUOTE>缩排2单位2.5保存原始格式标签1.使用方法：<PRE>文字內容</PRE>2.标签解说：利用<PRE></PRE>这个标签可以将其包起来的文字排版、格式，原封不动的显示出来。算是相当好用的标签之一。3.使用范例：原始代码显示结果

<PRE>文字格式</PRE>文字格式2.6分隔线标签1.使用方法：上一段文字內容<HR>下一段文字內容2.标签解说：利用<HR>这个标签便可产生一条横分隔线。另外，其有些属性分別说明如下：3.使用范例：一般用法尚未加任何属性。原始代码普通分隔<HR>显示结果普通分隔线颜色属性用法：<HRCOLOR="颜色代码或颜色名称">原始代码橘色分隔线<HRCOLOR="#FF8000">显示结果橘色分隔线宽度属性用法：<HRWIDTH="宽度">，其单位为px（像素），宽度也可用百分比来作设定，如50%即意为宽度占屏幕的50%。原始代码宽度为300px的分隔线<HRWIDTH="300">显示结果普通分隔线厚度属性用法：<HRSIZE="厚度">原始代码厚度为

10的分隔线<HRSIZE="10">显示结果厚度为

10的分隔线位置属性用法：<HRALIGN="水平对齐位置">，其设定值有三个，也就是置左ALIGN="LEFT"、置中ALIGN="CENTER"、置右ALIGN="RIGHT"原始代码靠右的分隔线<HRALIGN="RIGHT">显示结果靠右的分隔线阴影属性用法：<HRNOSHADE>，无设定值，只要将NOSHADE加入即可，通常会配合颜色设定，效果较佳。原始代码实心分隔线（无阴影)<HRNOSHADE>显示结果实心分隔线（无阴影）

3字体标签3.1标题标签1.使用方法：<H1>标题內容</H1>2.标签解释：标题的大小一共有六种，两个标签一组，也就是从<H1>到<H6>，<H1>最大，<H6>最小。使用标题标签时，该标签会将字体变为粗体字，并会自成一行。3.使用范例：原始碼呈現結果<H1>标题1</H1>标题1<H2>标题2</H2>标题2<H3>标题3</H3>标题3<H4>标题4</H4>标题4<H5>标题5</H5>标题5<H6>标题6</H6>标题63.2设定字体大小标签1.使用方法：<FONTSIZE="尺寸">文字內容</FONT>2.标签解释：标题的大小一共有七种，也就是<FONTSIZE=1>（最小）到<FONTSIZE=7>（最大），另外，还有一种写法：<FONTSIZE=+1>文字內容</FONT>，其意思就是说：比预设字大一级。当然也可以FONTSIZE=+2（比预设字大二级），或是FONTSIZE=-1（比预设字小一级），以一般而言，预设字体多为3。3.使用范例：本网页就是<FONTSIZE=9pt>3.3字型变化标签1.使用方法：<B>文字內容</B>2.标签解释：在文字标签里，对于文字的格式也有相当多的变化，如粗体、斜体...等，此外，也定义了一些现成的格式供编者使用，如『强调』、『原始码』...等，当然，这只是方便您参考用，并无强迫说遇到原始码就要加上『原始码』的标签。3.使用范例：原始代码显示结果<B>粗体</B>粗体

<I>斜体</I>斜体<U>底线</U>底线<SUP>上标</SUP>上标<SUB>下标</SUB>下标<TT>打字机</TT>打字机<BLINK>闪烁</BLINK>闪烁<EM>强调</EM>强调<STRONG>加强</STRONG>加强<SAMP>范例</SAMP>范例<CODE>原始码</CODE>原始码<VAR>参数</VAR>参数<DFN>定义</DFN>定义<CITE>引用</CITE>引用<ADDRESS>所在地址</ADDRESS>所在地址3.4文字颜色设定1.使用方法：<FONTCOLOR="#000000">文字颜色</FONT>2.标签解释：文字也可以设定颜色！3.使用范例：原始代码显示结果<FONTCOLOR="#ff0000">红色</FONT>红色<FONTCOLOR="#ff8000">橙色</FONT>橙色<FONTCOLOR="#ffff00">黃色</FONT>黃色<FONTCOLOR="#00ff00">绿色</FONT>绿色<FONTCOLOR="#0080ff">蓝色</FONT>蓝色<FONTCOLOR="#8000ff">紫色</FONT>紫色<FONTCOLOR="#000000">黑色</FONT>黑色3.5文字字型设定1.使用方法：<FONTFACE="字型名称">文字</FONT>2.标签解释：网页上也可以使用字型！唯一的一个限制是：对方也要有该字型！否则看到的仍然还是默认字体(默认字体为宋体)。另外要说明的是，这个标签并无法保证在每个浏览器上都能正常的显示，不过这并没有关系，看不到特殊的字型时，浏览器仍会以默认字体显示，所以不用怕会一团乱。3.使用范例：原始代码显示结果<FONTFACE="宋体">宋体</FONT>宋体3.6特殊字元1.使用方法：试打" "2.标签解释：很多特殊符号是需要特别处理的，比如说"<"、">"这两个符号若想要显示在网页上是没有办法直接打"<"的，要显示"<"必须输入编码表示法。3.使用范例：原始代码显示结果 (

代表一个不断行空白)<<>>&&""

4图象标签4.1图象标签1.使用方法：<IMGSRC=""ALT="本站特约模特儿"ALIGN=RIGHTBORDER=0HSPACE=2VSPACE=2HEIGHT=56WIDTH=32>2.标签解释：目前常见的网页图形式有两种就是GIF及JPG两种格式。GIF格式只有256色，不过色彩比较鲜艳干净漂亮，适合电脑美工图案。而JPG格式的图象是全彩色失真压缩，比较适合一大堆颜色的图片，如照片就较适合用JPG格式来表现。3.使用范例：基本用法用法：<IMGSRC="图象名称、路径">

显示图片最基本的方法（就是不加任何属性啦！）其中就是图片的文件名。原始代码<IMGSRC="">我是网页教学网模特儿！显示结果我是网页教学网模特儿！长宽设定用法：<IMGSRC="图象名称、路径"

HEIGHT="高度"

WIDTH="宽度">设图片的大小，其实不用设也可以，但是设置了更好，可以加快浏览速度，因为浏览器就不用在那边花时间算你的图片有多大啦！此外你也可以自己随意设定图片大小。原始代码<IMGSRC=""HEIGHT=30WIDTH=30>显示结果加上说明用法：<IMGSRC="图片"

ALT="说明文字">

鼠标移到图片上时，说明文字就会自动出现。此外，在图片未显示出来或显示不出来时，也会以这一段文字代替，让使用者知道这个未显示出来的图片究竟是干什么用的，web标准强烈建议大家加上这个说明。原始代码<IMGSRC=""ALT="网页教学网">移到图上看看。显示结果移到图上看看。图片位置用法：<IMGSRC="图片"

ALIGN="位置">

图片位置设定！可以靠左放：ALIGN=LEFT、靠上ALIGN=TOP、靠下ALIGN=BOTTOM、垂直置中ALIGN=MIDDLE，其中靠左放可以造成“文绕图”的效果。原始代码<IMGSRC=""ALIGN=RIGHT>我往右边靠！显示结果我往右边靠！原始代码<IMGSRC=""ALIGN=LEFT>我往右边靠！显示结果我往左边靠！原始代码<IMGSRC=""ALIGN=TOP>文字对齐我头顶！显示结果文字对齐我头顶！原始代码<IMGSRC=""ALIGN=BOTTOM>文字对齐我脚底！显示结果文字对齐我脚底！原始代码<IMGSRC=""ALIGN=MIDDLE>文字对齐我中间！显示结果文字对齐我中间！边框设定用法：<IMGSRC="图片"

BORDER="边框粗细">

设定边框大小，通常都设成0感觉比较美观！因为內定的框框实在是不怎么漂亮。尤其在加连接时，设边框简直就是...。原始代码<IMGSRC=""BORDER="4">显示结果左右间距用法：<IMGSRC="图片"

HSPACE="离左右元素的距离">

离文字的水平距离，通常多少也设一点，以免靠文字太近，看起来才不会有太挤的感觉。原始代码左边的字<IMGSRC=""HSPACE="15">右边的字显示结果左边的字右边的字上下间距用法：<IMGSRC="图片"

VSPACE="离上下元素的距离">

离文字的垂直距离，通常多少也设一点，以免靠文字太近，看起来才不会有太挤的感觉。原始代码上面的字<BR><IMGSRC=""VSPACE="15"><BR>下面的字显示结果上面的字

下面的字4.2网页图象的重要概念1.关于路径：现在我们来谈谈图片路径的事，路径不对，不管您的网页名称写的多正确也没用，因为浏览器无法寻找到你的路径去到该有的图片，所以，我们来看看该如何正确使用路径。有些人并不喜欢将网页及图片通通放在同一个目录下，比如说有人将图片放在c:\image里，而网页文件放在c:\demo里，这样的话，我们该如何正确的写图片的路径呢？几种常见的情况整理成下表：HTML文件位置图片的位置写法情形说明c:\democ:\demo<imgsrc="">图文均在同一目录c:\democ:\demo\image<imgSRC="../../images/">图在网页下一层目录c:\democ:\<imgsrc="../">图在网页上一层c:\democ:\image<imgsrc="../../images/">图文在同一层但不同目录或许有人看到不明白，先说明一下，「../」是回到上一层目录的意思。「image/」则是进入下一层目录image之意，而「../../image/」的意思就是，回到上一层目录，然后再进入目录image中。以上我们使用的均为“相对路径”的概念。2.图象单位：或许你常常看到px这个单位，没错，这是我们在制作网页时最常用的一个单位了。这个单位完整的写法是“Pixels”，我们称之为“像素”。像素，是屏幕上的一个小光点，然而这一小光点的大小，并非是固定的，举个例子而言，屏幕本身十五寸，不会因为你的任何设定而变成十七寸。但是，其解析度是可以改变的，我们常见的解析度有以下几种：「640×480」、「800×600」、「1024×768」等。举其中之一的640×480来说，其代表的就是在屏幕上有宽640个光点，高有480光点，若是我们将解析度调整为800×600其宽势必要从640

变成800个光点。3.图象格式：网页用的图片目前只有GIF格式（即扩展名为gif的图片，如：bg.gif）以及JPG格式（即扩展名为jpg的图片，如：bg.jpg）为一般的浏览器所接受。其他如bmp格式或是pcx格式都是无法在网页上使用的，若非得要用，那就利用图象处理软件来制作格式的转换吧！

5背景标签5.1背景标签1.使用方法：<BODYBGCOLOR="#ffffff"BACKGROUND="bg.jpg">2.标签解释：这个标签其实应该老早就要讲了，毕竟它是制作网页不可或缺的基本要素之一，我们背景颜色或图片的设定以及连接字体的颜色，统统都放在<BODY>这个标签里面。解释：背景颜色用法：<BODYBGCOLOR="颜色代码">设定背景颜色。有人会说：“我已经设定了背景图片，那背景颜色还有用吗？”当然有用！当使用者连接到贵站时，若背景图象还没有显示全，就会先显示背景颜色，您说，是不是比一片灰灰的好看多了呢！原始代码<HTML>

<HEAD>

<TITLE>这是标题</TITLE>

</HEAD>

<BODYBGCOLOR="#F9E6A2">

这里是本文区域

</BODY>

</HTML>显示结果单击这里查看演示效果背景图象用法：<BODYBACKGROUND="图片名称、路径">设定背景图象。图片可以是JPG或GIF格式的图片，强烈建议：图象不要太大，否则网页加载时会很慢的。原始代码<HTML>

<HEAD>

<TITLE>这是标题</TITLE>

</HEAD>

<BODYBACKGROUND="bg.jpg">

这里是本文区域

</BODY>

</HTML>显示结果单击这里查看演示效果5.2网页内容、连接文字颜色设定1.使用方法：<BODYTEXT="#000000"LINK="#0000ff"VLINK="#ff00ff"ALINK="#ff0000>2.标签解释：用字体标签中的颜色属性，可以设定文字的颜色，不过，却没有提到文字的颜色內定值该如何修改，这个<BODY>标签中，便有设定网页内容、连接等文字的颜色內定值功能。用法如下：网页内容颜色用法：<BODYTEXT="颜色代码">设定一般文字颜色，也就是说，若没有特別去设定文字颜色的话，浏览器就会显示你所设定的颜色。原始代码<HTML>

<HEAD>

<TITLE>这是标题</TITLE>

</HEAD>

<BODYTEXT="#0906A2">

这里是本文区域

</BODY>

</HTML>显示结果单击这里查看演示效果连接颜色用法：<BODYLINK="颜色代码">设定“连接”的颜色。只要是有连接的地方就会出现你指定的颜色，当然，如果点击连接后，那又会变成另一种颜色了，下面会说明。原始代码<HTML>

<HEAD>

<TITLE>这是标题</TITLE>

</HEAD>

<BODYLINK="#FF6600">

<AHREF="">连接文字</A>

</BODY>

</HTML>显示结果单击这里查看演示效果（设定连接为橘色）连接时颜色用法：<BODYALINK="颜色代码">设定“点击连接”的颜色，也就是当你鼠标点击那个连接的瞬间所显示的颜色。原始代码<HTML>

<HEAD>

<TITLE>这是标题</TITLE>

</HEAD>

<BODYALINK="#BLUE">

<AHREF="">连接文字</A>

</BODY>

</HTML>显示结果单击这里查看演示效果（鼠标点击连接瞬间才会出现我们现在设定的蓝色）已连接颜色用法：<BODYVLINK="颜色代码">设定“点击连接后”的颜色，也就是如果该连接已经被点击过了，那么就显示的颜色。如此的做法，是要让使用者容易识别到底哪些连接已经去过了，哪些连接没有点击过。原始代码<HTML>

<HEAD>

<TITLE>这是标题</TITLE>

</HEAD>

<BODYVLINK="RED">

<AHREF="">连接文字</A>

</BODY>

</HTML>显示结果单击这里查看演示效果（设定已点击过的连接以红色显示）

6连接标签6.1网页内部的连接1.使用方法：先在欲连接处作记号：<ANAME="here">这里是你想连接的点</A>设定连接：<AHREF="#here">连接</A>2.标签解释：有时候，当某页的内容很多时，我们可以利用网页的内部连接，来使使用者快速的找到资料。其原理不过是：在欲连接处做个记号，然后，连接时就寻找这记号，就可以快速找到资料。很简单吧！3.使用范例：范例第一步骤第二步骤网页内部的连接<ANAME="1">连接的位置</A><AHREF="#1">网页内部的连接</A>网页外部的连接<ANAME="2">连接的位置</A><AHREF="#2">网页外部的连接</A>6.2网页外部的连接1.标签解释：连接到外面去，可以扩充您网站的实用性及充实性，也正因这功能，才造就了WWW五彩缤纷的世界。由于网络上的服务五花八门，所以不同的服务有不同的连接方法。

2.使用范例：网站连接新浪网<AHREF="">新浪网</A>电子邮件连接写情书给朋友<AHREF="mailto:">写情书给朋友</A>FTP连接下载档案<AHREF="ftp://.">下载档案</A>News连接网上行News<AHREF="news:">网上行News</A>Gopher连接SEEDNETGopher<AHREF="gopher://.net/">SEEDNETGopher</A>BBS连接论坛<AHREF="telnet://.com/">论坛</A>6.3连接标签的参数1.使用方法：在连接后面加入target=_参数2.标签解释：连接的参数并不多，常见的大概就属target这参数了，target的意思是『目标』，也就是网页连接的指向目标，这参数在框架（Frame）里尤为重要！3.使用范例：标签代码target=框架名称效果这在“框架标签”中也有提到，而且也只有在框架（框窗orFrame）中才用得到。正常而言，框架有各自的名称，因此，我们可以利用此标签，来指定连接的内容显示到哪一个框架中。标签代码target=_blank效果将连接的页面内容，开在新的浏览器窗口中。标签代码target=_parent效果将连接的页面内容，当成文件的上一个页面。标签代码target=_self效果将连接的书面内容，显示在当前的窗口中。标签代码target=_top效果这个参数可以解决新连接的页面内容，被框架包围的困扰，使用这参数，会将整个页面重新显示成连接的页面内容。

7表格标签7.1表格单元格对齐位置设定1.首先我们来看一个最简单的表格：原始代码显示结果<TABLEBORDER=1>

<TR><TD>1</TD></TR>

</TABLE>12.利用<TABLE>这个标签来告诉浏览器，这是一个表格，至于BORDER=1这参数是设定此表格的框线粗细为1。一组<TR></TR>是设定一行的开始位置。一组<TD></TD>则是设定一个单元格。当然，文字就是要放在这里面。3.现在我们再来增加两个单元格：原始代码显示结果<TABLEBORDER=1>

<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>

</TABLE>1234.看见了吧，<TR></TR>没有增加，<TD></TD>却增加了两组。那如果我要再加上一列呢？很简单，就像这样：原始代码显示结果<TABLEBORDER=1>

<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>

<TR><TD>4</TD><TD>5</TD><TD>6</TD></TR>

</TABLE>123456合并表格单元格1.并非所有的表格都是规规矩矩的只有几行、几列而已，有时候，我们还会希望能够“合并单元格”，让表格更美观、更实用一点，而谈到“合并单元格”，我们就必须知道，合并的方向有两种：一种是上下合并（也就是行列间的合并），一种是左右合并（也就是行间的合并），这两种合并方式各有不同的属性设定方法。2.左右合并：基本上，你的表格已经学会了！接下来，咱们就来看看，如何将1、2、3单元格合并为一个大格：原始代码显示结果<TABLEBORDER=1>

<TR><TDCOLSPAN=3>1</TD></TR>

<TR><TD>4</TD><TD>5</TD><TD>6</TD></TR>

</TABLE>1456你应该会发现，怎么2、3都消失了？只剩下1，而且该行的<TD>标签还多了一个陌生的脸孔COLSPAN="3"，没错，这就是“左右合并”的属性，COLSPAN="3"的意思就是“这个行左右横跨了3个单元格”，也正因如此，本来的两个<TD>都可以省掉了，因为都被合并掉了！3.上下合并：学会了左右合并！接下来，咱们就来看看，如何上下合并，将1、4单元格通通合并成一个大格：原始代码显示结果<TABLEBORDER=1>

<TR><TDROWSPAN=2>1</TD><TD>2</TD><TD>3</TD></TR>

<TR><TD>5</TD><TD>6</TD></TR>

</TABLE>12356有了上一次的经验后，我们就知道，要合并单元格就一定有些单元格的属性“牺牲”掉（也就是那些被合并的单元格！），这次我们要“上下合并”，我们将1与4合并为一个单元格，那么就要牺牲哪一个单元格呢？没错就是下面那一个倒霉的4，我们看看上图，果然4已经被刪掉了，而在1的<TD>标签中则多了个生面孔ROWSPAN，这就是“上下单元格合并”的属性，ROWSPAN=2的意思就是“这个单元格上下连跨2个单元格”，其结果如上所士。7.2表格单元格对齐位置设定1.我可以自己设定表格的大小吗？当然可以，你可以自由设定表格的“宽”及“高”！我们来制作一个宽100、高60的表格，做法如下：原始代码显示结果<TABLEWIDTH="100"BORDER="1"HEIGHT="60">

<TR><TD>1</TD></TR>

</TABLE>12.哎呀！怎么1老是在表格的左边呢？可以弄到中间吗？当然可以，只要在<TD>加入ALIGN=CENTER这参数即可：原始代码显示结果<TABLEWIDTH="100"BORDER="1"HEIGHT="60">

<TR><TDALIGN=CENTER>1</TD></TR>

</TABLE>1此外，利用ALIGN=RIGHT可以让表格中元素置右、利用ALIGN=LEFT可以让表格中元素置左（默认值），至于为什么要加在<TD>中呢？因为，<TD>是一个单元格的意思，我们要指定在这个单元格中的元素要置中或置左置右，就必须将ALIGN加在<TD>中。3.既然可以置中，那么也可以控制表格內文字靠上、靠下吗？可以的，只要利用VALIGN=TOP这个属性即可让表格內元素靠上方对齐。原始代码显示结果<TABLEWIDTH="100"BORDER="1"HEIGHT="60">

<TR><TDALIGN=CENTERVALIGN=TOP>1</TD></TR>

</TABLE>1利用VALIGN=MIDDLE可以让表格中元素垂直置中（默认值），VALIGN=BOTTOM可以让表格中元素靠下方。7.3表格背景、底色设定1.表格可以设定底色吗？可以的不但表格可以，你也可以指定某行或某列的颜色，方法和加背景颜色一样，利用BGCOLOR="颜色代码"就行了。下面是指定整个表格背景颜色的方法：原始代码显示结果<TABLEBORDER="1"BGCOLOR=#FFCC33>

<TR><TD>1</TD><TD>2</TD></TR>

<TR><TD>3</TD><TD>4</TD></TR>

</TABLE>1234将BGCOLOR="颜色代码"加在<TR>中，可以指定“一行”的背景颜色：原始代码显示结果<TABLEBORDER="1">

<TRBGCOLOR=#FFCC33><TD>1</TD><TD>2</TD></TR>

<TR><TD>3</TD><TD>4</TD></TR>

</TABLE>1234将BGCOLOR="颜色代码"加在<TD>中，可以指定“一个单元格”的背景颜色：原始代码显示结果<TABLEBORDER="1">

<TR><TDBGCOLOR=#FFCC33>1</TD><TD>2</TD></TR>

<TR><TD>3</TD><TD>4</TD></TR>

</TABLE>12342.表格除了可以设定底色外，也可以用图片来作背景吗？当然可以，方法一样简单，只要將BACKGROUND="图片名称"加到表格中就行了。和表格背景颜色一样，不但表格可以设定背景图片，你也可以指定某行或某列的背景图片：原始代码显示结果<TABLEBORDER="1"BGCOLOR="/images/bg.gif">

<TR><TD>1</TD><TD>2</TD></TR>

<TR><TD>3</TD><TD>4</TD></TR>

</TABLE>12347.4表格边框线的设定1.如何设定表格粗细？只要利用BORDER="粗细值"就行了。原始代码显示结果<TABLEBORDER=5>

<TR><TD>1</TD></TR>

</TABLE>12.如何设定表格颜色？只要利用BORDERCOLOR="颜色代码"就行了。原始代码显示结果<TABLEBORDER="5"BORDERCOLOR="#0080FF">

<TR><TD>1</TD></TR>

</TABLE>13.另外，我们也可以设定表格的阴影、亮面颜色，让表格看起来更有立体感！只要利用BORDERCOLORLIGHT="#颜色代码"（亮面设定）BORDERCOLORDARK="颜色代码"（暗面设定）就行了。原始代码显示结果<TABLEBORDER="5"BORDERCOLOR="#0080FF"BORDERCOLORLIGHT="#62B0FF"BORDERCOLORDARK="#004B97">

<TR><TD>1</TD></TR>

</TABLE>17.5表格间距设定1.我们可以利用CELLPADDING属性自由设定表格内容距离边线的距离，这个属性很好用，保持适当的距离，看起来比较舒服。一般而言內定值为2，不过建议设定为4比较漂亮。原始代码显示结果<TABLEBORDER="1"CELLPADDING="10">

<TR><TD>1</TD><TD>2</TD></TR>

</TABLE>122.我们可以利用CELLSPACING属性设定表格单元格边线之间的距离。一般而言默认值为2，不过建议设置为0。原始代码显示结果<TABLEBORDER="1"CELLSPACING="5">

<TR><TD>1</TD><TD>2</TD></TR>

</TABLE>128框架标签8.1框架概念1.首先，各位先看看右边这张图片，将利用这张图来做解释，这样子，讲起来可能会清楚一些。我们可以看见，右边的这个图片，一共分为1、2、3三个框架，每一个框架，各有其显示的內容分别是a.htm、b.htm、c.htm三个文件。然而左下角的那个是做什么用的呢？2.原来，左下角的这个文件，就是要告诉浏览器，我们要将页面分割成这样，也就是说，所有Frame的标签，其实都只放在这个文件里。3.这样明白了吧！总之，你要分割几个框，就一定会有几个对应的html文件。8.2开始分割1.分割窗口可是一门学问，要分割也是要一步一步来的。看看刚刚那例子，想像页面是一个蛋糕，你要怎么割，才能割成那样呢？原始代码显示结果<HTML>

<HEAD>

<TITLE>框架制作</TITLE>

</HEAD>

</HTML>

2.各位会发现，奇怪，在上面的语法中，怎么没看到<BODY></BODY>标签呢？呵呵...没错，它已经被将要加进去的<FRAMESET></FRAMESET>标签給取代了！也就是说，如果我们要分割页面，就要先用<FRAMESET>标签告诉浏览器：＂我要开始分割了！＂此时，<BODY>是派不上用场的，所以躲到一旁凉快去了！3.现在开似乎动手分割看吧！我们先将页面分成左右两边，如下图：原始代码显示结果<HTML>

<HEAD>

<TITLE>框架制作</TITLE>

</HEAD>

<FRAMESETCOLS="120,*">

<FRAMESRC="a.htm"NAME="左">

<FRAMESRC="b.htm"NAME="右">

</FRAMESET>

</HTML>

4.在<FRAMESET>中，我们要告诉浏览器到底是要左右分（COLS）？还是上下分（ROWS）。一开始我们是左右分，所以我们写成<FRAMESETCOLS="120,*"。COLS="120,*"就是说，左边那一栏强制定为120px，右边则随浏览器大小而变。除了直接写px数外，我们也可以用百分比来表示，例如COLS="20%,80%"也是可以的。5.然后，再将右边的框窗再分割成上下两个页面。如下图：原始代码显示结果<HTML>

<HEAD>

<TITLE>框架制作</TITLE>

</HEAD>

<FRAMESETCOLS="120,*">

<FRAMESRC="a.htm"NAME="左">

<FRAMESETROWS="100,*">

<FRAMESRC="b.htm"NAME="右上">

<FRAMESRC="c.htm"NAME="右下">

</FRAMESET>

</FRAMESET>

</HTML>

6.看见了没？原本的<FRAMESRC="b.htm"

NAME="2">在第3点的语法中）被另一组<FRAMESETROWS="100,*">取代了！所以要注意！第二组<FRAMESETROWS="100,*">是被第一组<FRAMESETCOLS="120,*">包围起来的！7.不知不觉就大功告成了，其实只要将最后完成的那些语法存成，然后再准备三个文件a.htm、b.htm、c.htm那么就完工了！当然，这是一个最好的分割法，再将一些进阶的标签在下面一一说明。8.3其他标签参数说明例子:<FRAMESETCOLS="120,*"FRAMEBORDER=0FRAMESPACING=5>

1.COLS="120,*"就是垂直切割页面啦！你可以一次切成左右两个页面，当然也可以切成三个，很简单只要写成COLS="30,*,50"（数字随便你自己调整！），依此类推，四个以上当然就是四组数字了！

2.ROWS="120,*"就是橫向切割页面，也就是将页面上下分开，切法同上。

3.FRAMEBORDER=0设定框架的边框，其值只有0和1，0就是不要边框，1就是要显示边框。边框是无法调整粗细的。

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

例子:<FRAMESRC="a.htm"NAME="1"FRAMEBORDERr=0SCROLLING="no"noresizemarginhight=2marginwidth=2>

1.SRC="a.htm"设定此框架中要显示的网页名称，每个框架一定要对应一个网页，否则就会产生错误，这里就是要您填入对应网页的名称。（如果该网页在不同目录，记得路径要写清楚）

2.NAME="1"设定这个框架的名称，这样才能指定框架来作连接，所以一定要设定啊！当然名称随你高兴取名。

3.FRAMEBORDERr=0设定框架的边框，其值只有0和1，0就是不要边框，1就是要显示边框。边框是无法调整粗细的。

4.SCROLLING="no"设定是否要显示滚动条，YES是要显示滚动条，NO是无论如何都不要显示，AUTO是视情況显示。noresize

5.noresize设定不让使用者可以改变这个框框的大小，如果没有设定这个参数，使用者可以很容易的拉动框架，改变其大小。

6.marginhight=2表示框架高度部份边缘所保留的空间。

7.marginwidth=2表示框架宽度部分边缘所保留的空间。8.4其他标签1.<noframe>

使用方法：<noframe>请换有支持Frame功能的浏览器<noframe>标签解释：有些浏览器版本较低，无法显示Frame的功能，因此，就要使用此标签，让这些人知道，该换换浏览器了。或者，你也可以在这标签中，写上沒有Frame语法的网页标签，那么，没有支持Frame功能的浏览器，便会自动显示没有Frame语法的网页。

2.target=框架名称

使用方法：<AHREF=""target=3>显示內容</A>标签解释：常常有一个情況是，我想在框窗1的地方按下连接，但是希望他的内容出现在框架3中（请参照上面那个图），那应该如何写呢？就像上面加个target=框架名称就行啦！

3.target=_top

使用方法：<AHREF=""target=_top>网页教学网</A>标签解释：有时候，在框架里面连接到别的站，却发现，新连接的这个站，竟然被框架包住了，不但难看，而且可能会吃上官司！所以，这时候你必需加入target=_top这个参数，那么，这个新连接到的网站，就会重新占据整个浏览器了！9序列标签9.1无序标签1.序列标签基本上可分为两种，一种是“无序条列”，一种是“有序条列”。所谓“无序条列”当然就是意指各条列间并没有顺序关系，纯粹只是利用条列式方法来显示资料而已，此种无序标签，在各条列前面均有一符号以示分隔。至于“有序条列”就是指各条列之间是有顺序的，从1、2、3…一直延伸下去。2.我们先来看看“无序列表标签”如何使用：原始代码显示结果<UL>

<LI>靓仔

<LI>靓女

<LI>靓世界

</UL>靓仔靓女靓世界其中<UL>标签即为“无序列表标签”，每增加一列內容，就必须加一个<LI>。3.前面的符号一定是要圆形的吗？不，我们可以加入TYPE="形状名称"属性来改变其符号形状，一共有三个选择：DISK（实心圆）、SQUARE（小正方形）、CIRCLE（空心圆）三种原始代码显示结果<ULTYPE="CIRCLE">

<LI>靓仔

<LI>靓女

<LI>靓世界

</UL>靓仔靓女靓世界9.2有序标签1.接下来，我们来看看“有序列表标签”如何使用：原始代码显示结果<OL>

<LI>靓仔

<LI>靓女

<LI>靓世界

</OL>靓仔靓女靓世界其中<OL>标签即为“有序标签”，每增加一列內容，就必须加一个<LI>。2.和无序列表标签一样，我们也可以选择不同的符号来显示顺序，一样是用TYPE属性来作更改，一更有五种符号：1（数字）、A（大写英文字母）、a（小写英文字母）、I（大写罗马字母）、i（小写罗马字母）等五种：原始代码显示结果<OLTYPE="A">

<LI>靓仔

<LI>靓女

<LI>靓世界

</OL>靓仔靓女靓世界3.另外，我们也可指定序列起始的数目，其方法如下：原始代码显示结果<OLSTART="10">

<LI>靓仔

<LI>靓女

<LI>靓世界

</OL>靓仔靓女靓世

10表单标签各种输入类型：10.1文字输入列每个表单之所以会有不同的类型，原因就在于TYPE="表单类型"设定的不同而已，我们就先来看看第一个类型：文字输入列。文字输入列的类型就是TYPE="TEXT"，其使用方法如下：原始代码<FORM>

姓名：<INPUTTYPE="TEXT"NAME="NAME"SIZE="20">

</FORM>显示结果姓名：

其有下列可设定之属性：NAME="名称"，是设定此文字输入列的名称，程序中常会用到。SIZE="数值"，是设定此文字输入列显示的宽度。VALUE="预设内容"，是设定此文字输入列的预设内容。ALIGN="对齐方式"，是设定此文字输入列的对齐方式，其值有：TOP（向上对齐）、MIDDLE（中间对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对居中）、ABSBOTTOM（绝对置下）等。MAXLENGTH="数值"，是设定此文字输入列可设定输入的最大长度。10.2单选表单利用TYPE="RADIO"就会产生单选表单，单选表单通常是好几个选项一起摆出来供使用者点选，一次只能从中选一个，故为单选表单。原始代码<FORM>

姓名：

男<INPUTTYPE="RADIO"NAME="SEX"VALUE="BOY">

女<INPUTTYPE="RADIO"NAME="SEX"VALUE="GIRL">

</FORM>显示结果性別：男女

其有下列可设定之属性：NAME="名称"，是设定此一栏的名称，程序中常会用到。VALUE="内容"，是设定此一栏的内容、值或是意义。ALIGN="对齐方式"，是设定此一栏的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对居中）、ABSBOTTOM（绝对置下）等。CHECKED，是设定此一栏为预设选取值。10.3复选表单利用TYPE="CHECKBOX"就会产生复选表单，复选表单通常是好几个选项一起摆出来供使用者点选，一次可以同时选好几个，故为复选表单。原始代码<FORM>

喜好：

<INPUTTYPE="CHECKBOX"NAME="SEX"VALUE="MOVIE">电影

<INPUTTYPE="CHECKBOX"NAME="SEX"VALUE="BOOK">看书

</FORM>显示结果喜好：

电影

人人文库> 全部分类> 应用文书 > 研究报告

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论