《WEB简介和HTML基础.ppt》由会员分享，可在线阅读，更多相关《WEB简介和HTML基础.ppt（52页珍藏版）》请在三一办公上搜索。
1、1,目录,网页的发展过程HTML简介HTML基础语法,2,从静态网页发展到动态网页,早期的Web服务器传送的是静态网页，虽然网页中包括有文字和图片，但是只要不改变设计，网页的内容是不会变化的。对静态网页的访问过程如下：(1)客户通过Web服务器的URL申请页面。(2)服务器向客户送回被申请的页面。(3)在客户端下载并在浏览器上显示页面。(4)断开客户与服务器之间的联系。整个过程比较简单，到客户端下载完页面时为止，整个过程就结束了。用于发布静态网页的网站设计也比较简单。这种设计对于早期的网站来说也许已足够。因为早期使用网站的大多是一些科学工作者，他们关注的重点只是交流有关科学技术的内容。随着因特
2、网应用领域的扩展，各种不同类型的客户加入到网络中来，不少客户很快就提出了新的要求。例如，有的客户提出，能不能代我查阅一下我银行存款的变化情况？要满足类似这样的需求，服务器的工作就不那么简单了。它首先要查阅银行账户，进行必要的计算和统计，再将结果反馈给客户。这就是说，服务器在回答问题前必须先执行一些相关的程序。这段程序不仅应能回答客户的问题，还要能够保障客户的信息安全，防止其他人进行查阅或破坏。类似这种网页的输出内容将随程序执行的结果而有所不同。这样的网页被称之为“动态网页”。访问动态网页的过程如下：(1)客户通过Web服务器的URL申请一个网页。(2)服务器接收请求，并处理网页上的代码。(3)
3、将代码的处理结果转换成HTML代码后向客户送出。(4)在客户端下载并在浏览器上显示网页。(5)服务器断开与客户的联系并转向其他客户，以便提供新的服务。,3,网页的发展史,纯文本网页 Tim Berners-Lee将他设计的初级浏览和编辑系统合而为一，文本格式为基础，只有简单的几个标签（TAG）支持图像的网页浏览器里加入了标签增强了多媒体的网页加入了(背景)，(框架)，(字体)和(闪烁效果)等的标签。微软致力于网上游戏领域，他们设计了,(背景声效)等标签动态网页页面由程序动态生成 代码在客户机端执行(脚本VBScript，JavaScript)代码在服务器端执行(ASP,JSP,PHP等),4,
4、静态网页和动态网页,静态网页在动态网页出现之前，传统的网页是采用HTML编写的网页。目前大部分网页都是静态网页。静态网页无需系统实时生成，其交换性能比动态网页要差，日常维护比较麻烦。一般文件后缀为.htm;.html动态网页采用ASP、JSP、PHP等程序动态生成的网页或者在静态HTML上加入脚本生成的网页（DHTML）。特点：动态网页由计算机实时生成，交换性强，维护容易。文件后缀为.aspx.shtm.php.cgi等。后台一般有数据库，比如access、sql server,提醒：日常看到网页上有动的东西比如gif图片，flash等，那么这些网页并不是动态网页，他们根本没有关系。,5,1.
5、1.2 动态网页发展的几个阶段,1.CGI阶段CGI是英文Common Gateway Interface的缩写，代表服务器端的一种通用(标准)接口。每当服务器接到客户更新数据的要求以后，利用这个接口去启动外部应用程序来完成各类计算、处理或访问数据库的工作，处理完后将结果返回Web服务器，再返回浏览器。外部应用程序是用C、C+、Perl、Pascal、Java或其他语言编写的程序，程序运行在独立的地址空间中。后来出现了“ISAPI”(用于Internet Explorer浏览器)或“NSAPI”(用于Netscape浏览器)技术，其功能与CGI相同，但技术方面有些改进。外部应用程序改用动态链接
6、库(DLL)，被载入Web服务器的地址空间运行，并且用“线程”代替“进程”，因而显著地提高了运行效率。但不论是CGI还是ISAPI或NSAPI，都需要编写外部应用程序，而编写外部应用程序并不是一件容易的事情。从开发人员的角度讲，这种开发方式并没有带来开发上的方便。,6,1.1.2 动态网页发展的几个阶段,2.脚本语言阶段这个阶段出现了许多杰出的脚本语言，如ASP、PHP、JSP等。脚本语言的出现大大简化了动态网站开发的难度，特别是ASP和PHP学习简单、功能强大，成为许多网站开发者的首选。JSP与ASP的程序结构非常相似。它的主要特点是在传统的HTML网页文件中加入Java程序片段(Scrip
7、tlet)和使用各种各样的JSP标志(Tag)，构成JSP网页。Web服务器在接收客户的访问要求时，首先执行其中的程序片段，并将执行结果以HTML格式返回 客户。3.组件技术阶段ASP.NET和Java(J2EE)技术是这个阶段的代表。这是一个由类和对象(组件)组成的完全面向对象的系统，采用编译方法和事件驱动方式运行。系统具有高效、高可靠、高可扩展的特点。详细情况将在下面各章节中重点讲述。,7,HTML 简介,HTML文件是什么？HTML表示超文本标记语言（Hyper Text Markup Language）。HTML文件是一个包含标记的文本文件。这些标记告诉浏览器怎样显示这个页面。HTML
8、文件必须有htm或者html扩展名。HTML文件可以用一个简单的文本编辑器创建。,8,HTML 文档示例,学习 HTML欢迎来到 HTML 世界,HTML 代码,浏览器处理代码并进行显示,9,编辑器和浏览器,学习 HTML欢迎来到 HTML 世界,HTML 代码,在编辑器中编写 HTML 代码,浏览器显示 HTML 文档/页面,10,HTML 文档结构,学习 HTML 欢迎来到 HTML 世界,HTML 网页,头部部分,主体部分,标签标记 HTML 文档的开始和结束,这部分包括标题和其他说明信息。包括在 标签内,这部分包含文本、图像和链接。它包括在 标签内,11,学习 HTML 欢迎来到 HT
9、ML 世界,HTML 标签 2-2,标签,标识 BODY 元素,属性,提供有关元素的附加信息,值,分配给属性的内容,12,META 标签 2-1,META 标签是一个特殊的 HTML 标签，提供有关网页的信息，如作者姓名、公司名称和联系信息等许多搜索引擎都使用 META 标签信息例如，要将 Graham Browne 指定为作者，则使用以下 META 标签：,13,META 标签 2-2,http-equiv 属性可用来代替 META 标签中的 name 属性,表示有效期：格林尼治标准时间 2005 年 9 月 12 日，星期一 14:25:27,表示每隔2秒，自动刷新网页,演示：自动刷新的例
10、子,14,HTML 基本元素,标题 段落换行符预先格式化字符格式化列表水平线字体图像特殊字符超级链接,15,标题,动物世界从大自然获得灵感从大自然获得灵感从大自然获得灵感从大自然获得灵感从大自然获得灵感从大自然获得灵感,H1 到 H6 标签用于指定不同级别的标题,16,段落标签,诗词学习我是第一段我是第二段左对齐显示居中显示右对齐显示,标签用于标记段落,17,换行符,只要在文本中放入 标签，就会强制换行,诗词学习我是第一行我是第二行 我是第一段我是第二段,18,HTML注释,HTML中的注释注释标签用来在HTML源文件中插入注释。注释会被浏览器忽略。你可以使用注释来解释你的代码，这可以在你以后
11、编辑代码的时候帮助你。,19,标签,诗词学习静夜思 床前明月光 疑是地上霜 举头望明月 低头思故乡 HTML,标签用于显示具有预先定义格式的文本（如 HTML 文档中所示）,20,字符的格式化,字符的格式化(1)设置字体、字号和颜色在HTML语言中，可以使用字体标记来设置文本的字符格式，为此可以将文本置于和标记之间，并通过FACE、SIZE和COLOR属性来设置文本的字体、字号和颜色。FACE属性指定一种字体，或者给出一个字体列表，各种字体名称用逗号来分隔，可以按照作者的喜好程度来排列。例如：龙卷风SIZE属性指定字体的大小(即字号)，其取值可以从1到7，默认值为3。SIZE属性值越大，显示的
12、字号就越大。相对于基本字体(BASEFONT)的大小，也可使用+或-来指定相对字号。如：龙卷风静态网页设计COLOR属性指定文本的颜色，可以用颜色名称表示，也可以用十六进制RGB格式表示。例如：龙卷风静态网页设计,21,字符格式化,2、设置字符样式通过设置字符样式可以为某些字符设置特殊格式，例如粗体、斜体、下划线、删除线、上标、下标等。常用的设置字符样式的标记如下：.粗体.大字体.斜体.删除线.小字体.删除线.上标.下标.固定宽度字体.下划线,22,学习 HTML这很有趣足球是最令人喜爱的运动之一。信息技术是发展的关键。水的分子式是 H 2 O。3 2 等于 9。,字符格式化标签,此标签用于对
13、文本应用各种格式，如粗体、斜体、下划线、下标、上标等,23,列表简介,列表用于按逻辑方式对数据分组,玫瑰花,向日葵,兰花,苹果,桔子,水仙,芒果,水果苹果 芒果桔子花卉水仙兰花向日葵玫瑰花,24,列表类型：无序列表,星期中的每一天星期日星期一星期二星期三星期四星期五星期六,无序列表也称为“项目列表”,25,星期中的每一天星期日星期一星期二星期三星期四星期五星期六,列表类型：有序列表,在有序列表中，列表项以自动生成的顺序显示,26,使用水平线,动物世界老虎的夜间视觉 老虎的夜视能力优于人类的夜视能力五倍以上,标签用于在页面上绘制水平线ALIGN：指定线的对齐方式，取值为left(左对齐)、cen
14、ter(居中对齐)或right(右对齐)，默认值为center。COLOR：指定线的颜色。NOSHADE：若指定该项，则显示一条无阴影的实线。SIZE：指定线的宽度，以像素为单位。WIDTH：指定线的长度，单位可以是像素或百分比(占页面宽度的百分比)。,27,使用字体和属性,动物世界了解有关动物的更多信息斑马的特性没有任何两匹斑马的斑纹是完全一样的，因此每匹斑马都是独一无二的,可以按名称或十六进制值指定颜色,可以为字体指定的大小范围为从 1 到 7,可以指定一列字体，各字体间用逗号分隔。浏览器以最先找到的字体显示文本,元素及其相关属性（如 SIZE、COLOR 和 FACE）可用于控制网页上文
15、本的显示,28,标签用于在 HTML 文档中插入图像。标签的两个常用属性是 SRC 和 ALIGN。,SRC 属性用于指定要插入的图像位置。,ALIGN 属性用于指定图像相对于文本的对齐方式。,插入图像 2-1,29,插入图像 2-2,动物世界让我们看看这些可爱的动物底部对齐顶部对齐居中对齐,30,Image的alt属性,alt属性alt属性用来给图像显示一个“交互文本”。alt属性的值是由用户定义的。“alt”属性在浏览器装载图像失败的时候告诉用户所丢失的信息，此时，浏览器显示这个“交互文本”来代替图像。给页面上的图像都加上alt属性是一个好习惯，它有助于更好地显示信息，而且，对纯文本浏览器
16、很有用,基本注意点如果一个HTML文档包含10个图像，那么为了正确显示这个页面，需要加载10个文件。加载图像是需要时间的。,31,插入特殊字符 2-1,某些字符在 HTML 中具有特殊意义，如小于号()定义 HTML 标签的开始字符实体用于在 HTML 文档中插入特殊字符，如版权号，注册商标等,插入特殊字符需要用HTML字符实体,空格；,32,插入特殊字符 2-2,33,HTML背景,背景标签有两个属性可以指定背景。背景可以是颜色，也可以是图像。bgcolorbgcolor属性将背景设置为颜色，它的值可以是一个十六进制数、RGB值或者一种颜色名称。上面三条语句都可以把页面背景设置成黑色。bac
17、kgroundbackground属性将背景设置为图像，它的值是你所要使用图像的URL地址。如果这个图像的大小不及浏览器窗口，它将平铺占满窗口。URL地址可以是相对地址（上面第一条语句），也可以是绝对地址（上面第二条语句）。,34,HTML 背景,注意：如果打算使用背景图像，应该牢记：这个图像会使页面加载时间过长吗？小技巧：图像文件的容量尽量不要超过10K。这个图像跟页面上其他图像协调吗？这个图像跟页面上的文字颜色协调吗？这个图像平铺了以后看起来还可以吗？这个图像吸引了文字的注意力，喧宾夺主了吗？基本注意点有用的技巧标签的bgcolor、background和text属性在最新的HTML标准（
18、HTML4和XHTML）中已被废弃。W3C在他们的推荐中已删除这些属性。在HTML的未来版本中，层叠样式表（CSS）将被用来定义HTML元素的布局和显示属性。一般的网站很少使用背景图像。最常用的背景颜色是黑色、白色和灰色。,35,HTML背景,背景例子This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is another paragraph.This is another paragraph.This is another paragr
19、aph.This is another paragraph.,36,超级链接,“超链接”是HTML语言的精华。通过超链接你可以随时转向其他页面或者到某个段落去查看你想要看的东西，还可以跨越站点，到其他站点上去查阅相关信息。你可以浏览世界各地的最新信息。而这一切只需坐在屏幕前点一点鼠标就能实现。超链接是由源端点到目标端点的一种跳转。源端点可以是网页中的一段文本或一幅图像等。目标端点可以是任意类型的网络资源，例如一个网页、一幅图像、一首歌曲、一段动画或一个程序等。,37,创建超级链接,了解鸟类会弹琴的狗狗 单击此处查看,38,图片作为链接,You can also use an image as
20、a link:,39,超级连接的属性,创建一个锚的语法：Text to be displayed锚可以指向网络上的任何资源：HTML页面，图像，声音，影片等等。标签被用来创建一个链接指向的锚，href属性用来指定连接到的地址，在锚的起始标签和结束标签中间的部分将被显示为超级链接。这个锚定义了一个到W3Schools的链接：Visit W3Schools!target属性:使用target属性，你可以定义从什么地方打开链接地址。_blank：打开新窗口_top:跳出框架_parent:在父窗口打开_self:在当前窗口打开下面这段代码打开一个新的浏览器窗口来打开链接：Visit W3School
21、s!,40,链接到同一文档的某个部分2-1,锚记标签用于使用户“跳”到文档的某个部分 HTML 的 NAME 属性用于创建锚标记 为达到这种跳转效果，请在 HREF 参数中使用该标记,主题名称,主题名称,41,链接到同一文档的各个部分2-2,.狮子斑马印度豹狮子狮子的吼声从八公里之外就能听到！雄狮（很容易从鬃毛识别出雌雄）的重量达 250 公斤。而雌狮则要轻得多，只有 180 公斤。斑马没有任何两匹斑马的斑纹完全一样，因此每匹斑马都是独一无二的。斑马也称为黑白条纹相间的马.,42,链接到其他文档的特定位置,让我们深入了解一些动物狮子斑马印度豹,Animals.htm,狮子狮子的吼声从八公里之外
22、就能听到！雄狮（很容易从鬃毛识别出雌雄）的重量达 250 公斤。而雌狮则要轻得多，只有 180 公斤。,Animaldetails.htm,43,电子邮件链接,用户可从网页发送电子邮件,海豚充分交流，密切配合据说，海豚的交流模式几乎与人类的一样复杂！请将您的疑问发送至 David Fernandez,44,超级链接路径,关于路径路径是指从站点根文件夹或当前文件夹到目标文件所经过的路线，可以使用路径来指定超链接中目标端点的位置。路径有以下几种类型：绝对路径：也称为绝对URL，它给出目标文件的完整URL地址，包括传输协议在内。如果要链接的文件位于外部服务器上，则必须使用绝对路径。相对路径：也称为相
23、对URL，是指以当前文档所在位置为起点到目标文档所经过的路径。若要将当前文档与处在同一文件夹中的另一个文档链接，或者将同一站点中不同文件夹下的文档相互链接，都可以使用相对路径，此时可以省去当前文档与目标文档完整URL中的相同部分，只留下不同部分。根相对路径：是指从站点根目录到被链接文件的路径。使用这种路径是指定站点内文档链接的最好方式。,45,要链接到另一目录(C:example)下的页面，可编写 或,要链接到同一目录(C:html)下的页面，可编写 或,C:html 目录,C:example目录,绝对和相对路径名,绝对路径名,相对路径名,46,超级链接例子,1、创建指向本地页面的链接(链接到
24、本地磁盘上同一目录下的页面)(链接到本地磁盘上不同目录下的页面)2、创建指向其他服务器的页面链接(链接到Internet上其他服务器上的页面)3、创建一个指向页面特定部分的链接(链接到本页面内的某指定位置)(链接到其他服务器上页面的某指定位置)4、创建一个指向电子邮件的链接,47,创建移动的文本,在网页中经常可以看到一些移动的字符串。我们有时称这些移动的字符串为“移动字幕”或“跑马灯”，它可以进一步吸引人们的注意力。利用MARQUEE标记可以将静态的文本转换为动态文本。该标记使用的语法如下：要滚动显示的文本信息标记有很多属性可以改变移动的方式。例如：ALIGN：指定字幕与周围文本的对齐方式，其
25、取值可以是top、middle或bottom。BEHAVIOR：指定文本动画的类型，其取值可以是scroll、slide或alternate。BGCOLOR：指定字幕的背景颜色。DIRECTION：指定文本的移动方向，其取值可以是down、left、right或up。HEIGHT：指定字幕的高度，以像素或百分比为单位。HSPACE：整数，指定字幕的外部边缘与浏览器窗口之间的左右边距(像素)。LOOP：指定字幕的滚动次数。SCROLLAMOUNT：整数，指定字幕文本每次移动的距离，以像素为单位。SCROLLDELAY：整数，指定与前段字幕文本延迟多少ms后重新开始移动 文本。VSPACE：整数，
26、指定字幕的外边缘与浏览器窗口之间的上下边距(像素)。,48,例 子,例 1：我们在移动字符串的前后加上标志，如下所示：移动字符串 当进入浏览器时，“移动字符串”这五个字将从右向左移动，到达左边沿时再快速返回到右边，继续向左移动，不断循环直到关闭该网页时为止。根据需要也可设置成向不同方向移动。注意：这里虽然没有明显地用direction设置移动方向，但是一般每个属性都会有一个默认值，如果没有设置该属性值，就采用默认值，而direction的默认值为left，即从右向左移动。如果想设置为从左向右移动，就要写上direction=right。例2：再见了！用于控制移动范围。例3：滑到终点了！控制移动到左端就停止移动。例4：撞来撞去，啊！我昏啦从右到左，再从左到右反复进行。例 5：哗！太快了，我又昏啦用来控制移动速度和移动的次数。,49,网页颜色1,50,网页颜色2,51,网页颜色3,52,总结,HTML 标签一般配对使用，不区分大小写标签都具有属性。属性提供关于网页上 HTML 元素的附加信息META 标签放置在网页的标题处以提供关于页面的信息。搜索引擎常会用到这些标签标题级标签使用段落标签使用无序列表使用标签,有序列表使用标签字体标签超链接标签超链接文本小技巧：屏蔽左右键：onselectstart=return false oncontextmenu=return false,
