您的位置：首页 > Web前端 > HTML5

HTML5程序的书写样式

2016-06-11 10:57 453 查看

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。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航