1、HTML5代码文件的雏形
(1)、最简单的HTML5代码
<!DOCTYPE html>
<meta charset=utf-8 />
<title>最简单的HTML5代码</title>
<p>HTML5是HTML4的下一代标准</p>
(2)、兼容HTML4的代码
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。IE9 以下版本浏览器兼容HTML5的方法,使用百度静态资源的html5shiv包。而HTML4的代码中必须明确使用<html><head><body>等标签,另外为了让旧版本浏览器识别HTML5中新追加的<article>、<section>等标签,因此特意追加上相应的css样式单。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset=utf-8 />
<title>兼容HTML4的代码</title>
<!--[if lt IE9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
<style>
/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
</style>
</head>
<body>
<p>HTML5是HTML4的下一代标准</p>
</body>
</html>
2、智能终端中的HTML5代码文件雏形
以上的HTML5雏形代码如果在手机中使用,显示出来的文字会非常小,尽管可以手动将显示的文字变大,但要求用户每次这样操作总归是不友好的。为了解决这个问题,需要使用viewport,指定阅读网站时最合适的画面大小以及放大比例。如下代码所示进行编辑,打开网页时就能显示合适的大小。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset=utf-8 />
<title>智能终端中的HTML5代码</title>
<!--[if lt IE9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
<style>
/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
p{font-size:12px}
</style>
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<p>HTML5是HTML4的下一代标准</p>
</body>
</html>
可以在meta标签的viewport中指定画面大小、缩放可否、初始显示比例等,指定语法如下:
<meta name="viewport" content="属性1=值1,属性2=值2">
可设置属性为:
(1)、width:宽度。默认值980,范围从200到10000。可指定为device-width,设置为 device-width 可以确保它能正确呈现在不同设备上。
(2)、height:高度。默认值980,范围从223到10000。可指定为device-height,设置为 device-height可以确保它能正确呈现在不同设备上。
(3)、intial-scale:初始缩放比例。默认为将网页充满视界范围。测定范围从minimum-scale到maximum-scale。
(4)、minimum-scale:最小缩放比例。默认为0.25,范围从0到10.0.
(5)、maximum-scale:最大缩放比例。范围从0到10.0.
(6)、user-scalable:是否允许进行缩放,指定yes或no。