HTML5草案的前身名为 Web Applications 1.0，于04年被WHATWG提出，于07年被W3C接纳，并成立了新的 HTML 工作团队。
HTML5手机应用的最大优势就是可以在网页上直接调试和修改。原先应用的开发人员可能需要花费非常大的力气才能达到HTML5的效果，不断地重复编码、调试和运行，这是首先得解决的一个问题。因此也有许多手机杂志客户端是基于HTML5标准，开发人员可以轻松调试修改。
HTML5将会取代99年制定的HTML 4.01、XHTML 1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求，为桌面和移动平台带来无缝衔接的丰富内容。
HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如video、audio和canvas 标记。HTML5还引进了新的功能，可以真正改变用户与文档的交互方式
CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。
1、首先新建一个html5文档，完成基本代码编写，如下图所示。
2、然后新建一个长100像素，高50像素背景为红色的长方形图层。
3、接着通过输入“border-radius:50%/50%”属性，如下图所示，将长方形图层设置成一个椭圆形。
4、接下来就是将椭圆旋转了，用“transform:rotate(30deg)”将椭圆旋转30度。
5、这样就实现了用css3将椭圆旋转，如下图所示预览即完成了。
1.静态布局——最传统的布局方式，网页中所有尺寸都是由px作为单位，设置了min-width,如果宽度小于就会出现滚动条，如果大于这个宽度则内容居中外加背景
实现方式：PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；
移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。
优点：采用之前的css2的布局·方式，布局简单，没有兼容性问题。
缺点: 在手机端不能合理的显示，移动端不能使用pc端页面，需要再写一个布局来呈现。
实践案例：Float 布局、绝对布局
2.自适应布局
——可以看成是不同屏幕下由多个静态布局组成的。自适应布局是为不同的屏幕分辨率分别定义不同的布局。改变屏幕分辨率可以切换不同的静态布局（页面元素位置可能发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。自适应布局页面里面元素的位置会变化，很好的解决了流式布局中的大屏空间利用率不高弊端。
注：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。
3.流失布局（百分比布局 %）
网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用),分别为不同的屏幕设置布局格式，当屏幕大小改变时，会出现不同的布局，意思就是在这个屏幕下这个元素块在这个地方，但是在那个屏幕下，这个元素块又会出现在那个地方。只是布局改变，元素不变。可以看成是不同屏幕下由多个静态布局组成的。
而流式布局的特点是随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整，这个正好与自适应布局相补。使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”
注：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。
主要实践案例：左侧固定+右侧自适应、左右固定宽度+中间自适应、圣杯布局、双飞翼布局
4.响应式布局（媒体查询）
——通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不一样展示给用户的网页内容也不一样.利用媒体查询可以检测到屏幕的尺寸(主要检测宽度)，并设置不同的CSS样式，就可以实现响应式的布局。主要依靠是css的媒体查询。
注：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。
5.弹性布局
——rem/em、flex布局
![js中temp=deck[i], deck[i]=deck[r], deck[r]=temp怎么理解？](/aiimages/js%E4%B8%ADtemp%3Ddeck%5Bi%5D%2C+deck%5Bi%5D%3Ddeck%5Br%5D%2C+deck%5Br%5D%3Dtemp%E6%80%8E%E4%B9%88%E7%90%86%E8%A7%A3%EF%BC%9F.png)
