分享

HTML教程

 玄豆 2006-10-30

 HTML英语意思是:Hypertext Marked Language,即超文本标记语言,是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台(如UNIXWINDOWS等)。自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>

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=#> 说明:#leftrightcenter
表格的基本结构
<table>...</table>  定义表格
<caption>...</caption>
 定义标题
<tr>
 定义表行
<th>
 定义表头
<td>
 定义表元(表格的具体数据)
表格的标题:
设置标题位于表格上方:
<caption align=top> ... </caption>
设置标题位于表格下方:
<caption align=bottom> ... </caption>
表格尺寸设置:
表格的大小:<table width=n1 height=n2>
width
height属性分别指定表格一个固定的宽度和长度,n1n2可以用像素来表示,也可以用百分比(与整个屏幕相比的大小比例)来表示。
边框尺寸设置:边框是用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>

 

文件之间的链接

超文本中的链接是其最重要的特性之一,使用者可以从一个页面直接跳转到其他的页面、图象或者服务器。一个链接的基本格式如下:
<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://bbs./">动网先锋</A>

类别一

序号

标签符号

命令作用

备注  

创建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> 

块引述,一般再现为缩格

 

图像标志

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>标志还有altalignborderwidthheight属性。align是图像的对齐方式,在前边的教程中已经讲了很多了,这里就不再提了。border属性是图像的边框,可以取大于或者等于0的整数,默认单位是像素widthHeight属性是图像的,默认单位也是象素。alt属性是当鼠标移动到图像上时显示的文本

2.<hr>
    <hr>
标志是在Html文档中加入一条水平线,它可以直接使用,具有
sizecolorwidthnoshade属性。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>


    
本例在浏览其中的显示结果如下:

 

 

教程六、链接标志

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./">
这是我的网站</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./" 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./" target="_blank"><font color="lime">http://bbs./</font><br>
<br>
<img src="http://bbs./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>

 

 

教程八、表单标志

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>标志具有
actionmethodtarget属性。action的值是处理程序的程序名(包括网络路径:网址或相对路径),如:<form action="http://xld.home./counter.cgi">,当用户提交表单时,服务器将执行网址http://xld.home./上的名为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="">

单行的文本输入区域,sizemaxlength属性用来定义此种输入区域显示的尺寸大小与输入的最大字符数

<input type="SUBMIT">

将表单内容提交给服务器的按钮

<input type="RESET">

将表单内容全部清除,重新填写的按钮

<input type="CHECKBOX" checked>

一个复选框,checked属性用来设置该复选框缺省时是否被选中,右边示例中使用了三个复选框

你喜欢哪些教程:
Html
入门动态HtmlASP

<input type="HIDDEN">

隐西藏域,用户不能在其中输入,用来预设某些要传送的信息

 

<input type="IMAGE" src="URL">

使用图像来代替Submit按钮,图像的源文件名由src属性指定,用户点击后,表单中的信息和点击位置的XY坐标一起传送给服务器

<input type="PASSWARD">

输入密码的区域,当用户输入密码时,区域内将会显示"*"

请输入您的密码:

<input type="RADIO">

单选按钮类型,checked属性用来设置该单选框缺省时是否被选中,右边示例中使用了三个单选框

103日中韩国奥队比赛结果会是:
中国胜平局韩国胜

此外,八种类型的输入区域有一个公共的属性name,此属性给每一个输入区域一个名字。这个名字与输入区域是一一对应的,即一个输入区域对应一个名字。服务器就是通过调用某一输入区域的名字的value属性来获得该区域的数据的。而value属性是另一个公共属性,它可用来指定输入区域的缺省值。

3.<select></select><option>
    <select></select>
标志对用来创建一个
下拉列表框可以复选的列表框。此标志对用于<form></form>标志对之间。<select>具有multiplenamesize属性。multiple属性不用赋值,直接加入标志中即可使用,加入了此属性后列表框就成了可多选的了;name是此列表框的名字,它与上边讲的name属性作用是一样的;size属性用来设置列表的高度,缺省时值为1,若没有设置(加入)multiple属性,显示的将是一个弹出式的列表框。
    <option>
标志用来指定列表框中的一个选项,它放在<select></select>标志对之间。此标志具有selectedvalue属性,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>具有namecolsrows属性。colsrows属性分别用来设置文本框的列数行数,这里列与行是以字符数为单位的。请看下边的例子:

Html代码

浏览器显示的结果

<form action="cgi-bin/tongji.cgi" method="post">
  <p>
您的意见对我很重要:
  <textarea name="yj" clos="20" rows="5">
        
请将意见输入此区域
  </textarea>
</form>

您的意见对我很重要:

 

 

 

Html4.0 参考


基本标志

<html></html>

创建一个HTML文档

<head></head>

设置文档标题和其它在网页中不显示的信息

<body></body>

设置文档的主体部分

 

文档整体属性标志

<body bgcolor="">

设置背景颜色。使用名字或RGB的十六进制值  

<body text="">

设置文本颜色。使用名字或RGB的十六进制值

<body link="">

设置链接颜色。使用名 字或RGB的十六进制值

<body vlink="">

设置已使用的链接的颜色。使用名字或RGB的十六进制值  

<body alink="">

设置正在被击中的链接的颜色。使用名字或RGB的十六进制值

 

图像标志

<img src="name">

HTML文档中嵌入一个图像

<img src="name" align="">

排列对齐一个图像:左、中、右或上、中、下

<img src="name" border="">

设置图像的边框的大小

<hr>

加入一条水平线

<hr size="">

设置水平线的厚度

<hr width="">

设置水平线的宽度。可以是百分比或绝对像素点

<hr noshade>

没有阴影的水平线

 

表格标志

<table></table>

创建一个表格

<tr></tr>

表格中的每一行

<td></td>

表格中一行中的每一个格子

<th></th>

设置表格头:通常是黑体居中文字

<table border="">

设置边框的宽度

<table cellspacing="">

设置表格格子之间空间的大小

<table cellpadding="">

设置表格格子边框与其内部内容之间空间的大小

<table width="">

设置表格的宽度。用绝对像素值或总宽度的百分比

<tr align="">

设置表格格子的水平对齐方式(左中右)

<tr valign="">

设置表格格子的垂直对齐方式(上中下)

<td colspan="">

设置一个表格格子跨占的列数(缺省值为1)  

<td rowspan="">

设置一个表格格子跨占的行数(缺省值为1)  

<td nowrap>

禁止表格格子内的内容自动断行

 

 

标题标志

<title></title>

将文档的题目放在浏览器的标题栏中

 

文本标志

<pre></pre>

预先格式化文本

<h1></h1>

最大的标题

<h6></h6>

最小的标题

<b></b>

黑体字

<i></i>

斜体字

<tt></tt>

打字机风格的字体

<cite></cite>

引用,通常是斜体

<em></em>

强调文本(通常是斜体加黑体)

<strong></strong>

加重文本(通常是斜体加黑体)

<font size=""></font>

设置字体大小,17

<font color=""></font>

设置字体的颜色,使用名字或RGB的十六进制值

 

链接标志

<a href="URL"></a>

创建超文本链接

<a href="mailtEMAIL">
</a>

创建自动发送电子邮件的链接

<a name="name"></a>

创建位于文档内部的书签

<a href="#name"></a>

创建指向位于文档内部书签的链接

 

帧标志

<frameset></frameset>

放在一个帧文档的<body>标签之前,也可以嵌在其他帧文档中 

<frameset rows="value,value">

定义一个帧内的行数,可以使用绝对像素值或高度的百分比 

<frameset cols="value,value">

定义一个帧内的列数,可以使用绝对像素值或宽度的百分比

<frame>

定义一个帧内的单一窗或窗区域 

<noframes></noframes>

定义在不支持帧的浏览器中显示什么提示

<frame src="URL">

规定帧内显示的HTML文档

<frame name="name">

命名帧或区域以便别的帧可以指向它

<frame marginwidth="">

定义帧左右边缘的空白大小,必须大于等于1

<frame marginheight="">

定义帧上下边缘的空白大小,必须大于等于1

<frame scrolling="">

设置帧是否有滚动栏,其值可以是"yes","no" "auto"

<frame noresize>

禁止用户调整一个帧的大小 

 

 

格式标志

<p></p>

创建一个段落

<p align="">

将段落按左、中、右对齐  

<br>

插入一个回车换行符

<blockquote></blockquote>

从两边缩进文本

<dl></dl>

定义列表

<dt>

放在每个定义术语词前

<dd>

放在每个定义之前

<ol></ol>

创建一个标有数字的列表

<ul></ul>

创建一个标有圆点的列表

<li>

放在每个列表项之前,若在<ol></ol>之间则每个列表项加上一个数字,若在<ul></ul>之间则每个列表项加上一个圆点    

<div align=""></div>

用来排版大块HTML段落,也用于格式化表

 

表单标志

<form></form>

创建表单

<select multiple name="name" size=""></select>

创建滚动菜单,size设置在需要滚动前可以看到的表单项数目

<option>

设置每个表单项的内容

<select name="name"></select>

创建下拉菜单

<option>

设置每个菜单项的内容

<textarea name="name" cols=40 rows=8></textarea>

创建一个文本框区域,列的数目设置宽度,行的数目设置高度

<input type="checkbox" name="name">

创建一个复选框,文字在标签后面

<input type="radio" name="name" value="">

创建一个单选框,文字在标志后面

<input type=text name="foo" size=20>

创建一个单行文本输入区域,size设置以字符串的宽度

<input type="submit" value="name">

创建提交(submit)按钮

<input type="image" border=0 name="name" src="name.gif">

创建一个使用图象的提交(submit)按钮

<input type="reset">

创建重置(reset)按钮

 

 

 

 

 

 

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多