【教学课件】第7章Web技术和HTML.ppt

《【教学课件】第7章Web技术和HTML.ppt》由会员分享，可在线阅读，更多相关《【教学课件】第7章Web技术和HTML.ppt（39页珍藏版）》请在三一办公上搜索。

1、第7章 Web技术和HTML,孙焘,重点：,难点：,7.1 Web技术概述,什么是万维网 Web的表现形式 什么是Web网站 Web网站的功能Web的开发技术,7.1 Web技术概述,7.1.1 什么是万维网 WorldWideWeb称为万维网，简称Web。它的基本结构是采用开放式的客户/服务器结构(Client/Server),分成服务器端、客户接收机及通讯协议三个部分。,7.1 Web技术概述,7.1.2 Web的表现形式(1)超文本（hypertext）(2)超媒体（hypermedia）(3)超文本传输协议（HTTP）,7.1 Web技术概述,7.1.3 什么是Web网站Web网站就是

2、利用互联网技术，把企业，机构或个人的信息通过Web页面和Internet发布出去，通过申请域名而成为一个站点。,7.1 Web技术概述,7.1.4 Web网站功能BBS社区电子商务在线论坛在线考试，远程教育博客，视频等等,7.1 Web技术概述,7.1.5 Web开发技术客户端技术HTML语言是信息展现的最有效载体 服务端技术 CGI，PHP，ASP，JSP静态技术 HTML动态技术 DHTML，css，javascript，vbscript,7.2 HTML的格式,7.2.1 HMTL简介7.2.2 HTML的编辑器7.2.3 HTML发展历史7.2.4 HTML的基本格式7.2.5 HTM

3、L的基本标签7.2.6 HTML版的Hello World,7.2 HTML的格式,7.2.1 HMTL简介超文本置标语言HyperText Markup Language，简称为HTML，是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种置标语言。HTML被用来结构化信息例如标题、段落和列表等等，也可用来描述文档的外观和语义。包含HTML 内容的文件最常用的扩展名是.html,7.2 HTML的格式,7.2.2 HTML的编辑器HTML 编辑器是一种用来编辑HTML文本的软件。其实HTML只是一个文本文件，就算一个最普通的文字编辑器都可以胜任。常用的HTML 编辑器有记事本，Drea

4、mweaver,Frontpage等。,7.2 HTML的格式,7.2.3 HTML发展历史超文本置标语言(第一版)-在1993年6月发为互联网工程工作小组(IETF)工作草案发布(并非标准)HTML 2.0-1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时HTML 3.2-1996年1月14日,W3C推荐标准HTML 4.0-1997年12月18日,W3C推荐标准ISO/IEC 15445:2000(“ISO HTML”)-2000年5月15日发布,是国际标准化组织和国际电工委员会的标准XHTML 1.0-发布于2000年1月26日,W3C推

5、荐标准HTML 2.0-W3C工作草案,7.2 HTML的格式,7.2.4 HTML的基本格式(一)HTML是一种标签嵌套式的语言。标签用来表示，标签必须成对出现.如,则必须以另一个标签将它关闭。注意“head”前的斜杠，那就是关闭标签与打开标签的区别。每个标签内可以放置内容，如 这是一个标题 表示html的标题,7.2 HTML的格式,7.2.4 HTML的基本格式(二)标签之间可以嵌套例如 标题 内容,7.2 HTML的格式,7.2.4 HTML的基本格式(三)HTML不区分大小写标题与标题的效果是一样的,7.2 HTML的格式,7.2.4 HTML的基本格式(四)标签内只能嵌套完整的其他

6、标签下面是的嵌套方式是不合法的 在head标签内只有title标签的开始部分，没有结束的部分，这是不合法的。,7.2 HTML的格式,7.2.5 HTML的基本标签一个标准的HTML文件一般包含下面4个标签：用来标记整个html文件；：用来标记html的头信息；：用来标记html标题信息；应嵌套在中；：用来标记html的正文；,7.2 HTML的格式,7.2.6 HTML版的“hello world”Hello WorldHello World!,7.2 HTML的格式,7.2.6 HTML版的“hello world”,7.3 HTML常用标签,表单标签的使用表格的绘制丰富的表格属性图片与超

7、链接多窗口页面,7.3 HTML常用标签,7.3.1 表单标签的使用用户名密码 教师学生,7.3 HTML常用标签,7.3.1 表单标签的使用 用来标记一组表单。其action 属性表示将此表单提交给谁来处理；其method属性用来表示提交表单的方式。常用的提交表单的方式为post 和get。用来标记一个用户输入。其type属性表示用户输入的类型。常用的用户输入类型有：text,password,submit,button,reset 等。name 属性会连同表单一起被提交，接收表单的容器可以通过name 来获取对应的值。,7.3 HTML常用标签,7.3.1 表单标签的使用对标签的type属

8、性的值的解释：(1)text：段纯文本；(2)password：密码；(3)radio：单选按钮；(4)submit：提交表单的按钮；(5)button：普通按钮；(6)reset：清空表单的按钮；表示换行，这个在html中很常用,7.3 HTML常用标签,7.3.1 表单标签的使用,7.3 HTML常用标签,7.3.2 表格的绘制学号姓名性别出生日期院系200801001张三男1989-01-01电信学院200801002李四男1989-02-01电信学院,7.3 HTML常用标签,7.3.2 表格的绘制(1)：标记一个表格；(2)：标记表格头；(3)：标记表格体；(4)：标记表格中的一行，

9、可以嵌套在中，也可以嵌套在中；(5)：标记表格中一行的一列，应嵌套在中。,7.3 HTML常用标签,7.3.2 表格的绘制,7.3 HTML常用标签,7.3.3 丰富表格属性学号200801001姓名张三性别男民族汉生日1989-01-01考生来源应届毕业院系电子与信息工程学院专业计算机应用技术,7.3 HTML常用标签,7.3.3 丰富表格属性和标签都具有bgColor 属性，用来标记一行或一个单元格的背景颜色。width 和height 属性用来标记表格的宽和高，可以以百分数为单位（如20%），也可以以像素数为单位（如200px）。align 属性用来标记表格的对齐方式，可是是left（左

10、对齐）,right（右对齐）,或center（居中显示）；border属性用来设置表格边框的宽度。,7.3 HTML常用标签,7.3.3 丰富表格属性,7.3 HTML常用标签,7.3.4 图片与超链接(1)显示图片URL为的图片(2)显示与c:008001.jpg 的图片(3)显示一个超链接，链接到(4)显示一个超链接，链接到（要求在新窗口中打开新的链接）,7.3 HTML常用标签,7.3.4 图片与超链接(1)(2)(3)google(4)google,7.3 HTML常用标签,7.3.4 图片与超链接(1)：在html中显示图片。图片可以是网上的图片，也可以是本地硬盘中图片。其URL用s

11、rc属性来标记(2)alt 属性：标签的alt 属性属性标记了图片的提示文字。with 和height 属性分别标记了图片的宽度和高度。(3)：标记一个超链接，用其href属性来标记超链接的URL。(4)target属性：标签的target属性用来表示用哪个页面显示新的页面。例如”_blank”表示打开一个新的浏览器窗口，并在新的浏览器窗口中显示新的页面,7.3 HTML常用标签,7.3.4 图片与超链接,7.3 HTML常用标签,7.3.5 多窗口页面 framesleftleft frameHelloWorldform,7.3 HTML常用标签,7.3.5 多窗口页面 框架可以将浏览器窗口

12、划分为若干个窗格，在每个窗格中都可以显示一个网页，从而可以取得在同一个浏览器窗口中同时显示不同网页的效果。框架网页通过一个frameset标记和多个frame标记来定义。在框架网页中，可将frameset标记置于head之后，以取代body的位置，还可以使用noframes标记框架不能被浏览器显示时的替换内容。为多窗口标记。其col 属性用来标记多窗口个列的宽度，可以以百分数表示（如20%），也可以以像素表示（如200px）；frameset 标签还有rows 属性，用来表示此frameset 由多个行窗口组成。frameset 标签可以嵌套。为窗口标记，应嵌套在frameset 标签中。其src 属性用来标记这个frame 的路径。本案例包含两段HTML 代码，第一段是标记了框架结构，即页面有左右两个frame 组成，左侧frame 占整个浏览器窗口20%的宽度，右侧frame 占80%的宽度。每个frame 的name 属性标记了这个frame 的名字。在第二段HTML 代码中，显示了左侧frame 的内容。其中target 属性标记了在哪个frame 中显示新的页面。,7.3 HTML常用标签,7.3.5 多窗口页面,结束,