浏览器基础培训(一)

标题:字体:微软雅黑粗体字号:32-36pt颜色:主题蓝色副标题:字体:微软雅黑字号:24pt颜色:主题灰色浏览器基础培训（一）--初识Web页面浏览器·Who·What·How1.浏览器是什么？2.浏览器做什么？3.浏览器怎么做？浏览器·Who浏览器是什么？浏览器·Who·名词解释浏览器是个Web应用软件：1、主要处理HTML文件内容；文件可来自服务器，或本地文件；2、使用者与Web上内容进行交互。备注：如果文件内的数据不包含Web格式，那么显示的是文件的原始数据内容，例如可以让浏览器显示一个纯文本，或一张图片。浏览器·Who·W3CW3C是一个组织，专门负责制定、更新维护Web标准。兼容性问题：因：虽有W3C规范，但各个浏览器对规范的理解和遵循，达不到一致；果：依赖某个浏览器开发的业务，给别的浏览器带来严重的兼容性问题。例如在IE下显示正常的页面，在Chrome下却不正常。浏览器·Who·历史IT届流行趋势：信息共享，操作简单；浏览器成就原因：1、图像显示支持；2、脚本语言支持；3、插件支持。浏览器成为互联网接入的首选软件。现状：国外大牌厂商激烈角逐，而国内做贴牌的生意，例如搜狗、360、遨游、世界之窗等等。浏览器·What浏览器做什么？浏览器·What·概述笼统的讲，浏览器有如下的描述：1）页面承载业务逻辑，是一切行动的触发起源2）浏览器是执行者，执行页面的命令，执行的准则是W3C规范3）浏览器是信息透传者，负责上游页面与下游模块的信息互传浏览器·What·处理对象从功能上讲，包含：1、数据解析2、脚本编译执行3、元素排版布局等数据解析的对象：HTML、JavaScript、CSS脚本编译执行的对象：JavaScript影响排版布局的对象：HTML、JavaScript、CSS浏览器·What·了解一下磨刀不误砍柴工，先了解最常见的web基础语言：1）HTML2）JavaScript3）CSS浏览器·HTML·JavaScript·CSS介绍1.HTML介绍2.JavaScript介绍3.CSS介绍了解一下浏览器·What·HTMLHTML(HypertextMarkupLanguage)，即超文本标记语言，是用于描述web文档的一种标记语言。网页的本质就是HTML，通过结合使用其他的Web技术（如JavaScript等），可以创造出功能强大的网页。HTML是Web编程的基础，也可以说万维网是建立在超文本基础之上的。浏览器·What·HTML·超级文本1）一种类似文本的标记语言2）所谓超级链接，就是可以包含很多URL信息，通过URL信息，可得到相关数据的链接，方便浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一浏览器·What·HTML·编辑工具1、可视化编辑工具：Dreamweaver，FrontPage等2、文本编辑工具：Windows上有很多编辑软件，如记事本、UltraEdit等，Linux上有vi等3、其他，微软的office系列软件，可以将文档直接另存为html网页文件网页开发如此简单，从此改变最开始网页开发者的命运。浏览器·What·HTML·特点1）HTML文档制作简单支持不同数据格式的文件嵌入，如各种类型的图片、Flash动画等2）可扩展性增加标识符等满足新需求，HTML采取子类元素的方式，为系统扩展带来保证3）平台无关性同个网页，在不同的终端上访问，显示方式相同标题:字体:微软雅黑字号:30-32pt颜色:主题蓝色正文(1-5级):字体:微软雅黑字号:28-12pt颜色:黑色G91,B170G137,B207G174,B239G171,B189©TCLCorporation.Allrightsreserved.组成HTML文档主要是标签，一般格式：或标签：不同的标签表示不同的意义属性：可以设置参数，也可以不设内容：容器里面需要展示的内容，没有内容表示单个元素浏览器·What·HTML·语法格式标签属性=参数内容/标签标签属性=参数标题:字体:微软雅黑字号:30-32pt颜色:主题蓝色正文(1-5级):字体:微软雅黑字号:28-12pt颜色:黑色G91,B170G137,B207G174,B239G171,B189©TCLCorporation.Allrightsreserved.bodybfontcolor=#0099FFhelloword/font/bbrimgborder=0src=picture.gifwidth=259height=194/body注：body/body表示包含的内容表示页面主体；b/b表示包含的内容为粗体字体展示；br表示换行img是图片标签，其属性使用了border、src、width、height，分别为：边框粗细，图片路径，图片宽度，图片高度。浏览器·What·HTML·举个例子标题:字体:微软雅黑字号:30-32pt颜色:主题蓝色正文(1-5级):字体:微软雅黑字号:28-12pt颜色:黑色G91,B170G137,B207G174,B239G171,B189©TCLCorporation.Allrightsreserved.1）问：能计算1+1=?吗，在输入信息时出错提醒一下呢？答：HTML是标记语言，没有任何逻辑处理能力2）问：针对文章的正文部分的字体颜色的设置，有没有批量设置？答：页面字体等元素只能一个一个的设置浏览器·What·HTML·缺陷标题:字体:微软雅黑字号:30-32pt颜色:主题蓝色正文(1-5级):字体:微软雅黑字号:28-12pt颜色:黑色G91,B170G137,B207G174,B239G171,B189©TCLCorporation.Allrightsreserved.1）没有处理能力：JavaScript的出现解决这个问题，JavaScript可以与HTML一起协同工作，解决HTML页面不具有的业务逻辑的缺陷。------JavaScript进行解决2）不能进行批量设置样式：针对HTML页面的美化渲染比较复杂，需要针对每个元素都进行特殊美化，CSS的出现，可以进行批量美化，将网页编辑者从繁重的体力活动中解脱。------CSS进行解决浏览器·What·HTML·缺陷修复HTML·JavaScript·CSS1.HTML介绍2.JavaScript介绍3.CSS介绍了解一下浏览器·What·JavaScriptJavaScript在HTML页面中的标识格式：scripttype=text/javascript……/script小记：Netscape公司研发的一种脚本语言，可以嵌入到Web浏览器中使用，又由于当时Java很火，于是取名为：JavaScript（Java+Script），简称JS其实JavaScript与Java是两个不同的语言，只是名字相近标题:字体:微软雅黑字号:30-32pt颜色:主题蓝色正文(1-5级):字体:微软雅黑字号:28-12pt颜色:黑色G91,B170G137,B207G174,B239G171,B189©TCLCorporation.Allrightsreserved.1）是一种面向对象的语言，让与HTML紧密结合，网页更加“生动活泼”，给HTML页面带来生机2）增加页面逻辑处理，提高网页的可观性3）用途：利用JavaScript轻易的做出亲切的欢迎信息、漂亮的数字钟、有广告效果的跑马灯及简易的选举，还可以显示浏览器停留的时间浏览器·What·JavaScript·简介标题:字体:微软雅黑字号:30-32pt颜色:主题蓝色正文(1-5级):字体:微软雅黑字号:28-12pt颜色:黑色G91,B170G137,B207G174,B239G171,B189©TCLCorporation.Allrightsreserved.浏览器·What·JavaScript·VBScript·JScriptJavaScript：由Netscape研发VBScript：由微软研发，用来打击JavaScriptJscript：由微软研发，是VBScript升级版本，但是使用者少三者本质相同，只是所承载的战略意义和目的不同标题:字体:微软雅黑字号:30-32pt颜色:主题蓝色正文(1-5级):字体:微软雅黑字号:28-12pt颜色:黑色G91,B170G137,B207G174,B239G171,B189©TCLCorporation.Allrightsreserved.divid=textvftime/divscriptvarStartTime=newDate();functionshowTime(){varvTempDate=newDate(newDate()-StartTime);varhourClk=vTempDate.getUTCHours();varminClk=vTempDate.getUTCMinutes();varsecClk=vTempDate.getUTCSeconds();if(hourClk10)hourClk=0+hourClk;if(secClk10)secClk=0+secClk;if(minClk10)minClk=0+minClk;document.getElementById(textvftime).innerHTML=hourClk+:+minClk+:+secClk;}varChatTimer=setInterval(showTime(),1000);/script浏览器·What·HTML·JavaScript·例子预览结果示例HTML·JavaScript·CSS1.HTML介绍2.JavaScript介绍3.CSS介绍了解一下浏览器·What·CSS级联样式表（CascadingStyleSheet）简称CSS，又为“风格样式表(StyleSheet)”，是用来进行网页风格设计的级联样式表，更有效地控制网页外观，精确指定网页元素位置，外观以及创建特殊效果的能力标题:字体:微软雅黑字号:30-32pt颜色:主题蓝色正文(1-5级):字体:微软雅黑字号:28-12pt颜色:黑色G91,B170G137,B207G174,B239G171,B189©TCLCorporation.Allrightsreserved.问：如果一个大型网站，可能有成千上万个页面，每个页面有成千上万个标签元素，针对每个元素都要设置的话，人力几乎不可能，而且容易出错？答：通过CSS控制，只需要修改几行就能搞定。技巧：HTML页面中定义相同类型的元素做标记，可通过CSS统一渲染该标记的所有元素的显示效果，类似C/C++的宏定义实现。使用：CSS定义可放在HTML页面内，也可以保存css文件嵌入到HTML文件中，使用方式灵活。浏览器·What·CSS·作用标题:字体:微软雅黑字号:30-32pt颜色:主题蓝色正文(1-5级):字体:微软雅黑字号:28-12pt颜色:黑色G91,B170G137,B207G174,B239G171,B189©TCLCorporation.Allrightsreserved.CSS规则由两个主要的部分构成：选择范围（选择器），以及一条或多条声明浏览器·What·CSS·语法格式selector{declaration1;declaration2;...declarationN}例如CSS描述：h1{color:red;font-size:14px;}标题:字体:微软雅黑字号:30-32pt颜色:主题蓝色正文(1-5级):字体:微软雅黑字号:28-12pt颜色:黑色G91,B170G137,B207G174,B239G171,B189©TCLCorporation.Allrightsreserved.htmlheadstyletype=text/cssbody{background-image:url(fnxn.jpg);background