HTML 语言基础
HTML （ Hype Text Markup Language ）被称作为超文本标记语言，是用来编写网页的一种标识语言，用它编写的文件简称超文本，或网页文件。
鉴于下述原因，在学习用 Dream weaver MX 2004 之前，有必要学习一些 HTML 的基本知识。
• HTML 文件是一种纯文本文件，可以使用“记事本”等编写。
• 即使是功能很强的所见即所得编辑器，也存在局限性，因此， Dream weaver MX 2004 和 FrontPage 2003 等，均提供“代码”视图，方便用户查看和直接编辑 HTML 代码。
• 添加一些特殊的网页效果，往往需要直接编写代码，例如，滚动字幕。
1 HTML 语言的基本语法
HTML 文件中， HTML 语言标记（标签）的作用，是指定该文件在浏览器中的显示格式。因此， HTML 文件可以分成两部分：文件的内容和文件的标记。
通常，标记使用下面的格式：
< 标记名 > 文件内容（受标记影响的文本） </ 标记名 >
例如：粗体字标记名是 <B> ，如果要求短语“欢迎光临！”用粗体字显示，就需要将下面的语句输入文档：
<B> 欢迎光临！ </B>
开始的 <B> 表示开始显示粗体字，最后的 </B> 表示粗体字的显示结束。
一般说来， HTML 标记都是具有起始和结束标记，并且成对出现，结束标记前要加“ / ”。但并不是所有的 HTML 标识都具有起始和结束标记，有些标记没有结束标记。如， <BR> 、 <IMG> 等。
HTML 语言中的标记符，不区分大小写，且可以大小写混用。如 <HTML> 、 <html> 或 <HtMl> 的功能是一样的。
1.1 标记（标签）自身
如何要浏览器中，显示 HTML 标记所使用的符号，如，大于、小于等符号？ HTML 规范规定，通过符号转换来实现。例如“ < ”用“ < ”表示；“ > ”用“ > ；”表示；“ & ”用“ & ；”表示；（半角）空格“ ”用“   ”表示。
提示：浏览器可以直接识别文件内容中的全角空格。
1.2 标记属性
每个标记中，除标记名外，还可以包含一个或多个“属性”，对标记进行控制。通常，属性名（项）和值成对出现。例如：
<font color="#FF0000"> 星期格式 </font>
在浏览器中，文字“星期格式”，显示红色。
其中，“ color ”，是属性名，“ #FF0000 ”，是属性值。
1.3 内容注释
“ <!-- ”和“ --!> ”标记中间是注释内容。注释可以插入到文本的任何地方，在浏览网页时，注释内容不显示。
2 HTML 的基本结构
<HTML> 和 </HTML> 是 HTML 文件的开始和结束标记。它们仅仅是告诉 Web 浏览器，这是一个 HTML 的文件。
HTML 的基本结构：
<HTML> ―――定义 HTML 文件的开始
<HEAD> ――定义文件头部的开始
头部的内容，如网页标题（ <TITLE> 和 </TITLE> ）
</HEAD> ――定义文件头部的结束
<BODY> ――定义主体的开始
网页内容，如网页文本
</BODY> ――定义主体的结束
</HTML> ――定义 HTML 文件的结束
例：一个简单的网页
<HTML>
<HEAD>
<TITLE> 一个简单的网页 < ／ TITLE>
</HEAD>
<BODY>
<P> 欢迎光临！ </P>
</BODY>
</HTML>
HTML 文件，以文本方式存储，但是，文件的扩展名，必须是“ htm ”或“ html ”。
2.1 版本信息
版本信息包含在 <!DOCTYPE> 标记之中。
例如， Dream weaver MX 2004 使用 HTML4.01 版。
2.2 头部信息
头部信息，指存放在文件头部 <HEAD> 与 </HEAD> 之间的信息。
1 、网页标题
网页标题，是指在浏览器的标题栏中显示的信息。
网页标题是 <TITLE> 与 </TITLE> 之间的内容。
2 、 <MEAT> 标记
<MEAT> 是个单标记，用于记录本文档的页面信息，如字符编码、作者、版权等。主要属性：
Name －定义特性名。如，“ keywords ”是关键词。
Content －定义特性的值。
http-equiv －定义标记的特性。
例如：
⑴ <meta name="keywords" content=" 教材 ,HTML 语言基础 ">
列出了本网页的关键词（供搜索引擎使用）。
⑵ <meta http-equiv="refresh" content="5">
控制网页每 5 秒刷新一次。
3 、 <STYLE> 标记
定义嵌入在本网页中的样式。
例如：
<style type="text/css">
<!--
.base {
font-family: " 华文中宋 ";
font-size: 18px;
line-height: 22px;
}
-->
</style>
.base －嵌入（类）样式名
font-family: " 华文中宋 " －字体是华文中宋
font-size: 18px －字号是 18 像素
line-height: 22px －行高 22 像素。
4 、 <SCRIPT> 标记
定义客户端脚本。
提示：客户端脚本，不一定放在文件头部。
2.3 主体标记
网页中的主要内容就是网页的主体，位于 <BODY> 和 </BODY> 之间 .
文件主体中，包含网页显示的内容，如文字、链接、图像、表格，以及其他对象。
设计制作网页，主要是在 <BODY> 和 </BODY> 之间，添加文本和图像外链接及各种标记（签）。
<BODY> 的主要属性：
Background －设定网页背景图像
Bgcolor －设定网页的背景颜色
Text －设定网页文本的颜色
3 编辑网页内容（Top）
网页内容非常丰富，包括字符、文本、标题、图像、列表、表格、背景、超链接、网页布局等。
3.1 划分段落
<P> 与 </P> 标记的功能是定义段落。相当于在文本中添加了一个回车符。两个段落之间间距较大（相当于插入一个空白行）。
<P> 可以单独使用，表示上一段落结束，下一段落开始。
<P> 的主要属性：
• Align －设定能对齐方式
• Class/ID －设定应用类 /ID 样式
<BR> 定义换行。换行，仅仅是另起一行，上、下行之间的间隔距离不变，且仍属同一个段落。
<HR> 定义一条水平线。
<HR> 的主要属性：
• Width －设定宽度
• Size －设定高度
• Color －设定颜色（属性值是颜色号，如“ #ff 0000 ” ）
3.2 标题
与 Word 等文字处理软件一样， HTML 语言提供六种标题样式。即 <Hn> 与 </Hn> （ n=1 － 6 ）。主要属性“ align ”是设定对齐方式。例如：
<h1 align="center">1 概述 </h1>
表示“ 1 概述”应用样式“标题 1 ”，居中对齐。
3.3 修饰文本
修饰文本，就是定义文字的字体、字型。
1 、定义字型
最常用的定义字型的标记是：
<B> 与 </B> －定义文本为粗体
<I> 与 </I> －定义文本为斜体
<U> －为文本添加下划线
提示：另有专门的文本逻辑样式，功能与上述的类似。例如， <EM> 定义文本为斜体，用于强调。参阅附录。
2 、定义字体及其属性
<FONT> 与 </FONT> 定义字体及大小、颜色等文本属性。
主要属性：
Size －设定文本大小。
Color －设定文字颜色
Style －设定文本的背景颜色等。如， style="background-color:#FF0000 "
3.4 定义超级链接
<A> 与 </A> 标记定义超级链接。
主要属性：
• Href －设定一个 URL 作为有效的链接目标地址。
• Target －设定显示所链接文件的窗口。
例如：
<A href="win98/win98_26.htm"> 注册表 </A>
<A href="spacer.htm" target="_blank"> 校园新闻 </A>
提示： target 的属性值有：
• “ _blank ”：链接目标，在新建的浏览器窗口中打开。
• “ _parent ”：链接目标，在父窗口中打开。
• “ _self ”：链接目标，在当前窗口中打开。
• “ _top ”：链接目标，在整个当前窗口中打开。
1 ．建立文件内的链接
一本书，如果有目录，读者查询起来就比较方便，对哪部分感兴趣，就直接翻到那一页就行了。
比较长的网页，用户阅读起来不方便，如果加上一些指向本网页内不同段落的文件内部链接，则可以起到一个目录的作用，方便浏览。
目录与对应段落之间的链接例：
<A href="#101"> 概述 </A>
其中，“ 101 ”是放置在对应段落处的标志名称。
用于文件内部链接的标志， Dream weaver 中称“锚点”， FrontPage 中称为“书签”。
<A name="101"></A> ，就是一个锚点（书签）。
提示：锚点（书签）名，不要使用中文。
2 、建立站点内部的链接
由于，站点移动往往是整体进行的，因此，站点内部的超级链接，应该使用相对 URL 。
例如：
<A href="../Win98.htm"> 系统与网络 </A>
其中， URL 是相对的，即，链接目标文件“ Win98.htm ”位于当前文件的父目录中。
3 、建立站点外部的链接
站点外部的超级链接，应该使用绝对 URL 。
例如：
链接其他网站的主页
<A href="http://www.ahiec.net"> 安徽工业经济职业技术学院 </A>
链接 FTP 文件
<A href="ftp://ftp.52wang.net">Photoshop CS 课件 </A>
链接电子邮件地址
<A href="mailto:go_song2008@yahoo.com.cn"> 给我发邮件 </A>
3.5 插入图像
在网页中插入图像，实际上，是在网页文件中插入一个链接。
<IMG> 标记，定义图像嵌入网页，以及设定图像的属性。
例如：
<IMG src="../images/DSC00456_JPG.jpg" width="180" height="58" border=0>
<IMG> 是个单标记，主要属性
• Src －指定图像文件的 URL 。
• Height 和 Width －分别设定显示图像的高度和宽度。
• Align －设定图像对齐方式。
• Border －设定图像边框宽度
提示：浏览器支持 JPEG 、 GIF 和 PNG 等格式的图像文件。
3.6 使用列表
在网页制作中， HTML 语言提供了几个用来设计列表的标记，通过使用这些标记，可以得到一个段落清晰、内容整齐有序的网页。 HTML 语言编制的网页列表可分为以下四种形式：
编号列表（有序列表）：编号列表项前面带有编号，指出各个列表项之间的次序关系。
项目列表（无序列表）：项目列表项前面可带有特定符号（称为项目符号），但各个列表项之间具有平等的地位，不表示具有某个特定的次序关系。
定义列表：定义列表是一种非常有用的列表，每一个列表项都分为两部分：词语部分和定义部分。定义列表从形式上看，很像是在用定义部分对词语部分进行定义，因此被称为定义列表。
嵌套列表：嵌套列表就是在列表内部再嵌入列表。
1 、编号列表
在网页中加入一个有编号的列表，如球赛的最终排名、工程的项目分类等其他任何需要带编号的东西。用户可以使用 HTML 提供的有关标记来完成。在编号列表中需要用到两个标记 <OL> 和 <LI> 。
<OL> 和 </OL> 配对使用，用来标记整个编号列表的开始和结束。相当于表格标记 <TABLE> 和 </TABLE> 。
<LI> 和 </LI>> 配对使用，用来标记每一个编号列表项，并给出每一个列表项的编号。在标记符 <LI> 后面的文本并不一定是纯文本，可以插入其他的 HTML 标记符。如可以使用 <B> 标记，使某个列表项中的文本显示粗体，可以用标题标记 <Hn> 来增大列表项文本的字体，也可以使某个列表项中含有指向其他 Web 页面的超级链接。
例：建立一个编号列表。
<OL>
<LI> 动画制作 </LI>
<LI> 网页制作 </LI>
</OL>
浏览器中显示效果，如下图所示。
编号列表的标记 <OL> 有几个属性，其中最主要的也是最常用的是 TYPE 和 START 。
编号列表的默认列表项序数为 l 、 2 ． 3 等，可以使用 TYPE 属性改变序数的表示，其格式为： <OL TYPE= 列表类型 > 。
TYPE=1 ，列表项的序数设置为数字 1 、 2 、 3 …等，这是默认值。
TYPE=I ，列表项的序数设置为大写罗马字母 I 、Ⅱ、Ⅲ、…
TYPE=i ，列表项的序数设置为小写罗马字母ⅰ、ⅱ、ⅲ、…
TYPE=A ，列表项的序数设置为大写英文字母。
TYPE=a ，列表项的序数设置为小写英文字母。
<OL> 的 START 属性用来设定列表项的编号从第几个符号开始。例如： <OL TYPE=i START ＝ 2> ，则列表项的编号将从ⅱ开始，然后是ⅲ、ⅳ、ⅴ、…
START 属性可以方便地解决起始编号不是第一个符号（数字）的问题。当没有指定 <OL> 的 START 属性时，其默认值为 1 。
2 、项目列表
项目列表（无序列表）中，各个列表项之间具有平等的地位。用户可以使用标记 <UL> 和 </UL> 定义项目列表，使用 <LI> 和 </LI> 定义项目列表项。
在项目列表中，默认的项目符号是空心小圆点，然而可以用 TYPE 属性来定义不同的项目符号（列表类型），其格式为： <UL TYPE= 列表类型 > 。
TYPE=Square ，列表项的项目符号为一个黑色矩形。
TYPE=Circle ，列表项的项目符号与默认的空心小圆点相同。
TYPE=disc ，列表项的项目符号为黑色小圆点。
例如：
<UL>
<LI> 动画制作 </LI>
<LI> 网页制作 </LI>
</UL>
浏览器中显示效果，如下图所示。
提示：上述类型针对不同的浏览器，可能有不同的显示。
使用列表效果
3 、定义列表
定义列表与前面两个列表相比，不同之处是，定义列表的每一个列表项都分为两部分：词语部分和定义部分。
定义列表，从形式上看，很像是在用定义部分，对词语部分进行定义。词语部分和定义部分的标识符也不一样，它们都有各自的标识符：
定义列表，使用户能够通过 <DL> 和 <DL> 、 <DT> 和 <DD> 等标记来格式化短语及其定义，这些标记分别表示列表、定义短语和定义对短语的解释。可以用 <DL> 标记开始一个定义列表，然后用 <DT> 定义短语，接下来用 <DD> 定义短语的定义，最后用 </DL> 标记结束列表。
例：用定义列表表示“ HTML ”是“ Hype Text Markup Language 的缩写”、“被称作为超文本标记语言”。
<DL>
<DT><strong>HTML</strong>
<DD><em> 是 Hype Text Markup Language 的缩写 </em>
<DD><em> 被称作为超文本标记语言 </em>
</DL>
浏览器中显示效果，如上图所示。
在词语部分和定义部分中，都可以应用各种文本格式标记。如，例题中的 <strong></strong> 和 <em></em> 。
3.7 创建表格
在 HTML 语言中，有关表格的标记有：
<TABLE> 和 </TABLE> ，用于定义整个表格的数据；
<TR> 和 </TR> ，用于定义表格的一行；
<TD> 和 </TD> ，用于定义一个单元格；
<TH> 和 </TH> ，用于定义行表头或列表头的数据；
<CAPTION> 和 </CAPTION> ，用于定义表格的标题。
提示： <TR> 的属性项与 <TD> 的基本相同。
例：建立一个二行三列的表格。
<table>
<tr>
<td> 第 1 行单元格 1</td>
<td> 第 1 行单元格 2</td>
<td> 第 1 行单元格 3</td>
</tr>
<tr>
<td> 第 2 行单元格 1</td>
<td> 第 2 行单元格 2</td>
<td> 第 2 行单元格 3</td>
</tr>
</table>
标题行是一些以粗体字显示、居中对齐的文本。标题行一般位于第 1 行或第 1 列，标题行中的单元格用 <TH> 和 </TH> 定义。
1 、 <TABLE> 主要属性
• Height 和 Width －分别设定表格高度和宽度
• Border －设定边框宽度
• Align －设定对齐方式
• Cellspacing －设定单元格之间的距离
• Bordercolor －设定边框颜色
• Bgcolor －设定背景颜色
• Background －设定背景图像
• Cellpadding －设定单元格中内容与边框的距离
2 、 <TD> 的主要属性
• Height 和 Width －分别设定表格高度和宽度
• Nowrap －设定单元格中内容不换行
• Bordercolor －设定边框颜色
• Bgcolor －设定背景颜色
• Background －设定背景图像
3.8 网页背景
设定 <BODY> 标记属性项的值，可以定义网页背景
定义网页背景有两种形式，一是设定背景颜色；二是设定背景图像（用一幅图像作为网页的背景）。
例如
设定背景颜色
<body bgcolor="#FFFF99">
设定背景图像
<body background="images/indtextb.jpg">
提示：也可使用 <STYLE> 标记来定义网页背景。
定义背景颜色：
<style>
body {
background-color: #FFFFCC;
}
</style>
定义背景图像：
<style>
body {
background-image: url(images/indtextb.jpg);
}
</style>
主页 ｛网页三剑客｝ |
