H5代码模板
Default Page Title
这个代码为了兼容IE浏览器，所以加入Google托管的HTML5shiv文件。其次是我们经常用到的最新的jQuery 1.8.2库。
CSS RESET
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
}
html { height: 101%; } /* always display scrollbars */
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, Verdana, sans-serif; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
input { outline: none; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
CSS浏览器复位样式代码，这个已经是支持HTML5的Reset。
Clearfix 清除浮动
.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }
/* IE 6/7 */
.clearfix { zoom: 1; }
清除浮动是前端人员必须知道的
CSS3 渐变（CSS3 Gradients）
background-color: #000;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#000');
background-image: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#000));
background-image: -webkit-linear-gradient(top, #bbb, #000);
background-image: -moz-linear-gradient(top, #bbb, #000);
background-image: -ms-linear-gradient(top, #bbb, #000);
background-image: -o-linear-gradient(top, #bbb, #000);
background-image: linear-gradient(top, #bbb, #000);
这是比较全面的浏览器兼容的CSS3渐变代码，分享几个网站
colorzilla
css-tricks
CSS3 Gradient (中文)
CSS3 Transforms
-webkit-transform: perspective(250) rotateX(45deg);
-moz-transform: perspective(250) rotateX(45deg);
-ms-transform: perspective(250) rotateX(45deg);
-o-transform: perspective(250) rotateX(45deg);
transform: perspective(250) rotateX(45deg);
这个CSS3 Transforms（转换变形）代码很少用到，因为浏览支持不多，但它出来的效果却很强大。
CSS3 Transforms在线工具
@Font-Face
@font-face{
font-family: 'MyFont';
src: url('myfont.eot');
src: url('myfont.eot?#iefix') format('embedded-opentype'),
url('myfont.woff') format('woff'),
url('myfont.ttf') format('truetype'),
url('myfont.svg#webfont') format('svg');
}
h1 { font-family: 'MyFont', sans-serif; }
这个主要是用于嵌入字体的模块，一般适用于嵌入文件较小的字体，中文字体很大，所以很少被嵌入。
延伸学习
HTML5嵌入媒体 (HTML5 Embedded Media)
HTML Meta标签（用于响应性布局）
注意：viewport 后面加上 minimal-ui 在safri 体现效果
这是通用的H5 meta标签，还有其他的meta标签的用法与含义：
1、隐藏状态栏/设置状态栏颜色：
2、safri 添加到主屏界面的显示标题：
3、忽略自动识别数字为电话号码：
4、忽略自动识别邮箱账号：
5、常用浏览器全屏设置：
///////////////////////////////////////////////////////////////////////////////////////////