版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
浏览器基础培训（一）--初识
Web页面浏览器基础培训（一）--初识
Web页面浏览器·Who·What·How1.浏览器是什么？2.浏览器做什么？3.浏览器怎么做？浏览器·Who·What·How1.浏览器是什么？浏览器·Who浏览器是什么？浏览器·Who浏览器是什么？浏览器·Who·名词解释浏览器是个Web应用软件：1、主要处理HTML文件内容；文件可来自服务器，或本地文件；2、使用者与Web上内容进行交互。
备注：如果文件内的数据不包含Web格式，那么显示的是文件的原始数据内容，例如可以让浏览器显示一个纯文本，或一张图片。浏览器·Who·名词解释浏览器是个Web应用浏览器·Who·W3C
W3C是一个组织，专门负责制定、更新维护Web标准。兼容性问题：
因：虽有W3C规范，但各个浏览器对规范的理解和遵循，达不到一致；
果：依赖某个浏览器开发的业务，给别的浏览器带来严重的兼容性问题。例如在IE下显示正常的页面，在Chrome下却不正常。浏览器·Who·W3CW3C是一个组织，专门浏览器·Who·历史
IT届流行趋势：信息共享，操作简单；浏览器成就原因：1、图像显示支持；2、脚本语言支持；3、插件支持。浏览器成为互联网接入的首选软件。
现状：国外大牌厂商激烈角逐，而国内做贴牌的生意，
例如搜狗、360、遨游、世界之窗等等。浏览器·Who·历史IT届流行趋势：信息共享浏览器·What浏览器做什么？浏览器·What浏览器做什么？浏览器·What·概述笼统的讲，浏览器有如下的描述：1）页面承载业务逻辑，是一切行动的触发起源2）浏览器是执行者，执行页面的命令，执行的准则是W3C规范3）浏览器是信息透传者，负责上游页面与下游模块的信息互传浏览器·What·概述笼统的讲，浏览器有如下的描述：浏览器·What·处理对象从功能上讲，包含：1、数据解析2、脚本编译执行3、元素排版布局等数据解析的对象：HTML、JavaScript、CSS脚本编译执行的对象：JavaScript影响排版布局的对象：HTML、JavaScript、CSS浏览器·What·处理对象从功能上讲，包含：浏览器·What·了解一下磨刀不误砍柴工，先了解最常见的web基础语言：1）HTML2）JavaScript3）CSS浏览器·What·了解一下磨刀不误砍柴工，先了解最常见的we浏览器·HTML·JavaScript·CSS介绍1.HTML介绍2.JavaScript介绍3.CSS介绍了解一下浏览器·HTML·JavaScript·CSS介绍1.HTM浏览器·What·HTML
HTML(HypertextMarkupLanguage)，即超文本标记语言，是用于描述web文档的一种标记语言。
网页的本质就是HTML，通过结合使用其他的Web技术（如JavaScript等），可以创造出功能强大的网页。HTML是Web编程的基础，也可以说万维网是建立在超文本基础之上的。浏览器·What·HTMLHTML(Hype浏览器·What·HTML·超级文本1）一种类似文本的标记语言2）所谓超级链接，就是可以包含很多URL信息，通过URL信息，可得到相关数据的链接，方便浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一浏览器·What·HTML·超级文本1）一种类似文本的标记语浏览器·What·HTML·编辑工具1、可视化编辑工具：Dreamweaver，FrontPage等2、文本编辑工具：Windows上有很多编辑软件，如记事本、UltraEdit等，Linux上有vi等3、其他，微软的office系列软件，可以将文档直接另存为html网页文件
网页开发如此简单，从此改变最开始网页开发者的命运。浏览器·What·HTML·编辑工具1、可视化编辑工具：Dr浏览器·What·HTML·特点1）HTML文档制作简单
支持不同数据格式的文件嵌入，如各种类型的图片、Flash动画等2）可扩展性
增加标识符等满足新需求，HTML采取子类元素的方式，为系统扩展带来保证3）平台无关性
同个网页，在不同的终端上访问，显示方式相同浏览器·What·HTML·特点1）HTML文档制作简单组成HTML文档主要是标签，一般格式：或标签：不同的标签表示不同的意义属性：可以设置参数，也可以不设内容：容器里面需要展示的内容，没有内容表示单个元素浏览器·What·HTML·语法格式<标签
属性=参数>内容</标签><标签
属性=参数>组成HTML文档主要是标签，一般格式：浏览器·What·HT<body> <b>
<fontcolor="#0099FF">helloword</font> </b> <br>
<imgborder="0"src="picture.gif"width="259"height="194"></body>注：<body></body>表示包含的内容表示页面主体；<b></b>表示包含的内容为粗体字体展示；<br>表示换行<img>是图片标签，其属性使用了border、src、width、height，分别为：边框粗细，图片路径，图片宽度，图片高度。浏览器·What·HTML·举个例子<body>浏览器·What·HTML·举个例子1）问：能计算1+1=?吗，在输入信息时出错提醒一下呢？答：
HTML是标记语言，没有任何逻辑处理能力2）问：针对文章的正文部分的字体颜色的设置，有没有批量设置？答：页面字体等元素只能一个一个的设置浏览器·What·HTML·缺陷1）问：能计算1+1=?吗，在输入信息时出错提醒一下呢？浏览1）没有处理能力：JavaScript的出现解决这个问题，JavaScript可以与HTML一起协同工作，解决HTML页面不具有的业务逻辑的缺陷。JavaScript进行解决2）不能进行批量设置样式：针对HTML页面的美化渲染比较复杂，需要针对每个元素都进行特殊美化，CSS的出现，可以进行批量美化，将网页编辑者从繁重的体力活动中解脱。
CSS进行解决浏览器·What·HTML·缺陷修复1）没有处理能力：JavaScript的出现解决这个问题，HTML·JavaScript·CSS1.HTML介绍2.JavaScript介绍3.CSS介绍了解一下HTML·JavaScript·CSS1.HTML介绍了解一浏览器·What·JavaScript
JavaScript在HTML页面中的标识格式：<scripttype="text/javascript">……</script>
小记：Netscape公司研发的一种脚本语言，可以嵌入到Web浏览器中使用，又由于当时Java很火，于是取名为：JavaScript（Java+Script），简称JS其实JavaScript与Java是两个不同的语言，只是名字相近浏览器·What·JavaScriptJavaScript1）是一种面向对象的语言，让与HTML紧密结合，网页更加“生动活泼”，给HTML页面带来生机2）增加页面逻辑处理，提高网页的可观性3）用途：利用JavaScript轻易的做出亲切的欢迎信息、漂亮的数字钟、有广告效果的跑马灯及简易的选举，还可以显示浏览器停留的时间浏览器·What·JavaScript·简介1）是一种面向对象的语言，让与HTML紧密结合，网页更加“生浏览器·What·JavaScript·VBScript·JScriptJavaScript：由Netscape研发VBScript：由微软研发，用来打击JavaScriptJscript：由微软研发，是VBScript升级版本，但是使用者少三者本质相同，只是所承载的战略意义和目的不同浏览器·What·JavaScript·VBScript·J<divid="textvftime"></div><script>varStartTime=newDate();functionshowTime(){ varvTempDate=newDate(newDate()-StartTime); varhourClk=vTempDate.getUTCHours(); varminClk=vTempDate.getUTCMinutes(); varsecClk=vTempDate.getUTCSeconds(); if(hourClk<10) hourClk="0"+hourClk; if(secClk<10) secClk="0"+secClk; if(minClk<10) minClk="0"+minClk; document.getElementById("textvftime").innerHTML=hourClk+":"+minClk+":"+secClk;}varChatTimer=setInterval("showTime()",1000);</script>浏览器·What·HTML·JavaScript·例子预览结果示例<divid="textvftime"></div>浏览器HTML·JavaScript·CSS1.HTML介绍2.JavaScript介绍3.CSS介绍了解一下HTML·JavaScript·CSS1.HTML介绍了解一浏览器·What·CSS级联样式表（CascadingStyleSheet）简称CSS，又为“风格样式表(StyleSheet)”，是用来进行网页风格设计的级联样式表，更有效地控制网页外观，精确指定网页元素位置，外观以及创建特殊效果的能力浏览器·What·CSS级联样式表（Casc问：如果一个大型网站，可能有成千上万个页面，每个页面有成千上万个标签元素，针对每个元素都要设置的话，人力几乎不可能，而且容易出错？答：通过CSS控制，只需要修改几行就能搞定。技巧：HTML页面中定义相同类型的元素做标记，可通过CSS统一渲染该标记的所有元素的显示效果，类似C/C++的宏定义实现。使用：CSS定义可放在HTML页面内，也可以保存css文件嵌入到HTML文件中，使用方式灵活。浏览器·What·CSS·作用问：如果一个大型网站，可能有成千上万个页面，每个页面有成千上CSS规则由两个主要的部分构成：选择范围（选择器），以及一条或多条声明浏览器·What·CSS·语法格式selector{declaration1;declaration2;...declarationN}例如CSS描述：h1{color:red;font-size:14px;}CSS规则由两个主要的部分构成：选择范围（选择器），以及一<html><head><styletype="text/css">body{ background-image:url(fnxn.jpg);
background-repeat:repeat; background-color:#0099FF;}</style></head><body></body></html>浏览器·What·CSS·简单例子(1)图片信息：名称：fnxn.jpg高：170px宽：170px效果图：背景全屏平铺<html>浏览器·What·CSS·简单例子(1)图片信息<html><head><styletype="text/css">body{ background-image:url(fnxn.jpg);
background-repeat:repeat-x; background-color:#0099FF;}</style></head><body></body></html>浏览器·What·CSS·简单例子(1)图片信息：名称：fnxn.jpg高：170px宽：170px效果图：x轴方向平铺，空余填充背景色<html>浏览器·What·CSS·简单例子(1)图片信息<html><head><styletype="text/css">body{ background-image:url(fnxn.jpg);
background-repeat:repeat-y; background-color:#0099FF;}</style></head><body></body></html>浏览器·What·CSS·简单例子(1)图片信息：名称：fnxn.jpg高：170px宽：170px效果图：y轴方向平铺，空余填充背景色<html>浏览器·What·CSS·简单例子(1)图片信息<html><head><styletype="text/css">body{ background-image:url(fnxn.jpg);
background-repeat:no-repeat; background-color:#0099FF;}</style></head><body></body></html>浏览器·What·CSS·简单例子(1)图片信息：名称：fnxn.jpg高：170px宽：170px效果图：只显示一次，空余填充背景色<html>浏览器·What·CSS·简单例子(1)图片信息请关注：浏览器培训（二）浏览器How请关注：演讲完毕，谢谢观看！演讲完毕，谢谢观看！浏览器基础培训（一）--初识
Web页面浏览器基础培训（一）--初识
Web页面浏览器·Who·What·How1.浏览器是什么？2.浏览器做什么？3.浏览器怎么做？浏览器·Who·What·How1.浏览器是什么？浏览器·Who浏览器是什么？浏览器·Who浏览器是什么？浏览器·Who·名词解释浏览器是个Web应用软件：1、主要处理HTML文件内容；文件可来自服务器，或本地文件；2、使用者与Web上内容进行交互。
备注：如果文件内的数据不包含Web格式，那么显示的是文件的原始数据内容，例如可以让浏览器显示一个纯文本，或一张图片。浏览器·Who·名词解释浏览器是个Web应用浏览器·Who·W3C
W3C是一个组织，专门负责制定、更新维护Web标准。兼容性问题：
因：虽有W3C规范，但各个浏览器对规范的理解和遵循，达不到一致；
果：依赖某个浏览器开发的业务，给别的浏览器带来严重的兼容性问题。例如在IE下显示正常的页面，在Chrome下却不正常。浏览器·Who·W3CW3C是一个组织，专门浏览器·Who·历史
IT届流行趋势：信息共享，操作简单；浏览器成就原因：1、图像显示支持；2、脚本语言支持；3、插件支持。浏览器成为互联网接入的首选软件。
现状：国外大牌厂商激烈角逐，而国内做贴牌的生意，
例如搜狗、360、遨游、世界之窗等等。浏览器·Who·历史IT届流行趋势：信息共享浏览器·What浏览器做什么？浏览器·What浏览器做什么？浏览器·What·概述笼统的讲，浏览器有如下的描述：1）页面承载业务逻辑，是一切行动的触发起源2）浏览器是执行者，执行页面的命令，执行的准则是W3C规范3）浏览器是信息透传者，负责上游页面与下游模块的信息互传浏览器·What·概述笼统的讲，浏览器有如下的描述：浏览器·What·处理对象从功能上讲，包含：1、数据解析2、脚本编译执行3、元素排版布局等数据解析的对象：HTML、JavaScript、CSS脚本编译执行的对象：JavaScript影响排版布局的对象：HTML、JavaScript、CSS浏览器·What·处理对象从功能上讲，包含：浏览器·What·了解一下磨刀不误砍柴工，先了解最常见的web基础语言：1）HTML2）JavaScript3）CSS浏览器·What·了解一下磨刀不误砍柴工，先了解最常见的we浏览器·HTML·JavaScript·CSS介绍1.HTML介绍2.JavaScript介绍3.CSS介绍了解一下浏览器·HTML·JavaScript·CSS介绍1.HTM浏览器·What·HTML
HTML(HypertextMarkupLanguage)，即超文本标记语言，是用于描述web文档的一种标记语言。
网页的本质就是HTML，通过结合使用其他的Web技术（如JavaScript等），可以创造出功能强大的网页。HTML是Web编程的基础，也可以说万维网是建立在超文本基础之上的。浏览器·What·HTMLHTML(Hype浏览器·What·HTML·超级文本1）一种类似文本的标记语言2）所谓超级链接，就是可以包含很多URL信息，通过URL信息，可得到相关数据的链接，方便浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一浏览器·What·HTML·超级文本1）一种类似文本的标记语浏览器·What·HTML·编辑工具1、可视化编辑工具：Dreamweaver，FrontPage等2、文本编辑工具：Windows上有很多编辑软件，如记事本、UltraEdit等，Linux上有vi等3、其他，微软的office系列软件，可以将文档直接另存为html网页文件
网页开发如此简单，从此改变最开始网页开发者的命运。浏览器·What·HTML·编辑工具1、可视化编辑工具：Dr浏览器·What·HTML·特点1）HTML文档制作简单
支持不同数据格式的文件嵌入，如各种类型的图片、Flash动画等2）可扩展性
增加标识符等满足新需求，HTML采取子类元素的方式，为系统扩展带来保证3）平台无关性
同个网页，在不同的终端上访问，显示方式相同浏览器·What·HTML·特点1）HTML文档制作简单组成HTML文档主要是标签，一般格式：或标签：不同的标签表示不同的意义属性：可以设置参数，也可以不设内容：容器里面需要展示的内容，没有内容表示单个元素浏览器·What·HTML·语法格式<标签
属性=参数>内容</标签><标签
属性=参数>组成HTML文档主要是标签，一般格式：浏览器·What·HT<body> <b>
<fontcolor="#0099FF">helloword</font> </b> <br>
<imgborder="0"src="picture.gif"width="259"height="194"></body>注：<body></body>表示包含的内容表示页面主体；<b></b>表示包含的内容为粗体字体展示；<br>表示换行<img>是图片标签，其属性使用了border、src、width、height，分别为：边框粗细，图片路径，图片宽度，图片高度。浏览器·What·HTML·举个例子<body>浏览器·What·HTML·举个例子1）问：能计算1+1=?吗，在输入信息时出错提醒一下呢？答：
HTML是标记语言，没有任何逻辑处理能力2）问：针对文章的正文部分的字体颜色的设置，有没有批量设置？答：页面字体等元素只能一个一个的设置浏览器·What·HTML·缺陷1）问：能计算1+1=?吗，在输入信息时出错提醒一下呢？浏览1）没有处理能力：JavaScript的出现解决这个问题，JavaScript可以与HTML一起协同工作，解决HTML页面不具有的业务逻辑的缺陷。JavaScript进行解决2）不能进行批量设置样式：针对HTML页面的美化渲染比较复杂，需要针对每个元素都进行特殊美化，CSS的出现，可以进行批量美化，将网页编辑者从繁重的体力活动中解脱。
CSS进行解决浏览器·What·HTML·缺陷修复1）没有处理能力：JavaScript的出现解决这个问题，HTML·JavaScript·CSS1.HTML介绍2.JavaScript介绍3.CSS介绍了解一下HTML·JavaScript·CSS1.HTML介绍了解一浏览器·What·JavaScript
JavaScript在HTML页面中的标识格式：<scripttype="text/javascript">……</script>
小记：Netscape公司研发的一种脚本语言，可以嵌入到Web浏览器中使用，又由于当时Java很火，于是取名为：JavaScript（Java+Script），简称JS其实JavaScript与Java是两个不同的语言，只是名字相近浏览器·What·JavaScriptJavaScript1）是一种面向对象的语言，让与HTML紧密结合，网页更加“生动活泼”，给HTML页面带来生机2）增加页面逻辑处理，提高网页的可观性3）用途：利用JavaScript轻易的做出亲切的欢迎信息、漂亮的数字钟、有广告效果的跑马灯及简易的选举，还可以显示浏览器停留的时间浏览器·What·JavaScript·简介1）是一种面向对象的语言，让与HTML紧密结合，网页更加“生浏览器·What·JavaScript·VBScript·JScriptJavaScript：由Netscape研发VBScript：由微软研发，用来打击JavaScriptJscript：由微软研发，是VBScript升级版本，但是使用者少三者本质相同，只是所承载的战略意义和目的不同浏览器·What·JavaScript·VBScript·J<divid="textvftime"></div><script>varStartTime=newDate();functionshowTime(){ varvTempDate=newDate(newDate()-StartTime); varhourClk=vTempDate.getUTCHours(); varminClk=vTempDate.getUTCMinutes(); varsecClk=vTempDate.getUTCSeconds(); if(hourClk<10) hourClk="0"+hourClk; if(secClk<10) secClk="0"+secClk; if(minClk<10) minClk="0"+minClk; document.getElementById("textvftime").innerHTML=hourClk+":"+minClk+":"+secClk;}varChatTimer=setInterval("showTime()",1000);</script>浏览器·What·HTML·JavaScript·例子预览结果示例<divid="textvftime"></div>浏览器HTML·JavaScript·CSS1.HTML介绍2.JavaScript介绍3.CSS介绍了解一下HTML·JavaScript·CSS1.HTML介绍了解一浏览器·What·CSS级联样式表（CascadingStyleSheet）简称CSS，又为“风格样式表(StyleSheet)”，是用来进行网页风格设计的级联样式表，更有效地控制网页外观，精确指定网页元素位置，外观以及创建特殊效果的能力浏览器·What·CSS级联样式表（Casc问：如果一个大型网站，可能有成千上万个页面，每个页面有成千上万个标签元素，针对每个元素都要设置的话，人力几乎不可能，而且容易出错？答：通过CSS控制，只需要修改几行就能搞定。技巧：HTML页面中定义相同类型的元素做标记，可通过CSS统一渲染该标记的所有元素的显示效果，类似C/C++的宏定义实现。使用：CSS定义可放在HTML页面内，也可以保存css文件嵌入到HTML文件中，使用方式灵活。浏览器·What·CSS·作用问：如果一个大型网站，可能有成千上万个页面，每个页面有成千上CSS规则由两个主要的部分构成：选择范围（选择器），以及一条或多条声明浏览器·What·CSS·语法格式selector{declaration1;declaration2;...declarationN
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 金融科技对寿险业产品创新的启示
- 二零二五年度养老社区照顾老人保姆聘用合同
- 2025年度青椒种植与加工一体化合同
- 二零二五年度生态家居软装设计与施工一体化合同
- 二零二五年度旅游民宿经营权出让合同
- 二零二五年度河南省人事厅机关事业单位翻译人员聘用合同
- 二零二五年度冷链货车租赁及仓储服务合同
- 二零二五商铺租赁合同解除与商业空间使用权变更协议
- 二零二五年度游乐场安全管理人员考核与评价合同
- 社会化媒体在小学学习习惯培养中的作用
- 小学科学项目化学习活动作业方案案例设计《设计制作动力小车项目化学习》
- 茶与健康 第二讲 茶成分课件
- 复工条件验收报告
- 小学生作文稿纸A4打印稿
- 2023理论学习、理论武装方面存在问题及原因剖析18条
- 运动技能学习与控制课件第三章运动能力与个体差异
- (部编)五年级语文下册小练笔(21篇)
- 《企业人力资源管理师考试用书考试通过必备一级》
- 2023年高考英语考前必练-非谓语动词(含近三年真题及解析)
- 高校科技成果转化政策与案例分享
- 全国职工拔河比赛执行方案
评论
0/150
提交评论