1、 内容提要HTML（Hypertext Markup Language，超文本标记语言）是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX、Windows等）。自1990年以来，HTML就一直被用作万维网的信息表示语言，用于描述网页的格式设计和它与WWW上其他网页的连接信息。使用HTML语言描述的文件，需要通过WWW浏览器显示效果。在超文本文档中，可以加入图片、声音、动画、影视等内容，还可以很方便地从一个文件跳转到另一个文件，实现与世界各地主机上文件的链接。通过本项目学习可以了解到HTML语言的一些基本知识，有助于加深对网
2、页文件的认识，并为后面网页特效的学习做好准备。1HTML语言简介HTML（Hypertext Markup Language，超文本标记语言）是用来描述超文本文档的标记语言。它由HTML标记和用来表示信息的文本组成。使用HTML语言描述的文件，需要通过浏览器显示效果。所有的网页都是以HTML格式的文件为基础，再加上一些其他语言工具（如JavaScript、VBScript、Java等）构成的。这些文件除了一些基本的文字外还包含一些标记，这些标记均由“”符号以及一个字符串组成。而浏览器的功能是对这些标记进行解释，显示出文字、图像、动画并播放声音等。HTML文件是由标记和文本组成的，标记能产生各种
3、效果。通过HTML可以表现出丰富多彩的设计风格。大到整个页面的布局、段落的设定，小到文字的字体、字号、颜色等的设置都可以通过HTML语言来完成。此外，HTML语言还可以在网页中设置列表、表格等内容。活动活动1 1 学习学习HTMLHTML的语法的语法 通过HTML可以实现页面之间的跳转。HTML语言可以轻松地实现页面之间的跳转及超链接的设置等，充分体现其超文本的特性。通过HTML可以展现多媒体的效果。超文本之所以在很短的时间内如此广泛地受到人们的青睐，很重要的一个原因是它能支持多媒体的特性，如图像、声音、动画等。运用HTML语言能够在网页中插入各种多媒体对象，使网页更加绚丽多彩、生动活泼，给人
4、留下很深的印象。HTML语言功能强大，语句简单，表现力强，是网页设计者必须掌握的一种工具语言。2标记和标记属性（1）标记刚刚接触HTML文档，遇到的最大障碍就是一些用“”括起来的句子，我们称它为标记，标记是HTML语言中定义网页内容格式和显示的指令。而标记的属性用于进一步控制网页内容的显示效果。HTML标记是HTML文档的控制语言，用来告诉浏览器应该如何显示一页文档。它用“”括起来，如：。HTML标记通常是英文词汇的全称（如“title”）或缩略语（如“P”代表Paragraph，即段落），与一般文本有区别。标记字母大小写皆可，即标记字母不区分大小写。这意味着，HTML标记和属性名称可以是大写
5、、小写或大小写混合的。但为了便于阅读，通常采用大小写一致的书写方式。标记分为单标记和标记两种，下面分别作介绍。1）单标记。单标记只需单独使用就能完整地表达意思，这类标记的语法是：最常用的单标记是，它表示换行。2）双标记。双标记由“始标记”和“尾标记”两个部分构成，必须成对使用，其中始标记告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标记告诉Web浏览器在这里结束该功能。始标记前加一个斜杠（/）即成为尾标记。这类标记的语法是：内容。其中，“内容”就是要被这对标记施加作用的部分。例如，如果想突出显示某段文字，可将此段文字放在“”和“”标记中，如：第一。可使“第一”两个字设置为粗体，达到突出
6、显示的效果。（2）标记属性许多单标记和双标记的始标记内可以包含一些属性，其语法是：各属性之间用空格隔开，并且属性之间无先后次序，属性也可以省略（即取默认值）。例如：单标记表示在文档当前位置画一条水平线（horizontal line），一般是从窗口中当前行的最左端一直画到最右端。包含属性的标记为：其中，size属性定义线的粗细，属性值取整数，默认值为1；align属性表示对齐方式，可取left（左对齐，默认值），center（居中），right（右对齐）；width属性定义线的长度，可取相对值（由一对 号括起来的百分数，表示相对于充满整个窗口的百分比），也可取绝对值（用整数表示的屏幕像素点的个
7、数，如width=300），默认值是“100%”。3HTML基本标记HTML基本标记是任何HTML文档里都必不可少的标记，下面举一个最简单的例子来说明这几个基本标记。例10-1这段语句中出现了4个标记：，。（1）html标记所有的HTML文件都以标记开头，以标记作为结尾，网页中显示的所有内容及其HTML标记都必须包含在和之间。（2）head标记一个HTML文件分为两段：文档头和文档体。head标记用于定义文档头，标明当前文档的有关信息，比如网页的标题、搜索引擎使用的关键字等。写在和之间的文本将出现在浏览器窗口中，作为文档的起始部分，这个文本是网页的说明，应当尽量简短。（3）title标记在he
8、ad标记之间出现最多的就是title标记。该标记向读者提示网页的内容，即网页的标题，这个标题将显示在浏览器窗口的标题栏中，由于标题栏长度有限，网页标题应当短小精悍，其长度最好控制在50个字符以内。title标记中不能包含其他标记，一个网页也只能有一个标题，所以在一个HTML文件中，title标记只能出现一次。（4）body标记HTML文件的主体部分 文档体（网页的主要内容），写在和之间，文档体的设计是网页制作的重点之一。这4个标记都是双标记，使用时要注意它们的始、尾标记的匹配。这个网页的显示效果如图10-1所示。4HTML文本设置标记HTML标记中有一些可用于文本的设置，如文本标题设置，换行，
9、段落等，利用这些标记可以对文本进行一般的设置，下面分别介绍。（1）标题通常，文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标记，其中n为标题的等级，HTML总共提供6个等级的标题，n越小，标题字号就越大，以下列出所有等级的标题。第一级标题 第二级标题 第三级标题 第四级标题 第五级标题 第六级标题请看下面的例子。例10-2 本例在浏览器中的显示效果如图10-2所示。（2）换行在编写HTML文件时，不必考虑太细致的设置，也不必理会段落过长的部分会被浏览器切掉。因为，在HTML语言规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文字转折至下一行。但是，编写者要想自己换行，应在
10、需要换行的地方加上标记。例10-3这里，标记用于换行。本例的显示效果如图10-3所示。（3）段落标记为了排列得整齐、清晰，在文字段落之间常用来做标记。文件段落的开始由来标记，段落的结束由来标记，是可以省略的，因为下一个的开始就意味着上一个的结束。例10-4本例的显示效果如图10-4所示。HTML最大的特点在于其拥有超级链接功能，使用超级链接可以轻松地从一个页面跳转到其他页面或文件，这样就可以把WWW上丰富的资源有机地联系起来。1超级链接的格式一个超级链接的基本格式如下：链接文字说明：1）标记表示一个链接的开始，表示链接的结束。2）属性“HREF”定义了这个链接所指的地方。3）通过单击“链接文字
11、”可以到达指定的文件。例如：新浪网即可给“新浪网”三个字加上连到新浪主页的链接。活动活动2 2 学习学习HTMLHTML超链接的使用超链接的使用 2超级链接的种类链接分为本地链接、URL链接和目录链接。不论使用哪种链接，资源地址是最重要的，一旦路径上出现差错，该资源就无法从用户端取得。（1）本地链接对同一台机器上的不同文件进行的链接称为本地链接，它使用Windows系统中文件路径的表示方法，可以采用绝对路径或者相对路径来指示一个文件。下面以图10-5所示的站点结构为例，说明本地链接的路径表示。1）绝对路径。绝对路径是链接目标在本地磁盘的完整路径。例10-5假设站点根目录下的index.html
12、文档的代码如下：这里，“E:maomaologin.html”就是链接到login.html页面的绝对地址，它是login.html文件在本地磁盘中的绝对路径。2）相对路径。当链接源与链接目标在同一文件夹中时，描述相对路径只需要指明链接目标的文件名即可，例如在index.html中创建指向login.html的链接，可使用相对路径：“login.html”。当链接目标在链接源下一级目录中时，可直接指明目录名称和文档名称，例如在index.html中创建指向pro001.html的链接，可使用相对路径：“detail/pro001.html”。当链接目标在链接源上一级目录中时，可用“”符号来表示
13、当前文件的目录，使用多个“”可以表示更高的父级目录，例如在pro001.html中创建指向index.html的链接，可使用相对路径：“/index.html”。例10-6假设站点根目录下的index.html文档的代码如下：在这里，由于index.html和login.html位于同一文件夹下，所以login.html相对于index.html的路径为“login.html”。一般情况下是不用绝对路径的，因为资源常常是放在网上供其他人浏览的，若写成绝对路径，当把整个目录中的所有文件移植到服务器上时，带有E:目录的资源地址的文件用户将无法访问到。所以最好写成相对路径，避免了重新修改文件资源路径
14、的麻烦。（2）URL链接如果链接的文件在其他服务器上，就要弄清所指向的文件是采用哪一种URL地址。URL（Uniform Resource Location，统一资源定位器）可以以多种通信协议与外界沟通来存取信息。URL链接的格式是：协议名：/主机.域名/路径/文件名。表10-1中是常用的几种网络通信协议。例如，可以这样来表达一个URL地址：http:/ 定义标题 定义表行 定义表头 定义表元（表格的具体数据）例10-8 创建一个简单的表格，代码如下。活动活动3 3 学习学习HTMLHTML表格的使用表格的使用 显示效果如图10-6所示。2表格的标题表格标题的位置，可由align属性来设置，可
15、位于表格上方或表格下方。下面为表格标题位置设置格式。设置标题位于表格上方：标题文字内容 设置标题位于表格下方：标题文字内容 3表格尺寸设置一般情况下，表格的总长度和总宽度是根据各行和各列的总和自动调整的，如果要直接固定表格的大小，可以使用代码：width和height属性分别指定表格固定的宽度和长度，n1和n2可以用像素来表示，也可以用百分比（与整个屏幕相比的大小比例）来表示。例如创建一个长为200像素，宽为100像素的表格，其HTML代码为：创建一个长为屏幕的20%，宽为屏幕的10%的表格，其HTML代码为：4表格内文字的对齐/布局表格中数据的对齐方式有两种，分别是水平对齐和垂直对齐。水平对
16、齐是以align属性来设置，而垂直对齐则由valign属性来设置。其中，水平对齐的位置可分为三种：居左（left）、居右（right）和居中（center）；而垂直对齐的位置有四种：上齐（top）、居中（middle）、下齐（bottom）和基线（baseline）。例10-9 表格内容水平对齐样式，代码如下。显示效果如图10-7所示。例10-10 表格内容垂直对齐样式，代码如下。显示效果如图10-8所示。网页中的多媒体通常有图像、声音、动画、视频等，在网页中加入多媒体，可使网页元素更加丰富，更加美观，使网页更具吸引力。1插入图像的格式、标记及属性一个纯文本的网页往往缺乏吸引力，适当插入一些图
17、像能增强网页的表现力。HTML中插入图像的标记是，其格式为：src属性指明了所要链接的图像文件地址，这个图像文件可以是本地机器上的图像，也可以是位于远端主机上的图像。地址的表示方法可以参考URL地址的表示方法。例如：img还有两个属性是height和width，分别表示图像的高和宽。通过设置这两个属性的值可以改变图像的大小。如果没有设置，图像将按原大小显示。活动活动4 4 学习学习HTMLHTML多媒体的使用多媒体的使用 2插入声音的格式、标记及属性HTML除了可以插入图像之外，还可以播放音乐。用浏览器可以播放的音乐格式有MIDI格式、WAV格式、MP3格式等。（1）点播音乐将音乐做成一个链接
18、，只需用鼠标在上面单击，就可以听到动人的音乐了，其实这样做的方法很简单，格式如下：乐曲名例如，播放一段MIDI音乐：MIDI音乐播放一段MP3格式音乐：同桌的你把喜欢的音乐收集起来，做成一个音乐库，就可以随时让自己和别人徜徉在音乐的海洋中了。（2）自动载入音乐前面是借助链接来实现网上播放音乐这一功能的，还可以让音乐自动载入，让它出现在一个音乐控制面板中播放。其格式为：其中各属性见表10-2。例10-11 在网页中播放音乐，代码如下。播放音乐出现控制面板了，你可以控制它的开与关，还可以调节音量的大小。效果显示如图10-9所示。3插入视频的格式、标记及属性在网上经常可以看到视频，这样可以在网上观看
19、最新的电影或是回顾以前的流金岁月。用浏览器可以播放的格式有MOV格式、AVI格式等。（1）链接一个视频文件将视频文件做成一个链接的方法：视频名称例如，播放一段视频：商品介绍（2）自动载入视频与音乐的播放一样，可以使用embed标记播放视频：HTML文件的实质就是在普通文本中加入特有的HTML标记。在本项目中，我们学习了HTML语法，包括标记的类型和标记属性的概念。掌握了HTML最基本的几个标记、和，以及在编写网页正文时要用到的段落标记、标题标记。另外还学习了超链接、表格、图像等网页对象的HTML标记。学习这些标记并不是要我们直接用HTML来编写网页，而是让我们对网页有更深入的理解，在使用Dreamweaver等网页编辑软件制作网页时也可以对其中的HTML代码进行编辑和修改。另外，学习HTML也为我们后面继续学习使用JavaScript制作网页特效作好铺垫。项项 目目 小小 结结
