HTML5 Boilerplate只是一个单纯的HTML模版,它的目的更多的是一个页面编程的标准,非常值得借鉴应用。、、
Boilerplate 的代码如下:
第一行,<!doctype html>文档类型使用了HTML5文档声明,这个明显简单明了
<meta charset="utf-8"> 定义字符集
<meta http-equiv="x-ua-compatible" content="ie=edge">这是个是IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式,以此来解决部分兼容问题,例如模拟IE7的具体方式如下:< meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />
还可以有< meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />此处是谷歌做了个外挂:Google Chrome Frame。这个插件可以让用户的IE浏览器外不变,但用户在浏览网页时,实际上使用的是Google Chrome浏览器内核,而且支持IE6、7、8等多个版本的IE浏览器.这样写可以达到的效果是如果安装了GCF,则使用GCF来渲染页面,如果为安装GCF,则使用最高版本的IE内核进行渲染。
<meta name="description" content="网页描述文字">
要达到自动搜索引擎真正能方便地搜索到你的网页还得注意以下几点:
A、既要定义meta标记项,又要将首页正文的前200个字符定义成反映主页主题的文字。因为有些导航台在标引meta项中的关键词的同时,还要标引正文中的前200个字符。如:altavista。所以,有些人在注册完导航台后去检查注册结果时,发现导航台中的描述并不是你所希望的,而是诸如版权说明之类的文字。产生这一现象的原因就是没有注意到这一点。
B、将定义关键词的meta标记项放在定义描述的meta项之前。如:
<meta type="keywords" content=".......,...,...">
<meta type="description" content="...,....,...">
C、将最重要的关键词放在最前面,让相关的关键词相邻。全小写与首字母大写并存,因为有的导航台在标引时对字符的大小写是敏感的。包括标点符号不要超过250个单词
D、首页最好不用frame结构,因为frame将屏幕划分成多个窗口后,导航台不能智能地选择正确的窗口中的主页去标引。
顺便一提:一个页面过上一定的时间,自动转到另一个页面或者站点去,如:< Meta HTTP-EQUIV="refresh" content="6; url=http://hi.baidu.com/tesalo/" >content中的6表示时间,单位为秒,url=后面是你要转向的网址,若是与你当前网页在同一目录下,可以直接写上文件名
<meta name="viewport" content="width=device-width, initial-scale=1">viewport指定移动端不对网页进行缩放。
<link rel="apple-touch-icon" href="apple-touch-icon.png">可以在iPhone/iPod Touch上将网页"添加至主屏幕"时,去掉icon上那恶心的透明层
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
基础浏览器CSS重置,标准化边距等。CSS内都有具体的文档说明。
<script src="js/vendor/modernizr-2.8.3.min.js"></script>Modernizr是一个开源的JS库,它使得那些基于访客浏览器的不同(指对新标准支持性的差异)而开发不同级别体验的设计师的工作变得更为简单。它使得设计师可以在支持HTML5和CSS3的浏览器中充分利用HTML5和CSS3的特性进行开发,同时又不会牺牲其他不支持这些新技术的浏览器的控制。
基础浏览器CSS重置,标准化边距等。CSS内都有具体的文档说明。