HTML入门教程

茉落 · 发表于 2005-2-5 09:08:47

[center]HTML入门[/center]

HTML英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作World Wide Web 的信息表示语言，用于描述Homepage的格式设计和它与WWW上其它Homepage 的连结信息。使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。

　所谓超文本，因为它可以加入图片、声音、动画、影视等内容，因为它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。

通过HTML可以表现出丰富多彩的设计风格

[center]图片调用：<IMG SRC="文件名">
　　　　　文字格式：<FONT SIZE="+5 " COLOR="00FFFF">文字</FONT>[/center]

通过HTML可以实现页面之间的跳转

[center]页面跳转：〈A HREF="文件路径/文件名"></A>[/center]

通过HTML可以展现多媒体的效果

[center]声频：<EMBED SRC="音乐文件名" AUTOSTART=true>
　　　　　视频：<EMBED SRC="视频文件名" AUTOSTART=true>[/center]

HTML中也提供了相应的标题标签<Hn>,其中n为标题的等HTML总共提供六个等级的标题，n越小，标题字号就越大，以下列出所有等级的标题：

〈H1>…</H1>　　　　　第一级标题

〈H2>…</H2>　　　　　第二级标题

〈H3>…</H3>　　　　　第三级标题

〈H4>…</H4>　　　　　第四级标题

〈H5>…</H5>　　　　　第五级标题

〈H6>…</H6>　　　　　第六级标题

茉落 · 发表于 2005-2-5 09:14:01

代码部分

换行<br>
段落标签<P></P>
水平线段<HR>
<HR>有三个属性：
size　水平线的宽度
width 水平线的长，用占屏幕宽度的百分比或象素值来表示
align 水平线的对齐方式，有LEFT RIGHT CENTER三种
noshade 线段无阴影属性，为实心线段
文字的大小设置<font size=7>这是size=7的字体</font>
文字的字体与样式<font face="字体">
文字的颜色<font color=color_value>…</font>
位置控制<DIV ALIGN=#> 说明：#＝left／right／center
表格的基本结构
<table>...</table> 　定义表格
<caption>...</caption>　定义标题
<tr> 　定义表行
<th> 　定义表头
<td> 　定义表元(表格的具体数据)
表格的标题：
设置标题位于表格上方：
<caption align=top> ... </caption>
设置标题位于表格下方：
<caption align=bottom> ... </caption>

表格尺寸设置：

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

边框尺寸设置[/color]边框是用border属性来体现的，它表示表格的边框边厚度和框线。将border设成不同的值，有不同的效果。如：<table border=10　width=250>

格间线宽度：格与格之间的线为格间线，它的宽度可以使用<TABLE>中的CELLSPACING属性加以调节。格式是：<TABLE　CELLSPACING=#>#表示要取用的像素值

内容与格线之间的宽度：我们还可以在<TABLE>中设置CELLPADDING属性，用来规定内容与格线之间的宽度。格式为<TABLE　CELLPADDING=#>#表示要取用的像素值

茉落 · 发表于 2005-2-5 09:16:55

[center]背景色彩和文字色彩[/center]

<body bgcolor=# text=# link=# alink=# vlink=#>

bgcolor --- 背景色彩

text --- 非可链接文字的色彩

link --- 可链接文字的色彩

alink --- 正被点击的可链接文字的色彩

vlink --- 已经点击(访问)过的可链接文字的色彩

#=rrggbb
色彩是用 16 进制的红－绿－蓝(red-green-blue, RGB) 值来表示。
16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.

背景图象 <body background="image-URL">
Non Scrolling Background <body bgproperties=FIXED>

茉落 · 发表于 2005-2-5 09:18:12

文件之间的链接

超文本中的链接是其最重要的特性之一，使用者可以从一个页面直接跳转到其他的页面、图象或者服务器。一个链接的基本格式如下：
<A HREF="资源地址">链接文字</A>

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

茉落 · 发表于 2005-2-5 09:25:10

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

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

URL链接

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

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

茉落 · 发表于 2005-2-5 09:26:46

写在HTML文件中，链接其他主机上的文件时，格式如下：

　　<A HREF=http://www.a3guo.com>三国梦苑</A>

[ Last edited by 茉落 on 2005-2-5 at 01:33 AM ]

茉落 · 发表于 2005-2-5 09:35:10

再简单朴素的网页如果只有文字而没有图像的话将失去许多活力，图像在网页制作中是非常重要的一个方面，Html语言也专门提供了<img>标志来处理图像的输出。

1.<img>
<img>标志并不是真正地把图像给加入到Html文档中，而是将标志对的src属性赋值，这个值是图形文件的文件名，当然包括路径，这个路径可以是相对路径，也可以是网址。实际上就是通过路径将图形文件嵌入到您的文档中。您可能并不知道什么是相对路径，我现在就来讲一讲相对路径。所谓相对路径是指您所要链接或嵌入到当前Html文档的文件与当前文件的相对位置所形成的路径。假如您的Html文件与图形文件(文件名假设是logo.gif)在同一个目录下，则可以将代码写成<img src="logo.gif">；假如您的图形文件放在当前的Html文档所在目录的一个子目录(子目录名假设是images)下，则代码应为<img src="images/logo.gif">；假如您的图形文件放在当前的Html文档所在目录的上层目录(目录名假设是home)下，则相对路径就必须是准网址了，即用“../”表示您的网站，然后在后边紧跟文件在您的网站中的路径，假设home是您的网站下的一个目录，则代码应为<img src="../home/logo.gif">，若home是您的网站下的目录king下边的一个子目录，则代码应该变为<img src="../king/home/logo.gif">了。现在您对相对路径应该有所了解了吧！
必须强调一下，src属性在<img>标志中是必须赋值的，是标志中不可缺少的一部分。除此之外，<img>标志还有alt、align、border、width和height属性。align是图像的对齐方式，在前边的教程中已经讲了很多了，这里就不再提了。border属性是图像的边框，可以取大于或者等于0的整数，默认单位是像素。width和Height属性是图像的宽和高，默认单位也是象素。alt属性是当鼠标移动到图像上时显示的文本。

2.<hr>
<hr>标志是在Html文档中加入一条水平线，它可以直接使用，具有size、color、width和noshade属性。size是设置水平线的厚度，而width是设定水平线的宽度，默认单位是像素。想必大家对color属性已经很熟悉了，在此就不再用多讲。noshade属性不用赋值，而是直接加入标志即可使用，它是用来加入一条没有阴影的水平线(不加入此属性水平线将有阴影)。
下面是本教程的一个综合例子。

例5 图像标志举例
<html>
<head>
<title>图像标志的综合示例</title>
</head>

<body>
<p align="center"><img src="../logo468_60.gif" alt="网页制作" WIDTH="468" HEIGHT="60"></p>

<hr width="600" size="1" color="#0000FF">
</body>
</html>

茉落 · 发表于 2005-2-5 09:35:39

教程六的内容不是很多，而且很简单。链接是Html语言的一大特色，正因为有了它，我们对内容的浏览才能够具有灵活性和网络性。

1.<a href=""></a>
本标志对的属性href是无论如何不可缺少的，标志对之间加入需要链接的文本或图像(链接图像即加入<img src="">标志)。href的值可以是URL形式，即网址或相对路径，也可以是mailt形式，即发送E-Mail形式。对于第一种情况，语法为<a href="URL"></a>，这就能创建一个超文本链接了，例如：
<a href="http://bbs.dvbbs.net/">这是我的网站</a>
对于第二种情况，语法为<a href="mailtEMAIL"></a>，这就创建了一个自动发送电子邮件的链接，mailt后边紧跟想要制动发送的电子邮件的地址(即E-Mail地址)，例如：
<a href="mail:123@263.net">这是我的电子信箱(E-Mail信箱)</a>
此外，<a href=""></a>还具有target属性，此属性用来指明浏览的目标帧，我们将在讲帧标志时作详细的说明，这里您只要知道如果不使用target属性，当浏览者点击了链接之后将在原来的浏览器窗口中浏览新的Html文档，若target的值等于“_blank”，点击链接后将会打开一个新的浏览器窗口来浏览新的Html文档。例如：
<a href="http://bbs.dvbbs.net/" target="_blank">这是我的网站</a>

2.<a name=""></a>
<a name=""></a>标志对要结合<a href=""></a>标志对使用才有效果。<a name=""></a>标志对用来在Html文档中创建一个标签(即做一个记号)，属性name是不可缺少的，它的值也即是标签名，例如：
<a name="标签名">此处创建了一个标签</a>
创建标签是为了在Html文档中创建一些链接，以便能够找到同一文档中的有标签的地方。要找到标签所在地，就必须使用<a href=""></a>标志对。例如要找到“标签名”这个标签，就要编写如下代码：
<a href="#标签名">点击此处将使浏览器跳到“标签名”处</a>
注意：href属性赋的值若是标签的名字，必须在标签名前边加一个“#”号。

下面是本教程的一个综合示例：

例7 链接标志的综合示例
<html>
<head>
<title>链接标志的综合示例</title>
</head>

<body>
<p align="center" style="font-size:9pt;color:yellow;background:black"><br>
<a name="Top"><font color="red">创建标签处</font></a><br>
<br>
<br>
欢迎想要学习网页制作的同学访问我的网站<br>
<a href="http://bbs.dvbbs.net/" target="_blank"><font color="lime">" target=_blank>http://bbs.dvbbs.net/</font><br>
<br>
<img src="http://bbs.dvbbs.net/images/logo.gif"
alt="欢迎访问"网页制作"" border="0" width="468" height="60"></a><br>
<br>
本网站的主要内容<br>
<br>
<a href="index_Html.htm" target="_blank">Html教程</a><br>
<br>
<a href="../DHtml/index_DHtml.htm" target="_blank">动态Html教程</a><br>
<br>
<a href="../ASP/index_ASP.htm" target="_blank">ASP教程</a><br>
<br>
JavaScript教程<br>
<br>
VBScript教程<br>
<br>
<a href="../yqlj/yqlj.htm" target="_blank">友情链接</a><br>
<br>
我要留言<br>
<br>
作者介绍<br>
<br>
<br>
欢迎给我来信，我的E-Mail是：
<a href="mailt123@263.net"><font color="lime">123@263.net</font></a><br>
<br>
<a href="#Top"><font color="lime">点击此处回到标签处</font></a><br>
<br>
</p>
</body>
</html>

		自动登录	找回密码
密码			加入我们

HTML入门教程

浏览过的版块