您的位置:首页 > 办公文档 > 办公文档 >
H5学习(第一章)实现一个基本的H5页面图文教程
时间:2016-11-16 09:28来源:文库分享网 作者:wkfxw.com 点击:

小编这次刚接触H5,现在编写一段基本的H5程序,体会H5的基本语法。

内容来自www.wkfxw.com

H5学习(第一章)实现一个基本的H5页面


工具/原料

vs2012(本人是习惯的开发工具) 也可以用 Dreamweaver/Editplus/WebStrom/Sublime 等

Html5新增的结构元素

H5是html语言最受欢迎的版本之一,支持音频和视频/离线存储/移动端和标签属性。下图是H5新增的结构元素。

H5学习(第一章)实现一个基本的H5页面

测试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>

H5学习(第一章)实现一个基本的H5页面

上述代码中在body 中插入了H5画布标签,画布标签<canvas></canvas>

是H5的全新标签。如果使用的浏览器支持H5的新特性,择执行的结果会是一个黄色矩形的效果,提示,

运行第一步, 在IE11下的运行效果图如下

H5学习(第一章)实现一个基本的H5页面

在ie6下的运行效果图 如下:

H5学习(第一章)实现一个基本的H5页面

小编测试用的是IE11,除了该浏览器之外 Chrome/Firefox浏览器也支持H5

H5学习(第一章)实现一个基本的H5页面

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学习(第一章)实现一个基本的H5页面

其实对于上述代码中全新的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>

H5学习(第一章)实现一个基本的H5页面

综上两个步骤可以看出 新旧标签的替换 原来的html代码 <div id="header"></div> 修改成H5代码

<header><header>

用h5标签是因为浏览器可以知道标签的真正意义,而id却是做不到的。

注意事项

对于html5的标签可以去网上百度教程里学习

首发

0%
(0)
0%
(0)
最新评论
选择评论类型:
验证码:点击我更换图片
推荐文章

关于我们 | 信息反馈 | 网站地图 |文库提交