第7章Web技术和HTMLppt课件

1、LOGO第第7章章 Web技术和技术和HTML孙焘孙焘重点：重点：web技术概述1HTML的格式2HTML的常用标签3多frame页面设计4难点：难点：HTML的格式掌握1Table标签的相关属性27.1 Web技术概述技术概述v什么是万维网什么是万维网 vWeb的表现方式的表现方式 v什么是什么是Web网站网站 vWeb网站的功能网站的功能vWeb的开发技术的开发技术7.1 Web技术概述技术概述v7.1.1 什么是万维网什么是万维网 vWorld Wide Web称为万维网，简称为万维网，简称称Web。v它的根本构造是采用开放式的客户它的根本构造是采用开放式的客户/效效力器构造力器构造(C

2、lient/Server),分效果劳器分效果劳器端、客户接纳机及通讯协议三个部分。端、客户接纳机及通讯协议三个部分。7.1 Web技术概述技术概述v7.1.2 Web的表现方式的表现方式 v(1)超文本超文本hypertextv(2)超媒体超媒体hypermediav(3)超文本传输协议超文本传输协议7.1 Web技术概述技术概述v7.1.3 什么是什么是Web网站网站vWeb网站就是利用互联网技术，把企网站就是利用互联网技术，把企业，机构或个人的信息经过业，机构或个人的信息经过Web页面和页面和Internet发布出去，经过恳求域名而成为发布出去，经过恳求域名而成为一个站点。一个站点。7.1

3、 Web技术概述技术概述v7.1.4 Web网站功能网站功能vBBSv社区社区v电子商务电子商务v在线论坛在线论坛v在线考试，在线考试，v远程教育远程教育v博客，视频等等博客，视频等等7.1 Web技术概述技术概述v7.1.5 Web开发技术开发技术v客户端技术客户端技术vHTML言语是信息展现的最有效载言语是信息展现的最有效载体体 v效力端技术效力端技术 v CGI，PHP，ASP，JSPv静态技术静态技术v HTMLv动态技术动态技术v DHTML，css，javascript，vbscriptv 7.2 HTML的格式的格式v7.2.1 HMTL简介简介v7.2.2 HTML的编辑器的编

4、辑器v7.2.3 HTML开展历史开展历史v7.2.4 HTML的根本格式的根本格式v7.2.5 HTML的根本标签的根本标签v7.2.6 HTML版的版的Hello World7.2 HTML的格式的格式v7.2.1 HMTL简介简介v超文本置标言语超文本置标言语HyperText Markup Language，简称为，简称为HTML，是为是为“网页创建和其它可在网页阅读器中看网页创建和其它可在网页阅读器中看到的信息设计的一种置标言语。到的信息设计的一种置标言语。vHTML被用来构造化信息被用来构造化信息例如标题例如标题、段落和列表等等，也可用来描画文档的、段落和列表等等，也可用来描画文档

5、的外观和语义。包含外观和语义。包含HTML 内容的文件最常内容的文件最常用的扩展名是用的扩展名是.html7.2 HTML的格式的格式v7.2.2 HTML的编辑器的编辑器vHTML 编辑器是一种用来编辑编辑器是一种用来编辑HTML文本的软件。其实文本的软件。其实HTML只是一个文本文只是一个文本文件，就算一个最普通的文字编辑器都可以件，就算一个最普通的文字编辑器都可以胜任。胜任。 v常用的常用的HTML 编辑器有记事本，编辑器有记事本，Dreamweaver, Frontpage等。等。 7.2 HTML的格式的格式v7.2.3 HTML开展历史开展历史v超文本置标言语超文本置标言语(第一版

6、第一版) - 在在1993年年6月发为互联网工程任务小组月发为互联网工程任务小组 (IETF)任任务草案发布务草案发布(并非规范并非规范)vHTML 2.0 - 2019年年11月作为月作为RFC 1866发布发布,在在RFC 2854于于2000年年6月发布之后被宣布曾经过时月发布之后被宣布曾经过时vHTML 3.2 - 2019年年1月月14日日,W3C引荐规范引荐规范vHTML 4.0 - 2019年年12月月18日日,W3C引荐规范引荐规范vISO/IEC 15445:2000(“ISO HTML)-2000年年5月月15日发布日发布, 是国是国际规范化组织和国际电工委员会的规范际规范

7、化组织和国际电工委员会的规范vXHTML 1.0 - 发布于发布于2000年年1月月26日日, W3C引荐规范引荐规范vHTML 2.0 - W3C任务草案任务草案7.2 HTML的格式的格式v7.2.4 HTML的根本格式的根本格式(一一)vHTML是一种标签嵌套式的言语。是一种标签嵌套式的言语。v标签用标签用来表示，标签必需成来表示，标签必需成对出现对出现.如如,那么必需以另一个标那么必需以另一个标签签将它封锁。留意将它封锁。留意“head前前的斜杠，那就是封锁标签与翻开标签的区的斜杠，那就是封锁标签与翻开标签的区别。别。 v每个标签内可以放置内容，如每个标签内可以放置内容，如v 这是一个

8、标题这是一个标题v 表示表示html的标题的标题7.2 HTML的格式的格式v7.2.4 HTML的根本格式的根本格式(二二)v标签之间可以嵌套标签之间可以嵌套v例如例如 vv v 标题标题v v 内容内容v7.2 HTML的格式的格式v7.2.4 HTML的根本格式的根本格式(三三)vHTML不区分大小写不区分大小写v标题标题v与与v标题标题v的效果是一样的的效果是一样的7.2 HTML的格式的格式v7.2.4 HTML的根本格式的根本格式(四四)v标签内只能嵌套完好的其他标签标签内只能嵌套完好的其他标签v下面是的嵌套方式是不合法的下面是的嵌套方式是不合法的vv vv v在在head标签内只

9、需标签内只需title标签的开场部标签的开场部分，没有终了的部分，这是不合法的。分，没有终了的部分，这是不合法的。7.2 HTML的格式的格式v7.2.5 HTML的根本标签的根本标签v一个规范的一个规范的HTML文件普通包含下面文件普通包含下面4个标签个标签v：用来标志整个：用来标志整个html文件；文件；v：用来标志：用来标志html的头信息；的头信息；v ：用来标志：用来标志html标题信息；应嵌套在标题信息；应嵌套在中；中；v：用来标志：用来标志html的正文；的正文；7.2 HTML的格式的格式v7.2.6 HTML版的版的“hello worldvvvHello WorldvvvH

10、ello World!vv7.2 HTML的格式的格式v7.2.6 HTML版的版的“hello world7.3 HTML常用标签常用标签v表单标签的运用表单标签的运用v表格的绘制表格的绘制v丰富的表格属性丰富的表格属性v图片与超链接图片与超链接v多窗口页面多窗口页面7.3 HTML常用标签常用标签v7.3.1 表单标签的运用表单标签的运用vv用户名用户名v密码密码 v教教师师v学生学生vvv7.3 HTML常用标签常用标签v7.3.1 表单标签的运用表单标签的运用v 用来标志一用来标志一组表单。其组表单。其action 属性表示将此表单提交属性表示将此表单提交给谁来处置；其给谁来处置；其m

11、ethod属性用来表示提属性用来表示提交表单的方式。常用的提交表单的方式为交表单的方式。常用的提交表单的方式为post 和和get 。v 用来标志用来标志一个用户输入。其一个用户输入。其type属性表示用户输入属性表示用户输入的类型。常用的用户输入类型有：的类型。常用的用户输入类型有：text, password, submit, button, reset 等。等。name 属性会连同表单一同被提交，属性会连同表单一同被提交，接纳表单的容器可以经过接纳表单的容器可以经过name 来获取对来获取对应的值。应的值。7.3 HTML常用标签常用标签v7.3.1 表单标签的运用表单标签的运用v对对标

12、签的标签的type属性的值的解释：属性的值的解释：v(1)text：段纯文本；：段纯文本；v(2)password：密码；：密码；v(3)radio ：单项选择按钮；：单项选择按钮；v(4)submit：提交表单的按钮；：提交表单的按钮；v(5)button：普通按钮；：普通按钮；v(6)reset：清空表单的按钮；：清空表单的按钮；v表示换行，这个在表示换行，这个在html中很中很常用常用7.3 HTML常用标签常用标签v7.3.1 表单标签的运用表单标签的运用7.3 HTML常用标签常用标签v7.3.2 表格的绘制表格的绘制vvvv学号学号姓名姓名性别性别v出生日期出生日期院系院系vvvv

13、v201901001张张三三男男v1989-01-01电信学院电信学院vvv201901002李李四四男男v1989-02-01电信学院电信学院vvvv7.3 HTML常用标签常用标签v7.3.2 表格的绘制表格的绘制v(1)：标志一个：标志一个表格；表格；v(2)：标志表：标志表格头；格头；v(3)：标志表：标志表格体；格体；v(4)：标志表格中的一行：标志表格中的一行，可以嵌套在，可以嵌套在中，中，也可以嵌套在也可以嵌套在中；中；v(5)：标志表格中一行：标志表格中一行的一列，应嵌套在的一列，应嵌套在中。中。7.3 HTML常用标签常用标签v7.3.2 表格的绘制表格的绘制7.3 HTML

14、常用标签常用标签v7.3.3 丰富表格属性丰富表格属性vvv学号学号v201901001v姓名姓名v张三张三vvv性别性别v男男v民族民族v汉汉vvv生日生日v1989-01-01v考考生来源生来源v应届毕业应届毕业vvv院系院系v电子与信息工程学院电子与信息工程学院v专专业业v计算机运用技术计算机运用技术vv7.3 HTML常用标签常用标签v7.3.3 丰富表格属性丰富表格属性v和和标签都标签都具有具有bgColor 属性，用来标志一行或一个属性，用来标志一行或一个单元格的背景颜色。单元格的背景颜色。vwidth 和和height 属性用来标志表格属性用来标志表格的宽和高，可以以百分数为单位

15、如的宽和高，可以以百分数为单位如20%，也可以以像素数为单位如，也可以以像素数为单位如200px。valign 属性用来标志表格的对齐方式，属性用来标志表格的对齐方式，可是是可是是left左对齐左对齐, right右对齐右对齐, 或或center居中显示；居中显示；vborder属性用来设置表格边框的宽度属性用来设置表格边框的宽度。7.3 HTML常用标签常用标签v7.3.3 丰富表格属性丰富表格属性7.3 HTML常用标签常用标签v7.3.4 图片与超链接v (1)显示图片URL为/img/logo-yy.gif的图片v(2)显示与c:008001.jpg 的图片v(3)显示一个超链接，链接

16、到examplev(4)显示一个超链接，链接到example要求在新窗口中翻开新的链接7.3 HTML常用标签常用标签v7.3.4 图片与超链接v(1)v(2)v(3)googlev(4)google7.3 HTML常用标签常用标签v7.3.4 图片与超链接v(1)：在html中显示图片。图片可以是网上的图片，也可以是本地硬盘中图片。其URL用src属性来标志v(2)alt 属性： 标签的alt 属性属性标志了图片的提示文字。with 和height 属性分别标志了图片的宽度和高度。v(3) ：标志一个超链接，用其href属性来标志超链接的URL。v(4)target属性： 标签的target

17、属性用来表示用哪个页面显示新的页面。例如_blank表示翻开一个新的阅读器窗口，并在新的阅读器窗口中显示新的页面7.3 HTML常用标签常用标签v 7.3.4 图片与超链接 7.3 HTML常用标签常用标签v7.3.5 多窗口页面 vvvframesvvvvvvvvvleftvvvleft framevHelloWorldvformvv7.3 HTML常用标签常用标签v7.3.5 多窗口页面 v框架可以将阅读器窗口划分为假设干个窗格，在每个窗格中都可以显示一个网页，从而可以获得在同一个阅读器窗口中同时显示不同网页的效果。框架网页经过一个frameset标志和多个frame标志来定义。在框架网页中，可将frameset标志置于head之后，以取代body的位置，还可以运用noframes标志框架不能被阅读器显示时的交换内容。v 为多窗口标志。其col 属性用来标志多窗口个列的宽度，可以以百分数表示如20%，也可以以像素表示如200px ；frameset 标签还有rows 属性，用来表示此frameset 由多个行窗口