web前端概述ppt课件

计算机与信息工程学院 Web系统前端技术 考核方式 1 平时30 编程训练 每周都有 综合训练 2次 1次4月份 为校级团体赛作准备 1次期末前 为下学期MITT团体赛作准备 考勤 不定期进行 其它 校级团体赛 课堂练习 提问情况等 2 期末考试70 暂定闭卷 延续教学安排 答疑和课外辅导 即延续教学安排 面对面答疑17学时 双周的周五3 4节课 工2的4层计算机系机房课后答疑17学时 有问题请及时在BB平台论坛区发帖 因为我每天会浏览多次 肯定及时回帖 课程资源 BB平台的课程文档目录 1 1Web概述 Web的起源可以追溯到1980年TimBerners Lee构建的ENQUIRE项目 详细参见教材第2 3页 英国计算机科学家万维网的发明者 1994年10月非赢利性的万维网联盟W3C WorldWideWebConsortium 在麻省理工学院计算机科学实验室成立 负责WWW技术标准化的协议制定 Web历史大事记录 Web1 0纪元 1994 2001 Web2 0纪元 HTML5纪元 2009 Web1 0纪元 关键词 网页制作 三剑客 特效300例职业名称 网页设计师 页面仔 搞前台的 网页编辑主要技术 HTML CSS Dreamweaver Fireworks Flash市场需求 门户网站 企业网站 个人网站 网页作图软件 Web1 0纪元 前端与后端比较 前端与后端人员配比是1 6左右 薪水比是1 2 Web1 0纪元 前端的领域 2003 FF浏览器 即Firefox Web2 0纪元 关键词 JavaScript Ajax Div Css Web标准职业名称 网页制作工程师 前端开发工程师主要技术 HTML CSS JavaScript市场需求 互联网公司 IT软件公司等 Web2 0纪元 前端与后端比较 前端与后端人员配比是1 3左右 薪水比是3 4 Web2 0纪元 前端的领域 2009 2007年 WebKit开源项目催生了面向移动设备的现代Web应用程序 苹果的Safari 谷歌的Chrome浏览器都是基于这个框架来开发 HTML5纪元 关键词 JavaScript Ajax Web标准 HTML5 CSS3 移动Web 多终端适配职业名称 前端开发工程师 全栈工程师主要技术 HTML CSS JavaScript 服务端脚本市场需求 互联网公司 IT软件公司 电商 金融 智能硬件 全栈工程师 也叫全端工程师 英文FullStackdeveloper 是指掌握多种技能 并能利用多种技能独立完成产品的人 HTML5纪元 前端与后端比较 前端与后端人员配比是2 3左右 薪水比略大于1 1 HTML5纪元 前端的领域 2014 前端行业未来发展 云服务微信平台智能硬件移动HTML5HTML5游戏 关于前端技术 作为计算机 软件程专业的一个方向教学目标 培养专业的前端开发工程师必修技能 HTML CSS JavaScript扩展技能 HTTP协议前端性能优化网络安全与攻击防范服务端开发 基于Node js Web网页设计的 三剑客 前端技术的参考书 非常经典 第1讲Web前端开发概述 本讲学习目标 Web前端开发工程师应掌握以下内容 了解Web发展史 了解Web前端开发工程师职业需求掌握Web网站相关的基本概念 理解Web前端开发技术及其在Web网页中的作用 了解常用的Web前端开发工具 浏览器工具 并学会使用 1 1Web概述 Web特点 详细参见教材第3 4页 1 Web是易导航和图形化2 Web是具有平台无关性3 Web是支持分布式结构4 Web是具有动态性5 Web是具有交互性 移动应用开发优势 Web工作原理 Web前端开发的三层结构 内容 HTML 外观 CSS 交互 Javascript Web网页设计的 三剑客 HTML是网页信息结构基础 CSS是网页表现技术 对网页布局 字体 颜色 背景和其它效果实施更加精确的控制 JavaScrpt和HTMLDOM是网页行为 实现网页的动态 交互功能 HTML HyperTextMarkupLanguage 超文本标记语言 用来描述页面的内容和结构 HTML是构成Web页面 Page 的基础 最新版本是HTML5 HTML超文本标记语言的发展历史 HTML1 0 1993年6月作为互联网工程工作小组 IETF 工作草案发布 HTML2 0 1995年11月作为RFC1866发布 在RFC2854于2000年6月发布之后被宣布已经过时 HTML3 2 1996年1月14日发布 W3C推荐标准 HTML4 0 1997年12月18日发布 W3C推荐标准 HTML4 01 1999年12月24日发布 W3C推荐标准 HTML5 2008年1月22日发布草案 之后不断完善 2014年10月正式发布 HTML5终于修成正果 Web网页设计相关概念 统一资源定位符统一资源定位符 UniformResourceLocator URL 也被称为网页地址 如同在网络上的门牌 是因特网上标准的资源的地址 Address 协议类型 服务器地址 端口号 路径 文件名http info cern ch www20 0002 Web网页设计相关概念 续 网站 在因特网上 根据一定的规则 使用HTML等工具制作的用于展示特定内容的相关网页的集合 网页 构成网站的基本元素 首页 也称主页 即一个网站的入口网页 超链接超链接 HyperLink 是指从一个网页指向另一个目标的连接关系 这个目标可以是另一个网页 也可以是相同网页上的不同位置 还可以是一个图片 一个电子邮件地址 一个文件 甚至是一个应用程序 超链接在本质上属于一个网页的一部分 它是一种允许我们同其他网页或站点之间进行连接的元素 例如 百科 一个简单的HTML页面 页面标题这是内容 在文本编辑器 例如 SublimeText3 中编写 保存为 html结尾的文件在浏览器 例如 GooleChrome 中打开查看效果 如何编写HTML页面 htm html都是静态网页的后缀名 二者没有区别 HTML标签 HelloWorld 开始标签 结束标签 HTML标签是由尖括号包围的关键词 比如HTML标签通常是成对出现的 比如和开始和结束标签也被称为开放标签和闭合标签 标签嵌套 标题介绍文字 使用 标签定义标题 定义一级标题 定义二级标题 以此类推 标题体现了网页的文档结构 使用标签定义一个段落 是一个块级元素 这意味着它的内容自动地开始一个新行 页面编码 META标签是HTML标记HEAD区的一个关键标签 它位于HTML文档的和之间 有些也不是在和之间 它提供的信息虽然用户不可见 但却是文档的最基本的元信息 除了提供文档字符集 使用语言 作者等基本信息外 还涉及对关键词和网页等级的设定 如果是UTF8编码 则在外国人的英文IE上也能显示中文 他们无需下载IE的中文语言支持包 属性 点击这里 属性 属性值 定义超链接href 链接目标的URL 即web页的地址 title 锚文字target blank 转到空白页 HTML注释 xxxxxx代表你要写的注释内容 注释不会在浏览器中显示 和 在html里也是常用的注释 但只能用在js和CSS语言 不对HTML语言起作用 结构 等媒体 等 HTML5新标签 表单类型email range url date time datetime number search等验证required pattern其它placeholder HTML5新增表单属性 不同的浏览器对于HTML标准支持程度不同查看浏览器支持情况可以访问如下网址 浏览器兼容性 清楚了解每一个标签和属性的语义HTML中只描述内容和结构 样式留给CSS手写HTML 避免使用生成工具推荐2个HTML学习的参考网址 HTML TheLivingStandardHTMLTutorials 如何学习HTML CSS 层叠样式表CSS CascadingStyleSheet 级联样式表1 CSS作用可以有效地对页面的布局 字体 颜色 背景和其它效果实现更加精确的控制 CSS 续 2 CSS发展历史CSS1 1996年12月17日发布 W3C推荐标准 1999年1月11日重新修订 CSS2 1999年1月11日发布 W3C推荐标准 CSS2添加了对媒介 打印机和听觉设备 可下载字体的支持 CSS3 将CSS划分为更小的模块 这些模块包括 盒子模型 列表模块 超链接方式 语言模块 背景和边框 文字特效 多栏布局等 JavaScript JavaScript的出现使得网页和用户之间实现了一种实时性的 动态的 交互性的关系 使网页包含更多活跃元素和更加精彩的内容 1 JavaScript由来JavaScript最初由网景公司 Netscape 的BrendanEich设计 是一种由Netscape的LiveScript发展而来的客户端脚本语言 主要目的是为了解决服务器端语言 提供数据验证的基本功能 2 JavaScript组成一个完整的JavaScript实现是由以下3个不同部分组成的 核心 ECMAScript 文档对象模型 DOM 浏览器对象模型 BOM JavaScript案例 HTMLDOM HTMLDOM是DocumentObjectModel文档对象模型DOM结构 以层次结构组织节点或信息片段 教材第13页的例1 3 3的网页就展示了这样的一个目录树型结构 AJAX AJAX即 AsynchronousJavascript XML 异步J