[分享]HTML入门

lfspecter · 发表于 2005-1-10 21:42

综合示例

前面我们所讲是单独使用一个标签的方法，在实际的编写中，许多标签和一些属性是结合起来使用的，比如：　　　　<FONT COLOR="#" SIZE=#>文字</FONT> 　　　　<B><U>文字</U></B>

【例】

<P>　　白居易（772-846年）字乐天，晚居香山，自号香山居士，原籍太原。白居易是唐代新乐府运动的倡<BR> 导者，是中国文学史上堪与屈原、李白、杜甫并列的第一流大诗人。 </P>

<P>　　白居易出身于小官僚家庭。大约在贞元三年（ 787年）的年初，十六岁的白居易带着自己的诗稿，到<BR> 了京都长安。老诗人顾况看到这位不速之客的姓名有“居易”二字，便很恢谐地说：“长安米贵，居住不易！”及披卷读到《赋得古原草送别》中的</P>

<P ALIGN=center><FONT COLOR="#3C7777"><CITE>“离离原上草，一岁一枯荣；野火烧不尽，春风吹又生”</CITE></FONT></P>

<P>时，不禁大为惊奇，拍案称绝，马上改变语气，郑重地说：“能写出这样好的诗句,‘居’下去是不难的，刚才我是同你开开玩笑罢了。”从此，白居易的诗名大振。 </P>

<P>　　白居易生活的时代，主要是建中、元和、长庆时期（公元781-824年）。是唐朝走向衰败的极端苦难动荡的时代。 </P>

<P>　　白居易是继杜甫之后，我国伟大的现实主义诗人。他的贡献是在总结我国自《诗经》以来现实主义诗歌创作经验的基础上，建立了现实主义的诗歌理论，掀起了一个波澜壮阔的现实主义的诗歌运动——新乐府运动，创作了大量优秀的现实主义诗篇。 </P>

</BODY> </HTML>

【显示结果】

[此贴子已经被作者于2005-1-10 21:42:17编辑过]

lfspecter · 发表于 2005-1-10 21:43

无序号列表

无序号列表使用的一对标签是<ul></ul>，每一个列表项前使用<LI>。其结构如下所示：

例：

<html> <head> <title>无序列表</title> </head> <body> 这是一个无序列表：<P> <UL> 国际互联网提供的服务有：　　<LI>WWW服务　　<LI>文件传输服务　　<LI>电子邮件服务　　<LI>远程登录服务　　<LI>其它服务 </UL>

</body> </html>

lfspecter · 发表于 2005-1-10 21:44

序号列表

序号列表和无序号列表的使用方法基本相同，它使用标签<OL></OL>，每一个列表项前使用<LI>。每个项目都有前后顺序之分，多数用数字表示。其结构如下所示：

例：

<html> <head> <title>有序列表</title> </head> <body> 这是一个有序列表：<P> <OL> 国际互联网提供的服务有：　　<LI>WWW服务　　<LI>文件传输服务　　<LI>电子邮件服务　　<LI>远程登录服务　　<LI>其它服务 </OL>

</body> </html>

lfspecter · 发表于 2005-1-10 21:45

表格的基本结构

<table>...</table> 　定义表格　<caption>...</caption>　定义标题　<tr> 　定义表行　<th> 　定义表头　<td> 　定义表元(表格的具体数据)

以下是一个简单的例子：

<table border=1><tr><th>姓名</th><th>性别</th><th>年龄</th><tr><td>王林</td><td>男</td><td>25</td>      </table>

lfspecter · 发表于 2005-1-10 21:45

表格的标题

表格标题的位置，可由ALIGN属性来设置，其位置分别由表格上方和表格下方。下面为表格标题位置的设置格式。

　　设置标题位于表格上方：

　　　　<caption align=top> ... </caption>

　　设置标题位于表格下方：

　　　　　<caption align=bottom> ... </caption>

显示结果：

旅游日程
日期	9-11	11-13	13-14
旅游地点	青岛	黄山	杭州

</table>

旅游日程
日期	9-11	11-13	13-14
旅游地点	青岛	黄山	杭州

lfspecter · 发表于 2005-1-10 21:47

表格的尺寸设置

表格的大小 　　一般情况下，表格的总长度和总宽度是根据各行和各列的总和自动调整的，如果我们要直接固定表格的大小，可以使用下列方式：

　　　　　　　　　　　<table width=n1 height=n2>

　　width和height属性分别指定表格一个固定的宽度和长度，n1和n2可以用像素来表示，也可以用百分比（与整个屏幕相比的大小比例）来表示。

　　下表是一个长为200像素，宽为100像素的表格。<table width="200" height="100">

　　下表是一个长为屏幕的20%，宽为屏幕的10%的表格。<table width=20% height=10%>

边框尺寸设置

　　边框是用border属性来体现的，它表示表格的边框边厚度和框线。将border设成不同的值，有不同的效果。

如：

显示结果为：

定货单
苹果	香蕉	葡萄
200公斤	200公斤	100公斤

显示结果：

定货单
苹果	香蕉	葡萄
200公斤	200公斤	100公斤

　

显示结果：

定货单
苹果	香蕉	葡萄
200公斤	200公斤	100公斤

格间线宽度

　　格与格之间的线为格间线，它的宽度可以使用<TABLE>中的CELLSPACING属性加以调节。格式是：

　　　　　<TABLE　CELLSPACING=#>　　　#表示要取用的像素值

例：

显示结果为：

定货单
苹果	香蕉	葡萄
200公斤	200公斤	100公斤

内容与格线之间的宽度

　　我们还可以在<TABLE>中设置CELLPADDING属性，用来规定内容与格线之间的宽度。格式为：

　　　　　　　　　　<TABLE　CELLPADDING=#>　　　#表示要取用的像素值

例：

lfspecter · 发表于 2005-1-10 21:48

表格内文字的对齐、布局

　　表格中数据的排列方式有两种，分别是左右排列和上下排列。左右排列是以ALIGN属性来设置，而上下排列则由VALIGN属性来设置。其中左右排列的位置可分为三种：居左（left)、居右(right)和居中(center)；而上下排列基本上比较常用的有四种：上齐(top)、居中(middle)、下齐(bottom)和基线(baseline)。

<tr align=#> <th align=#> 　　#=left, center, right <td align=#>

<tr valign=#> <th valign=#> 　　#=top，middle，bottom，baseline <td valign=#>

　

左右排列

显示结果：

居左	居中	居右
A	B	C

上下排列

显示结果：

	上齐	居中	下齐	基线
	A	B	C	D

[此贴子已经被作者于2005-1-11 17:50:33编辑过]

lfspecter · 发表于 2005-1-10 21:49

跨多行、多列的表元

要创建跨多行、多列的表元，只需在<TH>或<TD>中加入ROWSPAN或COLSPAN属性，这两个属性的值，表明了表元中要跨越的行或列的个数。

　跨多列的表元 <th colspan=#>　<td colspan=#> 　　colspan表示跨越的列数，例如colspan=2表示这一格的宽度为两个列的宽度。

　跨多行的表元 <th rowspan=#>　<td rowspan=#>　　　rowspan所要表示的意义是指跨越的行数，例如rowspan=2就表示这一格跨越表格两个行的高度。

跨多列的表元

<html> <head> <title>表格TABLE</title> </head> </html>

<table border>
<tr><th colspan=3>值班人员 </th>
<tr><th>星期一</th>       <th>星期二</th>  <th>星期三</th>
<tr><td>李强</td><td>张明</td><td>王平</td>
</table>

跨多行的表元

<html> <head> <title>表格TABLE</title> </head> </html>

<table border>
<tr><th rowspan=2>值班人员</th>
<th>星期一</th><th>星期二</th>  <th>星期三</th></tr>
<tr><td>李强</td><td>张明</td><td>王平</td></tr>
</table>

[此贴子已经被作者于2005-1-11 17:52:23编辑过]

lfspecter · 发表于 2005-1-10 21:49

表格的颜色

在表格中，既可以对整个表格填入底色，也可以对任何一行、一个表元使用背景色。

　　表格的背景色彩　　　<table bgcolor=#>

　　行的背景色彩　　　　<tr bgcolor=#>

　　表元的背景色彩　　　<th bgcolor=#>或 <td bgcolor=#>

　　#=rrggbb 16进制 RGB数码, 或者是下列预定义色彩名称：　　Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua

例：

</body> </html>

[此贴子已经被作者于2005-1-11 17:53:04编辑过]

lfspecter · 发表于 2005-1-10 21:49

文件之间的链接

　　超文本中的链接是其最重要的特性之一，使用者可以从一个页面直接跳转到其他的页面、图象或者服务器。一个链接的基本格式如下：

　　　　　　<A HREF="资源地址">链接文字</A>

　　·标签<A>表示一个链接的开始，</A>表示链接的结束；　　·属性“HREF”定义了这个链接所指的地方；　　·通过点击“链接文字”可以到达指定的文件。

　　<A HREF="http://www.sjstc.edu.cn">中国山西之窗</A>

　　链接分为本地链接、URL链接和目录链接。在各种链接的各个要素中，资源地址是最重要的，一旦路径上出现差错，该资源就无法从用户端取得。

本地链接： **************

　　对同一台机器上的不同文件进行的连接称为本地链接，它使用UNIX或DOS系统中文件路径的表示方法，采用绝对路径或相对路径来指示一个文件。　　例如：我们现在正在浏览的这一页的绝对路径是：c:\study\HTML教程\link01.htm 　　　　　而这一页相对于当前目录即“HTML教程”的相对路径是：link01.htm 　　　　　如果是浏览HTML教程之外的一页，该文件路径要以两个圆点(..)来表示上一层目录：　　　　　　　　　　　　　　　　　　　　../../internet/IP地址

　　现在我们把这几种路径的表示方法写入链接中：

　　以绝对路径表示：<A HREF="/c:\study\HTML教程\link01.htm">文件的链接</A> 　　以相对路径表示：<A HREF="link01.htm">文件的链接</A> 　　链接上一目录中的文件：<A HREF="../../Internet/IP地址">IP地址</A>

　　一般情况下，我们是不用绝对路径的，因为我们的资源常常是放在网上供其他人浏览的，写成绝对路径，当我们把整个目录中的所有文件移植到服务器上时，带有C:\的资源地址用户将无法访问到。所以我们最好写成相对路径，避免了重新修改文件资源路径的麻烦。

URL链接 ************

　　如果链接的文件在其它服务器上，我们就要弄清我们所指向的文件时采用的哪一种URL地址。URL意思是统一资源定位器，通过它可以以多种通讯协议于外界沟通来存取信息。

　　URL链接的形式是：　　协议名：//主机.域名／路径／文件名　　其中协议包括：

　　file　　　　　　本地系统文件　　http　　　　　　WWW服务器　　ftp　　　　　　 ftp服务器　　telnet　　　　　基于TELNET的协议　　mailto　　　　　电子邮件　　news　　　　　　Usenet新闻组　　gopher　　　　　GOPHER服务器　　wais　　　　　　WAIS服务器

　　例如，我们这样来表达一个URL地址：　　　　　　http://www.sjstc.edu.cn/ 　　　　　　ftp://ftp.sjstc.edu.cn 　　　　　　telnet://bbs.xanet.edu.cn

　写在HTML文件中，链接其他主机上的文件时，格式如下：　　<A HREF="http://www.sjstc.edu.cn/default.htm">中国山西之窗</A> 　　<A HREF="telnet://bbs.xanet.edu.cn">西北网络中心兵马俑站</A>

目录链接 **************

　　前面所谈的资源地址，只是单纯的指向一份文件，但是，对于直接指到某文件上部、下部或是中央部分，以上方法却是无法做到的。然而，我们要这样做，也并不是毫无办法。我们可以是使用目录链接。

　　制作目录链接方法是：　　·首先把把某段落设置为链接位置，格式是：〈A NAME="链接位置名称"></A> 　　·在调用此链接部分的文件，定义连接：<A HREF="文件名＃链接位置名称">链接文字</A> 　　　如果是在一个文件内跳转，文件名可以省略不写。

例：

　　我们的HTML教程已经进行到“文件之间的链接”部分，其中，我们学习了<A href="link01.htm#n1">本地链接<A>、<A href="link01.htm#n3">目录链接</A>和<A href="link01.htm#n2">URL链接</A>。之前，我们还介绍了<A href="4.htm">文字的设计</A>、<A href="table.htm">TABLE表格</A>、<A href="list01.htm">列表</A>等内容。也许很多人理解起来比较吃力，这是很正常的，每个人在刚刚接触它的时候往往要度过很长的一段接受时期。<P> 　　除了我们的这个教程外，网上也有很多的站点介绍了HTML文件的制作方法，在这里，我来推荐几个做得相当不错的站点：

HTML语言参考</A><br> 　<A href="http://www.gzsums.edu.cn/webclass/html/html_design.html">HTML语言教程</A><br> 　<A href="http://www.netease.com/~feng/html/index.htm">HTML程序员手册</A><P>

</body> </html>

[此贴子已经被作者于2005-1-11 17:53:42编辑过]

		自动登录	找回密码
密码			免费注册