《【教学课件】第7章Web技术和HTML.ppt》由会员分享，可在线阅读，更多相关《【教学课件】第7章Web技术和HTML.ppt（39页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、LOGO第第7章章Web技术和技术和HTML孙焘孙焘重点：重点：web技术概述1HTML的格式2HTML的常用标签3多frame页面设计4难点：难点：HTML的格式掌握1Table标签的相关属性27.1Web技术概述技术概述v什么是万维网什么是万维网vWeb的表现形式的表现形式v什么是什么是Web网站网站vWeb网站的功能网站的功能vWeb的开发技术的开发技术7.1Web技术概述技术概述v7.1.1什么是万维网什么是万维网WorldWideWeb称为万维网，简称为万维网，简称称Web。它的基本结构是采用开放式的客户它的基本结构是采用开放式的客户/服服务器结构务器结构(Client/Server
2、),分成服务器分成服务器端、客户接收机及通讯协议三个部分。端、客户接收机及通讯协议三个部分。7.1Web技术概述技术概述v7.1.2Web的表现形式的表现形式(1)超文本（超文本（hypertext）(2)超媒体（超媒体（hypermedia）(3)超文本传输协议（超文本传输协议（HTTP）7.1Web技术概述技术概述v7.1.3什么是什么是Web网站网站Web网站就是利用互联网技术，把企网站就是利用互联网技术，把企业，机构或个人的信息通过业，机构或个人的信息通过Web页面和页面和Internet发布出去，通过申请域名而成为发布出去，通过申请域名而成为一个站点。一个站点。7.1Web技术概述技
3、术概述v7.1.4Web网站功能网站功能BBS社区社区电子商务电子商务在线论坛在线论坛在线考试，在线考试，远程教育远程教育博客，视频等等博客，视频等等7.1Web技术概述技术概述v7.1.5Web开发技术开发技术v客户端技术客户端技术HTML语言是信息展现的最有效载体语言是信息展现的最有效载体v服务端技术服务端技术CGI，PHP，ASP，JSPv静态技术静态技术HTMLv动态技术动态技术DHTML，css，javascript，vbscript7.2HTML的格式的格式v7.2.1HMTL简介简介v7.2.2HTML的编辑器的编辑器v7.2.3HTML发展历史发展历史v7.2.4HTML的基本
4、格式的基本格式v7.2.5HTML的基本标签的基本标签v7.2.6HTML版的版的HelloWorld7.2HTML的格式的格式v7.2.1HMTL简介简介超文本置标语言HyperText Markup Language，简称为HTML，是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种置标语言。HTML被用来结构化信息例如标题、段落和列表等等，也可用来描述文档的外观和语义。包含HTML 内容的文件最常用的扩展名是.html7.2HTML的格式的格式v7.2.2HTML的编辑器的编辑器HTML 编辑器是一种用来编辑HTML文本的软件。其实HTML只是一个文本文件，就算一个最普通的文字编
5、辑器都可以胜任。常用的HTML 编辑器有记事本，Dreamweaver,Frontpage等。7.2HTML的格式的格式v7.2.3HTML发展历史发展历史超文本置标语言(第一版)-在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日发布,是国际标准化组织和国际电工委员
6、会的标准XHTML 1.0-发布于2000年1月26日,W3C推荐标准HTML 2.0-W3C工作草案7.2HTML的格式的格式v7.2.4HTML的基本格式的基本格式(一一)HTML是一种标签嵌套式的语言。标签用来表示，标签必须成对出现.如,则必须以另一个标签将它关闭。注意“head”前的斜杠，那就是关闭标签与打开标签的区别。每个标签内可以放置内容，如这是一个标题 表示html的标题7.2HTML的格式的格式v7.2.4HTML的基本格式的基本格式(二二)标签之间可以嵌套例如 标题标题 内容内容7.2HTML的格式的格式v7.2.4HTML的基本格式的基本格式(三三)HTML不区分大小写标题
7、与标题的效果是一样的7.2HTML的格式的格式v7.2.4HTML的基本格式的基本格式(四四)标签内只能嵌套完整的其他标签下面是的嵌套方式是不合法的 在head标签内只有title标签的开始部分，没有结束的部分，这是不合法的。7.2HTML的格式的格式v7.2.5HTML的基本标签的基本标签一个标准的HTML文件一般包含下面4个标签：用来标记整个html文件；：用来标记html的头信息；：用来标记html标题信息；应嵌套在中；：用来标记html的正文；7.2HTML的格式的格式v7.2.6HTML版的版的“helloworld”Hello WorldHello World!7.2HTML的格式
8、的格式v7.2.6HTML版的版的“helloworld”7.3HTML常用标签常用标签v表单标签的使用表单标签的使用v表格的绘制表格的绘制v丰富的表格属性丰富的表格属性v图片与超链接图片与超链接v多窗口页面多窗口页面7.3HTML常用标签常用标签v7.3.1表单标签的使用表单标签的使用用户名密码 教师学生7.3HTML常用标签常用标签v7.3.1表单标签的使用表单标签的使用 用来标记一组表单。其action 属性表示将此表单提交给谁来处理；其method属性用来表示提交表单的方式。常用的提交表单的方式为post 和get。用来标记一个用户输入。其type属性表示用户输入的类型。常用的用户输入
9、类型有：text,password,submit,button,reset 等。name 属性会连同表单一起被提交，接收表单的容器可以通过name 来获取对应的值。7.3HTML常用标签常用标签v7.3.1表单标签的使用表单标签的使用对标签的type属性的值的解释：(1)text：段纯文本；(2)password：密码；(3)radio：单选按钮；(4)submit：提交表单的按钮；(5)button：普通按钮；(6)reset：清空表单的按钮；表示换行，这个在html中很常用7.3HTML常用标签常用标签v7.3.1表单标签的使用表单标签的使用7.3HTML常用标签常用标签v7.3.2表格的
10、绘制表格的绘制学号姓名性别出生日期院系200801001张三男1989-01-01电信学院200801002李四男1989-02-01电信学院7.3HTML常用标签常用标签v7.3.2表格的绘制表格的绘制(1)：标记一个表格；(2)：标记表格头；(3)：标记表格体；(4)：标记表格中的一行，可以嵌套在中，也可以嵌套在中；(5)：标记表格中一行的一列，应嵌套在中。7.3HTML常用标签常用标签v7.3.2表格的绘制表格的绘制7.3HTML常用标签常用标签v7.3.3丰富表格属性丰富表格属性学号200801001姓名张三性别男民族汉生日1989-01-01考生来源应届毕业院系电子与信息工程学院专业
11、计算机应用技术7.3HTML常用标签常用标签v7.3.3丰富表格属性丰富表格属性和标签都具有bgColor 属性，用来标记一行或一个单元格的背景颜色。width 和height 属性用来标记表格的宽和高，可以以百分数为单位（如20%），也可以以像素数为单位（如200px）。align 属性用来标记表格的对齐方式，可是是left（左对齐）,right（右对齐）,或center（居中显示）；border属性用来设置表格边框的宽度。7.3HTML常用标签常用标签v7.3.3丰富表格属性丰富表格属性7.3HTML常用标签常用标签v7.3.4图片与超链接(1)显示图片URL为的图片(2)显示与c:008
12、001.jpg 的图片(3)显示一个超链接，链接到(4)显示一个超链接，链接到（要求在新窗口中打开新的链接）7.3HTML常用标签常用标签v7.3.4图片与超链接(1)(2)(3)google(4)google7.3HTML常用标签常用标签v7.3.4图片与超链接(1)：在html中显示图片。图片可以是网上的图片，也可以是本地硬盘中图片。其URL用src属性来标记(2)alt 属性：标签的alt 属性属性标记了图片的提示文字。with 和height 属性分别标记了图片的宽度和高度。(3)：标记一个超链接，用其href属性来标记超链接的URL。(4)target属性：标签的target属性用来
13、表示用哪个页面显示新的页面。例如”_blank”表示打开一个新的浏览器窗口，并在新的浏览器窗口中显示新的页面7.3HTML常用标签常用标签v7.3.4图片与超链接7.3HTML常用标签常用标签v7.3.5 多窗口多窗口页面面 framesleftleft frameHelloWorldform7.3HTML常用标签常用标签v7.3.5多窗口页面多窗口页面框架可以将浏览器窗口划分为若干个窗格，在每个窗格中都可以显示一个网页，从而可以取得在同一个浏览器窗口中同时显示不同网页的效果。框架网页通过一个frameset标记和多个frame标记来定义。在框架网页中，可将frameset标记置于head之后
14、，以取代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.3HTML常用标签常用标签v7.3.5多窗口页面多窗口页面LOGO