教案01WEB基础知识

教案1章节：9.1课题：WEB基础知识教学目的：了解WEB的发展掌握HTTP协议的工作原理了解基本的网站开发技术本课重点：HTTP协议的工作原理网站开发技术简介难点：网站开发技术直观和辅助教具黑板时间分配：2复问内容学生姓名成绩无作业及预习要求时间分配：简述HTTP协议的工作原理预习HTML标记语言教案编号第2页共7页I、组织教学网络已成为人们工作生活学习中不可或缺的有利工具，而网络中最主要的信息传递形式就是网页。网页开发与网站的维护需要大量的技术人员。本课程的学习帮助大家掌握网页开发的基本技术以及动态网站的开发技术。II、复习提问III、新授课9.1WEB基础知识一．上很重要也是用户最多的一项服务。Web服务最初是由日内瓦欧洲核物理研究中心（CERN）开发的一个科研项目，1990年底研制成功并投入使用。1993年初，美国国家超级计算机应用中心（NCSA）开发的基于图形用户界面的MOSAIC浏览器问世，使得Web服务得以突飞猛进地发展。二．网站与网页（Hypertext）是一种文件格式，是一种对信息的描述方法，这种描述方法不受系统平台的限制，可以在不同的平台上使用，用户也可以在各种操作系统上浏览这些超文本文件。在每一个页面上，可以有一些词、语句或图片等作为“链接点（Link）”，通过这些链接点可以快速地跳转到本网站的其它页面或其它网站上的页面。这种“链接点”方式称为超链接。存放这些页面的服务器称为网站。三．文档，或称Web页为基本元素构成。这些Web页采用超级文本（HyperText）的格式，即可以含有指向其他Web页或其本身内部特定位置的超级链接，或简称链接。可以将链接理解为指向其它Web页的“指针”。链接使得Web页交织为网状。这样，如果Internet上的Web页和链接非常多的话，就构成了一个巨大的信息网。当用户从服务器取到一个文件后，用户需要在自己的屏幕上将它正确无误地显示出来。由于将文件放入服务器的人并不知道将来阅读这个文件的人到底会使用哪一种类型的计算机或终端，要保证每个人在屏幕上都能读到正确显示的文件，必须以某种各类型的计算机或终端都能“看懂”的方式来描述文件，于是就产生了HTML--超文本语言。2.的核心——HTTPHTTP简介：由于HTTP协议是基于请求/响应范式的(相当于客户机/服务器)。一个客户机与服务器建立连接后，发送一个请求给服务器，请求方式的格式为：统一资源标识符(URL)、协议版本号，后边是MIME信息包括请求修饰符、客户机信息和可能的内容。服务器接到请求后，给予相应的响应信息，其格式为一个状态行，包括信息的协议版本号、一个成功或错误的代码，后边是MIME信息包括服务器信息、实体信息和可能的内容。HTTP的工作原理：许多HTTP通讯是由一个用户代理初始化的并且包括一个申请在源服务器上资源的请求。最简单的情况可能是在用户代理和服务器之间通过一个单独的连接来完成。在Internet上，HTTP通讯通常发生在TCP/IP连接之上。缺省端口是TCP80，但其它的端口也是可用的。但这并不预示着HTTP协议在Internet或其它网络的其它协议之上才能完成。HTTP只预示着一个可靠的传输。五HTML简介HTML语言是由一个世界性的标准化组织W3C（WorldWideWebConsortium）制定出来的。教案编号第3页共7页该语言自1990年问世以来，迄今为止已经发行了4个版本。现在最新的是HTML4.0版本，通过浏览“”站点，可以了解HTML标准的最新动态。HTML文件本身是一个ASCII文件，在任何文本编辑器中都可以进行编辑，当一个HTML文件编辑好后，必须用扩展名“.htm”或“.html”来存储，以表示该文件是HTML文档。一个HTML文件是由内容和标记构成的。HTML不是编程语言，而是一种根据需要把相关信息链接起来的信息管理技术，是一种用于编写超文本的标记语言。html文件主要由两个方面：1）文件的结构2）tag单元，即〈〉所构成的单元。tag含有属性，通过tag可以在页面上产生各种可视元素，包括段落、输入框、表格等，而通过tag的属性产生对这些元素的修饰，如颜色、大小等。总类文件类型HTML/HTML（放在档案的开头与结尾）文件主题TITLE/TITLE（必须放在「文头」区块内）文头HEAD/HEAD（描述性资料，像是「主题」）文体BODY/BODY（文件本体）格式如下：HTMLHEADTitle标题部分/Title/HEADBODY正文部分/BODY/HTML各标签含义如下：HTML/HTMLHTML标签位于HTML文件最开头，告诉浏览器，这个文件是HTML文件，在文件尾，用/HTML结束，提醒HTML文件结束。HEAD/HEADHEAD标签一般放在HTML标签后，用来标明文件的题目或定义部分。Title/Title这对标签用来定义文件的标题，浏览器通常会将文件标题显示在浏览器窗口的左上角。BODY/BODY这对标签一般用来指明HTML文档里主要内容，如：标题、段落、列表等。也可定义主页背景颜色。四．HTML介绍1.HTML文件是什么？HTML表示超文本标记语言（HyperTextMarkupLanguage）。HTML文件是一个包含标记的文本文件。这些标记保速浏览器怎样显示这个页面。HTML文件必须有htm或者html扩展名。HTML文件可以用一个简单的文本编辑器创建。教案编号第4页共7页HTML超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。HTML----------------------------------------开始标签HEAD--------------------------------------TITLE一个简单的HTML示例/TITLE|头部标签/HEAD--------------------------------------BODY----------------------------------------CENTER|H1欢迎光临我的主页/H1|BR|HR|文件主体FONTSIZE=7COLOR=red|这是我第一次做主页|/FONT|/CENTER|/BODY---------------------------------------/HTML---------------------------------------结尾标签HEAD/HEAD是HTML文档的头部标签,在浏览器窗口中，头部信息是不被显示在正文中的,在此标签中可以插入其它标记,用以说明文件的标题和整个文件的一些公公属性。若不需头部信息则可省略此标记，良好的习惯是不省略。title和/title是嵌套在HEAD头部标签中的，标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。2.如何运行假如你运行的是windows系统，打开记事本，在其中输入以下文本：htmlheadtitleTitleofpage/title/headbodyThisismyfirsthomepage.bThistextisbold/b/body/html将此文件保存为“mypage.htm”。启动浏览器。在文件菜单中选择“打开”（或者“打开页面”），这时将出现一个对话框。选择“浏览”（或者“选择文件”），定位到你刚才创建的HTML文件——“mypage.htm”，选择它，单击“打开”。然后在对话框中，你将看到这个文件的地址，比如说：“C:\MyDocuments\mypage.htm”。单击“确定”，浏览器将显示此页面。3.例子解释HTML文档中，第一个标签是html。这个标签告诉浏览器这是HTML文档的开始。HTML教案编号第5页共7页文档的最后一个标签是/html，这个标签告诉浏览器这是HTML文档的终止。在head和/head标签之间文本的是头信息。在浏览器窗口中，头信息是不被显示的。在title和/title标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。在body和/body标签之间的文本是正文，会被显示在浏览器中。在b和/b标签之间的文本会以加粗字体显示。4.关于HTML编辑器：用一些所见即所得的编辑器，比如frontpage，dreamwaver，你可以很容易创建一个页面，而不需要在纯文本中编写代码。但是假如你想成为一名熟练的网络开发者，我们强烈推荐你用纯文本编辑器编写代码，这有助于学习HTML基础。五．HTML元素HTML文档是由HTML元素组成的文本文件。HTML元素是预定义的正在使用的HTML标签。1.HTML标签HTML标签用来组成HTML元素。HTML标签两端有两个包括字符：“”和“”,这两个包括字符被称为角括号。HTML标签通常成对出现，比如b和/b。一对标签的前面一个是开始标签，第二个是结束标签,在开始和结束标签之间的文本是元素内容。HTML标签是大小写无关的，b跟B表示的意思是一样的。2.HTML元素HTML例子：htmlheadtitleTitleofpage/title/headbodyThisismyfirsthomepage.bThistextisbold/b/body/html下面是一个HTML元素：bThistextisbold/b此HTML元素以开始标签b起始，内容是：Thistextisbold，以结束标签/b中止。b标签的目的是定义一个需要被显示成粗体的HTML元素。下面也是一个HTML元素：bodyThisismyfirsthomepage.bThistextisbold/b/body此HTML标签以开始标签body起始，终止于结束标签/body。body标签的目的是定义一个HTML元素，使其包含HTML文档的主体。W3C在他们的HTML4建议中提倡使用小写标签，XHTML（下一代HTML）也需要小写标签。教案编号第6页共7页3.标签属性标签可以拥有属性。属性能够为页面上的HTML元素提供附加信息。标签body定义了HTML页面的主体元素。使用一个附加的bgcolor属性，你可以告诉浏览器：你页面的背景色是红色的，就像这样：bodybgcolor=red标签table定义了一个HTML表格。使用一个附加的border属性，你可以告诉浏览器：这个表格是没有边框的，代码是：tableborder=0属性通常由属性名和值成对出现，就像这样：name=value。属性通常是附加给HTML元素的开始标签的。引号样式属性值应该被包含在引号中。双引号是最常用的，但是单引号也可以使用。在很少情况下，比如说属性值本身包含引号，使用单引号就很必要了。比如：name='JohnShotGunNelson'。注意：中文引号跟英文引号是不一样的。上面所指的引号都是英文状态下的引号。：常见问题总结1.编写完了HTML文件，但是不能在浏览器中看见结果，为什么？答：请确认你保存了文件，并且使用了正确的文件名和扩展名，例如：“c:\mypage.htm”，并且确认你用浏览器打开时使用同样的文件名。2.编辑了HTML文件，但是修改结果并没有在浏览器中显示，为什么？答：浏览器缓存了你的页面，所以它不需要两次读取同样的页面。你修改了这个页面，浏览器并不知道。请使用“刷新/重载”按钮来强迫浏览器读取编辑过的页面。总结：本章主要讲解了HTML语言及其基本用