小编这次刚接触H5,现在编写一段基本的H5程序,体会H5的基本语法。
内容来自www.wkfxw.com
vs2012(本人是习惯的开发工具) 也可以用 Dreamweaver/Editplus/WebStrom/Sublime 等
H5是html语言最受欢迎的版本之一,支持音频和视频/离线存储/移动端和标签属性。下图是H5新增的结构元素。
具体代码:
<!DOCTYPE html>
<html xmlns=";>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>监测浏览器是否支持html5</title>
<style>
body {
font-size:12px;
}
canvas {
border:1px solid #ccc;
background:#ffd800;
}
</style>
</head>
<body>
<%--浏览器支持的话会出现一个矩形,不支持的话会出现下面那句话--%>
<canvas id="mycanvas" width="200" height="200">
当前浏览器不支持全新的画布标签
</canvas>
</body>
</html>
上述代码中在body 中插入了H5画布标签,画布标签<canvas></canvas>
是H5的全新标签。如果使用的浏览器支持H5的新特性,择执行的结果会是一个黄色矩形的效果,提示,
运行第一步, 在IE11下的运行效果图如下
在ie6下的运行效果图 如下:
小编测试用的是IE11,除了该浏览器之外 Chrome/Firefox浏览器也支持H5
小编现在要编写一段基本的H5程序,实现页面内容的分栏显示。分栏功能是页面布局的基本,本案例将页面分为上、中、下3个部分。设计师通常对这3个部分进行如下规划:
上部分:显示导航
中部分:又分为两个部分,其中左边设置菜单,右边显示文本内容。
下部分:显示页面版权信息
实现过程:
<!DOCTYPE html>
<html xmlns=";>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>页面结构</title>
<style type="text/css">
header, nav, article, footer {
border: solid 1px #666;
padding: 5px;
}
header {
width: 500px;
}
nav {
float: left;
width: 60px;
height: 100px;
}
article {
float: left;
width: 428px;
height: 100px;
}
footer {
clear: both;
width: 500px;
}
</style>
</head>
<body>
<header>
header 头部部分
</header>
<nav>
nav 菜单导航说明部分
</nav>
<article>
article 内容说明部分
</article>
<footer>
footer 底部说明部分
</footer>
</body>
</html>
实现效果如下图
其实对于上述代码中全新的H5元素来说使用Html元素进行修改也可以实现上述的分栏效果。具体代码如下:
<html xmlns=";>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html页面结构</title>
<style>
#header, #nav, #article, #footer {
border: solid 1px #666;
padding: 5px;
}
#header {
width: 500px;
}
/*左边菜单*/
#nav {
float: left;
width: 60px;
height: 100px;
}
/*右边菜单*/
#article {
float: left;
width: 428px;
height: 100px;
}
#footer {
clear: both;
width: 500px;
}
</style>
</head>
<body>
<div id="header">
导航部分
</div>
<div id="nav">
左边内容
</div>
<div id="article">
右边内容
</div>
<div id="footer">
底部
</div>
</body>
</html>
综上两个步骤可以看出 新旧标签的替换 原来的html代码 <div id="header"></div> 修改成H5代码
<header><header>
用h5标签是因为浏览器可以知道标签的真正意义,而id却是做不到的。
对于html5的标签可以去网上百度教程里学习
首发