小编这次刚接触H5，现在编写一段基本的H5程序,体会H5的基本语法。
工具/原料
vs2012(本人是习惯的开发工具) 也可以用 Dreamweaver/Editplus/WebStrom/Sublime 等
Html5新增的结构元素
1、H5是html语言最受欢迎的版本之一，支持音频和视频/离线存储/移动端和标签属性。下图是H5新增的结构元素。
测试H5在什么浏览器下可以运行
1、具体代码：<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><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>
2、上述代码中在body 中插入了H5画布标签，画布标签<canvas></canvas>是H5的全新标签。如果使用的浏览器支持H5的新特性，择执行的结果会是一个黄色矩形的效果，提示，运行第一步， 在IE11下的运行效果图如下
3、在ie6下的运行效果图 如下：
4、小编测试用的是IE11，除了该浏览器之外 Chrome/Firefox浏览器也支持H5
H5新元素分栏设计
1、小编现在要编写一段基本的H5程序，实现页面内容的分栏显示。分栏功能是页面布局的基本，本案例将页面分为上、中、下3个部分。设计师通常对这3个部分进行如下规划：上部分：显示导航中部分：又分为两个部分，其中左边设置菜单，右边显示文本内容。下部分：显示页面版权信息
2、实现过程：<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><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>实现效果如下图
3、其实对于上述代码中全新的H5元素来说使用Htm盟敢势袂l元素进行修改也可以实现上述的分栏效果。具体代码如下：<html xm造婷用痃lns="http://www.w3.org/1999/xhtml"><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>
4、综上两个步骤可以看出 新旧标签的替换 原来的html代码 <div id="header"></div> 修改成H5代码<header><header>用h5标签是因为浏览器可以知道标签的真正意义，而id却是做不到的。
