1
在第一节课给大家介绍WEB的特性时，我们了解到，我们所看到的丰富多彩的网页是由许许多多简单的HTML
标签构成的,HTML是网页制作的一种规范、一种标准.这节课，我们将一起来学习用HTML制作网页的各种
标记符的设置方法，包括网页数据的编辑与格式化、在网页中使用超链接和插入图片、网页中的表格设计以及
表格与文字的混排等
在学习HTML时，尤其是在学习如何
在网页中使用超链接与图片的编排，列表的使用，表格与文字的混排，
也许许多同学会理解起来比较吃力，这是很正常的，每个人在刚刚接触它的时候往
往要度过很长的一段接受时期。我在讲解中给大家就每个标签的用法都举得有例
子，大家可以参照这些实例和我们课本上的一些例子来加强理解。
HTML英语意思是：HypertextMarkedLanguage，即超文本标记语言,是一种用来制作超文本文档的简单标记
语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自
1990年以来HTML就一直被用作WorldWideWeb的信息表示语言，用于描述网页的各个部分。我们通常说的
做网页，这个所谓的网页就是html文件。网页的本质就是html,html使网页上的一切变成基础。
超文本有哪些特征呢？
所谓超文本，因为它可以加入图片、声音、动画、影视等内容，因为它可以从一个文件跳转到另一个文
件，与世界各地主机的文件连接。
通过HTML可以表现出丰富多彩的设计风格
通过HTML可以实现页面之间的跳转
通过HTML可以展现多媒体的效果
上面我们在示例超文本特征的同时，采用了了一些我们在制作超文本文件时需要用到的一些标签。所谓标签，
就是它采用了一系列的指令符号来控制输出的效果，这些指令符号用“<标签名字属性>”来表示。有关标签
详细的内容参见下一页。
创建HTML文档
用工具软件创建HTML文档（所见即所得编辑软件）
用比较完善的工具软件来制作网页，像FronPage2000，Dreamweaver等
用编辑工具编写HTML文档，可用你所熟悉的文字编辑工具来编辑，
EDIT、记事本、写字板、Word等编辑工具可以用来编辑HTML文档。
但一定要保存成文本文档，并命名为：.htm或.html文件，因为这是浏览器的默认文件。
HTML的基本结构
超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示
的各种文档信息。
其中在最外层，表示这对标记间的内容是HTML文档。我们还会看到一些网页省略标记，因
为.html或.htm文件被Web浏览器默认为是HTML文档。
之间包括文档的头部信息，如文档总标题等，若不需头部信息则可省略此标记。
标记一般不省略，表示正文内容的开始。现在来让我们看一下一个HTML文件的基本结构，其实，我很想将这种讲解与我们平时的文章排版来进行对
比，少一些难懂的专业缩写词汇。实际上，HTML的产生就是为了方便我们将信息在网上排版，显示等。
一个HTML文件大体分为以下几部分：
表示这是一个HTML文件，呵呵，就象我们写文章一样，给你留出空白的页面，让你把内容放在这
里，并且规定你只能写“HTML类型”的文章哟:)，我们就将...比如文章页面边框吧！
2
开始写文章啦！文章有题头部分，题头里包括标题等，标题下是正文，正文里可能有什么段落、图片、表
格等等内容，好，HTML里面也有这些东西：
怎么样，有了个大体的印象吧，HTML就是通过这些标记，将我们所要表示的内容用HTML规定的标记
“框起来”，并不是我们所想象的比较复杂的程序语言。不过呢，你需要记一些标记哟，虽然现在已经有了很
好的编写HTML文件的工具，但懂得HTML语言对你深入掌握网页技术是很有好处的。
下面是一个最基本的超文本文档的源代码、、、、、咱们一起来看一下这个源代码在浏览器下的显示结果。
超文本中的标签
刚刚接触超文本，遇到的最大的障碍就是一些用“<”和“>”括起来的句子，我们称它为标签，是用来分
割和标记文本的元素，就是这些简简单单的标签形成了网页上文本的布局、文字的格式及五彩缤纷的画面。
1.单标签
某些标记称为“单标签”，因为它只需单独使用就能完整地表达意思，这类标记的语法是：
<标签名称>最常用的单标签是
,它表示换行。
2.双标签：
另一类标记称为“双标签”，它由“始标签”和“尾标签”两部分构成，必须成对使用，其中始标签告诉
Web浏览器从此处开始执行该标记所表示的功能，而尾标签告诉Web浏览器在这里结束该功能。始标签前加一
个斜杠（/）即成为尾标记。这类标记的语法是：<标签>内容其中“内容”部分就是要被
这对标记施加作用的部分。例如你想突出对某段文字的显示，就将此段文字放在一对标记中：
第一：
3.标签属性许多单标记和双标记的始标记内可以包含一些属性，其语法是：<标签名字属性1属性2属
性3„>各属性之间无先后次序，属性也可省略（即取默认值），例如单标记
一条水平线（horizontalline），一般是从窗口中当前行的最左端一直画到最右端。带一些属性：
表示对齐方式，可取LEFT（左对齐，缺省值），CENTER（居中），RIGHT（右对齐）；WIDTH属性定义线的长
度，可取相对值，（由一对""号括起来的百分数，表示相对于充满整个窗口的百分比），也可取绝对值（用
整数表示的屏幕像素点的个数，如WIDTH=300），缺省值是"100%"。
下面我们来看一下在页面布局及文字设计中使用的一些标签：首先学习的是标题标签。咱们前面提到，做网
页就像写文章，一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签
n为标题的等级。HTML总共提供六个等级的标题，n越小，标题字号就越大，以下列出所有等级的标题：
从结果可以看出，每一个标题的字体为黑体字，内容文字前后都插入空行。
同写文章类似，网页上的内容也由多个段落组成，因此要设置段落格式，以便使页面上的内容更美
观，有条理。用于段落格式控制的标签有：换行标记符
分段标记符
水平线段
来学习这些标签的功能，用法和显示结果。
换行
在编写HTML文件时，我们不必考虑太细的设置，也不必理会段落过长的部分会被浏览器切掉。因为，在
HTML语言规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文字转折至下一行。所以，编写者对于
自己需要断行的地方，应加上
标签。请看下面的例子：
3
段落标签
为了排列的整齐、清晰，文字段落之间，我们常用
来做标记。文件段落的开始由来标记，段落
的结束由
来标记，是可以省略的，因为下一个的开始就意味着上一个
的结束。
标签还有一个属性ALING，它用来指名字符显示时的对齐方式，一般值有CENTER、LEFT、RIGHT三
种。下面，我们看一下这个例子来说明这个标签的用法。
水平线段
size水平线的宽度width水平线的长，用占屏幕宽度的百分比或象素值来表示
align水平线的对齐方式，有LEFTRIGHTCENTER三种noshade线段无阴影属性，为实心线段
我们可以用几个例子来说明这线段的用法：
文字的大小设置提供设置字号大小的是FONT，FONT有一个属性SIZE，通过指定SIZE属性就能设置字号
大小，而SIZE属性的有效值范围为1－7，其中缺省值为3。我们可以SIZE属性值之前加上“＋”、“－”字
符，来指定相对于字号初始值的增量或减量。请看示例：
文字的字体与样式HTML4.0提供了定义字体的功能，用FACE属性来完成这个工作。FACE的属性值可以是
本机上的任一字体类型，但有一点麻烦的是，只有对方的电脑中装有相同的字体才可以在他的浏览器中出现你
预先设计的风格。
为了让文字富有变化，或者为了着意强调某一部分，HTML提供了一些标签产生
这些效果，现将常用的标签列举如下：
文字的颜色
文字颜色设置格式如下：
这里的颜色值可以是一个十六进制数(用“#”作为前缀)，也可以是以下16种颜
色名称。
在阅读信息的时候，有时我们会希望信息显示得有条不紊。下面我们介绍HTML的3种列表格式，看一下如何
使用这些猎表格式，使信息表现的条理清晰。常见的列表格式由3种：无序列表，有序列表和定义列表。
无序列表
无序列表使用的一对标签是
下所示：
有序列表和无序列表的使用方法基本相同，它使用标签
项前使用
示：
定义列表示将数据分成两个层次，类似名词解释目录。第一层数据是某个要揭示的名词，第二个数据是要解
释的内容。
4
定义列表的制作需要3个标记符：1。定义列表标记符
2。定义术语（Definitionterm）标记符
3。定义描述标记符
文件之间的链接
超文本中的链接是其最重要的特性之一，使用者可以从一个页面直接跳转到其他的页面、图象或者服务
器。一个链接的基本格式如下：
·标签表示一个链接的开始，表示链接的结束；
·属性“HREF”定义了这个链接所指的地方；
·通过点击“链接文字”可以到达指定的文件。
链接分为本地链接、URL链接和目录链接。在各种链接的各个要素中，资源地址是最重要的，一旦路径上出现
差错，该资源就无法从用户端取得。
本地链接：对同一台机器上的不同文件进行的连接称为本地链接，它使用UNIX或DOS系统中文件路径的
表示方法，采用绝对路径或相对路径来指示一个文件。
例如：我们现在正在浏览的这一页的绝对路径是：c:studyHTML教程
而这一页相对于当前目录即“HTML教程”的相对路径是：
如果是浏览HTML教程之外的一页，该文件路径要以两个圆点(..)来表示上一层目
录：../../internet/IP地址
现在我们把这几种路径的表示方法写入链接中：
以绝对路径表示：
以相对路径表示：
链接上一目录中的文件：
一般情况下，我们是不用绝对路径的，因为我们的资源常常是放在网上供其他人浏览的，写成绝对路径，
当我们把整个目录中的所有文件移植到服务器上时，带有C:的资源地址用户将无法访问到。所以我们最好写
成相对路径，避免了重新修改文件资源路径的麻烦。
URL链接：如果链接的文件在其它服务器上，我们就要弄清我们所指向的文件时采用的哪一种URL地址。
URL意思是统一资源定位器，通过它可以以多种通讯协议于外界沟通来存取信息。URL链接的形式是：
协议名：//主机.域名／路径／文件名其中协议包括：
书签（目录）链接前面所谈的资源地址，只是单纯的指向一份文件，但是，对于直接指到某文件上部、
下部或是中央部分，以上方法却是无法做到的。然而，我们要这样做，也并不是毫无办法。我们可以是使用书
签链接。制作书签链接方法是：
·首先把把某段落设置为链接位置，格式是：〈ANAME="链接位置名称">
·在调用此链接部分的文件，定义连接：
如果是在一个文件内跳转，文件名可以省略不写。
插入图形超文本之所以在很短的时间内如此广泛的受到人们的青睐，很重要的一个原因时它能支持多媒
体的特性，如图象、声音、动画等。这一部分，我们先来学习在一个页面中如何插入图象。
基本格式
5
超文本支持的图象格式一般有XBitmap(XBM)、GIF、JPEG三种，所以我们对图片处理后要保存为这三种
格式中的任何一种，这样才可以在浏览器中看到。
插入图象的标签是，其格式为：
SRC属性指明了所要链接的图象文件地址，这个图形文件可以是本地机器上的图形，也可以是位于远端主
机上的图形。地址的表示方法可以沿用上一篇内容“文件的链接”中URL地址表示方法。例：
SRC="images/">
IMG还有两个属性是HEIGHT和WIDTH，分别表示图形的高和宽。通过这两个属性，可以改变图形的大小，
如果没有设置，图形按原大显示：
图文之间的距离设置：
在HTML文件里图形水平位置的配置，可由HSPACE属性来完成，其垂直位置的配置，由VSPACE来完成。
图形按钮：
图形按钮就是使用者通过在图形上单击，就能连接到某个地址上去。很简单，我们只要调用一下前面的知
识就可以完成了。其基本格式如下：
例：
表格的标题表格标题的位置，可由ALIGN属性来设置，其位置分别由表格上方和表格下方。下面为表格标
题位置的设置格式。
表格的大小一般情况下，表格的总长度和总宽度是根据各行和各列的总和自动调整的，如果我们要直接
固定表格的大小，可以使用下列方式：
width和height属性分别指定表格一个固定的宽度和长度，n1和n2可以用像素来表示，也可以用百分比
（与整个屏幕相比的大小比例）来表示。
表格的大小
一般情况下，表格的总长度和总宽度是根据各行和各列的总和自动调整的，如
果我们要直接固定表格的大小，可以使用下列方式：
width和height属性分别指定表格一个固定的宽度和长度，n1和n2可以用像
素来表示，也可以用百分比（与整个屏幕相比的大小比例）来表示。
边框尺寸设置边框是用border属性来体现的，它表示表格的边框边厚度和框
线。将border设成不同的值，有不同的效果。
格间线宽度格与格之间的线为格间线，它的宽度可以使用
| 或 | 中加 入ROWSPAN或COLSPAN属性，这两个属性的值，表明了表元中要跨越的行或 列的个数。跨多列的表元 colspan表示跨越的列数，例如colspan=2表示这一格的宽度为两个列的宽度。 跨多行的表元 rowspan所要表示的意义是指跨越的行数，例如rowspan=2就表示这一格跨越 表格两个行的高度。 除了我们的这个教程外，网上也有很多的站点介绍了HTML文件的制作方法，在 这里，我来推荐几个做得相当不错的站点： /webclass/html/L语言教程 /~feng/html/L程序员手册 /chine/INTERNET/HTML/清华大学图书馆HTML
本文发布于:2023-02-03 19:13:33，感谢您对本站的认可！ 本文链接：https://www.wtabcd.cn/fanwen/fan/88/183836.html 版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。 相关文章
推荐文章
排行榜
热门标签
|
|---|
