HTML5+CSS3 Web前端设计基础教程 第3版 课件 第1章 Web前端职业前景与重要理念.pptx

第1章本章将从职业发展前景出发，立足职位需求，向读者介绍有关Web前端所涉及的入门知识。Web前端职业前景与重要理念

1.1了解Web前端工程师表1-1主流招聘网站职位需求量对比招聘网站“Web前端工程师”职位需求数量“Java工程师”职位需求数量“PHP工程师”职位需求数量前程无忧（/）11207个37965个7050个备注：数据参考时间点2020年3月1日，地域范围：北京、上海、广州、深圳

1.1了解Web前端工程师1．前景（1）支持HTML5的设备快速增长（2）大面积使用HTML5（3）知名企业关注HTML51.1.1HTML5前端开发的前景与必要认知

1.1了解Web前端工程师2．认知（1）认知HTML超文本标记语言（HyperTextMarkupLanguage，简称为HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。

1.1了解Web前端工程师图1-1百度网站首页的源代码

1.1了解Web前端工程师（2）认知HTML简单来说，HTML5是对HTML标准的第五次修订，其主要的目标是将互联网语义化。图1-3围住神经猫（html5小游戏）图1-4微信小程序“跳一跳”

1.1了解Web前端工程师狭义的HTML5HTML5草案的前身名为WebApplications1.0，该规范定义了第五次重大版本，在这个版本中新功能不断推出，以帮助Web应用程序的作者，努力提高新元素互操作性。广义的HTML5广义的HTML5包括HTML、CSS和JavaScript在内的一套技术组合，其目标是减少浏览器对于插件的依赖。

1.1了解Web前端工程师1.1.2认识网页的构成元素1．网页2．网站3．首页4．静态网页和动态网页5．网页的构成元素

1.1了解Web前端工程师图1-5网页构成元素图像文本链接图像链接借助JavaScript实现的图像滚动效果表单5．网页的构成元素（1）文本（2）图像（3）超链接（4）表单（5）动画（6）音频和视频

1.1了解Web前端工程师1.1.3了解专业术语1．WWWWWW是环球信息网的缩写，英文全称为“WorldWideWeb”，中文名字为“万维网”。2．InternetInternet（互联网）是网络与网络之间所串连成的庞大网络，这些网络以一组通用的协议相连，形成逻辑上的单一巨大国际网络。3．W3CW3C英文全称为WorldWideWebConsortium（万维网联盟），它是Web技术领域最具权威和影响力的国际中立性技术标准机构。4．HTTPHTTP是HypertextTransferProtocol的缩写，即超文本传输协议。

1.1了解Web前端工程师5．URL统一资源标识符（UniformResourceLocator，URL），这是一个世界通用的负责给万维网上每个“资源”定位的系统。6．DNSDNS（DomainNameSystem，域名系统）。通过主机名，最终得到该主机名对应的IP地址的过程叫做域名解析。7．JavaScriptJavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，它的解释器被称为JavaScript引擎。8．CSSCSS（CascadingStyleSheets，层叠样式表）是一种用来表现网页样式的语言，能够对网页中的对象的位置排版进行精确控制。

1.2重要理念——表现和结构相分离1．什么是“表现和结构相分离”内容：内容就是页面实际要传达的真正信息，包含数据、文档或者图片等。结构：盛装内容的框架。样式：用来改变内容外观的东西，称为外在表现。行为：行为就是对内容的交互操作。1.2.1体验“表现和结构相分离”

图1-6MIDCENTURYMODERN样式主题图1-7AROBOTNAMEDJIMMY样式主题1.2重要理念——表现和结构相分离2．体验“表现和结构相分离”

1.2重要理念——表现和结构相分离图1-8Web标准示意图1.2.2认识WEB标准

1.2重要理念——表现和结构相分离1．结构标准结构标准其实指的就是编写网页的语言标准，即超文本标识语言（HyperTextMarkupLanguage，缩写为：HTML）。2．表现标准CSS（CascadingStyleSheets，层叠样式表）它是一种用来表现HTML等文件样式的计算机语言，它的主要优点是提供了便利的更新功能。3．行为标准（1）DOMDOM（DocumentObjectModel，文档对象模型）是