网页设计之基础篇－HTML（更新完结）

zybx520 · 发表于 2012-6-22 20:19:37

本帖最后由 zybx520 于 2012-6-22 20:20 编辑

列表的标记

建立列表，可以合逻辑思路清晰，便于阅读。列表分为编号列表，符号列表和定义列表3种类型。

列表的主要标记如下图所示：
列表的主要标记.jpg

编号列表

编号列表使用编号来编排项目。列表中的项目是以数字或者英文字母开头，各项目间有先后顺序性。创建编号列表，主要使用<OL>和<LI>两个标记以及TYPE和START两个属性。

编号列表标记<OL>

语法：<OL>

<LI>项目1

<LI>项目2

<LI>项目3
…………..

</OL>

<OL>：作为编号列表的声明。

<LI>：作为每一个项目的起始。

编号列表的类型属性TYPE

默认情况下，编号列表使用数字序号作为列表的开始，可以通过TYPE属性将编号列表的类型设置为英文或者罗马数字。

语法<OL TYPE="VALUE">……….</OL>

VALUE：是TYPE的属性值，VALUE的值如下图表示：
编号列表的类型.jpg

编号列表的起始属性START

在默认的情况下，编号列表从数字1开始计数，这个起始值通过START属性可以调整，英文字母和罗马数字的起始值也可以调整。

语法：<OLSTART="VALUE">………….</OL>

VALUE：不论列表编号的类型是数字，英文字母还是罗马数字，VALUE的值都代表起始数字。

在编号列表中，使用<OL>作为编号列表的声明，使用<LI>作为每一个项目的起始。我们对编号列表做一个简单的示例，程序代码如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>编号列表的应用</title>
</head>
<body>
<h2>编号列表</h2>
<ol>
<li>编号列表标记<OL></li>
<li>编号列表类型属性TYPE</li>
<li>编号列表起始属性START</li>
</ol>
<HR align="left" width="50%">
<h2>编号列表</h2>
<ol type="I">
<li>编号列表标记<OL></li>
<li>编号列表类型属性TYPE</li>
<li>编号列表起始属性START</li>
</ol>
<HR align="left" width="50%">
<h2>编号列表</h2>
<ol type="a" start="5">
<li>编号列表标记<OL></li>
<li>编号列表类型属性TYPE</li>
<li>编号列表起始属性START</li>
</ol>
</body>
</html>

复制代码

符号列表

在符号列表中，各个列表项之间没有顺序级别之分，通常使用一个项目符号作为每个列表项的前缀。符号列表主要是使用<UL>,<DIR>,<MENU>,<LI>几个标记和TYPE属性

符号列表标记<UL>

语法：<UL>

<LI>项目1

<LI>项目2

<LI>项目3

</UL>

UL：作为符号列表的声明

LI：作为互一个项目的起始

菜单列表标记<MENU>

菜单列表用于显示菜单内容，设计单列的菜单。在Internet Explorer浏览器中，菜单列表的显示和符号列表是相同的。

语法：

<MENU>

<LI>项目1

<LI>项目2

<LI>项目3

………….

</MENU>

MENU:作为菜单列表的声明。

LI：作为每一个项目的起始。

目录列表标记<DIR>

目录列表用于显示文件内容的目录大纲。目录列表通常用于设计一个压缩窄列的列表，用于显示一系列的列表内容，列表中每项至多只能有20个字符。

语法：

<DIR>

<LI>项目1

<LI>项目2

<LI>项目3

………….

</DIR>

DIR：作为目录列表的声明

LI：作为每一个项目的起始

符号列表的类型属性TYPE

默认情况下，符号列表使用“●”作为列表的开始，可以通过TYPE属性将符号列表的类型设置为“○”或者“■”。

示例：符号列表的应用，代码如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>符号列表的应用</title>
</head>
<body>
<h2> 符号列表标记 <UL> </h2>
<ul type="circle">
<li>符号列表标记 <UL></li>
<li>目录列表标记 <DIR></li>
<li>菜单列表标记 <MENU></li>
<li>符号列表的类型属性 TYPE</li>
</ul>
<hr align="left" width="50%">
<h2> 菜单列表标记 <MENU> </h2>
<menu>
<li>符号列表标记 <UL></li>
<li>目录列表标记 <DIR></li>
<li>菜单列表标记 <MENU></li>
<li>符号列表的类型属性 TYPE</li>
</menu>
<hr align="left" width="50%">
<h2> 目录列表标记 <DIR> </h2>
<dir>
<li>符号列表标记 <UL></li>
<li>目录列表标记 <DIR></li>
<li>菜单列表标记 <MENU></li>
<li>符号列表的类型属性 TYPE</li>
</dir>
</body>
</html>

复制代码

定义列表<DL>，<DT>，<DD>

定义列表是一种两个层次的列表，用于解释名词的定义，名词为第一层次，解释为第二层次，并且不包含项目符号。
语法：
<DL>
<DT>名词1<DD>解释1
<DT>名词2<DD>解释2
<DT>名词3<DD>解释3
…………..
</DL>
DL：作为定义列表的声明
DT：作为名词的标题
DD：用来解释名词
下面做一个定义列表应用的简单示例，代码如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>定义列表的应用</title>
</head>
<body>
<h2>定义列表</h2>
<dl>
<dt>定义列表标记<DL><dd>定义列表是一种两个层次的列表用于解释名词的定义
<dt>符号列表标记 <UL><dd>符号列表标记
<dt>目录列表标记 <DIR><dd>目录列表用于显示文件内容的目录大纲
<dt>菜单列表标记 <MENU><dd>菜单列表用于显示菜单内容
<dt>符号列表的类型属性 TYPE<dd>符号列表的类型属性
</dl>
<hr align="left" width="50%">
</body>
</html>

复制代码

列表的嵌套

嵌套列表指的是多于一级层次的列表，一级项目下面可以存在二级项目，三级项目等。项目列表可以进行嵌套，以实现多级项目列表的形式。

编号列表和符号列表的嵌套

这种嵌套类型是最觉的列表嵌套，重复地使用<OL>和<UL>标记可以组合出嵌套列表。
实现编号列表和符号列表的嵌套示例代码如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>编号列表和符号列表的嵌套</title>
</head>
<body>
<h2>编号列表和符号列表的嵌套</h2>
<ol>
<li>编号列表标记<OL></li>
<ul type="circle">
<li>符号列表标记 <UL></li>
<ol>
<li>编号列表标记<OL></li>
<li>编号列表类型属性TYPE</li>
<li>编号列表起始属性START</li>
</ol>
<li>目录列表标记 <DIR></li>
<li> 定义列表标记 <DL> </li>
<li>菜单列表标记 <MENU></li>
<li>符号列表的类型属性 TYPE</li>
</ul>
<li>编号列表类型属性TYPE</li>
<ol>
<li>编号列表标记<OL></li>
<li>编号列表类型属性TYPE</li>
<li>编号列表起始属性START</li>
</ol>
<li>编号列表起始属性START</li>
</ol>
<HR align="left" width="50%">
</body>
</html>

复制代码

定义列表的嵌套

在定义列表中，一个<DT>标记下可以有多个<DD>标记作为名词的解释和说明，以实现定义列表的嵌套。
语法：
<DL>
<DT>名词1
<DD>解释1
<DD>解释2
<DD>解释3
<DT>名词2
<DD>解释1
<DD>解释2
<DD>解释3
………..
</DL>
定义列表的嵌套示例程序代码如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>定义列表的嵌套</title>
</head>
<body>
<h2>符号列表</h2>
<dl>
<dt><u><big>符号列表标记 <UL></big></u>
<dd>符号列表标记
<dd><UL>
<dt><u><big>目录列表标记 <DIR></big></u>
<dd>目录列表用于显示文件内容的目录大纲
<dd>显示文件内容的目录大纲
<dt><u><big>定义列表标记<DL></big></u>
<dd>定义列表是一种两个层次的列表用于解释名词的定义
<dd>用于解释名词的定义
<dt><u><big>菜单列表标记 <MENU></big></u>
<dd>菜单列表用于显示菜单内容
<dd>显示菜单内容
<dt><u><big>符号列表的类型属性 TYPE</big></u>
<dd>符号列表的类型属性
<dd>TYPE
</dl>
</body>
</html>

复制代码

zybx520 · 发表于 2012-6-24 11:42:02

本帖最后由 zybx520 于 2012-6-24 14:22 编辑

超链接是网页页面中最重要的元素之一，一个网站是由多个页面组成的，页面之间根据链接确定相互的导航关系。单击网页上的链接文字或者图像后，就可以跳转到另一个网页。每一个网页都有唯一的地址，在英文中被称作URL(Uniform Resource Locator，统一资源定位符)。

文件路径

每一个文件都有自己的存放位置和路径，理解一个文件和要链接的那个文件之间的路径关系是创建链接的根本。同一个网站下的每一个网页都隶属于同一个域名地址之下。当创建网页时，不需要为每一个链接都输入完整的地址，只需要确定当前文档同站点根目录之间的相对路径关系。因此，在HTML文件中，文件路径可以分为绝对路径，相对路径和根目录路径。

绝对路径

绝对路径为文件提供完整的路径，包括提供适用的协议，如http，ftp，rtsp等。例如，http://bbs.poluoluo.com，ftp://127.0.0.1。当需要链接到其他网站中的文件时，必须使用路径建立链接

相对路径

相对路径最适合网站的内部链接。只要是隶属于同一网站之下，即使不在同一个目录下，相对路径的链接也非常适合。这种地址形式利用的是建立链接的两个文件之间的相对关系，不受站点文件夹所处服务器位置的影响。

相对路径书写形式省略了绝对地址中的相同部分，这样做的优点是站点文件夹所在的服务器地址发生改变时，文件夹的所有内部链接都不会出现问题。

相对路径链接的使用方法如下：

1，如果链接到同一目录下，则只需要输入要链接文件的名称，

2，如要链接到下一级目录中的文件，只需要先输入目录名，然后加符号“/”，再输入文件名。

3，如要链接到上一级目录中的文件，只需要先输入符号“../”，再输入目录名，文件名。

根目录路径

同样适用于创建内部链接，但大多数情况下，不建议使用这种链接形式，它在下列情况下常用。

1，当站点的规模非常大，放置于几个服务器上时。

2，当一个服务器上同时放置几个站点时。

3，目录层次较多时。

根目录路径书写首先以一个“/”开头，代表根目录，然后书写文件夹名，最后书写文件名，例如：/poluoluo/mail.htm

链接标记<A>

链接标记<A>在网站设计制作中占有不可替代的地位。链接标记的属性如下图所示：
链接标记的属性.jpg

内部链接

如果链接指向的是站点文件夹之内的文件，就是内部链接。内部链接指的是在同一个网站内部，不同的HTML页面之间的链接关系。

建立内部链接

语法：<A href="file_name">链接文字</a>
Href：指定地址，
File_name：链接文件的路径，一般使用相对文件路径或者根目录路径。
“链接文字”：鼠标单击的文字内容。

设定链接的目标窗口
建立超链接，可以指定这个超链接打开的目标窗口。
语法：<A href="file_name"target="value">链接文字</a>
Target：定义目标窗口，value的取值如下图所示：
链接的目标窗口属性.jpg

下面做一个内部链接应用的示例，在文件index.htm中建立链接，单击链接文字将链接到index01.htm，index.htm代码如下：

<font size="3"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>内部链接的应用</title>
</head>
<body>
<h2>建立超链接</h2>
<p style="width:500px; height:100px ">超链接是网页页面中最重要的元素之一。一个网站是由多个页面组成的，页面之间是根据链接确定相互的导航关系。单击网页上的链接文字或者图像后，就可以跳转到另一个网页。每一个网页都有惟一的地址，在英文中被称作URL （Uniform Resource Locator，统一资源定位器）。</p>
<p><a href="index01.htm" target="_self">内部链接</a></p>
</body>
</html>
</font>

复制代码

Index01.htm代码如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>内部链接的应用</title>
</head>
<body>
<h2>内部链接</h2>
<p style="width:500px; height:100px ">内部链接指的是在同一个网站内部，不同的HTML页面之间的链接关系。在建立网站内部链接的时候，要考虑到使链接具有清晰的导航结构，使用户方便地找到所需查看的HTML文件。</p>
<p><a href="index.htm">返回</a></p>
</body>
</html>

复制代码

书签链接

在浏览页面的时候，如果页面内容较多，页面过长，浏览的时候需要不断拖动滚动条，很不方便，而要寻找特定的内容，就更加不方便。这时如果能在该页面或者另外一个页面上建立目录，浏览者单击目录上的项目就能自动跳到网页相应的位置进行阅读，并且还可以在页面中设定诸如“返回首页”之类的链接，这种链接称为书签链接，也叫作锚。

1，建立书签

建立书签，这个书签是随后将要跳转到的位置
语法：<A NAME="NAME">文字</A>

2，链接同一页面中的书签

页面内容时，可以在同一页面中建立书签，迅速查找到需要的内容。
语法：<A href="#bookmark_name">文字链接</a>
Bookmark_name：定义书签名称，当单击链接时会跳转到该定位上。
示例：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>链接同一页面书签</title>
</head>
<body>
<h1><a name="ys">建立超链接</a></h1>
<p><a href="#nblink">内部链接</a> <a href="#sqlink">书签链接</a></p>
<h2><a name="nblink">内部链接</a>(<a href="#ys">返回页首</a>)</h2>
<p style="width:400px; height:100px; line-height:50px ">内部链接指的是在同一个网站内部，不同的HTML页面之间的链接关系。在建立网站内部链接的时候，要考虑到使链接具有清晰的导航结构，使用户方便地找到所需查看的HTML文件。</p>
<h2><a name="sqlink">书签链接</a>(<a href="#ys">返回页首</a>)</h2>
<p style="width:400px; height:100px; line-height:50px"> 在浏览页面的时候，如果页面内容较多，页面过长，浏览的时候需要不断拖动滚动条，很不方便，如果要寻找特定的内容，就更加不方便。这时如果能在该页面或者另外一个页面上建立目录，浏览者单击目录上的项目就能自动跳到网页相应的位置进行阅读，简化查找过程便于阅读，并且还可以在页面中设定诸如“返回页首”之类的链接。这就称为书签链接，也叫做锚。 </p>
</body>
</html>

复制代码

3，链接到其他页面中的书签

在页面之间，也可以完成跳转到另一页面某一位置的过程。这需要指定链接的页面和链接的书签位置。
语法：<A href="file_url#bookmark_name">文字链接</a>
File_URL：要跳转到的页面路径。
Bookmark_Name：定义书签名称。
下面做一个链接到其他页面中书签的应用，在文件index.htm中使用链接文字链接到文件index01.htm中的指定书签位置，index.htm代码如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>链接到其他页面中的书签</title>
</head>
<body>
<h2><a name="ys">建立超链接</a></h2>
<p style="width:500px; height:100px ">超链接是网页页面中最重要的元素之一。一个网站是由多个页面组成的，页面之间是根据链接确定相互的导航关系。单击网页上的链接文字或者图像后，就可以跳转到另一个网页。每一个网页都有惟一的地址，在英文中被称作URL （Uniform Resource Locator，统一资源定位器）。</p>
<p><a href="index01.htm#nblink">内部链接</a> <a href="index01.htm#sqlink">书签链接</a></p>
</body>
</html>

复制代码

文件index01.htm代码如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>链接到其他页面中的书签</title>
</head>
<body>
<h2><a name="nblink">内部链接</a>(<a href="index.htm#ys">返回上一页</a>)</h2>
<p style="width:400px; height:100px; line-height:50px ">内部链接指的是在同一个网站内部，不同的HTML页面之间的链接关系。在建立网站内部链接的时候，要考虑到使链接具有清晰的导航结构，使用户方便地找到所需查看的HTML文件。</p>
<h2><a name="sqlink">书签链接</a>(<a href="index.htm#ys">返回上一页</a>)</h2>
<p style="width:400px; height:100px; line-height:50px"> 在浏览页面的时候，如果页面内容较多，页面过长，浏览的时候需要不断拖动滚动条，很不方便，如果要寻找特定的内容，就更加不方便。这时如果能在该页面或者另外一个页面上建立目录，浏览者单击目录上的项目就能自动跳到网页相应的位置进行阅读，简化查找过程便于阅读，并且还可以在页面中设定诸如“返回页首”之类的链接。这就称为书签链接，也叫做锚。 </p>
</body>
</html>

复制代码

zybx520 · 发表于 2012-6-24 14:39:17

本帖最后由 zybx520 于 2012-6-24 14:43 编辑

外部链接指的是中转到当前网站外部，与其他网站中的页面或者其他元素之间的链接关系。这种链接在一般情况下需要书写绝对的链接地址。

建立外部链接的时候，使用URL统一资源定位符来定位互联网信息，这种方式可以简洁，明了，准确地描述信息所在的地点。URL书写格式如下图：

1，链接到外部网站

在网站的网页中可以建立链接，链接到其他外部网站

语法：<A href="http://">文字链接</a>

例如将文字“破洛洛论坛”链接到网址：http://bbs.poluoluo.com，代码如下：

<A href="http://bbs.poluoluo.com">破洛洛论坛</a>

2,链接FTP

FTP（File Transfer Protocol，文件传输协议）协议是计算机与计算机之前能够相互通信的语言，FTP使文件和文件夹能够在Internet上公开传输，通过FTP可以获得各种免费软件和其他文件资料。在某些情况下，需要从网络计算机管理员处获得许可，才能登录并访问计算机上的文件，但是可以匿名访问的FTP服务器允许用户直接访问数据。

语法：<A href="ftp://">文字链接</a>

ftp://后面写下的是FTP主机地址。

例如将文字“我的FTP”链接到ftp://127.0.0.1，代码如下：

<A href="ftp://127.0.0.1">我的FTP</a>

3,发送E-mail

在HTML页面中可以建立E-mail链接，当浏览者单击E-mail链接后，系统会启动默认的电子邮件软件进行E-mail的发送。

语法：

<A href="mailto://a@b.c">发送E-mail</a>.

a@b.c：代表邮件地址

subject：电子邮件主题

cc：抄送收件人

bcc：暗送收件人

E-mail链接地址中包含多个参数时，参数间使用“&”符号分隔。

示例：E-mail链接的应用，代码如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>E-mail链接的应用</title>
</head>
<body>
<p><a href="mailto:318490@qq.com">给作者的信</a></p>
<p><a href="mailto:318490@qq.com?subject=意见反馈&cc=318490@qq.com&bcc=318490@qq.com">本教程的意见反馈</a></p>
</body>
</html>

复制代码

4,链接到Gopher

在WWW出现之前，Gopher软件是Internet 上最主要的信息检索工具，Gopher站点也是最主要的站点。
语法：<a href="Gopher://">文字链接</a>

5，链接到news新闻组

News新闻组邮分布在世界各地的上千个新闻服务器组成，它能够随时更换消息，任何一条发送到新闻组服务器上的消息，在几分钟后就能传遍全球。一台计算机上可以建立数千个新闻组，每一个浏览者几乎可以找到任何主题的新闻组并可以向新闻组张贴邮件，新闻组一般不需要成员资格或者缴纳费用。
语法：<a href="news://">文字链接</a>
News://后面写下的是news服务器的地址。

6，链接Telnet

telnet也是Internet上最主要和最广泛的应用之一，远程登录Telnet是指一台计算机远程链接到另一台计算机，并在远程计算机上运行自己系统的程序，从而共享计算机网络系统的软件和硬件资源。
语法：<a href="telnet://">文字链接</a>
telnet://后面写下的是telnet站点的地址。

其他链接

除了觉的内部链接，书签链接和外部链接，在页面中还可以使用下载文件链接，脚本链接和空链接

1，下载文件

当用户单击一个链接后，浏览器会自动判断文件的类型，如果是页面或者图像等文件，浏览器可以识别并且打开的文件，会在浏览器中显示相关的内容；若不能在浏览器中打开，则会出现下载对话框，建立下载文件的链接，只需要在链接地址处输入文件所在的位置即可。
语法：<A href="file_url">文字链接</a>
File_url：代表文件所在的路径，可以写相对路径，也可以写绝对路径

2，脚本链接

在链接语句中，可以通过脚本来实现HTML语言完成不了的功能。
下面以JaveScript脚本为例说明脚本链接的应用，单击文字“破洛洛论坛”链接到http://bbs.poluoluo.com地址，代码如下：

<a href="#" onclick="javascript:window.open('http://bbs.poluoluo.com');">破洛洛论坛</a>

复制代码

3,空链接

在链接中，可以通过“#”符号实现空链接，空链接是指指向链接后，鼠标变成手形，单击链接后，仍然停留在当前页面。
语法：<a href="#">文字链接</a>
例如：将文字“破洛洛论坛”设定为空链接，代码如下：

<a href="#">破洛洛论坛</a>

复制代码

zybx520 · 发表于 2012-6-27 19:51:36

很抱歉，前两天宝宝没有人带，一直一个人带在身边，所以没有办法整理更新。

今天给大家讲讲表格的制作。

表格是网站常用的页面元素，是网页排版的灵魂，在页面中用表格来显示数据，直观清晰，HTML的表格使用起来非常灵活。无论是使用简单的HTML语言编辑的网页，还是具有动态网站功能的ASP，JSP，PHP网页，都要借助表格进行排版。许多较复杂的页面而已也可以利用表格来完成。

表格是睥最佳手段，利用表格的丰富属性可以设计出各种复杂的表格，在HTML中，表格主要由3个标记来构成；表格标记<TABLE>，行标记<TR>，单元格标记<TD>.

语法：

<TABLE>

<TR>

………

</TR>

……..

</TR>

…….

</TABLE>

表格的属性如下图所示：
表格的属性.jpg

通过设置表格的自有属性，可以设计出不同风格的表格。

1，表格的宽度和高度属性WIDTH，HEIGHT

语法：<TABLEWIDTH=VALUE HEIGHT=VALUE>

WIDTH，WEIGHT：表格的宽度和高度

VALUE：表格的单位，可以为像素或者百分比的形式表现。

2，表格的水平对齐属性<ALIGN>

语法：<TABLEALIGN="LEFT","CENTER","RIGHT">

LEFT：居左对齐

CENTER：居中对齐

RIGHT：居右对齐

3，单元格间距属性<CELLSPACING>

通过属性CELLSPACING，可以设定表格的单元格与单元格之间的间距。

语法：<TABLECELLSPACING=VALUE>

VALUE：间距以像素为单位。

4，单元格边距属性<CELLPADDING>

语法：<TABLECELLPADDING=VALUE>

VALUE：边距以像素为单位。

5，表格的背景颜色属性<BGCOLOR>

通过属性BGCOLOR，可以设置表格的背景颜色，表格的背景颜色将会填充到表格的所有空间。

语法：<TABLEBGCOLOR=color_value>

Color_value：使用颜色的英文名称或者十六进制值表示。

6，表格的背景图像属性<BACKGROUND>

可以设置GIF或者JPEG格式的为表格的背景图像

语法：<TABLEBACKGROUND=file_name>

File_name：存放背景图片文件的完整路径或者相对路径

7，表格的边框属性<BORDER>

默认情况下，表格的边框线为0像素，可以设置表格的边框属性BORDER的属性值来改变边框的像素。

语法：<TABLEBORDER=VALUE>

BORDER：定义边框线的宽度，单位为像素。

8，表格的边框颜色属性<BORDERCOLOR>

语法：<TABLEBORDERCOLOR="color_value">

Color_value：使用颜色的英文名称或者十六进制值表示。

在设置表格的边框颜色前，首先要设置BORDER属性值使之不为0，边框才可以显示颜色。

9，表格的亮边框属性<BORDERCOLORLIGHT>

在表格中，可以单独定义左上边框的颜色或者定义单元格右下边框的颜色，这两个位置的边框色称为亮边框色

语法：<TABLEBORDERCOLORLIGHT=color_value>

Color_value：使用颜色的英文名称或者十六进制值表示。

10，表格的暗边框属性<BORDERCOLORDARK>

在表格中，可以单独定义右下边框颜色或者定义单元格左上边框的颜色，这两个位置的边框色称为暗边框色。

语法：<TABLEBORDERCOLORDARK=color_value>

Color_value：使用颜色的英文名称或者十六进制值表示。

11，表格的边框样式属性<FRAME>

通过属性FRAME，可以设置表格边框的样式类型。

语法：<TABLEFRAME=VALUE>

VALUE：边框样式类型值，如下图所示：
表格边框属性值.jpg

12，表格的内部边框样式属性<RULES>

语法：<TABLERULES=value>

Value：内部边框样式属性值，表格的内部边框样式属性如下图：
表格内部边框属性值.jpg

zybx520 · 发表于 2012-6-28 00:39:36

还好了，这周六公司要搞两周年毕业嘉年华，会忙一些，但我会尽量每天把自己该干的干了，谢谢大家的支持

zybx520 · 发表于 2012-6-28 00:46:34

等忙完了这一周，还会给大家写一些ASP和PHP的教程，希望大家好好学习，天天向上，嘿嘿。

zybx520 · 发表于 2012-6-28 17:49:01

表格的标题与表头

在HTML语言中，可以通过标记<CAPTION>为表格添加标题

语法：<CAPTION>…..</CAPTION>

可以通过表格标题的ALIGN属性和VALIGN属性，设置标题在水平方向和垂直方向相对于表格的对齐方式。

1，表格标题的水平对齐属性ALIGN

默认情况下，表格的标题水平是居中的，可以能过设置ALIGN来改变标题水平对齐的方式

语法：<CAPTIONALIGN="LEFT">…..</CAPTION>

LEFT：居左对齐，

CENTER：居中对齐

RIGHT：居右对齐

2，表格标题的垂直对齐属性<VALIGN>

通过属性VALIGN，可以设定标题放在表格的上方或者下方，默认情况下，表格的标题是放在上方的。

语法：<CAPTIONVALIGN="TOP">……</CAPTION>

TOP：在表格上方

BOTTOM：在表格下方

表格的表头<TH>

表头是指表格的第一行，通过标记<TH>实现文字居中对齐并且加粗显示。

语法：<TABLE>

<TR>

………

</TR>

<TR>

………

</TR>

………..

</TABLE>

行标记属性<TR>

行标记<TR>的属性用于设定表格中某一行的属性。行标记<TR>属性如下图所示：
行标记.jpg

1，行的水平对齐属性<ALIGN>

语法：<TRALIGN="LEFT">

LEFT：居左对齐，

CENTER：居中对齐

RIGHT：居右对齐

2，行的垂直对齐属性<VALIGN>

语法：<TRVALIGN="TOP">

LEFT：居上对齐，

CENTER：居中对齐

RIGHT：居下对齐

3，行的背景颜色属性BGCOLOR

语法：<TRBGCOLOR=COLOR_VALUE>

COLOR_VALUE：使用颜色的英文名称或者十六进制值表示。

4，行的边框色属性BORDERCOLOR

设置属性BORDERCOLOR可以改变行的边框颜色

语法：<TRBORDERCOLOR=COLOR_VALUE>

COLOR_VALUE：使用颜色的英文名称或者十六进制值表示。

5，行的亮边框色属性BORDERCOLORLIGHT

语法：<TRBORDERCOLORLIGHT=COLOR_VALUE>

COLOR_VALUE：使用颜色的英文名称或者十六进制值表示。

6，行的暗边框色属性BORDERCOLORDARK

语法：<TRBORDERCOLORDARK=COLOR_VALUE>

COLOR_VALUE：使用颜色的英文名称或者十六进制值表示。

zybx520 · 发表于 2012-6-29 18:08:06

本帖最后由 zybx520 于 2012-6-29 18:09 编辑

单元格标记<TD>的属性用于设定表格中某一单元格的属性，标记<TD>属性如下图：

1，单元格的宽度和高度属性WIDTH,HEIGHT

在默认的情况下，单元格的宽度和高度会根据内容自动的调整，也可以设置其属性值来控制宽度和高度。

语法：<TDWIDTH=VALUE HEIGHT=VALUE>

VALUE：单位为像素或者百分比

2，单元格的水平对齐属性ALIGN

调整单元格的水平对齐方式

语法：<TDALIGN="LEFT">

LEFT：居左对齐

CENTER：居中对齐

RIGHT：居右对齐

3，单元格的垂直对齐属性VALIGN

语法：<TD VALIGN="TOP">

TOP：居上对齐

MIDDLE：居中对齐

BOTTOM：居下对齐

4，单元格的背景色属性BGCOLOR

语法：<TDBGCOLOR=COLOR_VALUE>

COLOR_VALUE：使用颜色的英文名称或者是十六进制值表示

5，单元格的背景图像属性BACKGROUND

语法：<TDBACKGROUND=FILE_NAME>

FILE_NAME：存放背景图片文件的完整路径或相对路径

6，单元格的边框色属性BORDERCOLOR

语法：<TDBORDERCOLOR=COLOR_VALUE>

COLOR_VALUE：使用颜色的英文名称或者是十六进制值表示

7，单元格的亮边框属性BORDERCOLORLIGHT

语法：<TDBORDERCOLORLIGHT=COLOR_VALUE>

COLOR_VALUE：使用颜色的英文名称或者是十六进制值表示

8，单元格的暗边框属性BORDERCOLORDARK

语法：<TDBORDERCOLORDARK=COLOR_VALUE>

COLOR_VALUE：使用颜色的英文名称或者是十六进制值表示

9，单元格的跨行属性ROWSPAN

设置单元格的跨行属性ROWSPAN可以实现某个单元格在水平方向上跨越多个单元格。

语法：<TDROWSPAN=VALUE>

VALUE：跨越多少个单元格，ROWSPAN的属性值就是多少

10，单元格的跨列属性COLSPAN

设置单元格的跨列属性COLSPAN可以实现某个单元格在垂直方向上跨越多个单元格

语法：<TDCOLSPAN=VALUE>

VALUE：跨越多少个单元格，COLSPAN的属性值就是多少

表格结构标记

为了在HTML源代码中区分表格结构，HTML语言规定了<THEAD>，<TBODY>和<TFOOT>三个标记，分别应用于表格的表首，表主体和表尾。

1，表格的表首标记<THEAD>

语法：<THEADALIGH=VALUE BGCOLOR=COLOR_VALUE VALIGN=VALUE>

ALIGN：代表水平对齐，value值为left居左，center居中，right居右

BGCOLOR：表首行的背景颜色

VALIGN；代表垂直对齐，value值为top居上，middle居中，bottom居下

2，表格的主体标记<TBODY>

语法：<TBODYALIGN=VALUE BGCOLOR=COLOR_VALUE VALIGN=VALUE>

ALIGN：代表水平对齐，value值为left居左，center居中，right居右

BGCOLOR：表主体的背景颜色

VALIGN；代表垂直对齐，value值为top居上，middle居中，bottom居下

3，表格的表尾属性<TFOOT>

语法：<TFOOTALIGN=VALUE BGCOLOR=COLOR_VALUE VALIGN=VALUE>

ALIGN：代表水平对齐，value值为left居左，center居中，right居右

BGCOLOR：表尾行的背景颜色

VALIGN；代表垂直对齐，value值为top居上，middle居中，bottom居下

关于HTML表格制作基本就讲完了，下面我们做一个示例，代码运行效果如下图：
表格制作示例.jpg

程序代码如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>制作表格</title>
</head>
<body topmargin="0">
<table width="80%" border="2" align="center" cellpadding="10" cellspacing="6" bordercolor="#3399FF" bordercolorlight="#CC6600" rules="rows">
<caption align="center">表格的网页排版</caption>
<tr>
<th height="35" colspan="3" scope="col">表格的制作</th>
</tr>
<tbody>
<tr>
<td width="6%" rowspan="3" background="01-03.gif"></td>
<td width="42%" height="25" valign="middle" bgcolor="#D8E1F8"> 表格的标题与表头标记</td>
<td width="52%" height="25" valign="middle"><CAPTION>,<TH></td>
</tr>
<tr>
<td height="25" valign="middle" bgcolor="#D8E1F8"> 行标记与列标记</td>
<td height="25" valign="middle"><TR>,<TD></td>
</tr>
<tr>
<td height="25" valign="middle" bgcolor="#D8E1F8"> 表格结构标记 </td>
<td height="25" valign="middle"> <THEAD> ， <TBODY> , <TFOOT> </td>
</tr>
</tbody>
<tfoot>
<tr>
<td height="25" colspan="3">精美网页</td>
</tr>
</tfoot>
</table>
</body>
</html>

复制代码

zybx520 · 发表于 2012-7-1 16:56:50

表单是客户端和服务端交互的重要手段，利用可以收集客户端提交的有关信息。例如，在一个电子商务网站中申请成为会员，用户需要填写网站提供的表单，其内容包括用户名，密码，联系方式等个人信息。

提交表单信息的处理过程：单击表单的提交按钮时，输入在表单中的信息会上传到服务器，然后由服务器上的相关应用程序进行处理，处理后或者将用户提交的信息储存在服务器商的数据库中，或者将一些信息返回给用户浏览器端。

表单的结构

表单是网页上的一个特定区域，这个区域是由<FORM>，</FORM>标记定义的，其他的表单对象，都要插入到表单之中，单击提交按钮时，提交的也是表单范围之内的内容。表单区域还携带表单的相关信息，例如处理表单的脚本程序的位置，提交表单的方法等。

表单的结构：<FORMNAME="FORM_NAME" METHOD="METHOD" ACTION="URL" ENCTYPE="VALUE" TARGET="TARGET_WIN">………..</FORM>

其标记属性如下图所示：
表单FORM属性.jpg

1，表单的NAME属性

通过定义表单的名称可以准确地控制表单及其内容。

语法：<FORMNAME="FORM_NAME">……….</FORM>

FORM_NAME：表单的名称。

2，表单的METHOD属性

通过METHOD属性，可以设定表单内容的提交方式。

语法：<FORM METHOD="METHOD">……..</FORM>

METHOD：取值有GET和POST。GET方法是将表单内容附加在URL地址后面，POST方法是将用户在表单中赶写的数据包含在表单的主体中，一起传送到服务器上的处理程序，在浏览器的地址栏不显示提交的信息。METHOD属性默认方法为GET方法。

3，表单的ACTION属性

在ACTION属性中定义表单提交的地址，也就是相应的处理页面

语法：<FORMACTION="URL">………….</FORM>

URL：提交的绝对地址或者相对地址

4，表单的ENCTYPE属性

设置表单内容的编码方式，在无组件上传奇过程的定义中，就会使用MINE编码方式提交数据。

语法：<FORMENCTYPE="VALUE">……</FORM>

VALUE的取值有3种

Text/plain：以纯文本的形式传送信息。

Application/x-www-Form-urlencoded：默认的编码形式。

Multipart/Form-date：使用MINE编码。

5，表单的TARGET属性

设置返回信息的显示方式

语法：<FORMTARGET="TARGET">……..</FORM>

TARGET的属性值如下图：
表单的TARGET属性.jpg

zybx520 · 发表于 2012-7-4 20:29:11

本帖最后由 zybx520 于 2012-7-4 20:31 编辑

输入域标记<INPUT>

输入域标记<INPUT>是表单中最常用的标记之一，常用的文本域，按钮，单选复选框等构成了一个完整的表单。

语法：<FORM>

</FORM>

NAME：输入域的名称

TYPE：输入域的类型

TYPE的属性值如下图：
1.22.jpg

1，文字域TEXT

TEXT属性值用来设定在表单的文本域中，可以输入任何类型的文本，数字，字母等字符串，输入的内容以单选显示。

语法：<FORM>

<INPUTTYPE="text" NAME="field_name" MAXLENGTH="value" SIZE="value" VALUE="field_value">
</FORM>
文字域TEXT对应属性的含义如下图所示：
1.23.jpg

2，密码域PASSWORD

在表单中还有一种文本域的形式为密码域，输入到文本域中的文字均以星号或者圆点显示。

语法：<FORM>

<INPUTTYPE="password" NAME="field_name" MAXLENGTH="value" SIZE="value">

</FORM>

密码域PASSWORD对应属性含义如下图：
1.24.jpg

3，文件域FILE

文件域的外观是一个文本框加一个浏览按钮，用户即可直接将要上传给网站的文件路径赶写在文本框中，也可以单击浏览按钮，在用户的计算机中选择要上传的文件，然后通过表单上传到服务器，例如上传附件，office文档，图片等各种类型的文件，都要用到文件域。

语法：<FORM>

<INPUTtype="file" NAME="field_name">

</FORM>

4，单选按钮RADIO

单选按钮在选项组中只允许选择一项

语法：<FORM>

<INPUTType="RADIO" NAME="field_name" Value="value">

</FORM>

示例：通过单选按钮选择性别，代码如下：

<FORM>

<inputtype="RADIO" NAME="SEX" Value="男">

</FORM>

5，复选按钮CHECKBOX

复选按钮能够进行项目的多项选择。浏览者填写表单时，有时需要选择多个项目，例如收集个人信息时，要求在个人爱好的选项中进行多项选择等。

语法：<FORM>

<INPUTType="checkbox" NAME="field_name" checked Value="value">

</FORM>

6，提交按钮SUBMIT

单击提交按钮后，可以实现表单内容的提交

语法：<FORM>

<INPUTType="submit" NAME="field_name" Value="button_text">

</FORM>

VALUE：代表显示在按钮上面的文字。

7，重置按钮RESET

单击重置按钮后，可以清除表单中的内容，恢复默认的表单内容设定。

语法：<FORM>

<INPUTType="reset" NAME="name" value="button_text">

</FORM>

8，普通按钮BUTTON

按钮可以激发提交表单的动作，可以在用户需要修改表单的时候，将表单恢复到初始的状态，还可以依照程序的需要，发挥其他作用。普通按钮一般配合JavaScript脚本来进行表单的处理

语法：<FORM>

<INPUTType="button" NAME="field_name" value="button_text">

</FORM>

9，隐藏域HIDDEN

隐藏域在页面中对于用户而言是不可见的，插入隐藏域的目的在于通过隐藏的方式收集或者发送信息。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到相关页面。

语法：<FORM>

<INPUTType="hidden" NAME="name" value="value">

</FORM>

10，图像域IMAGE

图像域指的是可以用在提交按钮位置上的图片，这幅图片具有按钮的功能。

语法：<FORM>

<INPUTType="image" NAME="name" SRC="image_url">

</FORM>

Image_url：图片存放的路径

文字域标记TEXTAREA

文字域标记TEXTAREA用来制作多行的文字域，可以在其中输入更多的文本。

语法：<FORM>

<TEXTAREANAME="NAME" ROWS="VALUE" COLS="VALUE" VALUE="VALUE"

……文本的内容

</TEXTAREA>

</FORM>

文字域标记属性如下图所示：

选择域标记SELECT和OPTION

通过选择域标记SELECT和OPTION可以建立一个列表或者菜单，菜单节省空间，正常状态下只能看到一个选项，单击按钮打开菜单后才能看到全部的选项。列表可以显示一定数量的选项，如果走出了这个数量，会自动出现滚动条，浏览者可以通过拖动滚动条来查看各选项。

语法：<FORM>

<SELECTNAME="name" SIZE="value" Multiple>

<optionvalue="value" Selected>选项1

<optionvalue="value">选项2

<option value="value">选项3

…………..

</select>

</FORM>

Multiple：表示以菜单方式显示数据，省略则以列表方式显示数据。

选择域标记属性如下图：

表单的应用差不多讲到这里就结束了，下面我们做一个简单的示例：运行效果如下图：

代码如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>表单的应用</title>
<style type="text/css">
<!--
body{font-size:14px}
-->
</style>
</head>
<body topmargin="0">
<form enctype="multipart/form-data">
<table width="550" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#3399FF">
<tr align="center" valign="middle" bgcolor="#FFFFFF">
<td height="30" colspan="4" bgcolor="#B7DAF9">个人简历</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="16%" height="30">真实姓名:</td>
<td height="30" colspan="3"><input name="name" type="text" id="name" maxlength="50"></td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="30">年龄:</td>
<td width="36%" height="30"><input name="age" type="text" id="age" size="10" maxlength="10"></td>
<td width="9%" height="30">性别: </td>
<td width="39%" height="30">
<input name="sex" type="radio" value="0" checked>男
<input type="radio" name="sex" value="1">女
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="30">毕业院校:</td>
<td height="30" colspan="3"><input name="school" type="text" id="school" maxlength="50"></td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="30">所学专业:</td>
<td height="30" colspan="3"><select name="spe" id="spe">
<option value="0">选择专业</option>
<option value="1">计算机应用</option>
<option value="2">土木工程</option>
<option value="3">软件工程师</option>
<option value="4">注册会计师</option>
</select></td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="30">联系方式:</td>
<td height="30" colspan="3"><input name="tel" type="text" id="tel"></td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="30">照片上传:</td>
<td height="30" colspan="3"><input name="pic" type="file" id="pic"></td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="30">爱好:</td>
<td height="30" colspan="3">
<input name="favorite" type="checkbox" id="favorite" value="0"> 计算机
<input name="favorite" type="checkbox" id="favorite" value="1">英语
<input name="favorite" type="checkbox" id="favorite" value="2">体育
<input name="favorite" type="checkbox" id="favorite" value="3">旅游
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="30">工作简历:</td>
<td height="30" colspan="3"><textarea name="summery" cols="60" rows="8" id="summery"></textarea></td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="30"> </td>
<td height="30" colspan="3"><input type="submit" name="Submit" value="提交">
<input type="reset" name="Submit2" value="重置"></td>
</tr>
</table>
</form>
</body>
</html>

复制代码

		自动登录	找回密码
密码			立即注册

[基础] 网页设计之基础篇－HTML（更新完结）

建立列表

评分

建立超链接

评分

外部链接

表格的制作

评分

单元格标记<TD>属性

表单的建立

评分

社区QQ达人

优秀版主