互联网从诞生到繁荣的每个阶段，HTML这个简单而强大的标记语言都发挥着举足轻重的作用。从简单的新闻列表到复杂的在线表格应用，结合JavaScript、CSS，前端工程师用这些简单的标记创建出一个个改变人们生活的应用。
一、引言
现在使用最广泛的HTML4.0.1标准已经十余年没有重要更新，对于构建复杂的网页应用也越来越显得力不从心。HTML5标准最早在2004年就由WHATWG提出，经过多年的演变及各个浏览器阵营的磨合，主流浏览器制造商都已经实现了主要的HTML5核心。特别是近年来移动互联网的兴起，给HTML5的普及带来了更有利的设备环境和难得的商业契机。
二、HTML5的新特性和优势
Html5新特性主要体现在：语义化标记、Form 表单增强功能、视频/音频、画布（Canvas）、可编辑内容、拖放、稳健的数据存储等方面。HTML5 在网页的应用和表现上，相对于HTML4 提供了更好的支持。
（一）新的语义标签和属性
1、简洁的 DOCTYPE，不使用版本提示，书写的文档将会适用所有版本的HTML。简单易记的语言标签，写法上较之前更为简洁。在 HTML5 中，空标签（如：br、img 和 input）并不需要闭合标签。新增了一些新标签和属性。新标签更具语义性，属性更直白。
2、一些过时的HTML标记将被取消，其中包括纯粹显示效果的标记，比如<font>和<center>；<img>的布局属性：align，border，hspace、vspace，在 HTML5 中已经不支持。它们已经被CSS取代。再比如，HTML5 为表单提供了几个新的属性、input 类型和标签。例如：color，email，date，month，week，time，datetime，datetime-local，number，range，search，tel，和 url等。使用这些标签将大大简化开发复杂度，比如使用date标签，将不再需要利用外包js就可以选择日期。
3、Html5自带表单验证功能，可以减少开发者对表单验证功能的代码编写。
4、脚本和链接无需type属性了，代码可以简化如下：
<link rel=“stylesheet” href=“style.css”/>和<script src=“path/to/script.js”></script>
（二）新增画布canvas
<canvas> 是HTML5新增用来作画的工具。canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域，在页面中插入 canvas 就像插入其他标记一样平常，可以直接绘制形状、图表、动画、游戏、图片作品等。，现在可以不用Flash或其它插件就可以直接在网页上涂鸦了。
（三）丰富的应用程序接口（API）
除了原先的DOM接口，HTML5增加了更多API，如用于即时2D绘图的Canvas API，定时媒体回放，离线数据库存储Web Storage API，通讯和网络的Communication APIS，文档编辑，拖拽控制，浏览历史管理，使用者可共享定位地理位置的GeolocationAPI，为Web应用提供后台处理的能力的WebWorkers API等。
（四）新多媒体方式
使用HTML5的 <audio> 和 <video>标签，将不再需要使用插件或者工具即可直接播放视频和音频。Youtube和Pandora可能有一天会跳过Flash给你带来全新的视频和音频体验，包括定时播放和其它贴心的功能，这一切都得归功于HTML5中的视频和音频标记。
另外，使用preload还可以预加载视频，preload的属性就像它的字面意思那么简单，用户只需要决定是否需要在页面加载的时候去预加载视频。
三、CSS3的新特性和优势
CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括：盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。
（一）CSS3边框border
在CSS3出现之前，使用CSS2制作圆角边框的方法都是制作四个圆角的图片，然后用css2的图像背景技术设置，很浪费精力，但是在CSS3出现之后，一切都变得如此简单。CSS3新增加了一些边框的属性值：border—radius、border—colors、dorderer—image、box—reflect、box—shadow五类属性值。他们分别可以定义圆角框的半径、颜色、图形、投影及阴影，从而能够制作出漂亮、立体感强的按钮或边框。
（二）RGBa
CSS3的RGBa命令新特性可以指定元素属性，允许用户对每个元素进行色彩以及透明度的设置，使其子元素不必改变属性。而原来常用的opacity命令会影响元素及其子元素，对元素进行设置的同时还要对其子元素进行设置。通过设置opacity，即可以轻松设置网页元素的透明度。
（三）CSS3渐变Gradient
Gradient可以提供连续的渐变特效，经常作为投影，CSS3Gradient分为linear-gradient（线性渐变）和radial-gradient（径向渐变）。比如盒子投影的设置，可以给盒子下方的投影设渐变特效，实现绚丽美观的效果。
（四）CSS3动画Animation
Animation是CSS3一个比较新的属性，其具有更强大的功能：动画。在CSS2的时候，开发人员只能通过Javascript来实现动画，现在CSS3提供变形（transform）、转换（transition）和动画（animation）transform：rotate | scale | skew | translate|matrix；旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。
（五）CSS3转换Transform
CSS3的转换transform 属性可以将指定的元素进行2D、3D的旋转，比如，一个盒子的旋转可以设定想要的角度。
（六）CSS3文本Text
CSS3在CSS2原有的文本属性基础上又添加了一些CSS3属性：text—shadow、text—overflow、text一{iU—color、text—align（新添力Ⅱ了start和 end）、text—stroke、text—transform、text—stroke—width、word—wrap、tab—size和text—stroke—color属性。经常被使用到的是text-shadow文字阴影，而这一技术在之前总会被Photoshop处理过的包含文字阴影的图片所代替，CSS3出现之后，一切将只是一行代码的功夫即可完成阴影功能。
（七）Multi—column layout
CSS3新提供的多栏布局选择器无需HTML布局标签即可生成多栏布局，同时‘栏数’、‘栏宽’以及‘栏间距’都是可以自定义的。CSS3还提供了很多新增的选择器实现更多更强大的功能。虽然目前CSS3还有许多没有被浏览器支持的属性和新的语法，但随着时间的推移，浏览器们将会越来越多的支持新的CSS3功能。
四、结束语
HTMI_5是近十年来Web标准最巨大的飞跃，HTML5中创建了新元素新属性，利用这些结构标记能快速开辟出更少类和id标识。一旦熟悉了这些元素的目标，就可以在很短的时间内建立大概的网页结构，从而将web带入一个成熟的开发平台。在web开发中采用CSS3技术将会大大的美化网页，还可以有效地控制页面的布局、颜色、字体、背景和其它特殊效果。只需要一些简单的修改，就可以改变网页的外观和布局。利用好CSS3，你可以更快捷的得到以往用很多插件才能得到的效果。通过使用元素本身来取代大部分图片，网页的加载速度会得到提升，提升网站的加载速度以及网站的SEO权重，同时也能极大的提高程序的性能。
