白蕾 郭清菊

【摘要】HTML5和CSS3同为web前端最新的开发技术，HTML5和CSS3完成前端开发是一个非常繁琐需要投入很多精力与耐心的工作过程。本文通过对HTML5和CSS3设计模式进行总结归纳，得出7条设计模式，通过对这7条设计模式的有效组合应用，可以有效提高前端开发的工作效率。

【关键词】HTML5； CSS3； 设计模式

中图分类号：TP393.09 文件标识码： A 文章编号：2095-2163（2016）02-

HTML 5 and CSS 3 design patterns

Bai Lei1 Guo Qing Ju2

（Hainan College Of Software Technology，Hainan Qionghai 571400，China）

【Abstract 】 HTML5 and CSS3 as web Client end are the latest technology. The development of web Client is very tedious， which needs lots of efforts and patience. After summarizing the design patterns of HTML5 and CSS3， the paper proposes seven design patterns in all. By effective combined application of these 7 design patterns， the work efficiency of web Client end development can be effectively improved.

Key words： HTML5； CSS3； design patterns

0 引言

HTML5和CSS3同为web前端开发技术，是新一代网页设计师不可缺少的专业实效应用工具。

HTML5是一种用于描述网页文档的超文本标记语言。2014年10月29日，万维网联盟制定推出了html5标准规范，使其在一度蜂蜜的html4.01之后继而成为万维网新一代核心语言。HTML5具有以下优点：

1）提高可用性和改进用户的友好体验；

2）提供了数个新标签，将有助于开发人员定义重要的内容；

3）可以给站点带来更为丰富的多媒体元素（视频和音频）；

4）可以优势替代FLASH和Silverlight；

5）当涉及到网站抓取和索引时，对于SEO表现友好；

6）可以量应用于移动应用程序和游戏；

7）可移植性好。

1.5 盒子模型设计模式

在这种盒子模型下，html元素的任意属性的属性值均可以单独设置，同时该元素在前段的实际占位并不能只是通过width和height值给出，而是要通过以下运算式运算得出：

1.6 定位设计模式

CSS 有3种基本的定位机制：普通流、浮动和绝对定位。

除非专门指定，否则所有盒子都在普通流中定位。也就是说，普通流中的元素的位置由元素在html5 中的位置参数决定。HTML5的块级元素为从上而下排列，行级元素则是水平排列。

通过使用 position 属性，可……