HTML入门

发条橙子 发表于 2004-10-2 07:09:10

HTML入门
　　HTML英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作World Wide Web 的信息表示语言，用于描述Homepage的格式设计和它与WWW上其它Homepage 的连结信息。使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。
　　所谓超文本，因为它可以加入图片、声音、动画、影视等内容，因为它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。
　　通过HTML可以表现出丰富多彩的设计风格
　　　　　图片调用：<IMG SRC="文件名">
　　　　　文字格式：文字
　　通过HTML可以实现页面之间的跳转
　　　　　页面跳转：〈A HREF="文件路径/文件名"></A>
　　通过HTML可以展现多媒体的效果
　　　　　声频：<EMBED SRC="音乐文件名" AUTOSTART=true>
　　　　　视频：<EMBED SRC="视频文件名" AUTOSTART=true>

发条橙子 发表于 2004-10-2 07:09:41

HTML中也提供了相应的标题标签<Hn>,其中n为标题的等HTML总共提供六个等级的标题，n越小，标题字号就越大，以下列出所有等级的标题：
〈H1>…</H1>　　　　　第一级标题〈H2>…</H2>　　　　　第二级标题〈H3>…</H3>　　　　　第三级标题〈H4>…</H4>　　　　　第四级标题〈H5>…</H5>　　　　　第五级标题〈H6>…</H6>　　　　　第六级标题代码部分换行 
段落标签
水平线段<HR>
<HR>有三个属性：
size　水平线的宽度
width 水平线的长，用占屏幕宽度的百分比或象素值来表示
align 水平线的对齐方式，有LEFT RIGHT CENTER三种
noshade 线段无阴影属性，为实心线段
文字的大小设置这是size=7的字体
文字的字体与样式
文字的颜色…
位置控制<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=#>#表示要取用的像素值背景色彩和文字色彩<H3><body bgcolor=# text=# link=# alink=# vlink=#></H3><DL><DD>bgcolor --- 背景色彩
<DD>text --- 非可链接文字的色彩
<DD>link --- 可链接文字的色彩
<DD>alink --- 正被点击的可链接文字的色彩
<DD>vlink --- 已经点击(访问)过的可链接文字的色彩
<H3>#=rrggbb</H3><DD>色彩是用 16 进制的红－绿－蓝(red-green-blue, RGB) 值来表示。
16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.

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

发条橙子 发表于 2004-10-2 07:10:10

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

发条橙子 发表于 2004-10-2 07:10:40

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

发条橙子 发表于 2004-10-2 07:11:33

<TABLE borderColor=#808080 cellSpacing=0 borderColorDark=#808080 cellPadding=2 width="100%" bgColor=#ffffff borderColorLight=#808080 border=1><TR><TD width="100%" bgColor=#c0c0c0>图像标志</TD></TR><TR><TD width="100%" bgColor=#eaeaea>1.<img>
2.<hr></TD></TR><TR><TD width="100%"> 再简单朴素的网页如果只有文字而没有图像的话将失去许多活力，图像在网页制作中是非常重要的一个方面，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>
<img src="../logo468_60.gif" alt="网页制作" WIDTH="468" HEIGHT="60">

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

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

<img src="http://bbs.dvbbs.net/images/logo.gif"></TD></TR></TABLE>

发条橙子 发表于 2004-10-2 07:12:02

<TABLE borderColor=#808080 cellSpacing=0 borderColorDark=#808080 cellPadding=2 width="100%" bgColor=#ffffff borderColorLight=#808080 border=1><TR><TD width="100%" bgColor=#c0c0c0>教程六、链接标志</TD></TR><TR><TD width="100%" bgColor=#eaeaea>1.<a href=""></a>
2.<a name=""></a></TD></TR><TR><TD width="100%"> 教程六的内容不是很多，而且很简单。链接是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>
 
<a name="Top">创建标签处</a> 
 
 
欢迎想要学习网页制作的同学访问我的网站 
<a href="http://bbs.dvbbs.net/" target="_blank"><a href="http://bbs.dvbbs.net/</font%20target=" target="_blank" >
" target=_blank>http://bbs.dvbbs.net/ </A>
 
<img src="http://bbs.dvbbs.net/images/logo.gif"
alt="欢迎访问&quot;网页制作&quot;" border="0" width="468" height="60"></a> 
 
本网站的主要内容 
 
<a href="index_Html.htm" target="_blank">Html教程</a> 
 
<a href="../DHtml/index_DHtml.htm" target="_blank">动态Html教程</a> 
 
<a href="../ASP/index_ASP.htm" target="_blank">ASP教程</a> 
 
JavaScript教程 
 
VBScript教程 
 
<a href="../yqlj/yqlj.htm" target="_blank">友情链接</a> 
 
我要留言 
 
作者介绍 
 
 
欢迎给我来信，我的E-Mail是：
<a href="mailt123@263.net">123@263.net</a> 
 
<a href="#Top">点击此处回到标签处</a> 
 

</body>
</html></TD></TR></TABLE>

页: [1]

校园天空's Archiver

HTML入门