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。