WEB简介和HTML基础.ppt

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