《《Web数据库技术》-高晗-电子教案 第3章》由会员分享，可在线阅读，更多相关《《Web数据库技术》-高晗-电子教案 第3章（34页珍藏版）》请在金锄头文库上搜索。
1、1,第3章 HTML语言基础,本章学习要点 l HTML语言及其基本语法 l 构成网页的基本元素 l 超文本链接指针 l 表格和分框,2,超文本标记语言HTML（Hyper Text Markup Language）是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如Unix，Windows等）。 HTML语言是通过利用各种标记（tags）来标识文档的结构以及标识超链接（Hyperlink）信息的。虽然HTML语言描述了文档的结构格式，但并不能精确地定义文档信息应如何显示和排列，而只是建议Web浏览器（如Mosiac，Netscap
2、e等）应该如何显示和排列这些信息，最终在用户面前的显示结果取决于Web浏览器本身的显示风格及其对标记的解释能力。这就是为什么同一文档在不同的浏览器中展示的效果会不一样的原因。,3,3.1 网页设计基本原则,在设计网页的过程中，要了解以下基本设计原则： （1）正确分析网页用户的需要。 （2）网页下载时间不宜过长。 （3）网页的设计要做到在不同的环境下都能浏览。 （4）注意网页中的图形设计。 （5）定期更新网页内容。 （6）注意网站内容的搭配。 （7）考虑不支持某些功能的浏览器。 （8）对多媒体文件实施有限的限制。,4,3.2 HTML语言的结构,从结构上讲，HTML文件由元素（element）组
3、成。每一个元素都有名称和可选择的属性，元素的名称和属性都在起始标记内标明。例如体元素（body）： ,起始标记开始,元素名称,属性名,属性值,起始标记结束,5,一个HTML文件应具有下面的结构：, html文件开始 文件头开始 标题 文件头结束 文件体开始 文件体 文件体结束 html文件结束,6,一般来讲，HTML的元素有下列3种表示方法： l 文件或超文本。 l 文本或超文本。 l 。 第三种写法仅用于一些特殊的元素，例如分段元素P，它仅仅通知WWW浏览器在此处分段，因而不需要界定作用范围， 所以它没有结尾标记。,7,3.3 构成网页的基本元素,题目(title) title元素是文件头中
4、惟一一个必须出现的元素，它也只能出现在文件头中。title元素的格式为： 题目 题目标明该HTML文件的题目，是对文件内容的概括。,8,标题（hn) 标题标签用于显示HTML文件的各级标题，格式为: 标题内容 其中n为16之间的整数，其值越大，字越小。,9,排版标签分段 HTML的浏览器是基于窗口的，用户可以随时改变显示区的大小，所以HTML将多个空格以及回车看成一个空格，这是和绝大多数字处理器不同的。HTML的分段依赖于分段元素。 也有多种属性，比较常用的属性是： align# # 可以是left、center、right，其含义同上文。 例如： 段落居中,10,清单List 清单用于列举事
5、实。常用的清单有3种格式，即无序清单（unordered list），有序清单（ordered list）和定义清单（definition list）。,例如： 今天 明天 输出为： 今天 明天,例如： 今天 明天 输出为： 1. 今天 2. 明天,3定义清单,例如： 条目1 条目1的定义 条目2 条目2的定义 输出为： 条目1 条目1的定义 条目2 条目2的定义,2有序清单,1无序清单,11,居中 很多元素都有对齐方式属性，如hn、p等。也可以直接用居中标记。以下代码的输出结果如图3-2所示。,今天的 天气真好！ ,12,3.4超文本链接指针,使用超文本链接指针可以使顺序存放的文件具有一定程
6、度上随机访问的能力，更加符合人的思维方式。人的思维是跳跃的、交叉的，而每一个链接指针正好代表了作者或者读者的思维跳跃。 一个超文本链接指针由两部分组成：一是被指向的目标，它可以是同一文件的另一部分，也可以是世界另一端的一个文件，还可以是动画或音乐；另一部分是指向目标的链接指针。,13,统一资源定位器URL,统一资源定位器URL（Uiform Resource Locator）是文件名的扩展。在Internet上，各个网络、各个主机的操作系统可能不一样，因此必须指定访问该文件的方法。一个URL包括了以上所有的信息，它的构成为： protocol : / machine.name:port/dir
7、ectory/filename 其中，protocol是访问该资源所采用的协议， 一个典型的URL为：http:/,14,指向一个目标,在HTML文件中可用链接指针指向一个目标。其基本格式为： 字符串 href属性中的url是被指向的目标，随后的“字符串”在HTML文件中充当指针的角色，它一般显示为蓝色，也可以定义成其他颜色。当用户用鼠标点击这个字符串时，浏览器就会将url处的资源显示在屏幕上。例如： 中国教育和科研计算机网,15,标记一个目标,对于同一文件的不同部分，标识目标的方法实现: text name属性将放置该标记的地方标记为“name”，name是一个全文惟一的标记串，text部分
8、可有可无。 做好标记后，可以用下列方法来指向它： text 其中，url是放置标记的HTML文件，#name是标记名。 对于同一个文件，可以写为： text 这时就可以点击“text”跳转到标记名为name的部分了。,16,目标窗口,如果希望被指向的目标在一个新的窗口中显示，可以使用target属性来修饰链接指针元素。如： text 可将url代表的资源显示在一个新的窗口中，该窗口的名字叫window-name，它可以是本窗口（_self）、父窗口（_parent）、新窗口（_blank）及整个浏览器窗口（_top）。,17,图像链接指针,图像也可以做为链接指针。格式为： 可以看出，上例中用取
9、代了链接指针中“text”的位置。是图像元素，它表明显示url代表的图像文件。 下面是一个简单的图像链接指针： 中国教育和科研计算机网,18,图像地图（image map）,图像地图不仅需要在HTML文件中说明，它还需要一个后缀为.map的文件，用来说明图像分区及其指向的URL的信息。在.map文件中说明分区信息的格式如下： rect url 左上角坐标 右下角坐标 poly url 各顶点坐标 circle url 直径两端点坐标 default url,19,下面是一个完整的说明文件： default：http:/ rect：http:/ 140,20 280,60 poly：http:/
10、 180,80 200,140 circle：http:/ 80,140 80,100 图像地图需要一个特殊的处理程序imagemap，imagemap放在/cgi-bin 中。在HTML 文件中引用图像地图的格式为： ,20,3.5 版面风格控制,字号 HTML有七种字号，1号最小，7号最大。默认字号为3，可以用来设置新的字号。,21,字体风格 字体风格分为物理风格和逻辑风格。物理风格直接指定字体，如字体有黑体，斜体。逻辑风格用于指定文本的作用，如强调等。 格式为：,22,横线（hr）,横线，一般用于分隔同一文本的不同部分。在窗口中划一条横线非常简单，只要写一个即可。横线的宽度用指定，n是线
11、宽，单位是像素。例：。指定横线长度，既可以指定绝对线长，也可以指定横线长度占窗口宽度的百分比。例、。 横线的位置用指定，其中的#是left或right之一。left表示左端与左边界对齐，right是右端与右边界对齐。默认时，横线出现在窗口中央。,23,行间图像,行间图像可使网页更加漂亮，但是过大的图像会导致网络通信量急剧增大，延长访问时间。所以在主页上不宜采用很大的图像。如果确实需要一些大图像，最好在主页中用一个缩小的图像指向原图，并标明该图的大小，这样主页可快速地被访问，访问者可选择看还是不看那些图像。 图像的基本格式为： 或,24,分行和禁止分行,表示在此处分行，将通知浏览器，其中的内容在
12、一行内显示，若一行内显示不了，则超出部分将被裁剪掉。 中的clear属性标明下一行的情况，如 clear=left，表示下一行从左边界处开始。#可以是left、right、all之一。,25,背影和文本颜色,窗口背景可以用下列方法指定： bgcolor：背景颜色。 text：文本颜色。 link：链接指针颜色。 alink：活动的链接指针颜色。 vlink：已访问过的链接指针颜色。 例如： 大红背景色。 注意，此时体元素必须写完整，并用结束。,26,转义字符与特殊字符,HTML中及font>显示为。 若直接写成则会被认为是一个链接签。,27,3.6 表格（table）,表格的基本结构如下：
13、 一个表由开始，结束，表的内容由、和定义。说明表的一个行，表有多少行就有多少个；说明表的列数和相应栏目的名称，有多少个栏就有多少个；则填充由和组成的表格。border属性用来说明是否用表格线分开。,28,有通栏的表,有横向通栏的表用属性说明。其中，colspan表示横向栏距，#代表通栏占据的网格数，它是一个小于表的横向网格数的整数。 有纵向通栏的表用属性说明。其中，rowspan表示纵向栏距，#表示通栏占据的网格数，应小于纵向网络数。需要说明的是有纵向通栏的表，每一行必须用明确表示一横向栏目结束,这是和表的基本形式不同的。,29,表中文本的输出,文本与表框的距离用cellpadding=#说明
14、。 表格的宽度大于其中的文本宽度时，文本在其中的输出位置用align=#说明。#是left、center和right三者之一，分别表示左对齐、居中和右对齐。align属性可修饰、和链接签。 表格的高度大于其中文本的高度时，可以用valign=#说明文本在其中的位置。#是top、middle、bottom、baseline四者之一。分别表示上对齐、文本中线与表格中线对齐、下对齐、文本基线与表格中线对齐。特别注意的是基线（baseine）对齐方式，它使得文本出现在网格的上方而不是想像中的下半部。同样，valign可以修饰、和中的任何一个。,30,浮动表格,所谓浮动表格是指表与文件中内容对齐时，若在
15、现在位置上不能满足其对齐方式，表格会上下移动，即“挤开”一些内容，直到满足其对齐要求。 浮动属性一般由align=left或right指定。,31,3.7 分框（frame）,分框将同一浏览器的窗口（主框架：frameset定义）分成多个区域（子框：frame定义），每个区域可以单独显示一个HTML文件，各个区域也可相关连地显示某一个内容。分框的基本结构如下： ,32,3.8 其他标签,其他标签说明如下表所示。语法格式： ,33,34,本章小结,本章主要介绍了HTML语言的结构、构成网页的基本元素、超文本链接指针、版面风格控制，以及如何使用表格、分框等内容。表单部分的内容将在后面章节中专门介绍。,
