|
HTML语言教程
一、HTML 一般概念：
HTML 全称HyperText Markup Language，正式名称是超文本标记语言，利用标记（tag）用来描述网页的字体、大小、颜色及页面布局的语言，使用任何的文本编辑器都可以对它进行编辑。HTML 不是程式语言如 C++ 和 Java 之类，它只是标记语言，基本上你只要明白了各种标记的用法便算学懂了 HTML，HTML 的格式非常简单，只是由文字及标记组合而成。对于网页制作的初学者来说，理解 HTML 的工作原理是必要的，但也无须仔细地了解到每一个标记的作用，只需要掌握常用的一些标记用法即可。因为现在已经有了很好的所见即所得的网页编辑软件为我们快速地生成 HTML 代码，例如 Dreamweaver 和 Frontpage ，再也无须象早期的网页制作人员一样，一行一行地编写代码了。
二、标记写法：
·任何标记皆由\"<\"及\">\"所围住，如 <P>
·标记名与小于号之间不能留有空格。
·有些标记需要加上参数，有些不要。如 <font size=\"+2\">Hello
·参数只可加于起始标记中。
·在起始标记的标记名前加上符号\"/\"便是终结标记，如 <HTML>是起始标记，</HTML> 是终结标记
·标记字母大小写皆可。
三、标记分类：
标记按型态分为围堵标记与空标记
1、围堵标记
顾名思义，它以起始标记及终结标记将文字围住，令其达到预期要显示的效果。
例如 <HTML>与</HTML>它以起始标记及终结标记构成的，两者失其一都会发生错误显示。
2、空标记
是指标记单独出现，只有起始标记没有终结标记。
例如 HTML Source：
I love Creation of Webpage.<br>It\'s a wonderful place.
显示成：
I love Creation of Webpage.
It\'s a wonderful place.
其中换行标记<br>便属于空标记。
它的作用是将标记后的所有东西显示于下一行，可同终结标记对它是没有意义的， 但有些人为空标记加上终结标记，这是为方便阅读而已，对 HTML 没有影响。
四、标记用法
以下便是一份 HTML 文件的基本架构 ：
<HTML>
<HEAD>
<TITLE> 网页的标题 </TITLE>
</HEAD>
<BODY>
网页的内容，很多标记都作用于此
</BODY>
</HTML>
特别解说：
整份文件处于标记<HTML>与</HTML>之间。
<HTML>用以宣告这是 HTML 文件，让浏览器认出并正确处理此 HTML 文件。
文件分两部份，由<HEAD>至</HEAD>称为开头，<BODY>至</BODY>称主体部分（文本和标记）。
基本上两者各有适用的标记，如<TITLE>只可出现于开头部分。
开头部分用以存载重要信息，而只有主体部分会被显示，所以大部分标记会应用于主体部分。
<TITLE>所标示的是文件的标题。
会出现于浏览器顶部及为别人 Bookmark 时的名称，所以每页有不同面明确的标题是需要的。
上述标记中只有<BODY>具参数设定。
■ <BODY> 的参数设定：
例子：
<BODY text=\"#000000\" link=\"#0000FF\" alink=\"#FF0000\" vlink=\"#0000FF\" background=\"bg1.gif\" bgcolor=\"#FFFFFF\" leftmargin=2 topmargin=2 bgproperties=\"fixed\">
text=\"#000000\"
用以设定文字颜色。 #000000 代表黑色，也可以采用颜色名称，即 text=\"black\" 。
link=\"#0000FF\"
设定一般文字链接的颜色。
alink=\"#FF0000\"
设定刚按下时文字链接颜色。
vlink=\"#0000FF\"
设定被按过后的链接的颜色。
background=\"bg1.gif\"
设定背景图片。GIF 或 JPEG 皆可，可以是绝对路径或相对路径。
(注：绝对路径就是你的主页上的文件或目录在服务器上真正的路径，以www.qilg.com为例：比如，001_1.htm这个模板文件是存放在根目录的web目录下，那么它的绝对路径就是http://www.qilg.com/web/001_1.htm。而相对路径就是/web/001_1.htm）
bgcolor=\"#FFFFFF\"
设定背景颜色，当已设定背景图片时会失去作用，除非透明部分。
leftmargin=2
设定网页左方边沿空间，单位为像素。作用：留一段空白 （只适用于IE）
topmargin=2
设定网页上方边沿空间。 （只适用于IE）
bottommargin=\"...\" （只适用于IE）
设定网页底部空间，以像素表示
bgproperties=\"fixed\"
固定背景图片，当卷轴卷动时不会跟着卷动。 （只适用于IE）
------------------------------------------------------
下面再列出一些常用的标记以及该标记所具有的属性及功能：
<P> 称为段落标记。作用：留一空白行。
本来<P>是一个围堵标记，标于一段落的头尾，但从 HTML 2.0 开始已不需要</P>作结尾。
<P> 的常用参数： 如：<p align=\"center\">
align=\"center\"
可选值：right(右对齐), left（左对齐）, center（居中对齐）。
默认值： align=\"left\"
------------------------------------------------------
<HR> 称为水平线。作用：插入一条水平线。
<HR> 的参数修改：
以： <HR align=\"LEFT\" size=\"2\" width=\"70%\" color=\"#0000FF\" noshade> 为例。
align=\"LEFT\"
设定线条摆放位置，可选择：left；right；center 三种设定值。
size=\"2\"
设定线条的厚度，以像素作单位，内定为 2。
width=\"70%\"
设定线条长度，以像素作单位，可以是绝对或相对值，内定为 100%。
color=\"#0000FF\" （只适用于IE）
设定线条颜色，内定为黑色。 #0000FF 代表蓝色，也可以采用颜色的名称，即 text=\"blue\" 。各种颜色的值及名称请参考【调色原理】一节。
noshade
设定线条为平面显示，若删去则具阴影，这是内定值。
例子： 原代码 <HR>
<HR align=\"LEFT\" size=\"4\">
<HR align=\"LEFT\" size=\"2\" width=\"70%\" color=\"#0000FF\" noshade>
<HR align=\"LEFT\" size=\"4\" width=\"70\" color=\"#008000\">
------------------------------------------------------
<PRE> ： 称为预设格式标记。作用：令文字按照原代码的方式显示。这标记允许保留你在原代码中输入的空白和回车。细看以下例子你便可体会到此标记的威力。除了运用一大堆表格标记之外你只有采用这标记才能有此效果。能以<PRE>标记产生对齐效果，或产生多于一行的空白才算上乘！
例子： 原代码 <pre> Creation of Webpage Log Analysis I
Composer Learning 459 407 480 522 547 586 673
HTML Advanced 200 268 296 358 385 453 506</pre>
显示结果 Creation of Webpage Log Analysis I
Composer Learning 459 407 480 522 547 586 673
HTML Advanced 200 268 296 358 385 453 506
------------------------------------------------------
<DIV> ：
<DIV>称为定位标记。作用：设定文字表格等摆放位置。<DIV>应用在 Style Sheet（样式表）方面更显威力，它最终目的是给设计者另一种组织能力，有 Class ; Style ; title ; ID 等属性。
以 <DIV align=\"center\"> 为例：
align=\"center\" 可选值：center ; left ; right 。决定对齐方向。 <DIV align=\"center\"> 的作用和居中标记 <CENTER>一样，前者是由 HTML3.0 开始的标准，后者是通用已久的标示法。
例子： 原代码 <DIV align=\"center\">Chris\'s First Homepage
<br>What\'s new
<br>My profile</DIV>
显示结果 Chris\'s First Homepage
What\'s new
My profile
------------------------------------------------------
链接标记：
<a>...</a> 用href的属性创建与另一个文件的链接，使用name的属性创建可被链接的锚
href=\"...\" 链接被激活时调用的URL
[注：URL英文全称Uniform Resoure Locator，中文名：统一资源定位器，是网页的地址]
name=\"...\" 锚名
target=\"...\" 与文件相链接的帧(Frame)
<a href=\"URL\"></a> 创建一个超链接
例如:<a href=\"http://www.qilg.com target=_blank\"> 奇浪网建站</a>
效果是，点击“奇浪网建站”四个字，打开一个新窗口，显示qilg网站的首页，其中_blank代表新建一个窗口
<a href=\"mailto:EMAIL\"></a>创建一个自动发送电子邮件的链接
<a name=\"NAME\"></a> 创建一个位于文档内部的靶位即创建标签
<a href=\"#NAME\"></a> 创建一个指向位于文档内部靶位的链接，即指向标签处
------------------------------------------------------
文本标记：
<h1></h1> 创建最大的标题
<h2><h2> 创建第二大的标题
.
.
.
<h6></h6> 创建最小的标题
说明：标题标记，由 <H1> 到 <H6> 逐渐变小。每个标题标记所标示的字句将独占一行且上下留一空白行。
<b></b> 或者<strong></strong> 创建黑体字
<i></i> 或者<em></em> 创建斜体字
<tt></tt> 创建打字机风格的字体
<cite></cite> 创建一个引用， 通常是斜体
<font size=?></font> 设置字体大小，从1 到 7
<font color=?></font> 设置字体的颜色，使用名字(red,black,blue)或十六进制值(#000000,#ffffff)
---------------------------------------------------
格式排版：
<br> 插入一个回车换行符
<blockquote> </blockquote> 从两边缩进文本
<dl></dl> 创建一个定义列表
<dt> 放在每个定义术语词之前
<dd> 放在每个定义之前
<ol></ol> 创建一个标有数字的列表
<li> 放在每个数字列表项之前，并加上一个数字
例：
<ol>
<li> hello
<li> how are you
</ol>
效果：
1 hello
2 how are you
<ul></ul> 创建一个标有圆点的列表
<li> 放在每个圆点列表项之前，并加上一个圆点
例：
<ul>
<li> hello
<li> how are you
</ul>
效果：
. hello
. how are you
<div>...</div> 格式化文本区域
align=\"...\" 文本对齐为中心(center)、左(left)、右(right)
-------------------------------------------------------------------------
图形元素:
<img src=\"name\"> 添加一个图像
<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=# or %> 设置表格的宽度（单位：像素值或文档总宽度的百分比）
<tr align=?> or<td align=?> 设置表格格子的水平对齐（左中右）
<tr valign=?> or <td valign=?> 设置表格格子的垂直对齐（上中下）
<td colspan=#> 设置一个表格格子应跨占的列数（缺省为1）
<td rowspan=#> 设置一个表格格子应跨占的行数（缺省为1）
<td nowrap> 禁止表格格子内的内容自动断行回卷
-------------------------------------------------------------------------
窗 框 :
<frameset></frameset> 放在一个窗框文档的<body>标签之前，也可以嵌在其他窗框文档中
<frameset rows=\"value,value\"> 定义一个窗框内的行数,可以使用绝对像素值或高度的百分比
<frameset cols=\"value,value\">
定义一个窗框内的列数，可以使用绝对像素值或宽度的百分比定义一个窗框内的单一窗或窗区域
<noframes></noframes> 定义在不支持窗框的浏览器中显示什么提示
窗框属性:
<frame src=\"URL\"> 规定窗框内显示什么HTML文档
<frame name=\"name\"> 命名窗框或区域以便别的窗框可以指向它
<frame marginwidth=#> 定义窗框左右边缘的空白大小，必须大于等于1
<frame marginheight=#> 定义窗框上下边缘的空白大小，必须大于等于1
<frame scrolling=VALUE> 设置窗框是否有滚动栏，其值可以是 \"yes\",\"no\",\"auto\"缺省时一般为\"auto\"
<frame noresize> 禁止用户调整一个窗框的大小
-------------------------------------------------------------------------
表 单 :
对于功能性的表单，一般需要运行一个CGI小程序，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=\"x\"> 创建一个单选框，文字在标签后面
<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（重 置）按钮
------------------------------------------------------
<NOBR> ：
<NOBR>称为不换行标记。作用：令文字不能因太长而换行 。它对住址、数学公式、一行数字等尤其有用。
例子：（其中 Chris\'s Creation of Webpage 将不被分开而显示于同一行。）
原代码 If you want to know how to create you own homepage quickly, don\'t miss
<NOBR>
Chris\'s Creation of Webpage</NOBR> which will help you a lot.
显示结果 If you want to know how to create you own homepage quickly, don\'t miss Chris\'s Creation of Webpage which will help you a lot.
------------------------------------------------------
<link> 标明在此文档与其它文档之间的链接，通常被用作HTML制作工具，<link>表示从此文档到另一文档的链接例如<a>，可以在文件中创建一个多重链接。
href=\"...\" 当链接激活时，调用文档的URL
name=\"...\" 如果允许考虑一个锚点，它是一个锚点名称
rel=\"...\" 当前文件与链接文件关系，例如“toc”或“glossary”
rev=\"...\" 当前文件与链接文件之间的相反关系
urn=\"...\" 统一资源数，它与href中的URL有很大的差别
title=\"...\" 与文档链接的标题
------------------------------------------------------
<meta> 获得文件的方法，例如：FTP, Gropher等
methods=\"...\" 标明文件的meta信息(文件本身信息)，例如，寻找工程的关键词，用于获得文档、时间期限等的特殊HTTP头标。Meta信息通常是以关键字/数值形式成对使用，用在文件的标记<head>中
http-equiv=\"...\" 用作为属性值的同一名子创建一个新的http头标。例如，http-equiv=\"Expires\"。标头的值由内容的属性定义
name=\"...\" 如果meta的数据通常以关键字/数值成对使用，name表示关键字，例如，作者和ID
content=\"...\" 成对使用的关键字/数字的内容（或由http-equiv指明的http头标）
------------------------------------------------------
注释：
<!-...-> 用于创建注解，也用于隐含浏览器不支持的JavaScript程序。
特别解说：
像很多电脑语言一样，HTML 也提供注解功能。浏览器将忽略此标记中的文字（可以是很多行）而不作显示，一般使用目的：
为文中不同的部分加上说明，方便日后修改。
这对较复杂或非私人网页尤其重要，它不单提醒自己也提醒其他同事这部分做什么、那部份做什么。
例子：
<!--由这里开始是产品订购表格-->
用作版权声明。
假如你不希望别人使用或复制你的网页，可加上警告字句。
例子：
<!--本文版权为 2000, qilg所有，未经许可，请勿抄摘-->
|