一般一份标准的、空白的 HTML 模板如下所示。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="手机电视 视频 联通 包月 免费" />
<meta name="description" content="为手机终端提供流畅稳定、丰富多彩的在线视频播放业务。" />
<meta name="viewport" content="width=320,user-scalable=0,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0" />
<title>悦TV 2013</title>
<noscript>
你的浏览器当前不支持 JavaScript。如要享受本网站服务，你需要在浏览器设置中启用手机的 JavaScript 支持。
<meta http-equiv="refresh" content="3;url=http://baidu.com" />
</noscript>
<link type="text/css" rel="stylesheet" href="gallery_temp.css" />
<script src="/yuetv/cdn/sea.js"></script>
<script></script>
<!--网站图标-->
<link type="image/x-icon" href="images/favicon.ico" rel="icon" />
<link type="image/x-icon" href="images/favicon.ico" rel="shortcut icon" />
</head>
<body>
<!-- HTML 正文 -->
</body>
</html>
针对该 HTML 文件，我们详细介绍如下。
- 文件最开始处，说明 HTML Document Type 文档类型。<!DOCTYPE html> 符合了 HTML5 的文档声明。
- 规定使用 UTF8 编码，避免乱码。<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />。不建议是 GB2312 或 GBK 编码。
单个标签提倡闭合标签，如 <meta name="keywords" />。 - 为提高 SEO 的 PR 值，填写 <meta name="keywords" /> <meta name="description" /> 项，分别是关键字和描述1。
限定页面不缩放2，页面宽度为 320 像素。<meta name="viewport" content="width=320,user-scalable=0,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0" />。 - <title>TV 2013</title> 设置网页标题。下方的 <link type="image/x-icon" href="images/favicon.ico" rel="icon" /> <link type="image/x-icon" href="images/favicon.ico" rel="shortcut icon" /> 设置网站图标。
- 推荐页面与样式分离，即使用 <link type="text/css" rel="stylesheet" href="gallery_temp.css" /> 引入外部 CSS 样式文件。
- 推荐页面与行为分离，即<script src="/yuetv/cdn/sea.js"></script>
- 推荐样式放在 <head>，JS 脚本放在底部。这样不仅加载性能会好一点，而且也不会出现找不到 DOM 元素的错误。
Ver 2.0
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>南广 Web UI Base</title>
<meta name="keywords" content="悦TV 手机电视 南广文化 SMC 视频 联通 包月 免费" />
<meta name="description" content="悦TV”是南方广播影视传媒集团联合广东联通共同运营推出的视频门户品牌（原“南广电视”）,为手机终端提供流畅稳定、丰富多彩的在线视频播放业务。" />
<meta name="author" content="jiexiong sp42 " />
<meta name="viewport" content="width=320,user-scalable=0,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0" /><!--宽度 320px -->
<noscript>
你的浏览器当前不支持 JavaScript。如要享受本网站之服务，你需要在浏览器设置中启用手机的 JavaScript 支持。
<meta http-equiv="refresh" content="3;url=http://baidu.com" />
</noscript>
<link rel="stylesheet" type="text/css" href="asset/all.less" />
<script src="common/css/less-1.3.3.min.js"></script>
<style type="text/css">
/* 重置浏览器默认样式 */
body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td {
margin: 0;
padding: 0;
}
img {
border: 0;
vertical-align: top;
}
</style>
</head>
<body>
<p>…… ……</p>
<!--[if IE]> IE才看得到，非IE看不到 <![endif]-->
<!--[if !(IE)]><!--> IE看不到，非IE才看得到 <!--<![endif]-->
</body>
</html>
