HTML5基础课堂，无技术的请进

以下是对HTML5的一个基本的认识

 

HTML5的来源历程

可能很多人会熟悉2005年以前出现的一个名词——网页设计与制作。而现在越来越多的人知晓H5的存在，那是因为网站的制作越来越受到人们的重视，社会化风也越来越细。2005年的时候，“WEB前端开发工程师”一词就开始出现在各个一线城市。2008年。HTML横空出世，2009年，HTML5技术开始在一些顶尖的公司运用，2012年，逐渐普及，2014年迅速发展，至今，H5的需求一直不下。

 

HTML5是做什么的？

 

一句话概括：不涉及数据层面，单纯的实现我们现在所能看到的所有网站（设计师将一张设计好的网页图片交给H5前端开发工程师。前端开发工程师的职责就是将这张图用代码实现出来，比方说在一个地方放置一个块，给一个块设置颜色，调整字体的大小，调整图片的大小，让图片动起来）。

 

H5的技术模块

 

HTML5=HTML+CSS+JavaScript

HTML是指结构

CSS是指样式

JavaScript，即JS，指的是行为

 

1．             结构：在整个网页中有标题、列表、图片等

2．             样式；标题文字的大小、颜色、字体。图片的大小、某块的背景色或背景图等

3．             行为：指的是页面的动画效果。比如页面上飘动的广告、图片的放大，现在比较火的动画效果是报纸、破屏等

 

 

HTML5与网页设计与制作的对比

NO1：

原有的网页设计与制作，会涉及一部分设计工作，并将美工图实现成网页。通常使用的工具是网页三剑客——PhotoShop、Flash、Dreamweaver。而在当中的结构实现，通常采用的是table布局；而在HTML5当中结构的实现，采用的是DIV+CSS方式的布局，因此，现在已经有很多人放弃使用Dreamweaver了，取而代之的是内存占用小，开发速度快的文本类编辑器。而Flash，在与HTML5的大战当中战败，当前已经退出了移动端以及电视平台的市场争夺，在PC平台也越来越少。原来的网页三剑客只剩下一个PS，而在前端工作的要求中，需要掌握基本的切图即可。

 

下面简单介绍一下开发一个完整的网页的大概步骤，相信看完这些你就会知道web前端开发工程师在其中的职责了

 

 

1，首先确定网站的主题，即使要知道你想做什么网站，用户群是谁，网站需求是怎么样的。

2，做出要开发网页的草图，要不然就没有办法进行下一步的代码编辑工作（这里是为UI设计师的工c作，需要懂得PS，AI，CD，或者FW，起码精通一种）。

3，网页的设计好了之后，那么就是切图了，把代码实现不了的东西切成图片，作为background来使用（涉及CSS）

4，将设计图通过html+css+javascript转换成代码格式（这里就是Web前端工程师的工作了，而这也就是网页设计中的前台编码部分）。

5，终于出现一个网页了，但是这个时候这个网页不会动态生成其他内容。所以——后台编码这个时候就出现了——PHP，JSP，.net，这些都是后台编程语言，当然在第五之前我还省略了一部，那就是数据库设计。

6，前台后台都搞定了，那么测试啦，测试完了就可以上线了，中途还有各种维护~~

 

在网页设计的整个流程，总的来说，有三部份的工作，一个是UI设计，一个是前端编程，还有一个是后台编程。通常web开发工程师就是负责前台页面制作的的，当然还会有“网站测试”和“修改”的部分这会需要一点美感加上更多的逻辑思维为主导。

 

NO2：

原有的网页设计与制作，主要针对PC平台，移动互联网的飞速发展，也使得HTML5的地位迅速提升。移动设备有其特殊的开发要求，原有的网页设计与制作，早已无法满足开发的需要。我们现在经常见到的H5小游戏、H5广告都是HTML5技术的应用。当然还有PC端的很多网站现在都是H5技术的产品。

 

以上就是对H5入门的一个简单了解，不正之处欢迎指教！