H5学习（第一章）实现一个基本的H5页面

2024-10-12 22:08:19

小编这次刚接触H5，现在编写一段基本的H5程序,体会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>

3、在ie6下的运行效果图如下：

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>实现效果如下图

4、综上两个步骤可以看出新旧标签的替换原来的html代码 <div id="header"></div> 修改成H5代码<header><header>用h5标签是因为浏览器可以知道标签的真正意义，而id却是做不到的。