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