HTML语言.doc

第七章 HTML基础WWW（World Wide Web）也称万维网，是Internet上最流行的的超文本信息服务系统，它的产生被认为是Internet发展史上的重要里程碑。使用HTML，不仅可以将一个文件中的文字或图形链接到其他文件中去，而且可以将文字、图像、声音、视频等各种媒体信息同时集于网页之上，使网页更加丰富多彩，它功能强大，便于交互，随着环球网的发展， HTML得到了快速发展，应用更加广泛。本章主要介绍HTML的发展、基本结构和常用的主要标记。7.1HTML概述HTML是由万维网使用的发布语言，它的英文全称为Hyper Text Markup Language，直译为超文本标记语言，它是全球广域网上描述网页内容和外观的标准，它是一种能被所有计算机理解的计算机语言。当然我们利用一些专业的网页编辑器可以做出漂亮的网页，但作为网页设计人员，懂得HTML语言的基础知识也是必须的，这样可以更好的理解网页的形成，修正编辑器的不足，在动态网页的脚本语言中可以较为熟练的使用HTML元素。事实上，HTML是一种标记语言，并不能算作一种严格意义上的程序设计语言，它缺少程序语言应用的特征，它是通过浏览器的翻译，把网页呈现在用户面前。7.1.1HTML的发展历史1969年，托德尼尔逊首先提出了超文本的概念，其后IBM公司推出了通用标记语言GML。到1978年，美国标准局对GML进行了规范，推出了命名为SGML的通用标记语言。1980年，ISO正式确定SGML为描述各种电子文件结构和内容的国际标准。环球网原本是由位于瑞士的欧洲高能物理实验室设计完成的，最初的目的是为了满足科学家的相互交流的需要。1989年，实验室的一位研究人员Time Berners-Lee，完善了Internet上一种新的图形屏幕文件的设计方法，称为超文本标记语言（Hyper Text Markup Language,HTML）。使用HTML，创作人员可以轻松的把一个文件中的文字或图形连接到其他文件中去，很快，HTML为大多数人员所接受。并在1993年出现的第一个Web浏览软件Mosaic上开始普及。在20世纪90年代，随着环球网的快速发展，HTML也兴盛起来，得到了快速发展。1994年，Internet计算机工程工作小组完成了HTML2.0版本的编制工作，1995年的HTML3.0版本内容更为丰富。这些草案尽管在讨论中并未获得一致认可，但一些新特征得到了采用。环球网协会HTML工作组于1996年编制了标准规则，形成了HTML3.2标准。HTML4.0版本于1997年6月发布，它在格式页、脚本、帧、嵌入对象等方面有了较大的改进，这个版本规范更加统一，浏览器之间的兼容性也更加完善。HTML对各种各样的语言提供了极大的支持，它的文本可以使用各种语言编写，并在不同的浏览器和平台上均可使用，为HTML的国际化提供了支持。HTML的一个重要特征是超链接的使用，它改变了人们传统的翻阅式的阅读习惯，而是以非线性的方式在页面间跳动。HTML的发展呈现两种趋势：一是页面结构和页面表现形式的分离，这是由CSS的出现而完成的；二是HTML中的脚本机制的逐渐完善，增强了网页动态交互的功能。7.1.2HTML文件的创建HTML语言是一种标记语言。用HTML语言编写的网页实际上是一种文本文件，它以.htm或.html作为扩展名，我们可以使用任何文本处理软件来编写。1.记事本Windows附带的字处理程序，记事本是一个纯文本编辑器，可以使用它编辑简单的文档。记事本仅支持很基本的格式，且能够把记事本编辑的文档保存为.htm或.html的格式，因而记事本是创建Web页和程序语言的简单工具，而且记事本也能够正确显示所有HTML标记，因此可以快速诊断网页存在的问题。2.写字板写字板也是Windows自带的一个文字处理程序，在写字板中不仅可以创建简单的文本文档，还可以创建带有复杂格式和图形的文档。与记事本比较，它可以创建更大的纯文本格式文档，当然也可以用来编辑HTML文档。3.WordWord也是一种字处理程序，具有强大的Web功能，Word2003还支持可扩展标记语言（XML）文件格式，在保存文件时，可以选择保存为.htm或.html格式文件，但这种方式保存的网页的代码中可能有许多废代码，不利于我们日后的编辑。7.1.3在Dreamweaver中直接编辑HTML在Dreamweaver中可以直接编辑HTML，下面通过一个简单的实例来说明编辑过程，具体的标记在后面的章节介绍。1.编写HTML代码（1）启动Dreamweaver MX 2004程序。如果是第一次启动该程序，系统会弹出“工作区设置”，让用户选择工作模式，如图7-1，当然也可在“编辑”菜单下的“首选参数”对话框中设置不同的工作模式，只是在下次启动该程序时生效。（2）选中“代码编写者”单选按钮，单击“确定”按钮，然后，再单击“文件”菜单中的“创建”，则会以代码视图的方式打开一个新的HTML文件，如图7-2所示。 图7-1“工作区设置”对话框 图7-2 Dreamweaver代码视图（3）在代码中的与标记之间的内容即为新建的HTML文件的标题，也就是浏览器中显示的页面标题，将其修改为“我的网页”。（4）在代码中的与标记之间添加如下代码：欢迎学习HTML语言HTML是一种标记语言，它简单、易学。完成代码的输入后， HTML文件就编写完成了，下面就是如何保存和查看的问题。2.保存并预览HTML文件（1）选择“文件”菜单中的“保存”或“另存为”，打开如图7-3所示的“另存为”对话框。（2）在“保存在”下列表中选择存盘位置，在“文件名”文本框中输入文件的名称“实例1-1”，修改文件的保存类型为“HTML文档”，单击“保存”。（3）双击保存文件，在浏览器中查看显示效果如图7-4所示。 图7-3“另存为”对话框图7-4简单HTML文件显示效果7.2 HTML基本语法结构HTML语言是由世界性的标准化组织W3C（World Wide Web Consortium）的HTML Working Group组织制定的。下面从几个层面来说明HTML文件结构。7.2.1HTML标记及构成HTML是超文本标记语言，它的构成是通过各种标记来标示和排列对象的。在每一个HTML文件中都包括标记和内容两部分，标记是负责控制文本的显示外观和版式，并为浏览器指定对象的位置。多数HTML标记的格式如下：文本内容在HTML中，多数标记都是成对出现的，即具有开始标记和结束标记，但也有一些HTML标记没有结束标记，在结束标记前总是增加一个“/”。标记与标记之间可以嵌套。在源文件中，标记是不区分大小写的。标记中也可以放置一些属性，这些属性指定对象的特性，如背景颜色、字体大小、对齐方式等。属性放在开始标记中，标记名与属性、属性与属性之间用空格隔开。一般格式如下：文本内容7.2.2HTML的结构概念为了更好的了解HTML的结构，我们首先来看一下构成页面基本结构的三种标记。1. 描述页面结构的标记页面结构标记不影响页面的显示效果，它是帮助HTML工具对HTML文件进行解释的。n 标记：HTML的第一个标记，表明HTML文件的开始，其结束标记在HTML文档的尾部。n 标记：出现在文档的开始部分，表明文档的头部信息，一般包括标题和主题信息等，结束标记表明文档标题部分的结束。n 标记：指明文档的主体，是HTML文件的核心内容，结束标记在主体区域的结尾。2. HTML的结构一个完整的HTML文件包括标题、文本、列表以及各种对象，在文件中使用标记来描述这些对象，也就是说，HTML文件是由各种对象和标记组成的。先看一个例子，来体会HTML文件的结构。实例：用HTML语言编写的一个网页。 文件开始标记 文件头部标记我的第一个网页 文件标题标记/结束标记 文件头部结束标记 文件主体开始标记HTML是一种标记语言 标题文字标记/结束标记这里介绍的是HTML文件的结构 段落标记/段落结束标记 文件主体结束标记 文件结束标记将上述代码用文本编辑器编辑并保存为.htm的文件，双击生成的文件，在浏览器中看到如图7-5所示结果 图7-5实例在浏览器显示结果7.2.3HTML网页设计原则在使用HTML编写网页时，一般要注意以下几个原则：1.结构性在设计网页时，一定要注意网页的标记结构、脚本语言的结构、适当使用分段及空白字符，让整体结构看起来整齐美观，易于纠错和理解。2.通用性要充分考虑各种浏览器的特性，尽量使得文件能够在大多数浏览器上都能够正常显示，避免在不同的浏览器上显示结果不同的情况。如果确实不得已，则一定要加以特别说明。3.习惯性要充分考虑如组件的放置位置、用户的习惯用法（用鼠标或快捷键等的操作习惯），网页的下载时间太长，用户没有耐心等候等因素，做到尽量满足用户使用窗口和浏览习惯。4.适用性有些组件可能会因用户的窗口环境或安装的程序的不同，可能出现在作者的计算机中能够完全运行，而在其他的计算机上则出现运行不完整，所以在设计完毕后，要尽可能的在不同平台的计算机上多次进行试验，确保网页的适用性。7.3HTML常用标记HTML标记主要分为HTML基本标记、文字与段落标记、列表标记、超链接标记、使用图像标记、添加多媒体元素标记、表格的应用标记、添加表单和框架结构标记等。7.3.1HTML的基本标记1.头部标记在HTML的头部元素中，一般包括文档的一般信息，如标题、关键字等。它是以作为开始标记，以作为结束标志。定义在HTML头部的内容浏览器一般不会把它显示出来。头部标记中常用的标记有、等。2.标题标记标记用来定义网页的标题，通常显示在浏览器的标题栏中，一般用于说明页面用途。标题标记设置在头部标记中。语法：说明：省略号表示标题的具体内容，页面标题有且只有一个。实例：27军事论坛在编辑器中输入并保存后，在IE浏览器中显示效果如图7-6所示。3.基底网址标记URL是一种Internet网址的表示方法，它包括以何种协议连接、要连接到哪一个地址、以及服务器里页面的完整路径和页面名称等信息，在HTML中分为绝对路径和相对路径两种。绝对路径是将服务器上的磁盘名称和路径完整表示出来，相对路径是相对于基底网址或根目录的路径。基底网址标记设置HTML页面的绝对路径，HTML通过基底网址把当前页面中的相对地址转化为绝对地址。语法：说明：基底网址表示该页面的绝对地址。Target属性值有_Parent、_Blank、_Self、_Top分别表示：在上一级窗口打开、在新窗口打开、在同一窗口打开，可以省略、在浏览器的整个窗口打开。实例：军事论坛海军相对地址在编辑器中输入并保存后，在IE浏览器中，当鼠标指向“海军相对地址”时，状态栏就会显示出链接的绝对地址，效果如图7-7所示： 图7-6 标题实例显示效果 图7-7基底网址实例显示效果4.页面主体标记页面主体是HTML文件的主要部分，它以开始，以结束。在主体标记中，我们可以设置很多属性，在这里只讲一下页面的背景设置和文字设置。（1） 设置页面背景色bgcolor设置页面的背景色，可以使页面更加生动美观。语法：说明：颜色代码用“”加6位十六进制数值来表示，实例中#0000ff为蓝色，#ff0000为红色。实例：军事论坛在编辑器中输入并保存后，运行该代码，在IE浏览器中显示效果如图7-8所示。（2） 设置背景图片background除了可以设置背景颜色外，还可以将图片作为网页的背景，如果使用恰当，可以使网页更加生动，更有特点。语法：说明：文件链接地址可以为相对地址（即本机图片文件的相对该目录的存储位置），也可以是绝对地址（即网上或本机图片文件的绝对位置）。背景图片属性可以省略，省略时图片会按照水平和垂直方向不断重复，填满整个网页，如设置为fixed，背景图片和内容保持相对位置不变。实例：军事论坛在编辑器中输入并保存后，运行该代码，在IE浏览器中显示效果如图7-9所示。 图7-8背景颜色显示效果图7-9背景图片显示效果（3）设置文字颜色text对于默认文字可以通过text属性来设置其颜色。语法：说明：颜色代码同页面背景色当中的设置，需要特别注意，在没有对文字的颜色进行单独定义时，这一设置对页面中的所有文字起作用。实例：军事论坛设置页面默认文字颜色在编辑器中输入并保存后，运行该代码，在IE浏览器中显示效果如图7-10所示。图7-10默认文字颜色显示实例5.页面注释标记页面注释标记主要是用来对网页中各个功能模块的说明，有助于以后对代码的检查与维护。语法：说明：“!”为定界符，第一个“-”为注释开始符，第二个为注释结束符。注释不会被浏览器解释，它不会出现在网页中。7.3.2文字与段落标记在网页制作中，文字是最基本的要素，增加文字的易读性、增强其视觉效果也是网页设计者追求的目标，好的文字与段落设计，能够使阅读者在短时间内阅读更多的内容。1.标题文字标记HTML的标题标记用来表示页面上6级标题，数字越大，字体越小。关于标题标记中，最常用的属性是对齐方式align，使用它，可以实现标题文字的编排设置。语法：标题文字内容说明：n为1-6的数值，表示标题文字大小；属性这里只讲对齐方式align，其值为left、center、right分别表示左对齐、居中对齐和右对齐。实例：文字标题1级标题居中对齐2级标题左对齐5级标题居中对齐6级标题居右对齐在编辑器中输入并保存后，运行该代码，在IE浏览器中显示效果如图7-11所示。2.文字格式标记文字信息是网页中必不可少的，多种多样的文字效果，可以使得网页绚丽多彩，对于HTML编辑文字是很简单的，只要在主体开始标记和结束标记之间输入文字即可。（1）设置文字标记在文字格式标记中，可以通过属性face设置文字的不同字体效果，设置的字体必须在浏览器中安装了相应的字体后才可以正常浏览，因此网页设计中一般使用常用的基本字体；通过size属性设置文字的字号；通过属性color来设置文字的颜色，从而增加网页的亮丽色彩，吸引读者注意。语法：应用文字说明：字体名由Windows操作系统安装的字体决定。如：宋体、黑体、Arial等。默认情况下，使用第一种字体进行显示，如第一种不存在，则使用第二种字体替代（字体可有多个），如都不存在，则会以系统默认字体显示。文字的字号可以设置为17，默认文字大小与3号字相同，数值越大，文字也越大。文字的颜色代码同网页背景色的设置，颜色代码也是十六进制。实例：!-标记为换行标记-文字的设置效果黑体绿色文字效果3号蓝色文字效果华文琥珀5号字红色文字效果在编辑器中输入并保存后，运行该代码，在IE浏览器中显示效果如图7-12所示。 图7-11标题文字设置效果 图7-12文字设置效果（2）上标与下标标记sup、sub在网页中，我们常常要输入一些类似公式一样的文本，这就需要使用上标和下标。语法：上标 下标说明：上下标使用方法相同，将文字放在开始标记和结束标记之间即可。实例：上下标使用在方程式中使用上标X2+6Y2=10在方程式中使用下标X2+6Y2=10在编辑器中输入并保存后，运行该代码，在IE浏览器中显示效果如图7-13所示。（3）粗体、斜体、下划线、删除线标记strong、em、u、strike我们在浏览网页时，经常看到一些特殊效果的文字，如粗体、斜体等，这些文字效果可以通过一些标记来实现。语法：粗体字 或粗体字 斜体字 或斜体字 带下划线文字 带删除线文字或带删除线文字说明：只要把需要设定特殊效果的文字放到标记中即可。实例：不同的文字样式未加粗文字效果加粗文字效果斜体文字效果下划线文字效果加粗文字效果在编辑器中输入并保存后，运行该代码，在IE浏览器中显示效果如图7-14所示。 图7-13上下标显示效果 图7-14粗体、斜体、下划线、删除线显示效果3.段落标记在网页中离不开段落，在HTML中，通过一些标记可以实现对段落的设置。（1）段落标记p在HTML中，通过标记可实现分段的功能。语法：段落文字说明：段落标记可以没有结束标记，下一个段落开始标记就是上一段的结束标志。可以使用align属性。实例：换行标记实例中演示。（2）换行标记br标记是将文字从此处强制换行，它与段落标记不同，段落标记的换行是隔行的。语法：说明：换行标记没有结束标记，也没有内容，一个换行标记换一行，一个位置处可使用多个换行标记。实例：段落与换行标记素质教育李岚清副总理在讲话中指出：“改革课程、教材、教学方法，这是推行素质教育的核心”。课堂教学是实施素质教育的主渠道。在编辑器中输入并保存后，运行该代码，在IE浏览器中显示效果如图7-15所示。（3）居中对齐标记center有的时候，我们需要把整个段落居中，如一首诗。在HTML中也提供了一个标记即center。语法：文字说明：在标记中的文字会相对页面水平居中显示。实例：居中标记南园李贺男儿何不带吴钩收取关山五十州请君暂上凌烟阁若个书生万户侯在编辑器中输入并保存后，运行该代码，在IE浏览器中显示效果如图7-16所示。 图7-15段落与换行标记显示效果 图7-16居中对齐标记显示效果（4）向右缩进标记blockquote向右缩进标记可以实现页面文字的缩进。标记可多次使用，使用一次，文字就缩进一次。语法：文字说明：在该标记之间的文字会自动缩进。实例：向右缩进标记南园李贺男儿何不带吴钩收取关山五十州请君暂上凌烟阁若个书生万户侯在编辑器中输入并保存后，运行该代码，在IE浏览器中显示效果如图7-17所示。4.水平线标记hr水平线可以用来将段落和段落隔开，水平线可通过插入图片完成，也可使用该标记来完成。水平线标记中，还可使用属性width设置水平线的宽度；height设置水平线的高度；color设置水平线的颜色；align设置水平线的对齐方式，使用noshade参数去掉水平线的阴影。语法：说明：默认插入的水平线是100%的宽度，1像素的高度。水平线的宽度值可以是百分比，也可以是像素值，高度只能是像素值。颜色代码是十六进制的数值。在默认情况下，插入的水平线是居中对齐的，不设置的参数取默认值，对齐方式与前面所讲。在默认情况下，插入的水平线是空心带阴影的立体效果，通过noshade参数可去掉水平线的阴影。实例：居中标记南园李贺男儿何不带吴钩收取关山五十州请君暂上凌烟阁若个书生万户侯在编辑器中输入并保存后，运行该代码，在IE浏览器中显示效果如图7-18所示。 图7-17向右缩进标记显示效果 图7-18水平线标记显示效果7.3.3列表列表是一种比较实用的数据排列方式，它以条目的方式显示数据，使读者一目了然。在HTML中有三种列表方式，分别是无序列表、有序列表、定义列表，下面逐一来讲解。1.无序列表ul无序列表的特征是在列表项的前面的标记为同一符号。由标记来定义，列表项的内容由标记来指定，type属性定义列表项前所使用的符号，其属性值为disc（实心圆点）、circle（空心圆点）、square（小方块）。列表中可以嵌套列表，内含的列表将缩进显示。语法： 列表项内容 说明：表示列表项的开始，可以有多个。实例：创建列表计算机软件/文学小说类别计算机软件 系统软件 工具软件 文学小说 现代文学 古典文学 在编辑器中输入并保存后，运行该代码，在IE浏览器中显示效果如图7-19所示。2.有序列表ol有序列表的特征是列表项的前面使用的是有序的编号，可以是字母或数字。由标记来定义，列表项的内容由标记来指定，type属性定义列表项前所使用的序号的类型。语法： 列表项内容 说明：表示列表项的开始，可以有多个。其属性值可以为1、a、A、i、I分别表示数字序列、小写英文字母数列、大写英文字母序列、小写罗马序列（i、ii、iii），大写罗马序列。起始数值只能是数字，但可以对字母和罗马数字有效。实例：将上例中的主体部分换成如下代码。计算机软件/文学小说类别计算机软件 系统软件 工具软件 文学小说 现代文学 古典文学 在编辑器中输入并保存后，运行该代码，在IE浏览器中显示效果如图7-20所示。 图7-19无序列表显示效果 图7-20有序列表显示效果3.定义列表标记dl与上面的两个列表标记不同，它主要用于解释名词，它包括两部分，第一部分为解释的名词，用标记定义，第二部分为具体的解释内容，用标记定义。语法： 名词解释 说明：标记中的名词解释可有多个，即可有多组，解释的内容会自动缩进。实例：定义列表网页制作HTMLHTML是由万维网使用的发布语言，它的英文全称为Hyper Text Markup LanguageCSSCSS是一种设计网页样式的工具，它的英文全称为Cascading Style Sheets在编辑器中输入并保存后，运行该代码，在IE浏览器中显示效果如图7-21所示。图7-21定义列表显示效果7.3.4建立超链接超链接是网页的重要组成部分，超链接是指文档中的文字或者图像与另一个文档、文档的一部分或者一幅图像链接在一起。超链接能把整个网站的信息有机的结合在一起，能使浏览者从一个页面跳转到另一页面，达到文档互联，网站互联。1.绝对路径和相对路径绝对路径是主页上的文件在硬盘上的真正路径。相对路径就是自己相对于目标的位置。下面举一个例子来说明，在主页上链接一个图片，主页文件地址C:WEBSITEWEBINDEX.HTM，图片文件地址C:WEBSITEIMGP6.JPG，那么，在超链接时，其相对地址应为.IMGP6.JPG，而不应该为IMGP6.JPG，如果写成这样，则其绝对地址为C:WEBSITEWEBIMGP6.JPG。对于相对路径设置总结如下： 同一目录下的文件，只要输入链接文件的名称即可。 上一级目录的文件，则在目录名和文件名之前加入“.”，如果是上两级，则需要加入两个“.”。 如果是下一级目录，则输入目录名和文件名，之间用“”隔开。2.超链接标记a在网页中，文本超链接是最常用的一种，它通过网页中的文本和其他文件进行链接。当然，超链接中也可以使用图像或其他网页元素作为链接标志，有兴趣的同学可参考其他书籍。语法：链接文字说明：链接地址可以是绝对地址也可以是相对地址。3.链接方式超链接的目标文件可以位于本地站点，也可以是位于远程服务器上。Href的属性值的不同，表示了不同的链接方式。（1） 链接到外部网页链接到外部网页时，要使用绝对地址。例如：链接到163网站网易（2） 链接到本站其他网页在链接到本站其他网页时，要用相对地址。计算机 链接到本页面所在目录下的computer目录下的页面index.htm（3） 链接到电子邮件链接到邮件，所使用的协议不同。发送邮件mailto表示电子邮件协议，冒号后为对方的邮箱地址。（4） 网页内部链接网页的内部链接，在这里指的就是书签链接，要实现网页内部的书签链接，就需要首先建立书签。I. 建立书签语法：文字说明：书签名称就是为后面要跳转所建立的书签，文字则是设置后面链接所在的位置。实例：建立书签学会做人第一段联合国21世纪教育委员会提出21世纪教育的四大支柱，即学会求知，学会做事，学会共处，学会做人。学会做人是四大支柱的关键和核心，也是教育的目的和根本。第二段学会做人，这是我们每个人都要面对的问题。不管一个人有多少财富，多少知识，如果不懂得做人的道理，这个人最终不会获得真正的成功和幸福。希特勒，成克杰，胡长清，他们有知识，有财富，有地位，但他们不懂得做人的道理，最终成为历史的罪人。在新千年到来之际，西方人在评选世纪最伟大的十大思想家时，把马克思排在了首位。他的思想和人格魅力永远鼓舞着一代又一代人。是金子，埋在哪里都不会失去价值；是粪土，再张扬也逃不掉唾弃的下场。第三段人，从本质上讲，是社会的人。做人，在不同的国家，同一国家的不同历史时期，都赋予不同的内容和色彩。因此，学会做人，离不开现实社会。就我们所处的现实社会而言，就要在继承和发扬中华民族优良美德的基础上，用邓小平理论武装自己，确立远大理想，立志做有理想，有道德，有文化，有纪律的会主义现代化事业的建设者。正如数学家陶行知所说：“千学万学，学做真人”。在浏览器中看不到书签，但书签已经定义好了。II. 链接到同一页面的书签语法：链接的文字说明：书签的名称就是刚才定义的书签名，#代表书签的链接地址，链接的文字则是链接的标志。实例：在上面的例子中标记后加入以下代码：四大支柱教训从本质上讲在编辑器中输入并保存后，运行该代码，在IE浏览器中显示效果如图7-22所示。单击“从本质上讲”，跳转到书签NO.3所在位置效果如图7-23所示。 图7-22建立书签和超链接效果 图7-23跳转到书签所在位置效果III. 链接到不同页面的书签语法：链接的文字说明：与同一页面跳转不同的是，需要在链接的书签位置前加上文件地址。实例：链接到不同页面的书签四大支柱教训从本质上讲在编辑器中输入并保存后，运行该代码，在IE浏览器中显示效果如图7-24所示。链接到上一个实例文件中书签NO.3所在位置后显示效果如图7-25所示。 图7-24实例页面效果 图7-25跳转到上一个实例书签NO.3效果7.3.5插入对象在网络上，信息是多种多样的，图像、视频、音频文件等也是必不可少的。在当前万维网上流行的图像文件主要有GIF格式、JPEG格式和PNG格式。视频文件、音频文件在网络上也是非常流行的，如.MID、AVI、MP3、DAT等。1.添加图像img将图像文件添加到网页上，可以达到美化页面的效果。语法：说明：src属性用来设置文件所在的路径，可以是相对地址，也可以是绝对地址。对于图像高度和宽度属性，当只有一个时，默认情况下，改变一个，另一个也会按原图形比例进行等比例调整。图像高度、宽度、图像边框的宽度、水平间距、垂直间距的单位都是像素。水平间距是用来调整图像与文字之间的水平距离，垂直间距是用来调整图像与文字的垂直距离。Align属性用来指定图像在页面上显示的位置与周围文字的相对关系，其属性值有top、middle、bottom、left、right等，分别表示把图像的顶部和同行的最高部分对齐、文字在图片的垂直中部出现、图像的底部和同行文本的底部对齐（默认值）、使图像和左边界对齐（文本环绕图像）、使图像和右边界对齐（文本环绕图像）等。当为了加快浏览器的速度关掉了图像显示、或下载图像后，当鼠标停留在图像上时就会显示出提示文字。实例：插入图像联合国21世纪教育委员会提出21世纪教育的四大支柱，即学会求知，学会做事，学会共处，学会做人。学会做人是四大支柱的关键和核心，也是教育的目的和根本。学会做人，这是我们每个人都要面对的问题。不管一个人有多少财富，多少知识，如果不懂得做人的道理，这个人最终不会获得真正的成功和幸福。希特勒，成克杰，胡长清，他们有知识，有财富，有地位，但他们不懂得做人的道理，最终成为历史的罪人。在新千年到来之际，西方人在评选世纪最伟大的十大思想家时，把马克思排在了首位。他的思想和人格魅力永远鼓舞着一代又一代人。是金子，埋在哪里都不会失去价值；是粪土，再张扬也逃不掉唾弃的下场。人，从本质上讲，是社会的人。做人，在不同的国家，同一国家的不同历史时期，都赋予不同的内容和色彩。因此，学会做人，离不开现实社会。就我们所处的现实社会而言，人，就要在继承和发扬中华民族优良美德的基础上，用邓小平理论武装自己，确立远大理想，立志做有理想，有道德，有文化，有纪律的社会主义现代化事业的建设者。正如数学家陶行知所说：“千学万学，学做真人”。在编辑器中输入并保存后，运行该代码，在IE浏览器中显示效果如图7-26所示。图7-26插入图像中的各种属性显示效果2.插入多媒体文件embed如果在网页上插入音频或视频文件，将会使网页更加生动，但必须计算机安装有相应的播放软件。语法：说明：播放界面的高度和宽度一定要设置