html基础学习必备课件

1、2022/9/271开篇欢迎大家和我一起学习Web基础学习时间： 2天学习内容： HTML、CSS、JavaScript要点安排：NO.1HTMLNO.2css样式表NO.3JavaScript和dom基础2022/9/261开篇欢迎大家和我一起学习Web基础2022/9/272三多1、多记2、多看3、多练2022/9/262三多1、多记2022/9/273Web介绍Web介绍什么是WebWeb的特点Web的发展2022/9/263Web介绍Web介绍什么是Web2022/9/274什么是Web超文本（hypertext）超媒体（hypermedia）超文本传输协议（http）2022/9/2

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

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

4、 2022/9/269Internet和万维网(www)万维网2022/9/2710Internet和万维网(www)超文本传输协议HTTP定义：网络传输协议作用：发布和接收Html页面统一资源定位符URL定义：网页地址 格式：协议:/域名:端口号/文件路径/文件名.文件后缀 http:/www.QQ.:80/tq/index.html2022/9/2610Internet和万维网(www)超文2022/9/2711HTTP协议示例GET / HTTP/1.1Host: User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv

5、:0) Gecko/2009042316 Firefox/3.0.10Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.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 GMTHTT

6、P/1.1 200 OKCache-Control: private, max-age=30Content-Type: text/html; charset=utf-8Content-Encoding: gzipExpires: Mon, 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

7、2009 03:20:02 GMTContent-Length: 12173消息体的内容（略）2022/9/2611HTTP协议示例GET / HTTP/2022/9/2712HTML超文本标记语言Html（超文本标记语言）定义：为网页创建和其它可在网页浏览器中看到的信息设计的一种标记语言.例子以“”标识标签的开始，以“”标识标签的结束成对标签又称为容器，一对标签中还可以嵌套其它标签单独标签不需要与之配对的结束标签，又称之为空标签，例如属性设置的格式为：属性名=“属性值”Hello world!2022/9/2612HTML超文本标记语言Html（超文本2022/9/2713Html 规范与版

8、本不同浏览器之间的不兼容问题从软件开发角度：多个公司开发了浏览器软件，根据网页中的标签决定显示内容,有点浏览器根据自己的需要，定义了特有的显示效果标签，导致不兼容规范的制定IETF 制定 Html 2.0W3C 组织 3W联盟 正在使用的Html的版本Html 4.01XHTML1.1HTML 5 最新版2022/9/2613Html 规范与版本不同浏览器之间的不2022/9/2714浏览器访问网页文件的方式http协议网页文件本地存储系统（硬盘）www服务器网页文件2022/9/2614浏览器访问网页文件的方式http协议本2022/9/2715如何上网?网络的工作原理 客户端向服务器发送页

9、面请求Web 服务器处理请求并返回请求的页面HTTP 负责请求和响应2022/9/2615如何上网?网络的工作原理 客户端向服务2022/9/2716静态网页2022/9/2616静态网页2022/9/2717动态网页(1)2022/9/2617动态网页(1)2022/9/2718动态网页(2)2022/9/2618动态网页(2)2022/9/2719网页 与 网站什么是网页?定义：构成网站的基本元素 格式：分为静态网页和动态网页静态网页文件扩展名为.html或.htm动态网页文件扩展名为.jsp或.aspx .asp .php等什么是网站? 实例：新浪，网易定义：展示特定内容的相关网页的集合

10、 2022/9/2619网页 与 网站什么是网页?2022/9/2720编辑工具Dw( DreamWeaver)EditPlus记事本(Notepad)2022/9/2620编辑工具Dw( DreamWeaver2022/9/2721第一章 HTML简介Blog2022/9/2621第一章 HTML简介Blog2022/9/2722第一章 HTML简介HTML结构人2022/9/2622第一章 HTML简介HTML结构人2022/9/2723第一章 HTML简介标签：2022/9/2623第一章 HTML简介标签：html2022/9/2724Html的全局架构标签网页的头部结构：内容：, ,

11、 CSS, Javascript网页的主体结构：内容：包含网页中显示的文本、图像和链接等欢迎来到中冶赛迪. .欢迎来到中冶赛迪例子2022/9/2624Html的全局架构标签网页的头部ht2022/9/2725第一章 HTML简介练习： 请做一个html页面，输出：“这是我的第一个html页面”演示2022/9/2625第一章 HTML简介练习：2022/9/2726好的html编码习惯文件扩展名为 .html标签必须正确地嵌套要符合XHTML标准标签元素必须要关闭 比如、标签名、属性名要用小写字母文档必须要有根元素 标签的属性必须有属性值,属性值需要加上引号合理必要的注释不要使用W3C不推荐

12、使用的标签2022/9/2626好的html编码习惯文件扩展名为 .2022/9/2727第二章 HTML标签第二章 HTML标签2022/9/2627第二章 HTML标签第二章 HTML标2022/9/2728第二章 HTML标签 标签组成：HTML标签种类：HTML标签通常称对出现，如、等有个别单独出现的标签我们叫它：空标签。 如（强制换行符）2022/9/2628第二章 HTML标签 标签组成：HTM2022/9/2729第二章 HTML标签标签属性标签可以拥有属性。属性进一步说明了该元素的显示或使用特性。如： 属性的格式 ：属性名 = “属性值”属性的位置： xxx 添加多个属性： x

13、xx 2022/9/2629第二章 HTML标签标签属性2022/9/2730什么是标记？什么是属性?什么是标记?定义：Html命令称为标记(标签)作用：用于控制Html文档的内容和外观分类：单独标签:，成对标签:标记的属性作用：修饰或进一步制定信息。如颜色，对齐方式，高度，宽度等标签属性属性值 学习 HTML 欢迎来到 HTML 世界 2022/9/2630什么是标记？什么是属性?什么是标记?2022/9/2731DOCTYPE标签文档类型,会使浏览器使用相应的方式加载网页并显示。示例： 注意： 标签没有结束标签！2022/9/2631DOCTYPE标签文档类型,会使浏览器2022/9/27

14、32Head - Meta元素META标签分两大部分：HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME) HTTP-EQUIV 类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容 ,响应报头信息，如页面编码、缓存模式等等.NAME 定义页面基本信息，这些信息是提供给网络搜索引擎的，搜索引擎通过这些信息可以找到页面 标签永远位于 head 元素内部。元数据总是以名称/值的形式被成对传递的。必备属性值描述contentsome_text定义与 http-equiv 或 name 属性相关的元信息2022/9/2632Head - Meta元素ME

15、TA标签2022/9/27332022/9/26332022/9/2734META标签属性值描述http-equivcontent-typeexpires网页的到期时间refresh自动刷新并指向新页面set-cookie如果网页过期，那么存盘的cookie将被删除。 把 content 属性关联到 HTTP 头部。nameauthordescriptionkeywordsGenerator创建者Revised修改者others把 content 属性关联到一个名称。schemesome_text定义用于翻译 content 属性值的格式。2022/9/2634META标签属性值描述http-

16、equ2022/9/2735标签及其属性示例xxxxxxxxxxxxx 2022/9/2635标签及其属性示例2022/9/2736标签及其属性标签 属性 bgcolor 设置网页文档的背景颜色十六进制RGB颜色码，使用一个#号后跟六位十六进制数据，例如#FF0000Html的颜色常量名，例如red属性 background 设置网页文档的背景图片属性 text 设置网页中文字的颜色属性 leftmargin 设置网页中的内容到左边距之间的距离属性 topmargin 设置网页中的内容到上边距之间的距离2022/9/2636标签及其属性标签 /b2022/9/2737标签及其属性标签 属性 a

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

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

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

20、022/9/2643第三章 HTML链接相对路径：资源路2022/9/2744作业（一）个人简历：网页1：1：个人图片2: 个人基本情况介绍(性别，年龄，姓名等等)网页2：1：个人学习经历介绍2: 个人工作经验介绍要求 用到段落标记进行排版，图片标记 从网页1中能链接到网页2的链接2022/9/2644作业（一）个人简历：2022/9/2745作业（一）个人简历姓名：*性别: *年龄：*。其他信息1 自我介绍2 工作简历3 家庭成员自我介绍*工作简历1*2*3*家庭成员父亲：*母亲：*2022/9/2645作业（一）个人简历自我介绍2022/9/2746作业（二）项目：为新开的餐厅设计网站要求

21、：1.共有三个页面，分别为A 文件名index.html 站点首页，用来显示餐厅介绍信息，如餐厅主营品种，餐厅规模，餐厅地理位置，餐厅营业时间，餐厅服务项目等。其中，餐厅主营品种，餐厅地理位置，营业时间为必须选项B 文件名 west.html 介绍西餐的页面（至少4种） 分别介绍菜名，图片，价格C 文件名 Chinese.html 介绍中国菜的页面( 至少4种 ) 分别介绍菜名，图片，价格2.三个页面之间要建立超级链接A 分别建立超级链接到另外两个页面B 对于west.html和 Chinese.html要求有目录分别链接到本页面内的具体菜肴C west.html和Chinese.html之间

22、能够有互相访问的超级链接2022/9/2646作业（二）项目：为新开的餐厅设计网站2022/9/2747作业（二）2022/9/2647作业（二）2022/9/2748第四章：HTML表格和列表 第四章：HTML表格和列表2022/9/2648第四章：HTML表格和列表 第四章：H2022/9/2749回顾Internet 和 万维网网页的工作原理网页的基本结构标记及其属性段落标记，图片标记，超级链接标记相对路径，绝对路径，物理路径2022/9/2649回顾Internet 和 万维网2022/9/2750本章目标网页设计注意事项什么是表格？为什么需要表格？如何创建表格？表格如何使用？2022

23、/9/2650本章目标网页设计注意事项2022/9/2751网页设计注意事项多浏览器支持样式与风格统一网站结构、文件命名页面尺寸与屏幕分辨率图片文件命名、大小尺寸限制相对路径的应用页面内容（title、meta、alt、tbody等属性的应用）2022/9/2651网页设计注意事项多浏览器支持2022/9/2752什么是表格？表格是html高级构件之一，它表示数据之间的关系，使对比分析更容易理解。表格由特定数目的行和列组成球员得分 篮板 姚明27 8 麦克格雷迪 31 2 海耶斯 8 15 巴蒂尔 7 5 阿尔斯通 2 3 2022/9/2652什么是表格？表格是html高级构件之一2022/

24、9/2753表格应用示例2022/9/2653表格应用示例2022/9/2754什么是表格？表格的作用：用于显示数据，便于理解、分析组织网页版面信息2022/9/2654什么是表格？表格的作用：2022/9/2755什么是表格？行列列标题在 HTML 文档中，广泛使用表格来存放网页上的文本和图像单元格表格标题2022/9/2655什么是表格？行列列标题在 HTML 文2022/9/2756第四章：HTML表格和列表HTML表格 表格标签： 行标签：列标签：空 格：演示：一行一列一行三列两行三列注意：一个完整的表格必须由三个标签构成，且应该先画行后画列2022/9/2656第四章：HTML表格和

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

26、g 设置单元格边沿和其内容之间的距离2022/9/2658 标签及其属性表格宽度 2022/9/2759table的常用属性2022/9/2659table的常用属性2022/9/2760标签及其属性align 属性属性值：“left” 、“center”、“right”注意区别的align属性valign 属性属性值：“top”、“middle”、“bottom”bgcolor 属性背景颜色设置考虑设置优先级的问题2022/9/2660标签及其属性align 属性2022/9/2761标签及其属性align 属性属性值：”left” “center” “right”注意区别的align属性v

27、align 属性属性值：”top” “middle” “bottom”bgcolor 属性 background 属性bgcolor 背景颜色设置 background 背景图片设置考虑设置优先级的问题2022/9/2661标签及其属性align 属性2022/9/2762标签及其属性width属性 height属性注意：同行或者同列单元格将受影响rowspan属性 colspan属性rowspan属性 将一个表格单元格扩展为几行。colspan属性 将一个表格单元格扩展为几列演示 项目实战利用rowspan和colspan属性合并单元格2022/9/2662标签及其属性width属性 h20

28、22/9/2763用表格进行页面排版表格进行页面排版简单，便捷表格嵌套使用2022/9/2663用表格进行页面排版表格进行页面排版2022/9/2764表格排版注意事项：表格嵌套层次不要太多整个页面的排版不要用一个table，影响浏览器对页面的显示效率表格的行列排版要整齐td中没有内容时，以空白（）填充Div+CSS布局（了解）2022/9/2664表格排版注意事项：表格嵌套层次不要太多2022/9/2765总结表格可以格式化数据、管理文件布局表格的基本结构标签及其基本属性合并单元格其它表格标签2022/9/2665总结表格可以格式化数据、管理文件布局2022/9/2766课后练习作业2-1创

29、建一个如下样式的表格 要求：1.表格宽度760px，边框宽度为1px，表格水平居中2.单元格之间没有间距，内容与单元格边框之间距离为23.在单元格1和2分别插入图片a1.gif和a2.jpg,并且图片内容垂直居中4.其他文字依照下表输入5.要求按照完整的网页规范编码单元格1单元格2设为首页联系站长加入收藏 首页 | 基础知识 | 高级编程第四章：HTML表格和列表2022/9/2666课后练习作业2-1创建一个如下样式的表2022/9/2767第五章 表单第五章 表单2022/9/2667第五章 表单第五章 表单2022/9/2768本章目标什么是表单？表单如何使用？如何创建表单？了解表单和表

30、单元素之间的关系掌握 表单元素 的使用2022/9/2668本章目标什么是表单？2022/9/2769表单的应用表单在商务上的应用网上预定商品 网上商品拍卖表单在各种社会机构中的应用网上调查网络咨询表单在网络上其它应用网络人才招聘网络社区注册2022/9/2669表单的应用表单在商务上的应用2022/9/2770表单应用2022/9/2670表单应用2022/9/2771第五章 表单HTML表单 （表单是一个能够包含表单元素的区域 ）表单标签：表单元素2022/9/2671第五章 表单HTML表单 （表单是一个2022/9/2772表单元素-文本框、密码框文本框标签： 属性：type，name

31、，size，maxlength，value，readonly密码框标签：属性： type，name，size，maxlength，value，readonly2022/9/2672表单元素-文本框、密码框文本框2022/9/2773第五章 表单单选按钮标签：MaleFemale复选框： I have a bike I have a car注意：复选框与单选框很大的不同就是name属性不同，且复选框不要求有value属性Checked属性的特殊性文件输入框标签： 属性：type，name， size，maxlength，readonly注意：单选按钮的名称必须相同，否则不能控制单选特性2022/

32、9/2673第五章 表单单选按钮标签：2022/9/2774表单元素下拉列表下拉列表标签： 属性：name，size，multiple属性：value，selected补充：标签: 为主菜单中的每个子项标签都再生成子菜单下拉列表：VolvoSaab Fiat Audi 2022/9/2674表单元素下拉列表下拉列表2022/9/2775表单元素下拉列表你所在国家：中国日本韩国法国德国意大利2022/9/2675表单元素下拉列表2022/9/2776表单元素复选框、单选框你最喜欢什么动物？狗 猫 鸟 鱼 你喜欢什么动物？狗 猫 鸟 鱼 2022/9/2676表单元素复选框、单选框2022/9/2

33、777表单元素动作按钮标签标签：属性：type2022/9/2677表单元素动作按钮标签2022/9/2778给表单元素标记和分组标签使用label 标签来定义表单元素间的关系标签 标签将一群相关表单控件形成一个组，并用和标签来标记这个组个人资料姓名：个人简介：2022/9/2678给表单元素标记和分组标签2022/9/2779第五章 表单文本域：The cat was playing in the garden.按钮： 两个特殊的按钮 提交按钮 重置按钮 注意：提交按钮必须配合form的action属性使用2022/9/2679第五章 表单文本域：2022/9/2780Tab 键索引顺序 t

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

35、1其它相关属性id 属性2022/9/2782readonly和disabled属性readonly属性用户不能修改表单控件控件值将被传送到服务器控件可以被鼠标和通过tab键选定disabled属性用户不能修改表单控件控件值将不会被传送到服务器控件不能被鼠标和通过tab键选定2022/9/2682readonly和disabled属性2022/9/2783Form标签的三大属性action属性(必须)说明了接收和处理表单数据的应用程序URLmethod 属性(必须)为浏览器设置表单中的数据传送到服务器的方法属性值：get 和 postName 属性.2022/9/2683Form标签的三大属性

36、action属性2022/9/2784get 还是post(补充) GET /cgi-bin/method.cgi?userName=zhangsan HTTP/1.1Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-powerpoint, application/vnd.ms-excel, application/msword, */*Referer: http:/localhost/other.htmlAccept-Language: zh-cnAccept-Encoding: g

37、zip, deflateUser-Agent: Mozilla/4.0 (compatible; MSIE 5.01; Windows NT 5.0)Host: localhost:8080Connection: Keep-Alive 注： 根据 HTTP 规范，GET 用于信息获取，而且应该是 安全的和幂等的。所谓安全的意味着该操作用于获取信息而非修改信息。换句话说，GET 请求一般不应产生副作用。幂等的意味着对同一 URL 的多个请求应该返回同样的结果。 POST /cgi-bin/tech/method.cgi HTTP/1.1Accept: image/gif, image/x-xbi

38、tmap, image/jpeg, image/pjpeg, application/vnd.ms-powerpoint, application/vnd.ms-excel, application/msword, */*Referer: http:/localhost/other.htmlAccept-Language: zh-cnContent-Type: application/x-www-form-urlencodedAccept-Encoding: gzip, deflateUser-Agent: Mozilla/4.0 (compatible; MSIE 5.01; Windows

39、 NT 5.0)Host: localhost:8080Content-Length: 9Connection: Keep-AliveuserName=lisi2022/9/2684get 还是post(补充)form2022/9/2785总结表单是由表单容器和其中的表单元素组成表单中的各种表单元素及其属性表单的结构和表单属性2022/9/2685总结表单是由表单容器和其中的表单元素组2022/9/2786课后练习作业模拟美食网站的注册页面（结合table做页面布局）要求：姓名密码性别 所在城市（省、市）个人喜好：各类美食个人介绍2022/9/2686课后练习作业模拟美食网站的注册页面（结20

40、22/9/2787第五章 框架2022/9/2687第五章 框架2022/9/2788目 标 框架的意义 框架结构的典型代码 多框架的窗口中超链接的导航目标 框架嵌套的实现2022/9/2688目 标 框架的意义 2022/9/2789框架的应用2022/9/2689框架的应用2022/9/2790框架的作用框架结构的优点内容组织有条理方便导航框架结构的缺点浏览器被划分为太多子窗口影响整体美观通常能通过表格布局取代打印整个页面变得困难。 2022/9/2690框架的作用框架结构的优点2022/9/2791框架结构标签作用：定义框架属性：cols 设置框架分为几列rows设置框架分为几行bord

41、er 用来设置框架的边框宽度bordercolor 边框颜色Frameborder 设置是否显示框架边框其它属性：class，style，title，id2022/9/2691框架结构标签/f2022/9/2792框架结构标签作用：定义每个框架中放入什么文件。属性：src: 制定在框架窗口中显示什么文件name:制定框架窗口的名字noresize:禁止 访问用户改变框架大小scrolling:为框架窗口设置滚动条其它属性：title，style，class，id2022/9/2692框架结构标签/fram2022/9/2793框架结构标签作用：为不能显示框架的浏览器(mosaic)提供了一种解

42、决方案2022/9/2693框架结构标签/n2022/9/2794框架的嵌套典型的左右框架演示嵌套框架的实现演示2层嵌套3层嵌套（作业）实际应用：聊天室2022/9/2694框架的嵌套典型的左右框架2022/9/2795框架示例无标题文档 您当前浏览器不支持框架Rows属性进行窗口上下划分Frameset嵌套，再左右划分Frame的name，做页面导航时，超链接的target指向此name2022/9/2695框架示例!DOCTYPE html 2022/9/2796超链接导航的特殊属性targetTarget 作用：指定标签中href指向的页面在target指定的框架或者窗口中打开。如果ta

43、rget指定的框架或者窗口不存在。浏览器将在新窗口中打开。实现框架的导航效果2022/9/2696超链接导航的特殊属性target2022/9/2797导航链接目标标签作用：为没有包含显示的target属性的当前文档中的每一个超链接设置一个默认目标。属性：Target注意：该标签位于之内2022/9/2697导航链接目标标签2022/9/2798特殊的目标_blank浏览器总是在一个新打开、未命名的窗口中载入链接的文档_self超链接的默认值，它使得目标文档载入并显示在相同的框架或者窗口中。_parent文档载入父窗口或者包含了超链接引用的框架_top将文档载入取代当前窗口中的框架。2022/

44、9/2698特殊的目标_blank2022/9/2799内联框架标签属性：Src 用来指定内联框架中显示的网页Align 设置内联框架在相邻文档中的位置Width，height 设置内联框架区域的宽度和高度Frameborder 设置是否有3维边框(“yes”或”no”)Scrolling 设置是否有滚动条(同)其它标签 class，style，id，name浏览器中的浏览器2022/9/2699内联框架标签2022/9/27100总结框架结构的应用框架的标签及其属性 多层框架嵌套的实现多框架的窗口中超链接的导航目标 2022/9/26100总结框架结构的应用2022/9/27101作业2-1

45、创建一个多级嵌套框架，具体样式见示意图，要求实现导航页面2022/9/26101作业2-1创建一个多级嵌套框架，具体2022/9/27102作业2-2采用iframe方式创建以下界面，并根据链接的提示实现界面不同target的跳转2022/9/26102作业2-2采用iframe方式创建以2022/9/27103第六章 其它标签2022/9/26103第六章 其它标签2022/9/27104回顾框架的意义 框架结构的典型代码 多框架的窗口中超链接的导航目标 框架嵌套的实现模板的应用2022/9/26104回顾框架的意义 2022/9/27105目标段落标记字符标记特殊字符表示方法图片及图片标记

46、多媒体（动画，音乐）2022/9/26105目标段落标记2022/9/27106段落相关标记作用：定义段落属性：align作用：换行标题标签.Align属性改变对齐方式2022/9/26106段落相关标记2022/9/27107段落相关标记标签作用：起修饰作用的水平分割线属性：align 设置对齐方式size设置分割线的厚度（像素为单位）noshade 显示扁平2D分割线，没有属性值width 设置分割线的长度(百分比，像素)color 设置颜色，一旦设置颜色将失去3D效果分割线的使用：页首页尾使用分割线2022/9/26107段落相关标记标签2022/9/27108段落相关标记.作用：滚动字

47、幕属性：behavior 设置文字滚动样式(scroll，slide，alternate)direction 设置文字滚动的方向 (left,right,up,down)loop 设置文字的滚动次数bgcolor 设置滚动区域背景色scrollamount 设置每次滚动之间的间隔像素scrolldelay 设置每次滚动之间的时间间隔(毫秒)height,width设置整个字幕区域的大小事件：onmouseover=“this.stop()” onmouseout=“this.start()”2022/9/26108段落相关标记.2022/9/27109段落相关标记有序列表属性：start 设置有序列表的起始数字type设置编号的样