网页编程基础课件

《网页编程基础课件》由会员分享，可在线阅读，更多相关《网页编程基础课件（76页珍藏版）》请在金锄头文库上搜索。

1、1,网页设计与编程,HTML基础,2,HTML基础,本讲内容 HTML句法结构 HTML文档结构和常用元素 HTML标准单位 HTML基本元素的使用 HTML的其他元素,3,教学目标,理解和掌握HTML句法、文档结构、基本元素，其中列表、表单、表格等与后续课程有重要联系的HTML元素尤为重要； 掌握和熟练使用基于文本的HTML编辑工具，学习使用Web服务器发布网页； 学习使用浏览器查看网页的源代码。,4,HTML基础,为了在世界范围内发布信息，需要一种能够被普遍理解的语言，一种能为所有的计算机作为信息发布用的母语，这就是万维网使用的超文本标记语言（Hypertext Markup Langua

2、ge，HTML)。,5,HTML基础,使用HTML的可以创建： 发布包括标题、正文、表格甚至照片的联机文档； 可以通过超链标记将所建的文档与其他联机文档建立访问关联； 设计浏览器表单进行远程交互服务，如查找信息、进行预订、购置产品等； 可以将电子表格、视频剪辑，声音节目和其他多媒体信息包括在HTML文档中。,6,HTML句法结构,7,HTML句法结构,Google首页的部分源代码 Google . 另外还有HTML文档主体部分的声明。 ,8,HTML句法结构,一个HTML文档是普通的ASCII文本文件，它包含两类内容：普通的文本、代码或标记。标记(Tag)是用一对尖括号“”括起来的文本串，例如

3、第一行的。标记通常具有如下结构： 在标记定义中，“tagname”是标记名，定义标记的类型；而“attributes”为属性，一般标记即可以不定义属性，也可以定义若干个属性，属性给出了这个元素的附加信息。,9,HTML句法结构,所谓元素（Element），是HTML中的主要构件，一般元素都是由成对的标记组成，例如 ： Google 单个出现的标记成为“空元素”，例如： 可以容纳其他元素的元素也称为“容器元素”，例如： Google . ,10,HTML句法结构,在元素的起始标记中可以填入相关的元素属性 在Google主页文档第二行的标记中，head是标记名，没有相关属性。 在文档主体定义中，定

4、义了若干属性，属性值为“bgcolor=#ffffff text=#000000 link=#0000cc vlink=551a8b alink=#ff0000 onLoad=sf()”。,11,HTML句法结构,需要注意，虽然标记和属性名称与字母大小写无关，但是属性值却往往对大小写敏感。 例如，可以在超链中定义相关的文件名，尽管在Windows系统中，href=a1和href=A1可以指向同一文件，但在UNIX系统中，却是指向不同的文件。 重要提示：在网页设计须统一命名方案,12,HTML句法结构,标记和文本结合起来形成元素(Element)。每个元素代表文档中的一个对象，比如文件头、段落或

5、图片。一个元素可具有一个或一对标记，通常具有一些相关的属性。 元素有两种类型：容器（container）元素和单个元素（空元素）。,13,HTML句法结构,容器元素包含文本内容，代表一个文本段、它由文本主体（或其他元素）组成，文本主体在开头和结尾处用一对标记来确定边界（结尾的标记用标记名前加“/”来表示，并不带任何属性）。 例如，和标记把这两个标记之间的文本定义成一个文档标题。 而空元素是由不影响任何文本的单个标记组成的，它会在文档中插入一些对象。例如标记就是一个可以在文档中插入图像的单个元素。,14,HTML句法结构,容器元素与空元素一起完整地定义了文档的格式或显示形式。其它一些普通文本格式

6、符号（如Tab、连续的空格、回车等）在HTML中都被当做单一的空格。 例如，在输入HTML文件时，可以在每个标记后有若干个空行，或在每个单词之间有10个空格，但浏览器对此却“熟视无睹”，结果显示可能会出乎预料。 尽管这可能使简单的格式变得更复杂，但它允许作者通过使用编程风格的技巧，如额外的空白空间和制表符等而使HTML文件具有可读性而不影响最终的文档显示。,15,HTML文档结构和常用元素,这三个元素一起构成完整的HTML文档结构模板，所有的HTML文档都应该遵循这个模板： Header element body of Document ,16,HTML文档结构和常用元素,容器元素中包含的最为

7、常用的元素有： text：这个元素是文档的抬头，类似书籍的页眉。在浏览器中，标题通常与文本页分开显示（例如，在窗口的标题栏中）。 抬头（TITLE）在用户保存网页时一般都作为文件名，所以命名应该注意。,17,HTML文档结构和常用元素,容器元素中包含以下几个常用元素： text：标题把括起来的文本作为标题。从标记、直到，可以有六个层次的标题（较小的数字标记较重要的标题）。标题通常用较大的字型编排，并且在该标题的上下各有一个空行。 ：段落标识文本主体中两个段落之间的间隔。 ：图像标记把图像插入到文档中，图像可以在SRC属性中给出的URL处找到。,18,HTML文档结构和常用元素, 把图像插入到文

8、档中，图像可以在src属性指定的URL处找到。最常见的图像格式是GIF。 如果浏览器不支持插入图像（例如，Lynx浏览器），将显示在可选的alt属性中给出的文本。如果没有给出alt属性值，在图形所在的位置上可能会出现IMAGE的字样。 可选的align属性指出文本的当前行与图像在垂直方向上怎样对齐（通常是BOTTOM，但这随浏览器的不同而不同）。,19,HTML文档结构和常用元素,ISMAP属性用于建交互式的图形。如果使用语法，则这图像上成为一个可击点，产生一个链接到URL1处。 例如： ,20,texttext：该结构提供了一个无序的条目列表；每个条目以标记开始。通常在显示出的各条目项前置一

9、个圆点。 text：超文本标记，也称为超链接。文本用某种特殊方式来显示（用颜色、下划线或其它类似方法）； ：放置一个横穿浏览器窗口的水平线，通常水平线的上下各有一个空行。 ：在文本中强制换行，以便后继文本都放在下一行。,HTML文档结构和常用元素,21,HTML标准单位,在编辑HTML文件时，会涉及到对各种元素属性的赋值。 例如，定义标题的大小、定义文本的格式、定义图像的位置、定义水平线和表格的长宽、定义文字和背景的颜色、定义链接的指向位置等。通常用各种数据来为这些属性赋值。 一些数据，不仅在网页设计时经常要用到，而且它们的表示方法、代表的含义都有一套比较严格的规则。,22,HTML标准单位,

10、长度单位 可以用来定义水平线、表格边框、图像等对象的长、宽、高等一系列属性，同时也能用来定义这些对象在网页上的位置等属性。 长度的表示有两种方式：绝对长度和相对长度。 它们的单位分别为像素（pixel）和百分比（），像素代表屏幕上的各个显像点，而相对长度则描述了对象在浏览器窗口的所占的比例。,23,HTML标准单位,一般在网页设计中较少使用绝对长度，因为浏览器窗口可随时调整大小，如果水平线设置为绝对长度很容易造成不协调，而使用相对长度来描述则对象会随浏览器窗口大小变化而变化。 ,24,HTML标准单位,颜色单位也是描述网页表现形式中应用很频繁的一种数据类型。在设计网页的过程中，需要能定义字体、

11、页面背景、表格背景甚至超链接的颜色，通过利用颜色数据来定义这些对象的颜色属性。,25,HTML标准单位,颜色单位有三种表达的方式： 十六进制的颜色代码 Red Characters 十进制颜色码 Blue 颜色名码 Green Characters ,26,HTML标准单位,统一资源定位器(URL)1路径是一种因特网资源地址的表示法。该数据里中可以包括链接所需协议、链接主机的域名或IP地址、链接主机的通讯端口（port）号、主机文件的发布路径和文件名称等。 1 由W3C对HTML 4.0的定义中，URL的描述为“Universal Resource Identifier（URI）”。,27,H

12、TML标准单位,在HTML中，URL路径又分为两种形式：绝对路径和相对路径。 绝对路径是将主机地址和主机上资源发布目录的路径和资源名称进行完整的描述。如: ,28,HTML标准单位,相对路径则是相对于当前的网页所在目录或站点根目录的路径。如: URL的绝对路径必须以http:/形式开始，例如： ,29,HTML基本元素的使用,HEAD容器 HTML文档的标记是一个容器元素，在容器中允许出现以下元素： TITLE元素 text TITLE元素所包含的内容通常会出现在浏览器的标题栏或成为保存网页到本地磁盘时的默认文件名。,30,HEAD容器(续),LINK元素 在当前文档和另一文档之间建立链接关系

13、。name属性给链接起一个名字，比如“Mail to Author”（发给作者），rel属性描述了链接的类型，比如“made”（表示作者），“parent”（表示文档是大文档的一部分），“next”（表示是多文件文档的后续部分），及“pre”（表示前序部分）。href属性指向相关的文档。,31,HEAD容器(续),META元素 META元素提供网页作者以各种方式来描述与文档本身而不是文档内容有关的信息。如META元素通常用来为搜索引擎定义页面描述以及搜索关键字；或者是定义用户浏览器上的Cookie，还可以设置页面使其可以根据定义的时间间隔刷新页面。值得注意的是META标记是一个单个元素。,32

14、,HEAD容器(续), 以上语句为搜索引擎列出了关键字列表，这些关键字可以将页面正确地放置在Excite，Alta vista，Lycos和InfoSeek等著名搜索引擎的列表上，以便进行快速搜索。,33,HEAD容器(续), 以上语句会产生一个“Expires: Tue, 20 Aug 2001 14:25:27 GMT”的HTTP的头部（header），使得缓存链（Caches）决定何时取回相关文件的新版本。大部分浏览器为了节约下载时间，会在本地硬盘上保存已访网页的临时版本。在用户下次打开同一页面时，浏览器将直接调用硬盘上的文件，而不是网上的。,34,HEAD容器(续), 用户可以通过ME

15、TA元素为浏览器指定显示当前网页须用的语言编码，而无需读者自选。上面语句的黑体部分指定了当前的网页语言编码是简体中文。如果需要将网页的编码方式指定为繁体中文，可以使用下面语句： ,35,HEAD容器(续),BASE元素 凭借HREF的值，BASE元素就可以指定这个文档完整的URL。使用BASE元素后，当用户使用相对URL请求文档时，超链接也会正确地执行（例如，用户把文档保存在自己的磁盘上，并试图在那里使用文档）。 TARGET指定文档中所有链接的默认窗口，该属性主要用在使用框架（Frame）结构的网页中，使用框架结构，同一浏览器窗口中可以容纳多个网页同时在若干不同的框架窗口中显示。,36,HE

16、AD容器(续),Script元素 标记是用来在页面中插入由浏览器执行的脚本程序（JavaScript或VBScript），为容器元素。如： “LANGUAGE”属性用来指明脚本语言的种类。因为浏览器往往可以使用多种脚本语言，所以必须指明语言的种类。 注解标记（）是为了能与老版本以及无法解析脚本程序的浏览器兼容。,37,HTML基本元素的使用,容器 包含在标记对中的内容将显示在浏览器的主窗口中。 在开始设计网页之前，需要对页面进行一个整体的规划和设置，如背景颜色、背景图案、页面留白以及大部分文字的颜色等等。 在HTML中，使用元素来定义页面的这些基本属性。如在本章开始时提到的搜索引擎“Google”主页的例子，其的定义如下： ,38,容器(续),BODY元素本身的属性可以分为三类： 背景属性，其中包括BGCOLOR和BACKGROUND： BGCOLOR 背景色 BACKGROUND 背景图案 文字属性： TEXT正文文字颜色 LINK链接文字颜色 ALINK活动链接文字颜色 VLINK已访问链接文字颜色 留白属性，其中