HTML5+CSS3网页设计与制作(第2版)案例课堂ppt1-24章ppt完整版

编辑点评：HTML5+CSS3网页设计与制作案例课堂ppt

HTML5CSS3网页设计与制作案例课堂(第2版)》以零基础讲解为宗旨，用实例引导读者深入学习，采取“HTML5网页设计→CSS3美化网页→高级提升技能→综合案例实战”的讲解模式，这次小编也为大家准备了1到24章的全部ppt，干货满满，快来下载吧

前端开发与HTML5技术的区别

现在好多人都把HTML5和前端的概念弄混淆了。例如，H5是HTML5的简称，而现在好多人把HTML5看成了是前端开发的代名词。今天小爱同学就为各位讲解一下，到底前端和HTML5有哪些区别？

什么是前端开发

以一个网站为例包括网站设计、前端开发、程序开发等。网站设计就是网站的外观，平面的东西。程序开发也好理解就是功能实现。而前端开发，简单来说，就是把平面效果图转换成网页，把静态转换成动态。

它的工作包括了:切图、写样式、做鼠标效果和图片切换效果等。而优秀的前端开发可以保障实现这些效果的同时，即不能影响网站的打开速度、浏览器兼容性还有搜索引擎的收录，还可以让用户体验更加舒适，

使网站在访问中显得更精细、更用心。访客使用起来更简便。另外，现在前端工作还不仅仅只是网页的制作，还有微网站、APP的制作，游戏制作，例如可以将你开发的Web页面直接打包成手机使用的APP应用，游戏的互动界面更是以前端开发技术为主。

前端开发学习什么？

学习HTML、CSS和DIV+CSS技术用来制作Web页面;学习Java、DOM、BOM等用建立开发基础;学习 photoshop和Axure等软件应用，完成页面UI设计;也要认识一下NodeJS和PHP加上数据库等这样的后端语言，

方便前后端开发配合;学习 HTML5、CSS3、响应式页面布局、微网站制作等开发移动互联网的应用;

像Ajax、JQuery、jQueryMobile、Bootstrap、AngularJS等更是前端开发必学的高级技术;HTML5地理位置应用、离线应用、webworker多线程实现、websocket、跨平台开发技术和webAPP开发等，

这些企业级应用技术也是现在开发的主流;现在前端开发最热门、要人最多，就是使用canvas开发网页游戏动画，以及会用 Cocos2d-js制作游戏等开发。

什么是HTML5

HTML5就是HTML最新标准，是现在Web程序开发的核心、标准通用标记语言下的一个应用HTML的第五次重大修改，这是一项推荐标准。虽然 CSS3和HTML5是两个语言，但通常说HTML5也都泛指包括CSS3，

因为它们两个常在一起配合使用的。当然还不指这些，从技术本身分析来看，现在完成一些页面制作、WebAPP、微网站开发以及网页游戏等，现在都是使用HTML5标准完成的。虽然开发这类的应用其实是以JS为主，

但因为HTML5 这个概念很流行，所以微网站开发、WebAPP或是微网站等应用，很多人都会说使用HTML5开发。

前端与HTML5的区别？

现在好多人都把HTML5和前端的概念弄混淆了。例如，H5是HTML5的简称，而现在好多人把HTML5看成了是前端开发的总称。HTML5其实只是前端开发中重要的一部分技术，是现在前端开发的标准组件，

特别是在移动端的特效开发、游戏开发，以及APP的开发方向上非常流行。如果把前端开发比作要建设的一座“大厦”，HTML5就相当于“钢筋水泥”。现在好多人都说开发“XX功能”使用“HTML5”技术，

其实理解的有一些问题，他们所说的HTML5其实说的就是前端技术，只不过HTML5这个词比较活跃也比较流行，所以多数人都将前端技术认为成了HTML5了。

通过以上的讲解，相信大家都已经对前端有了一个深刻的认识了吧！如果你是了解过Web前端的人，那么你就有一颗想转行的心，因为相比于其他行业，web前端相对容易只要你有过硬的技术，有足够的项目实战经验，

很容易就拿到高薪，再加上如今互联网行业发展形势大好，软件开发人员匮乏，未来几年前端开发都将是高薪行业！

ppt素材预览

CSS3新增伪类有那些？

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled、:disabled 控制表单控件的禁用状态。
:checked，单选框或复选框被选中。

请用CSS实现：一个矩形内容，有投影，有圆角，hover状态慢慢变透明。

css属性的熟练程度和实践经验

描述下CSS3里实现元素动画的方法

动画相关属性的熟悉程度

html5\CSS3有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，地理定位等功能的增加。
* 绘画 canvas 元素
用于媒介回放的 video 和 audio 元素
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
语意化更好的内容元素，比如 article、footer、header、nav、section
表单控件，calendar、date、time、email、url、search
CSS3实现圆角，阴影，对文字加特效，增加了更多的CSS选择器 多背景 rgba
新的技术webworker, websockt, Geolocation