《超文本标记语言》PPT课件.pptVIP

第2章 超文本标记语言（HTML）,本章主要讲解： 超文本标记语言HTML的概念 HTM文档结构特征，编写一般网页的HTM文档 HTML各类标记的使用方法 网上商店实例中的基本网页编写方法,2.1 HTML概述,HTML（超文本标记语言）是一种描述文档结构的标注语言，它使用一些约定的标记对WWW上的各种信息进行标注。当用户通过网页浏览WWW上的信息时，浏览器会自动解释存在于网页源代码中的这些标记的含义，并按照这些标记约定的格式在屏幕上显示这些被标记的内容，从而形成网页。,2.1 HTML概述,HTML文件内容实际上是由一系列的标记段相互嵌套、或者相互并列形成，在每一个标记段之中包含着网页显示时需要的文字、资源地址、脚本语言程序。因此，从文档结构上看，HTM文档由标记段组成，每一个标记段称为文档元素。,2.1 HTML概述,组成HTM文档的元素有许多种，用于组织文件的内容和指导文件的输出格式。绝大多数元素是“容器”， 即它有起始标记和结尾标记。元素的起始标记叫做起始链接签（Start Tag），元素结束标记叫做结尾链接签（End Tag），在起始链接签和结尾链接签中间的部分是元素体。 每一个元素都有名称和可选择的属性，元素的名称和属性都在起始链接签内标明。以下是一个简单的HTM文档“p2-1.htm”内容，而将它在IE浏览器中打开显示的结果如图所示。,2.1 HTML概述, 武汉工业学院 以此表示一份简单HTM文档的结构以及网页显示形式 ,2.1 HTML概述,用于创建或者编辑HTM文档的软件工具很多，既可以选用具有简单文本文件编辑功能的文字处理软件，如Microsoft NotePad（记事本）、Microsoft WordPad（写字板）、Microsoft Word等等；也可以选用具有网页文件编辑功能的专用软件，如Microsoft FrontPage、DreamWeaver等等。 具有网页文件编辑功能的专用软件无疑是编辑HTM文档最方便的工具。书中所有HTM文档源代码均采用Microsoft NotePad（记事本）格式给出。,2.2 HTM文档结构,一个基本HTM文档的结构应该如图所示。,2.2.1 标记段,在标记段中，应该并列嵌套标记段和标记段，分别用以显示网页窗口标题及其网页正文。其最简单的常用形式为：, 浏览器窗口标题写在这里 HTM 文档的正文写在这里 ,2.2.2 标记段,标记段用于标记标记段首，其间可以包含若干个标记和一个标记段。 标记的典型用法为： 分别表示本HTM文档使用中国语言、其文本字符集为“GB2312”。,2.2.3 标记段,标记段用于标记HTM文档正文，即，浏览器窗口中显示的所有内容均应该书写在标记段中。凡是涉及整个网页的属性设置，包括网页背景色彩或者背景图案、网页上的各类文本色彩等等，均可在标记中通过设置相关属性来设定。标记的常用文法格式为： ,2.3 HTML的格式标记,HTML的格式标记分为文本格式标记与图像格式标记两类。其中，文本格式标记用于指定网页显示时，网页上文字的显示字体、字型、字号以及背景、前景色彩等特征；图像格式标记则用于指定网页显示时，网页上图像的显示位置、尺寸边框、以及当图像无法显示时的代替文字等特征。,2.3.1 文本格式标记符,在网页的文字显示中，如何指定标题文字，指定正文的显示格式，指定换行，指定关键文字的斜体、加粗、下划线，指定文字的字体、字型、字号和色彩，等等，就需要应用HTML的文本格式标记符号。,1标题文字标记, 标题文字标记实例 第一级文字标题 第二级文字标题 第三级文字标题 第四级文字标题 第五级文字标题 第六级文字标题 ,2预格式化文本标记, 预格式化文本标记实例 段首预置的空格被取消了，且行尾的 回车符也被忽略了。 段首预置的空格被保留着，且行尾的 回车符也被保留着。 ,3强制换行标记和段落标记,段落标记的作用是通知浏览器：位于标记之间的文本形成一个段落，需要置于下一段落的开始处显示。常用的段落标记属性是align，一般语法格式为： 其中，str的取值可以为：“left”、“center”或“right”分别指定本段落显示在页面窗口的居左、居中或居右。,4文本修饰标记, 换行标记、段落标记与文本修饰标记实例 位于strong标记对之间的文字被加重了! 由于br的作用导致 换了一行。p标记导致此处自成一段且居中。 由于段落标记 又换行了。 请注意几种文字修饰 的效果。 ,5字体型号标记, 字体型号标记实例 10号红色宋体文字 10号绿色黑体文字 10号蓝色隶书文字 6号橄榄色宋体文字 默认文字显示效果 ,2.3.2 图像格式标记符, 图像格式标记实例 忽略其它属性赋值，图像显示无边框，以原始尺寸居左，同行文字居下。 指定图框、指定图像显示尺寸、指定同行文字居中。 指定替换文字、指定图框、指定图像居右显示，由于能够显示图像，替换文字不显示。 由于图像文件名拼写错误，不能显示图像，因而显示替换文字。 ,2.3.3 滚动对象标记符,网页上的滚动对象是指在网页上左右移动的文字或者图像，这些对象的存在增添了网页的生动性。设定滚动对象的方法是，应用标记段将需要滚动的对象括起来。 标记段的一般文法为： ,2.4 HTML的超文本链接标记符,所谓包含超文本链接是指，在HTM文档中含有可直接转移至网络上任一指定资源的指针，而这个指针则称为超文本链接指针。 使用标记段即可在HTM文档中设置超文本链接指针。,2.4.1 统一资源定位器URL,所有的网络资源均具有唯一标识，均可采用统一资源定位器（URL，Uniform Resource Locator）予以定位。 在网络系统中，资源的唯一标识须以如下形式确定： protocol:/ :port/directory/filename 一个典型的URL为/，它表示武汉工业学院WWW服务器上的起始HTML文件。,2.4.2 在文本上设定超文本链接指针,超文本链接指针可以Web页上任一对象作为载体，使得操作者通过鼠标单击着一载体来实现指定网络资源的调用。在文本上设定超文本链接指针是指，将超文本链接指针的载体设定在Web页中的文字上。,1链接到其他HTM文档,在HTML文档中设定超文本链接指针的标记为：。其基本文法格式为： text 其中，text可以是文字或其他媒体形式的信息，构成超文本链接指针的载体。当用户鼠标单击text时，浏览器就会调用由href属性值“URL”所定位的目标。因此，href称为标记的资源定位属性。标记中的target属性称为目标属性，用于指定新引用的资源显示在哪一个窗口中。,2链接到同一个文件中的其他文本处,设定一个本地链接需要两个步骤，首先为跳转目的地设定标识（Name），文法一般格式为： 其中，str属性取值为一个字符串，为跳转目的地名称。跳转目的地可以是HTM文当中的任一位置，参见本节HTM文档源代码第7行和第15行。 在设定好跳转目的地后，即可在跳转起始处设定超文本链接指针，将标记中的href属性值设定为需要跳转的目的地址名称，参见本节HTM文档源代码第11行。,2.4.3 在图像上设定超文本链接指针,在HTM文档中，超文本链接指针还可以放置在图像对象上。操作者可以通过在图像上单击鼠标左键来实现网络资源的引用。其一般文法格式为： 其中，标记设置承放超文本链接指针的图像对象。 关于各种常用超文本链接标记应用的实例，请阅读以下HTM文档源代码“p2-7.htm”，对照图所示的浏览器输出效果领会标记设置的意义。, 超文本链接标记实例 跳转目的地1。 在本窗口中引用“文本修饰标记实例”。 在新窗口中引用“文本修饰标记实例”。 向前跳转至目的地1。、向后跳转至目的地2。 跳转目的地2。 ,2.5 HTML的表格标记符,一般而言，表格总是成批具有相同结构数据的最佳显示形式。在网络数据库应用系统中，诸如商店管理中的商品清单、客户关系管理中的订货清单等等，都属于这种成批的、具有相同结构的数据集合，因此，适合于表格形式显示。 另外，网络数据库应用系统常常采用关系数据库管理系统进行数据库管理，而关系数据库本身即以二维表作为组织数据的基本单元。因此，在网络数据库应用系统中采用表格形式提供数据的显示与操作界面，也就最为顺理成章了。,2.5.1 标记段,标记段必须完整地嵌套在标记段中。不同于关系数据库中的二维表，HTM文档中的表格对象中可以包含表格。也就说，标记段可以嵌套着标记段。 标记的一般文法格式为： ,2.5.2 表格元素标记符,1表格行标记 标记定义一个表格行的开始，标记结束一个表格行的定义。标记的一般文法格式为： ,2表格单元标记和,（1）标记 标记定义作为表格标题栏的表头单元，文法格式为： （2）标记 标记定义表格中的数据单元，文法格式为： ,2.5.3 表格标题标记,标记的一般文法格式为： 标题文字 align属性设定标题文字相对表格对象的水平对齐方式，可以取值为：“left”定义标题文字相对表格对象左对齐，“center”定义标题文字相对表格对象居中对齐，“right”定义标题文字相对表格对象右对齐。 valign属性设定标题文字相对表格对象的垂直位置，可以取值为：“top”定义标题文字位于表格对象之上，“bottom”定义标题文字位于表格对象之下。请察看下一节中的HTM文档源代码。,2.5.4 表格对象应用举例,2.6 HTML的框架标记符,HTML的框架标记符用于将一个Web页设定为若干个框架，允许每一个框架内显示一个HTM文档。, 框架结构实例 此处为左部框架 此处为右上框架 此处为右下框架 ,“p2-10.htm”文档代码在浏览器窗口中的运行效果,2.6.1 标记段,定义框架必须首先定义框架集合，使用的标记符为： 。 标记段的一般结构形式为： ,2.6.1 标记段,其中，标记的一般文法格式有两种： （1） （2）,1Cols属性说明,文法格式（1）含有cols属性，用于将页面垂直划分为若干个框架，其框架个数由cols属性的参数个数确定，各个框架尺寸从左至右由cols属性的相关参数值确定。,2Rows属性说明,文法格式（2）含有rows属性，用于将页面水平划分为若干个框架，其框架个数由rows属性的参数个数确定，各个框架尺寸从上至下由rows属性的相关参数值确定。,3framespacing和bordercolor属性说明,在文法格式（1）和文法格式（2）中都含有framespacing和bordercolor属性，且其含义与作用都是相同的。 framespacing属性用于定义框架集中各个框架之间的间距。最小间距为0，若为framespacing属性赋值小于0，则相邻两个框架会产生部分重叠。 bordercolor属性用于定义框架集中各框架间距的颜色。颜色值的设定，采用RGB方式完成。若框架间距0，则不会出现设定的颜色。,2.6.2 标记和标记段,1标记 标记的一般文法格式为： 2标记段 页面框架的概念出现在较晚一些时候，因此，至今仍有浏览器不予支持。于是，那些使用不支持页面框架浏览器的操作者在遇到带有框架的Web页面时，可能什么也看不到。,2.7 HTML的表单标记段,在HTML中，接受网页上传信息的主要对象是表单对象，网页上的表单对象采用标记段定义。,2.7.1 表单标记段,表单标记段的一般结构形式为： . . ,2.7.2 表单标记段中使用的标记,1标记 HTML中的INPUT标记用于在表单中设置文本框、复选框、单选框、图像对象和命令按钮等控件。一般文法格式如下： 标记具有五个属性：,（1）type属性,为type属性设置不同的值，导致在表单中设置不同控件。对应input标记可以设置的5种控件，type属性值可以分别设置为如下7种： text, password, checkbox, radio, image, submit, reset,（2）name属性,由于可以在一个表单中设置多个input控件，因此需要为每一个input控件设定一个在表单中唯一的标识，称为input控件名称。如此，当表单信息提交给服务器以后，位于服务器端的对应程序方能通过指定的控件名称准确地获取对应的表单信息。在标记中设置name属性即为该input控件命名，从而使得接收表单信息的程序可以通过该名称准确处理对应的表单信息。,（3）value属性,value属性值具有两种不同的含义：在单行文本框控件中，用于为input控件设定最初显示的信息；在单选框控件和多选框控件中，用于设定被选项的上传信息。value属性值可以是任意字符组成的串。,（4）size属性和maxlength属性,size属性用于设定单行文本框