Html教程|发贴学习 - 我们的自由天空公益助学项目组（OFS，桃李天）

只看楼主倒序阅读 0 发表于: 2006-05-18

教程一、基本标志

1.<html></html> 2.<head></head> 3.<body></body> 4.<title></title>

Html是英文 HyperText Markup Language 的缩写，中文意思是“超文本标志语言”，用它编写的文件(文档)的扩展名是.html或.htm，它们是可供浏览器解释浏览的文件格式。您可以使用记事本、写字板或 FrontPage Editor 等编辑工具来编写Html文件。Html语言使用标志对的方法编写文件，既简单又方便，它通常使用<标志名></标志名>来表示标志的开始和结束(例如<html></html>标志对)，因此在Html文档中这样的标志对都必须是成对使用的。在此教程中，我先讲一下Html的基本标志： 1.<html></html> <html>标志用于Html文档的最前边，用来标识Html文档的开始。而</html>标志恰恰相反，它放在Html文档的最后边，用来标识Html文档的结束，两个标志必须一块使用。 2.<head></head> <head>和</head>构成Html文档的开头部分，在此标志对之间可以使用<title></title>、<script></script>等等标志对，这些标志对都是描述Html文档相关信息的标志对，<head></head>标志对之间的内容是不会在浏览器的框内显示出来的。两个标志必须一块使用。 3.<body></body> <body></body>是Html文档的主体部分，在此标志对之间可包含<p>、</p>、<h1>、</h1>、<br>、<hr>等等众多的标志，它们所定义的文本、图像等将会在浏览器的框内显示出来。两个标志必须一块使用。<body>标志中还可以有以下属性：

属性	用途	示例
<body bgcolor="#rrggbb">	设置背景颜色。	<body bgcolor="red">红色背景
<body text="#rrggbb">	设置文本颜色。	<body text="#0000ff">蓝色文本
<body link="#rrggbb">	设置链接颜色。	<body link="blue">链接为蓝色
<body vlink="#rrggbb">	设置已使用的链接的颜色。	<body vlink="#ff0000">
<body alink="#rrggbb">	设置正在被击中的链接的颜色。	<body alink="yellow">
说明:以上各个属性可以结合使用，如<body bgcolor="red" text="#0000ff">。引号内的rrggbb是用六个十六进制数表示的RGB(即红、绿、蓝三色的组合)颜色，如#ff0000对应的是红色。此外，还可以使用Html语言所给定的常量名来表示颜色：Black、White、Green、Maroon、Olive、Navy、Purple、Gray、Yellow、Lime、Agua、Fuchsia、Silver、Red、Blue和Teal，如<body text="Blue">表示<body></body>标志对中的文本使用蓝色显示在浏览器的框内。

4.<title></title> 使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信息，那些信息一般是网页的“主题”，要将您的网页的主题显示到浏览器的顶部其实很简单，只要在<title></title>标志对之间加入您要显示的文本即可。注意：<title></title>标志对只能放在<head></head>标志对之间。下面是一个综合的例子，仔细阅读，您便可以了解以上各个标志对在一个Html文档中的布局或所使用的位置。例1 Html文档中基本标志的使用 <html> <head> <title>显示在浏览器最上边蓝色条中的文本</title> </head> <body bgcolor="red" text="blue"> <p>红色背景、蓝色文本</p> </body> </html>

[此贴子已经被作者于2006-5-18 22:39:31编辑过]

分享到 淘江湖新浪 QQ微博 QQ空间开心人人豆瓣网易微博百度鲜果白社会飞信

晨光

荣誉会员

只看该作者 1 发表于: 2006-05-18

HTML入门

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

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

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

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

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

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

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

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

晨光

荣誉会员

只看该作者 2 发表于: 2006-05-18

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

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

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

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

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

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

代码部分

换行<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可以用像素来表示，也可以用百分比（与整个屏幕相比的大小比例）来表示。边框尺寸设置：边框是用border属性来体现的，它表示表格的边框边厚度和框线。将border设成不同的值，有不同的效果。如：<table border=10　width=250> 格间线宽度：格与格之间的线为格间线，它的宽度可以使用<TABLE>中的CELLSPACING属性加以调节。格式是：<TABLE　CELLSPACING=#>#表示要取用的像素值内容与格线之间的宽度：我们还可以在<TABLE>中设置CELLPADDING属性，用来规定内容与格线之间的宽度。格式为<TABLE　CELLPADDING=#>#表示要取用的像素值
背景色彩和文字色彩
<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>
<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>

晨光

荣誉会员

只看该作者 3 发表于: 2006-05-18

文件之间的链接

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

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

本地链接：

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

　　以绝对路径表示：<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服务器

　写在HTML文件中，链接其他主机上的文件时，格式如下：　　<A HREF="http://www.ofreesky.com/">我们的自由天空</A>

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

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

　写在HTML文件中，链接其他主机上的文件时，格式如下：　　<A HREF="http://www.ofreesky.com/">我们的自由天空</A>

晨光

荣誉会员

只看该作者 4 发表于: 2006-05-18

类别一	序号	标签符号	命令作用	备注
创建Web页	1	<HEAD> <TITLE></TITLE> </HEAD>	为建立HTML文件头应放入的信息，以及在浏览窗口的标题框内一什么样的名称去调用该文件。	<HEAD> <TITLE>我的主页</TITLE> </HEAD>
	2	<EM>,</EM>	强调显示	隐式格式化标记
	3	<HR>	空标记	上下两句话之间被一条水平线隔开
	4	<P>,</P>	段落标记	多数情况下，Web浏览器只认识字间只有一个空格，忽略字间的其他空格和HTML文件中加入的回车。
	5	<BR>	分行标记	它在Web文件中强制实现换行
	6	<!-- ..... -->	注释标记	通常使用注释标记是处于个人目的的，因此可以用注释写上一个版权信息或者个人情况
	7	<H1>,</H1>	标题标记	第一级字号最大，用于总标题
	8	<H2>,</H2>		第二级小一些，用于大分标题
	9	<H3>,</H3>		第三级再小些，用于小分标题
	10	<H4>,</H4>		第四级字号大小和正常字号相同
	11	<H5>,</H5>		第五级也加强调，但比正常字号小
	12	<H6>,</H6>		第六级最小
	13	<B>,</B>	强调显示标记	黑体
	14	<I>,</I>		斜体
	15	<U>,</U>		下划线文本
	16	<TT>,</TT>	隐式标记	一般再现为等宽字体文
	17	<EM>,</EM>		进一步强调，一般为斜体
	18	<STRONG>,</STRONG>		进一步强调，一般为黑体
	19	<CODE>,</CODE>	程序员的HTML标记.HTML早期被用来编制计算机程序应用说明，为计算机编程人员提供便利和建议。后来，HTML2.0标准提供了一些（逻辑的》HTML标记，从而使HTML设计人员可以对文本做标记使得该文本能够更容易展示计算机编程代码。	编程行，一般再现为等宽字体，如<TT>
	20	<KBD>,</KBD>		键盘文本，一般再现为等宽字体
	21	<SAMP>,</SAMP>		样本输出，一般再现为等宽字体
	22	<VAR>,</VAR>		变量，一般为等宽字体
	23	<CITE>,</CITE>	排版类标记	引文，一般再现为斜体
	24	<BLOCKQUOTE>, </BLOCKQUOTE>	排版类标记	块引述，一般再现为缩格

晨光

荣誉会员

只看该作者 5 发表于: 2006-05-18

图像标志

1.<img> 2.<hr>

再简单朴素的网页如果只有文字而没有图像的话将失去许多活力，图像在网页制作中是非常重要的一个方面，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="http://www.ofreesky.com/UploadFile/2006-4/20064312272783400.jpg" alt="网页制作" WIDTH="468" HEIGHT="60"></p> <hr width="600" size="1" color="#0000FF"> </body> </html> 本例在浏览其中的显示结果如下：

晨光

荣誉会员

只看该作者 6 发表于: 2006-05-18

教程六、链接标志

1.<a href=""></a> 2.<a name=""></a>

教程六的内容不是很多，而且很简单。链接是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">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>

晨光

荣誉会员

只看该作者 7 发表于: 2006-05-18

教程八、表单标志
1.<form></form> 2.<input type=""> 3.<select></select><option> 4.<textarea></textarea>
表单在Web网页中用来给访问者填写信息，从而能获得用户信息，使网页具有交互的功能。一般是将表单设计在一个Html文档中，当用户填写完信息后做提交(submit)操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上的 ASP 或 CGI 等处理程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。这里我们只讲怎样使用Html标志来设计表单。 1.<form></form> <form></form>标志对用来创建一个表单，也即定义表单的开始和结束位置，在标志对之间的一切都属于表单的内容。<form>标志具有action、method和target属性。action的值是处理程序的程序名(包括网络路径:网址或相对路径)，如：<form action="http://xld.home.chinaren.net/counter.cgi">，当用户提交表单时，服务器将执行网址http://xld.home.chinaren.net/上的名为counter.cgi的CGI程序。method属性用来定义处理程序从表单中获得信息的方式，可取值为 GET 和 POST 的其中一个。GET方式是处理程序从当前Html文档中获取数据，然而这种方式传送的数据量是有所限制的，一般限制在1KB以下。POST方式与GET方式相反，它是当前的Html文档把数据传送给处理程序，传送的数据量要比使用GET方式的大的多。target属性用来指定目标窗口或目标帧。 2.<input type=""> <input type="">标志用来定义一个用户输入区，用户可在其中输入信息。此标志必须放在<form></form>标志对之间。<input type="">标志中共提供了八种类型的输入区域，具体是哪一种类型由type属性来决定。请看下边列表：
type属性取值
输入区域类型
输入区域示例
<input type="TEXT" size="" maxlength=""> 单行的文本输入区域,size与maxlength属性用来定义此种输入区域显示的尺寸大小与输入的最大字符数
<input type="SUBMIT"> 将表单内容提交给服务器的按钮
<input type="RESET"> 将表单内容全部清除,重新填写的按钮
<input type="CHECKBOX" checked> 一个复选框,checked属性用来设置该复选框缺省时是否被选中,右边示例中使用了三个复选框
你喜欢哪些教程： Html入门动态HtmlASP
<input type="HIDDEN"> 隐藏区域,用户不能在其中输入,用来预设某些要传送的信息　
<input type="IMAGE" src="URL"> 使用图像来代替Submit按钮,图像的源文件名由src属性指定,用户点击后,表单中的信息和点击位置的X、Y坐标一起传送给服务器
<input type="PASSWARD"> 输入密码的区域,当用户输入密码时,区域内将会显示"*"号
请输入您的密码：
<input type="RADIO"> 单选按钮类型,checked属性用来设置该单选框缺省时是否被选中,右边示例中使用了三个单选框
10月3日中韩国奥队比赛结果会是：中国胜平局韩国胜
此外，八种类型的输入区域有一个公共的属性name，此属性给每一个输入区域一个名字。这个名字与输入区域是一一对应的，即一个输入区域对应一个名字。服务器就是通过调用某一输入区域的名字的value属性来获得该区域的数据的。而value属性是另一个公共属性，它可用来指定输入区域的缺省值。 3.<select></select><option> <select></select>标志对用来创建一个下拉列表框或可以复选的列表框。此标志对用于<form></form>标志对之间。<select>具有multiple、name和size属性。multiple属性不用赋值，直接加入标志中即可使用，加入了此属性后列表框就成了可多选的了；name是此列表框的名字，它与上边讲的name属性作用是一样的；size属性用来设置列表的高度，缺省时值为1，若没有设置(加入)multiple属性，显示的将是一个弹出式的列表框。 <option>标志用来指定列表框中的一个选项，它放在<select></select>标志对之间。此标志具有selected和value属性，selected用来指定默认的选项，value属性用来给<option>指定的那一个选项赋值，这个值是要传送到服务器上的，服务器正是通过调用<select>区域的名字的value属性来获得该区域选中的数据项的。请看下例：
Html代码浏览器显示的结果
<form action="cgi-bin/tongji.cgi" method="post"> <p>请选择最喜欢的男歌星: <select name="gx1" size="1"> <option value="ldh">刘德华 <option value="zhxy" selected>张学友 <option value="gfch">郭富城 <option value="lm">黎明 </select> </form>
请选择最喜欢的男歌星:
<form action="cgi-bin/tongji.cgi" method="post"> <p>请选择最喜欢的女歌星: <select name="gx2" multiple size="4"> <option value="zhmy">张曼玉 <option value="wf" selected>王菲 <option value="tzh">田震 <option value="ny">那英 </select> </form>
请选择最喜欢的女歌星:
4.<textarea></textarea> <textarea></textarea>用来创建一个可以输入多行的文本框，此标志对用于<form></form>标志对之间。<textarea>具有name、cols和rows属性。cols和rows属性分别用来设置文本框的列数和行数，这里列与行是以字符数为单位的。请看下边的例子：
Html代码浏览器显示的结果
<form action="cgi-bin/tongji.cgi" method="post"> <p>您的意见对我很重要: <textarea name="yj" clos="20" rows="5"> 请将意见输入此区域 </textarea> </form>
您的意见对我很重要: 请将意见输入此区域