H5代码模板
<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Default Page Title</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>
这个代码为了兼容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)
<video poster="images/preview.png" width="1280" height="720" controls="controls" preload="none">
<source src="media/video.mp4" type="video/mp4"></source>
<source src="media/video.webm" type="video/webm"></source>
<source src="media/video.ogg" type="video/ogg"></source>
</video>
<audio controls="controls" preload="none">
<source src="music.ogg" type="audio/ogg">
<source src="music.mp3" type="audio/mpeg">
</audio>
<video>，<audio>标签给开发人员提供方便的嵌入媒体方式。
HTML Meta标签（用于响应性布局）
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
注意：viewport 后面加上 minimal-ui 在safri 体现效果
这是通用的H5 meta标签，还有其他的meta标签的用法与含义：
1、隐藏状态栏/设置状态栏颜色：
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
2、safri 添加到主屏界面的显示标题：
<meta name="apple-mobile-web-app-title" content="应用标题">
3、忽略自动识别数字为电话号码：
<meta content="telephone=no" name="format-detection" />
4、忽略自动识别邮箱账号：
<meta content="email=no" name="format-detection" />
5、常用浏览器全屏设置：
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
///////////////////////////////////////////////////////////////////////////////////////////
<!-- 是针对一些老的不识别viewport的浏览器，列如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
