企业培训_浏览器基础培训

浏览器基础培训 一 初识Web页面 浏览器 Who What How 1 浏览器是什么 2 浏览器做什么 3 浏览器怎么做 浏览器 Who 浏览器是什么 浏览器 Who 名词解释 浏览器是个Web应用软件 1 主要处理HTML文件内容 文件可来自服务器 或本地文件 2 使用者与Web上内容进行交互 备注 如果文件内的数据不包含Web格式 那么显示的是文件的原始数据内容 例如可以让浏览器显示一个纯文本 或一张图片 浏览器 Who W3C W3C是一个组织 专门负责制定 更新维护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 HTML HTML 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 平台无关性同个网页 在不同的终端上访问 显示方式相同 组成HTML文档主要是标签 一般格式 或标签 不同的标签表示不同的意义属性 可以设置参数 也可以不设内容 容器里面需要展示的内容 没有内容表示单个元素 浏览器 What HTML 语法格式 内容 helloword注 表示包含的内容表示页面主体 表示包含的内容为粗体字体展示 表示换行是图片标签 其属性使用了border src width height 分别为 边框粗细 图片路径 图片宽度 图片高度 浏览器 What HTML 举个例子 1 问 能计算1 1 吗 在输入信息时出错提醒一下呢 答 HTML是标记语言 没有任何逻辑处理能力2 问 针对文章的正文部分的字体颜色的设置 有没有批量设置 答 页面字体等元素只能一个一个的设置 浏览器 What HTML 缺陷 1 没有处理能力 JavaScript的出现解决这个问题 JavaScript可以与HTML一起协同工作 解决HTML页面不具有的业务逻辑的缺陷 JavaScript进行解决2 不能进行批量设置样式 针对HTML页面的美化渲染比较复杂 需要针对每个元素都进行特殊美化 CSS的出现 可以进行批量美化 将网页编辑者从繁重的体力活动中解脱 CSS进行解决 浏览器 What HTML 缺陷修复 HTML JavaScript CSS 1 HTML介绍2 JavaScript介绍3 CSS介绍 了解一下 浏览器 What JavaScript JavaScript在HTML页面中的标识格式 小记 Netscape公司研发的一种脚本语言 可以嵌入到Web浏览器中使用 又由于当时Java很火 于是取名为 JavaScript Java Script 简称JS其实JavaScript与Java是两个不同的语言 只是名字相近 1 是一种面向对象的语言 让与HTML紧密结合 网页更加 生动活泼 给HTML页面带来生机2 增加页面逻辑处理 提高网页的可观性3 用途 利用JavaScript轻易的做出亲切的欢迎信息 漂亮的数字钟 有广告效果的跑马灯及简易的选举 还可以显示浏览器停留的时间 浏览器 What JavaScript 简介 浏览器 What JavaScript VBScript JScript JavaScript 由Netscape研发VBScript 由微软研发 用来打击JavaScriptJscript 由微软研发 是VBScript升级版本 但是使用者少三者本质相同 只是所承载的战略意义和目的不同 varStartTime newDate functionshowTime varvTempDate newDate newDate StartTime varhourClk vTempDate getUTCHours varminClk vTempDate getUTCMinutes varsecClk vTempDate getUTCSeconds if hourClk 浏览器 What HTML JavaScript 例子 预览结果示例 HTML JavaScript CSS 1 HTML介绍2 JavaScript介绍3 CSS介绍 了解一下 浏览器 What CSS 级联样式表 CascadingStyleSheet 简称CSS 又为 风格样式表 StyleSheet 是用来进行网页风格设计的级联样式表 更有效地控制网页外观 精确指定网页元素位置 外观以及创建特殊效果的能力 问 如果一个大型网站 可能有成千上万个页面 每个页面有成千上万个标签元素 针对每个元素都要设置的话 人力几乎不可能 而且容易出错 答 通过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 body background image url fnxn jpg background repeat repeat background color 0099FF 浏览器 What CSS 简单例子 1 图片信息 名称 fnxn jpg高 170px宽 170px 效果图 背景全屏平铺 body background image url fnxn jpg background repeat repeat x background color 0099FF 浏览器 What CSS 简单例子 1 图片信息 名称 fnxn jpg高 170px宽 170px 效果图 x轴方向平铺 空余填充背景色 body background image url fnxn jpg background repeat repeat y background color 0099FF 浏览器 What CSS 简单例子 1 图片信息 名称 fnxn jpg高 170px宽 170px 效果图