html基础学习必备课件.pptx

1、2022-10-11开篇开篇欢迎大家和我一起学习欢迎大家和我一起学习Web基础基础学习时间：学习时间：2天天学习内容：学习内容：HTML、CSS、JavaScript要点安排：要点安排：NO.1HTML NO.2css样式表 NO.3JavaScript和dom基础2022-10-12三多三多1、多记、多记2、多看、多看3、多练、多练2022-10-13Web介绍WebWeb介绍介绍什么是什么是WebWeb的特点的特点Web的发展的发展2022-10-14什么是Web 超文本（hypertext）超媒体（hypermedia）超文本传输协议（http）2022-10-15 Web的发展 Web

2、 1.0 角色鲜明 发布个人网站 内容管理系统 目录（分类）Web 2.0 人人参与 参与 博客 维基 标签 Web 3.0 集体智慧 云计算 SaaS 2022-10-16第一章第一章 HTML简介简介第一章第一章 HTML简介简介2022-10-17本章目标本章目标了解了解Internet和万维网和万维网(www)?了解了解 Html语言历史语言历史 和和 W3C组织组织学习学习Html的全局架构标签的全局架构标签什么是什么是标签及其属性标签及其属性?如何创建如何创建超级链接超级链接?2022-10-18Internet和万维网和万维网(www)什么是什么是Internet?Interne

3、t的历史 TCP/IP(传输控制协议/Internet协议)，一种能保证计算机之间进行通信的标准规范2022-10-19Internet和万维网和万维网(www)万维网万维网(world wide web)是一个基于超文本（Hypertext）方式的信息检索服务工具。万维网提供这样一种友好的信息查询接口：用户仅需提出查询要求，而到什么地方查询及如何查询则由万维网自动完成。-超文本开发语言HTML-信息资源的统一定位格式URL-超文本传送通信协议HTTP 2022-10-110Internet和万维网和万维网(www)超文本传输协议超文本传输协议HTTPHTTP 定义：网络传输协议 作用：发布和

4、接收Html页面统一资源定位符统一资源定位符URLURL 定义：网页地址 格式：协议:/域名:端口号/文件路径/文件名.文件后缀 http:/www.QQ:80/tq/index.html2022-10-111HTTP协议示例协议示例GET/HTTP/1.1Host:User-Agent:Mozilla/5.0(Windows;U;Windows NT 6.0;en-US;rv:1.9.0.10)Gecko/2009042316 Firefox/3.0.10Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.

5、8Accept-Language:en-us,en;q=0.5Accept-Encoding:gzip,deflateAccept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.7Keep-Alive:300Connection:keep-aliveIf-Modified-Since:Mon,25 May 2009 03:19:18 GMTHTTP/1.1 200 OKCache-Control:private,max-age=30Content-Type:text/html;charset=utf-8Content-Encoding:gzipExpires:Mon

6、,25 May 2009 03:20:33 GMTLast-Modified:Mon,25 May 2009 03:20:03 GMTVary:Accept-EncodingServer:Microsoft-IIS/7.0X-AspNet-Version:2.0.50727X-Powered-By:ASP.NETDate:Mon,25 May 2009 03:20:02 GMTContent-Length:12173-消息体的内容（略）2022-10-112HTML超文本标记语言超文本标记语言HtmlHtml（超文本标记语言）（超文本标记语言）定义：为网页创建和其它可在网页浏览器中看到的信息设

7、计的一种标记语言.例子 以“”标识标签的开始，以“”标识标签的结束 成对标签又称为容器，一对标签中还可以嵌套其它标签 单独标签不需要与之配对的结束标签，又称之为空标签，例如 属性设置的格式为：属性名=“属性值”Hello world!2022-10-113Html 规范与版本规范与版本不同浏览器之间的不兼容问题不同浏览器之间的不兼容问题 从软件开发角度：多个公司开发了浏览器软件，根据网页中的标签决定显示内容,有点浏览器根据自己的需要，定义了特有的显示效果标签，导致不兼容规范的制定规范的制定 IETF 制定 Html 2.0 W3C 组织 3W联盟 http:/www.w3c.org正在使用的正

8、在使用的HtmlHtml的版本的版本 Html 4.01 XHTML1.1 HTML 5 最新版2022-10-114浏览器访问网页文件的方式浏览器访问网页文件的方式http协议网页文件本地存储系统（硬盘）www服务器网页文件2022-10-115如何上网如何上网?网络的工作原理网络的工作原理 客户端客户端向服务器发送页面请求Web 服务器处理请求并返回请求的页面HTTP 负责请求和响应2022-10-116静态网页静态网页2022-10-117动态网页动态网页(1)2022-10-118动态网页动态网页(2)2022-10-119网页网页 与与 网站网站什么是网页什么是网页?定义：构成网站的

9、基本元素 格式：分为静态网页和动态网页静态网页文件扩展名为.html或.htm动态网页文件扩展名为.jsp或.aspx.asp.php等什么是网站什么是网站?实例：新浪，网易 定义：展示特定内容的相关网页的集合 2022-10-120编辑工具编辑工具Dw(DreamWeaver)EditPlus记事本记事本(Notepad)2022-10-121第一章第一章 HTML简介简介Blog2022-10-122第一章第一章 HTML简介简介HTML结构结构人2022-10-123第一章第一章 HTML简介简介标签：标签：2022-10-124Html的全局架构标签的全局架构标签网页的头部网页的头部

10、结构：内容：,CSS,Javascript网页的主体网页的主体 结构：内容：包含网页中显示的文本、图像和链接等欢迎来到中冶赛迪.欢迎来到中冶赛迪例子2022-10-125第一章第一章 HTML简介简介练习：练习：请做一个请做一个html页面，输出：页面，输出：“这是我的第一个这是我的第一个html页面页面”演示演示2022-10-126好的好的html编码习惯编码习惯文件扩展名为文件扩展名为 .html标签必须正确地嵌套标签必须正确地嵌套要符合要符合XHTML标准标准 标签元素必须要关闭 比如、标签名、属性名要用小写字母文档必须要有根元素文档必须要有根元素 标签的属性必须有属性值标签的属性必须

11、有属性值,属性值需要加上引号属性值需要加上引号合理必要的注释合理必要的注释不要使用不要使用W3C不推荐使用的标签不推荐使用的标签2022-10-127第二章第二章 HTML标签标签第二章第二章 HTML标签标签2022-10-128第二章第二章 HTML标签标签 标签组成：标签组成：HTML标签种类：HTML标签通常称对出现，如、等有个别单独出现的标签我们叫它：空标签。如（强制换行符）2022-10-129第二章第二章 HTML标签标签标签属性标签属性标签可以拥有属性。属性进一步说明了该元素的显示或使用特性。如：属性的格式：属性名=“属性值”属性的位置：xxx 添加多个属性：xxx 2022-

12、10-130什么是标记？什么是属性什么是标记？什么是属性?什么是标记什么是标记?定义：Html命令称为标记(标签)作用：用于控制Html文档的内容和外观 分类：单独标签:，成对标签:标记的属性标记的属性 作用：修饰或进一步制定信息。如颜色，对齐方式，高度，宽度等 标签属性属性值 学习 HTML 欢迎来到 HTML 世界 2022-10-131DOCTYPE标签标签文档类型文档类型,会使浏览器使用相应的方式加载网页并显示。会使浏览器使用相应的方式加载网页并显示。示例：示例：注意：注意：标签没有结束标签！2022-10-132Head-Meta元素元素META标签分两大部分：标签分两大部分：HTT

13、P标题信息标题信息(HTTP-EQUIV)和页面描述信息和页面描述信息(NAME)HTTP-EQUIV 类似于类似于HTTP的头部协议，它回应给浏览的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容器一些有用的信息，以帮助正确和精确地显示网页内容,响应报头信息，如页面编码、缓存模式等等响应报头信息，如页面编码、缓存模式等等.NAME 定义页面基本信息，这些信息是提供给网络搜索定义页面基本信息，这些信息是提供给网络搜索引擎的，搜索引擎通过这些信息可以找到页面引擎的，搜索引擎通过这些信息可以找到页面 标签永远位于 head 元素内部。元数据总是以名称/值的形式被成对传递的。必

14、备属性值描述contentsome_text定义与 http-equiv 或 name 属性相关的元信息2022-10-1332022-10-134META标签标签属性值描述http-equivcontent-typeexpires网页的到期时间refresh自动刷新并指向新页面set-cookie如果网页过期，那么存盘的cookie将被删除。把 content 属性关联到 HTTP 头部。nameauthordescriptionkeywordsGenerator创建者Revised修改者others把 content 属性关联到一个名称。schemesome_text定义用于翻译 cont

15、ent 属性值的格式。2022-10-135标签及其属性标签及其属性示例示例xxxxxxxxxxxxx 2022-10-136标签及其属性标签及其属性标签标签 属性 bgcolor 设置网页文档的背景颜色十六进制RGB颜色码，使用一个#号后跟六位十六进制数据，例如#FF0000Html的颜色常量名，例如red 属性 background 设置网页文档的背景图片 属性 text 设置网页中文字的颜色 属性 leftmargin 设置网页中的内容到左边距之间的距离 属性 topmargin 设置网页中的内容到上边距之间的距离2022-10-137标签及其属性标签及其属性标签标签 属性 align

16、设置标题文字的水平对齐方式 取值范围(left,right,center,justify两端对齐)标签标签 属性 size 设置水平线的粗细 属性 width 设置宽度2022-10-138标签及其属性标签及其属性标签标签 属性 align 设置段落文字的水平对齐方式 取值范围(left,right,center)标签标签 标签标签 作用:显示图片 属性 src 指明图片位置(相对路径，绝对路径)属性 align 设置图片周围内容对齐方式 取值范围(top,middle,bottom)属性 alt 图片无法显示时的替代信息 属性title 提示信息2022-10-139第二章第二章 HTML标

17、签标签块标签块标签:内容内容 空格符：空格符： 注意：如要加多个空格，只需加多个注意：如要加多个空格，只需加多个 标志标志演示：演示：用以上所讲的标签做一个用以上所讲的标签做一个html页面页面显示显示2022-10-140第二章第二章 HTML链接链接 HTML链接链接2022-10-141超级链接超级链接标签标签 作用:超级链接 1)实现页面之间的跳转 2)页内跳转 3）mailto 属性 href=“”属性 target锚记锚记 作用:页内跳转 利用锚记可以实现页面内跳转 结合超级链接，可以跳到另外页面指定的位置Html语言注释语言注释 2022-10-142第三章第

18、三章 HTML链接链接图片标签图片标签：Src属性（链接本地资源）属性（链接本地资源）src=“所要链接资源地址所要链接资源地址”注意：注意：标签是一个空标签标签是一个空标签图片作为链接：图片作为链接：2022-10-143第三章第三章 HTML链接链接相对路径：相对路径：资源路径与你打开页面有关联的路径叫相对路径资源路径与你打开页面有关联的路径叫相对路径绝对路径：绝对路径：资源路径与你打开页面无关的路径叫绝对路径资源路径与你打开页面无关的路径叫绝对路径如果当前页面与引用资源在同一文件夹内则直接写资源名称如果当前页面与引用资源在同一文件夹内则直接写资源名称如果引用资源在当前文件夹下一级的文件夹

19、内则需：如果引用资源在当前文件夹下一级的文件夹内则需：./文件夹名称文件夹名称/资源名称资源名称如果引用资源在当前文件夹上一级的文件夹内则需：如果引用资源在当前文件夹上一级的文件夹内则需：./资源名称资源名称如果引用资源在当前文件夹上两级的文件夹内则需：如果引用资源在当前文件夹上两级的文件夹内则需：././资源名称资源名称演示：演示：2022-10-144作业（一）作业（一）个人简历个人简历：网页网页1 1：1 1：个人图片：个人图片2:2:个人基本情况介绍个人基本情况介绍(性别，年龄，姓名等等性别，年龄，姓名等等)网页网页2 2：1 1：个人学习经历介绍：个人学习经历介绍2:2:个人工作经验

20、介绍个人工作经验介绍要求要求 用到段落标记进行排版，图片标记用到段落标记进行排版，图片标记 从网页从网页1 1中能链接到网页中能链接到网页2 2的链接的链接2022-10-145作业（一）作业（一）个人简历姓名：*性别:*年龄：*。其他信息1 自我介绍2 工作简历3 家庭成员自我介绍*工作简历1*2*3*家庭成员父亲：*母亲：*2022-10-146作业（二）作业（二）项目：为新开的餐厅设计网站项目：为新开的餐厅设计网站要求：要求：1.共有三个页面，分别为共有三个页面，分别为A 文件名文件名index.html 站点首页，用来显示餐厅介绍信息，如餐厅主营品种，餐站点首页，用来显示餐厅介绍信息，

21、如餐厅主营品种，餐厅规模，餐厅地理位置，餐厅营业时间，餐厅服务项目等。其中，餐厅主营品种，厅规模，餐厅地理位置，餐厅营业时间，餐厅服务项目等。其中，餐厅主营品种，餐厅地理位置，营业时间为必须选项餐厅地理位置，营业时间为必须选项B 文件名文件名 west.html 介绍西餐的页面（至少介绍西餐的页面（至少4种）种）分别介绍菜名，图片，价格分别介绍菜名，图片，价格C 文件名文件名 Chinese.html 介绍中国菜的页面介绍中国菜的页面(至少至少4种种)分别介绍菜名，图片，分别介绍菜名，图片，价格价格2.三个页面之间要建立超级链接三个页面之间要建立超级链接A 分别建立超级链接到另外两个页面分别建

22、立超级链接到另外两个页面B 对于对于west.html和和 Chinese.html要求有要求有目录目录分别分别链接到本页面内链接到本页面内的具体菜肴的具体菜肴C west.html和和Chinese.html之间能够有之间能够有互相访问的超级链接互相访问的超级链接2022-10-147作业（二）作业（二）2022-10-148第四章：第四章：HTML表格和列表表格和列表 第四章：第四章：HTML表格和列表表格和列表2022-10-149回顾回顾Internet 和和 万维网万维网网页的工作原理网页的工作原理网页的基本结构网页的基本结构标记及其属性标记及其属性段落标记，图片标记，超级链接标记段

23、落标记，图片标记，超级链接标记相对路径，绝对路径，物理路径相对路径，绝对路径，物理路径2022-10-150本章目标本章目标网页设计注意事项网页设计注意事项什么是表格？什么是表格？为什么需要表格？为什么需要表格？如何创建表格？如何创建表格？表格如何使用？表格如何使用？2022-10-151网页设计注意事项网页设计注意事项多浏览器支持多浏览器支持样式与风格统一样式与风格统一网站结构、文件命名网站结构、文件命名页面尺寸与屏幕分辨率页面尺寸与屏幕分辨率图片文件命名、大小尺寸限制图片文件命名、大小尺寸限制相对路径的应用相对路径的应用页面内容（页面内容（title、meta、alt、tbody等属性的应

24、用）等属性的应用）2022-10-152什么是表格？什么是表格？表格是表格是htmlhtml高级构件之一，它表示数据之间的关系，使对高级构件之一，它表示数据之间的关系，使对比分析更容易理解。表格由特定数目的行和列组成比分析更容易理解。表格由特定数目的行和列组成球员球员得分得分 篮板篮板 姚明姚明27 8 麦克格雷迪麦克格雷迪 31 2 海耶斯海耶斯 8 15 巴蒂尔巴蒂尔 7 5 阿尔斯通阿尔斯通 2 3 2022-10-153表格应用示例表格应用示例2022-10-154什么是表格？什么是表格？表格的作用：表格的作用：用于显示数据，便于理解、分析 组织网页版面信息2022-10-155什么是

25、表格？什么是表格？行行列列列标题在在 HTML HTML 文档中，广泛使用表格来存放网页上的文本和图像文档中，广泛使用表格来存放网页上的文本和图像单元格单元格表格标题2022-10-156第四章：第四章：HTML表格和列表表格和列表HTML表格表格 表格标签：表格标签：行标签：行标签：列标签：列标签：空空 格：格： 演示：一行一列 一行三列 两行三列注意：一个完整的表格必须由三个标签构成，且应该先画行后画列2022-10-157第四章：第四章：HTML表格和列表表格和列表表格头标签（表格头标签（表格头位于表格的内部表格头位于表格的内部）：）：头内容头内容 标签相当于一个标签相当于一个

26、标签，用法也相同。只不过格式化字体标签，用法也相同。只不过格式化字体表格标题标签（表格标题标签（表格标题位于表格的上部表格标题位于表格的上部）：）：My Caption 注意：注意：标签放在标签放在的下边，第一个的下边，第一个的上边的上边2022-10-158 标签及其属性标签及其属性表格宽度表格宽度 width 高度高度 height 单位设置 像素 (px)百分比(%)演示 设置宽度，高度 避免出现水平滚动条 一般不设置高度(自适应)cellspacing，cellpadding 属性属性 cellspacing 设置单元格间距 cellpadding 设置单元格边沿和其内容之间的距离20

27、22-10-159table的常用属性的常用属性2022-10-160标签及其属性标签及其属性align align 属性属性 属性值：“left”、“center”、“right”注意区别的align属性valign valign 属性属性 属性值：“top”、“middle”、“bottom”bgcolor bgcolor 属性属性 背景颜色设置 考虑设置优先级的问题2022-10-161标签及其属性标签及其属性align align 属性属性 属性值：”left”“center”“right”注意区别的align属性valign valign 属性属性 属性值：”top”“middle”

28、“bottom”bgcolor bgcolor 属性属性 background background 属性属性 bgcolor 背景颜色设置 background 背景图片设置 考虑设置优先级的问题2022-10-162标签及其属性标签及其属性widthwidth属性属性 heightheight属性属性 注意：同行或者同列单元格将受影响rowspanrowspan属性属性 colspancolspan属性属性 rowspan属性 将一个表格单元格扩展为几行。colspan属性 将一个表格单元格扩展为几列 演示 项目实战利用利用rowspanrowspan和和colspancolspan属性合

29、并单元格属性合并单元格2022-10-163用表格进行页面排版用表格进行页面排版表格进行页面排版表格进行页面排版 简单，便捷 表格嵌套使用2022-10-164表格排版注意事项：表格排版注意事项：表格嵌套层次不要太多表格嵌套层次不要太多整个页面的排版不要用一个整个页面的排版不要用一个table，影响浏览器对页面的，影响浏览器对页面的显示效率显示效率表格的行列排版要整齐表格的行列排版要整齐td中没有内容时，以空白（中没有内容时，以空白（ ）填充）填充Div+CSS布局（了解）布局（了解）2022-10-165总结总结表格可以格式化数据、管理文件布局表格可以格式化数据、管理文件布局表格的

30、基本结构表格的基本结构标签标签及其基本属性及其基本属性合并单元格合并单元格其它表格标签其它表格标签2022-10-166课后练习作业课后练习作业2-1创建一个如下样式的表格创建一个如下样式的表格 要求：要求：1.表格表格宽度宽度760px，边框，边框宽度宽度为为1px，表格表格水平居中水平居中2.单元格之间单元格之间没有没有间距，间距，内容与单元格边框内容与单元格边框之间距离为之间距离为23.在在单元格单元格1和和2分别插入图片分别插入图片a1.gif和和a2.jpg,并且图片内容并且图片内容垂直居中垂直居中4.其他文字依照下表输入其他文字依照下表输入5.要求按照完整的网页规范编码要求按照完整

31、的网页规范编码单元格单元格1单元格单元格2设为首页设为首页联系站长联系站长加入收藏加入收藏 首页首页|基础知识基础知识|高级编程高级编程第四章：HTML表格和列表2022-10-167第五章第五章 表单表单第五章第五章 表单表单2022-10-168本章目标本章目标什么是表单？什么是表单？表单如何使用？表单如何使用？如何创建表单？如何创建表单？了解表单和表单元素之间的关系了解表单和表单元素之间的关系掌握掌握 表单元素表单元素 的使用的使用2022-10-169表单的应用表单的应用表单在商务上的应用表单在商务上的应用 网上预定商品 网上商品拍卖表单在各种社会机构中的应用表单在各种社会机构中的应用

32、 网上调查 网络咨询表单在网络上其它应用表单在网络上其它应用 网络人才招聘 网络社区注册2022-10-170表单应用表单应用2022-10-171第五章第五章 表单表单HTML表单表单（表单是一个能够包含表单元素的区域（表单是一个能够包含表单元素的区域）表单标签：表单标签：表单元素表单元素2022-10-172表单元素表单元素-文本框、密码框文本框、密码框文本框文本框 标签：属性：type，name，size，maxlength，value，readonly密码框密码框 标签：属性：type，name，size，maxlength，value，readonly2022-10-173第五章第五

33、章 表单表单单选按钮标签：单选按钮标签：MaleFemale复选框：复选框：I have a bike I have a car注意：复选框与单选框很大的不同就是注意：复选框与单选框很大的不同就是name属性不同，且复选框不要求有属性不同，且复选框不要求有value属性属性Checked属性的特殊性属性的特殊性文件输入框文件输入框 标签：属性：type，name，size，maxlength，readonly注意：单选按钮的名称必须相同，否则不能控制单选特性注意：单选按钮的名称必须相同，否则不能控制单选特性2022-10-174表单元素表单元素下拉列表下拉列表下拉列表下拉列表 标签：属性：na

34、me，size，multiple 属性：value，selected补充补充：标签:为主菜单中的每个子项标签都再生成子菜单下拉列表：VolvoSaab Fiat Audi 2022-10-175表单元素表单元素下拉列表下拉列表你所在国家：你所在国家：optgroup label=中国中国日本日本韩国韩国optgroup label=法国法国德国德国意大利意大利2022-10-176表单元素表单元素复选框、单选框复选框、单选框你最喜欢什么动物？你最喜欢什么动物？input type=“radio”name=“favorite”value=“dog”狗狗 input type=“radio”nam

35、e=“favorite”value=“cat”猫猫 input type=“radio”name=“favorite”value=“bird”鸟鸟 input type=“radio”name=“favorite”value=“fish”鱼鱼 你喜欢什么动物？你喜欢什么动物？狗狗 input type=“checkbox”name=“pets”value=“cat”猫猫 input type=“checkbox”name=“pets”value=“bird”鸟鸟 input type=“checkbox”name=“pets”value=“fish”鱼鱼 2022-10-177表单元素表单元素

36、动作按钮动作按钮标签标签 标签：属性：type2022-10-178给表单元素标记和分组给表单元素标记和分组标签标签 使用label 标签来定义表单元素间的关系标签标签 标签标签 将一群相关表单控件形成一个组，并用和标签来标记这个组个人资料个人资料姓名：姓名：个人简介：个人简介：2022-10-179第五章第五章 表单表单文本域：文本域：The cat was playing in the garden.按钮：按钮：两个特殊的按钮两个特殊的按钮 提交按钮提交按钮 重置按钮重置按钮 注意：提交按钮必须配合注意：提交按钮必须配合form的的action属性使用属性使用2022-10-180Tab

37、键索引顺序键索引顺序 tabindex 属性属性 用来设定按下tab键时焦点的移动顺序 tabindex 属性值为正整数 规则：数值越小越先访问，没有tabindex属性或属性为0的元素后被访问2022-10-181其它相关属性其它相关属性id 属性属性 id属性赋值的名称不会传递给服务器(证明)id属性和name属性的区别title 属性属性 作用：用弹出式帮助来给用户提示style,class,lang,dir 属性属性accesskey属性属性 作用：设定页面快捷键IE 为alt+accesskey属性值，FireFox 为alt+shift+accesskey属性值 2022-10-1

38、82readonly和和disabled属性属性readonly属性属性 用户不能修改表单控件 控件值将被传送到服务器 控件可以被鼠标和通过tab键选定disabled属性属性 用户不能修改表单控件 控件值将不会被传送到服务器 控件不能被鼠标和通过tab键选定2022-10-183Form标签的三大属性标签的三大属性action属性属性(必须必须)说明了接收和处理表单数据的应用程序URLmethod 属性属性(必须必须)为浏览器设置表单中的数据传送到服务器的方法 属性值：get 和 postName 属性属性form action=“method=“post”name=“test_Form”.

39、2022-10-184get 还是还是post(补充补充)form action=“http:/localhost:8080/cgi-bin/method.cgiinput type=text size=10 value=“input type=submit value=GET GET/cgi-bin/method.cgi?GET/cgi-bin/method.cgi?userName=zhangsanuserName=zhangsan HTTP/1.1 HTTP/1.1Accept:image/gif,image/x-xbitmap,image/jpeg,image/pjpeg,Accept

40、:image/gif,image/x-xbitmap,image/jpeg,image/pjpeg,application/vnd.ms-powerpoint,application/vnd.ms-excel,application/vnd.ms-powerpoint,application/vnd.ms-excel,application/msword,application/msword,*/*Referer:Referer:http:/localhost/other.htmlhttp:/localhost/other.htmlAccept-Language:zh-cnAccept-Lan

41、guage:zh-cnAccept-Encoding:gzip,deflateAccept-Encoding:gzip,deflateUser-Agent:Mozilla/4.0(compatible;MSIE 5.01;Windows NT 5.0)User-Agent:Mozilla/4.0(compatible;MSIE 5.01;Windows NT 5.0)Host:localhost:8080Host:localhost:8080Connection:Keep-Alive Connection:Keep-Alive 注：根据 HTTP 规范，GET 用于信息获取，而且应该是 安全的

42、和幂等的。所谓安全的意味着该操作用于获取信息而非修改信息。换句话说，GET 请求一般不应产生副作用。幂等的意味着对同一 URL 的多个请求应该返回同样的结果。form action=http:/localhost:8080/cgi-bin/tech/method.cgi method=input type=text size=10 value=input type=submit value=POST POST/cgi-bin/tech/method.cgi HTTP/1.1POST/cgi-bin/tech/method.cgi HTTP/1.1Accept:image/gif,image/x

43、-xbitmap,image/jpeg,image/pjpeg,Accept:image/gif,image/x-xbitmap,image/jpeg,image/pjpeg,application/vnd.ms-application/vnd.ms-powerpoint,application/vnd.ms-excel,application/msword,powerpoint,application/vnd.ms-excel,application/msword,*/*Referer:Referer:http:/localhost/other.htmlhttp:/localhost/oth

44、er.htmlAccept-Language:zh-cnAccept-Language:zh-cnContent-Type:application/x-www-form-urlencodedContent-Type:application/x-www-form-urlencodedAccept-Encoding:gzip,deflateAccept-Encoding:gzip,deflateUser-Agent:Mozilla/4.0(compatible;MSIE 5.01;Windows NT 5.0)User-Agent:Mozilla/4.0(compatible;MSIE 5.01;

45、Windows NT 5.0)Host:localhost:8080Host:localhost:8080Content-Length:9Content-Length:9Connection:Keep-AliveConnection:Keep-AliveuserName=lisiuserName=lisi2022-10-185总结总结表单是表单是由表单容器和其中的表单元素组成由表单容器和其中的表单元素组成表单中的各种表单元素及其属性表单中的各种表单元素及其属性表单的结构和表单属性表单的结构和表单属性2022-10-186课后练习作业课后练习作业模拟美食网站的注册页面（结合模拟美食网站的注册页面

46、（结合table做页面布做页面布局）局）要求：要求：姓名 密码 性别 所在城市（省、市）个人喜好：各类美食 个人介绍2022-10-187第五章 框架2022-10-188目目 标标 框架的意义框架的意义 框架结构的典型代码框架结构的典型代码 多框架的窗口中超链接的导航目标多框架的窗口中超链接的导航目标 框架嵌套的实现框架嵌套的实现2022-10-189框架的应用框架的应用2022-10-190框架的作用框架的作用框架结构的优点框架结构的优点 内容组织有条理 方便导航框架结构的缺点框架结构的缺点 浏览器被划分为太多子窗口影响整体美观 通常能通过表格布局取代 打印整个页面变得困难。2022-10

47、-191框架结构标签框架结构标签 作用：定义框架 属性：cols 设置框架分为几列 rows设置框架分为几行 border 用来设置框架的边框宽度 bordercolor 边框颜色 Frameborder 设置是否显示框架边框 其它属性：class，style，title，id2022-10-192框架结构标签框架结构标签 作用：定义每个框架中放入什么文件。属性：src:制定在框架窗口中显示什么文件 name:制定框架窗口的名字 noresize:禁止 访问用户改变框架大小 scrolling:为框架窗口设置滚动条 其它属性：title，style，class，id2022-10-193框架结

48、构标签框架结构标签 作用：为不能显示框架的浏览器(mosaic)提供了一种解决方案2022-10-194框架的嵌套框架的嵌套典型的左右框架典型的左右框架 演示嵌套框架的实现嵌套框架的实现 演示 2层嵌套 3层嵌套（作业）实际应用：聊天室2022-10-195框架示例框架示例无标题文档 您当前浏览器不支持框架RowsRows属性属性进行窗口进行窗口上下划分上下划分FramesetFrameset嵌套，再嵌套，再左右划分左右划分FrameFrame的的namename，做页面，做页面导航时，超链接的导航时，超链接的targettarget指向此指向此namename2022-10-196超链接导航

49、超链接导航的特殊属性的特殊属性target Target 作用：指定标签中href指向的页面在target指定的框架或者窗口中打开。如果target指定的框架或者窗口不存在。浏览器将在新窗口中打开。实现框架的导航效果实现框架的导航效果2022-10-197导航链接目标导航链接目标标签标签 作用：为没有包含显示的target属性的当前文档中的每一个超链接设置一个默认目标。属性：Target 注意：该标签位于之内2022-10-198特殊的目标特殊的目标_blank 浏览器总是在一个新打开、未命名的窗口中载入链接的文档_self 超链接的默认值，它使得目标文档载入并显示在相同的框架或者窗口中。_p

50、arent 文档载入父窗口或者包含了超链接引用的框架_top 将文档载入取代当前窗口中的框架。2022-10-199内联框架内联框架标签标签 属性：Src 用来指定内联框架中显示的网页 Align 设置内联框架在相邻文档中的位置 Width，height 设置内联框架区域的宽度和高度 Frameborder 设置是否有3维边框(“yes”或”no”)Scrolling 设置是否有滚动条(同)其它标签 class，style，id，name 浏览器中的浏览器2022-10-1100总结总结框架结构的应用框架结构的应用框架的标签及其属性框架的标签及其属性 多层框架嵌套的实现多层框架嵌套的实现多框架