web简介和html基础

《web简介和html基础》由会员分享，可在线阅读，更多相关《web简介和html基础（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，JavaScri

4、pt) 代码在服务器端执行(ASP,JSP,PHP等),4,静态网页和动态网页,静态网页 在动态网页出现之前，传统的网页是采用HTML编写的网页。目前大部分网页都是静态网页。 静态网页无需系统实时生成，其交换性能比动态网页要差，日常维护比较麻烦。 一般文件后缀为 .htm; .html 动态网页 采用ASP、JSP、PHP等程序动态生成的网页或者在静态HTML上加入脚本生成的网页（DHTML）。 特点：动态网页由计算机实时生成，交换性强，维护容易。文件后缀为 .aspx .shtm .php .cgi等 。后台一般有数据库，比如access、sql server,提醒：日常看到网页上有动的东西

5、比如gif图片，flash等，那么这些网页并不是动态网页，他们根本没有关系。,5,1.1.2 动态网页发展的几个阶段,1. CGI阶段 CGI是英文Common Gateway Interface的缩写，代表服务器端的一种通用(标准)接口。 每当服务器接到客户更新数据的要求以后，利用这个接口去启动外部应用程序来完成各类计算、处理或访问数据库的工作，处理完后将结果返回Web服务器，再返回浏览器。外部应用程序是用C、C+、Perl、Pascal、Java或其他语言编写的程序，程序运行在独立的地址空间中。后来出现了“ISAPI”(用于Internet Explorer浏览器)或“NSAPI”(用于N

6、etscape浏览器)技术，其功能与CGI相同，但技术方面有些改进。外部应用程序改用动态链接库(DLL)，被载入Web服务器的地址空间运行，并且用“线程”代替“进程”，因而显著地提高了运行效率。但不论是CGI还是ISAPI或NSAPI，都需要编写外部应用程序，而编写外部应用程序并不是一件容易的事情。从开发人员的角度讲，这种开发方式并没有带来开发上的方便。,6,1.1.2 动态网页发展的几个阶段,2. 脚本语言阶段 这个阶段出现了许多杰出的脚本语言，如ASP、PHP、JSP等。脚本语言的出现大大简化了动态网站开发的难度，特别是ASP和PHP学习简单、功能强大，成为许多网站开发者的首选。 JSP与

7、ASP的程序结构非常相似。它的主要特点是在传统的HTML网页文件中加入Java程序片段(Scriptlet)和使用各种各样的JSP标志(Tag)，构成JSP网页。Web服务器在接收客户的访问要求时，首先执行其中的程序片段，并将执行结果以HTML格式返回 客户。 3. 组件技术阶段 ASP.NET和Java(J2EE)技术是这个阶段的代表。这是一个由类和对象(组件)组成的完全面向对象的系统，采用编译方法和事件驱动方式运行。系统具有高效、高可靠、高可扩展的特点。详细情况将在下面各章节中重点讲述。,7,HTML 简介,HTML文件是什么？ HTML表示超文本标记语言（Hyper Text Marku

8、p Language）。 HTML文件是一个包含标记的文本文件。 这些标记告诉浏览器怎样显示这个页面。 HTML文件必须有htm或者html扩展名。 HTML文件可以用一个简单的文本编辑器创建。,8,HTML 文档示例, 学习 HTML 欢迎来到 HTML 世界 ,HTML 代码,浏览器处理代码并进行显示,9,编辑器和浏览器, 学习 HTML 欢迎来到 HTML 世界 ,HTML 代码,在编辑器中编写 HTML 代码,浏览器显示 HTML 文档/页面,10,HTML 文档结构, 学习 HTML 欢迎来到 HTML 世界 ,HTML 网页,头部部分,主体部分,标签标记 HTML 文档的开始和结束

9、,这部分包括标题和其他说明信息。包括在 标签内,这部分包含文本、图像和链接。它包括在 标签内,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 属

10、性,表示有效期：格林尼治标准时间 2005 年 9 月 12 日，星期一 14:25:27,表示每隔2秒，自动刷新网页,演示：自动刷新的例子,14,HTML 基本元素,标题 段落 换行符 预先格式化 字符格式化 列表 水平线 字体 图像 特殊字符 超级链接,15,标题, 动物世界 从大自然获得灵感 从大自然获得灵感 从大自然获得灵感 从大自然获得灵感 从大自然获得灵感 从大自然获得灵感 ,H1 到 H6 标签用于指定不同级别的标题,16,段落标签, 诗词学习 我是第一段 我是第二段 左对齐显示 居中显示 右对齐显示 , 标签用于标记段落,17,换行符,只要在文本中放入 标签，就会强制换行, 诗

11、词学习 我是第一行我是第二行 我是第一段 我是第二段 ,18,HTML注释,HTML中的注释 注释标签用来在HTML源文件中插入注释。注释会被浏览器忽略。你可以使用注释来解释你的代码，这可以在你以后编辑代码的时候帮助你。 ,19, 标签, 诗词学习 静夜思 床前明月光 疑是地上霜 举头望明月 低头思故乡 HTML, 标签用于显示具有预先定义格式的文本 （如 HTML 文档中所示）,20,字符的格式化,字符的格式化 (1) 设置字体、字号和颜色 在HTML语言中，可以使用字体标记来设置文本的字符格式，为此可以将文本置于和标记之间，并通过FACE、SIZE和COLOR属性来设置文本的字体、字号和颜

12、色。FACE属性指定一种字体，或者给出一个字体列表，各种字体名称用逗号来分隔，可以按照作者的喜好程度来排列。例如： 龙卷风 SIZE属性指定字体的大小(即字号)，其取值可以从1到7，默认值为3。SIZE属性值越大，显示的字号就越大。相对于基本字体(BASEFONT)的大小，也可使用+或-来指定相对字号。如： 龙卷风 静态网页设计 COLOR属性指定文本的颜色，可以用颜色名称表示，也可以用十六进制RGB格式表示。例如： 龙卷风 静态网页设计,21,字符格式化,2、设置字符样式 通过设置字符样式可以为某些字符设置特殊格式，例如粗体、斜体、下划线、删除线、上标、下标等。常用的设置字符样式的标记如下：

13、 .粗体 .大字体 .斜体 .删除线 .小字体 .删除线 .上标 .下标 .固定宽度字体 .下划线,22, 学习 HTML 这很有趣 足球是最令人喜爱的运动之一。 信息技术是发展的关键。 水的分子式是 H 2 O。 3 2 等于 9。 ,字符格式化标签,此标签用于对文本应用各种格式，如粗体、斜体、下划线、下标、上标等,23,列表简介,列表用于按逻辑方式对数据分组,玫瑰花,向日葵,兰花,苹果,桔子,水仙,芒果,水果 苹果 芒果 桔子 花卉 水仙 兰花 向日葵 玫瑰花,24,列表类型：无序列表, 星期中的每一天 星期日 星期一 星期二 星期三 星期四 星期五 星期六 ,无序列表也称为“项目列表”,

14、25, 星期中的每一天 星期日 星期一 星期二 星期三 星期四 星期五 星期六 ,列表类型：有序列表,在有序列表中，列表项以自动生成的顺序显示,26,使用水平线, 动物世界 老虎的夜间视觉 老虎的夜视能力优于人类的夜视能力五倍以上 , 标签用于在页面上绘制水平线 ALIGN：指定线的对齐方式，取值为left(左对齐)、center(居中对齐)或right(右对齐)，默认值为center。 COLOR：指定线的颜色。 NOSHADE：若指定该项，则显示一条无阴影的实线。 SIZE：指定线的宽度，以像素为单位。 WIDTH：指定线的长度，单位可以是像素或百分比(占页面宽度的百分比)。,27,使用字

15、体和属性, 动物世界 了解有关动物的更多信息 斑马的特性 没有任何两匹斑马的斑纹是完全一样的，因此每匹斑马都是独一无二的 ,可以按名称或十六进制值指定颜色,可以为字体指定的大小范围为从 1 到 7,可以指定一列字体，各字体间用逗号分隔。浏览器以最先找到的字体显示文本, 元素及其相关属性（如 SIZE、COLOR 和 FACE）可用于控制网页上文本的显示,28, 标签用于在 HTML 文档中插入图像。 标签的两个常用属性是 SRC 和 ALIGN。,SRC 属性用于指定要插入的图像位置。,ALIGN 属性用于指定图像相对于文本的对齐方式。,插入图像 2-1,29,插入图像 2-2, 动物世界 让

16、我们看看这些可爱的动物 底部对齐 顶部对齐 居中对齐 ,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属性将背景设置为颜色，它的值可以是一