自动生成html框架（自动生成h5页面）

本篇文章给大家谈谈自动生成html框架，以及自动生成h5页面对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

微信号：cloud7591
如需了解更多，欢迎添加客服微信咨询。
复制微信号

本文目录一览：

• 1、html5开发移动端要用什么框架比较好
• 2、手机html5前端开发用什么框架
• 3、html不用框架能作出框架的效果么?
• 4、HTML的frame框架怎么自适应高度？
• 5、用HTML和JavaScript代码编写一个至少有3个框架的网页：
• 6、主流HTML5移动web开发框架

html5开发移动端要用什么框架比较好

下面给出部分框架的具体优势，比较后可以选出适合自己的

1， jQTouch

jQTouch易用性强，相关文档也很全面。它的特色是在 使用HTML,CSS和JavaScript创建iPhone App方面拥有出色的能力。jQTouch使用渐进增强的方案，在您相应的HTML顶层来实现像iPhone那样的用户体验。它简单易用，提供了一个基础的小工具集以及动画方案，开发人员只需要编程控制其动态行为即可。

不过有简单测试中发现app的性能存在一定的问题，页面在转换时可能出现跳转或者缺失的情况，以及在响应tap事件的时候还有周期性延迟。该项目在技术上还活跃着，不过原作者的进展和部署都显得太慢了。

只需要遵守MIT的license许可就可以使用jQTouch了

2， jQueryMobile

jQuery Mobile是这个领域的新丁，2010年8月才正式宣布成立，但是已经迅速进展到功能丰富的Alpha 2测试版本了。jQuery Mobile跟jQTouch相比很相似，但是更加标准，更有适应性，感觉很像jQTouch的后继版本，对用户接口和style的支持范围更加宽广了。

jQuery Mobile的性能是不稳定的，（虽然比jQTouch好一些）特别是在响应TAP事件的动画延迟补偿的时候。此外，还缺少一些关键的程序hook，所以不能轻松地让app更加具有动态性能。例如：当一个页面启动的时候事件触发了，这时候却无法通知响应的代码页面将转向哪个用户接口，也不能传递附加的信息给处理模块。针对上述问题，创建工作区来解决还是可行的，但是在这里作者希望其将来的版本能从jQTouch那里学习一下，并把现在的功能缺陷处理掉。

jQuery Mobile的相关文档资料很零散但是有所改进，,（请注意，jQuery Mobile是和jQuery UI相辅相成的，并不是建在单纯jQuery之上的）

想获得jQuery Mobile只需获得MIT或者GPL2 license。

3， Sencha Touch

这是个与Ext JS框架完全不同的产物，其方案与jQTouch/jQuery完全不同：Sencha生成自己的DOM（基于用JavaScript创建的对象）代替了先前存在的HTML增强方式。如此，使用Sencha工作的感觉不像是web编程，而更像是使用Java或者Flex等技术来做app的样子。比起jQuery来，Sencha的感觉更像是YUI。

sencha跟其竞争对手们相比，扩展性强了很多：它拥有大量的用户接口组件，直接的iPad支持，拥有JSON和HTML5线下存储技术使得存储和数据绑定更加方便。（使用Sencha的数据结构来操作app的数据十分酷~它可以实时响应列表的更新）此外，Sencha还是唯一在工具栏上支持内嵌的对象支持，其他方式都是滚轮列表的样子。

在测试程序中，使用Sencha与jQTouch/jQuery相比，虽然app很明显地不那么轻量级，但是其性能和可靠性方面明显提高了，不过其初始化加载时间略慢。

当使用库library或者框架frame进行开发的时候，不遵守框架或者用自己的方式通常都不会获得成功。但Sencha的支持范围足够宽广，这意味着可以使用Sencha的开发方式来实现任何需求。

在文档方面，Sencha做的不太好，虽然很广泛，但是又有很多旧版本的老漏洞没有及时更新，在这些框架中与bug作斗争，调试过程浪费了很多时间，因为文档不够健全，很多问题难以追踪或理解。而在开发者论坛响应作者提问的频率还算较高，不过最终感觉还是不太够。Sencha提供的付费技术支持起价是$300每年，

获取Sencha需要遵守GPL3 license，以及在某种不是GPL标准又很相似LGPL的授权下也能用，以及遵循非商业license也可以获得。

4，TitaniumMobile

与Sencha Touch很相似，Appcelerator公司的Titanium Mobile可以让您使用Javascript API来编写app。不过与Sencha不同的是，Titanium把代码编译成Native的iPhone或Android app，这意味着它并不是一个真正的Web框架，而是一个兼容层或者编译器。（请注意Titanium Mobile的近亲Titanium Desktop是一个基于web的，可以使用HTML /js来编写桌面封装的本地应用的一款软件）

这么说来Titanium允许web开发人员使用JavaScript和一点点XML之类的其他相关技术，可以实现高性能、更换皮肤很方便的Native App，而不需要额外去学习Objective-C或者Cocoa Touch等技术了。

不过这个优点也是其致命的缺点，只能作出Titanium所支持的平台上面的应用，被它们的开发工具限制住了。想证明这一点只需要换一个不是iPhone的平台上来跑一下就知道了。同时，Titanium的调试器也不怎么样，不能使用XCode方式运行或者调试，就算在其仿真器上面程序跑的还算不错，还是需要自己去实际机器上自己再找问题。

手机html5前端开发用什么框架

jquery mobile和bootstrap都是较好的框架。为了使用便利，下文列举了目前最强大应用最广泛的几款前端开发框架。

1. Bootstrap

Boostrap绝对是目前最流行用得最广泛的一款框架。它是一套优美，直观并且给力的web设计工具包，可以用来开发跨浏览器兼容并且美观大气的页面。它提供了很多流行的样式简洁的UI组件，栅格系统以及一些常用的JavaScript插件。

2. Fbootstrapp

Fbootstrapp基于Bootstrap并且提供了跟Facebook iframe apps和设计相同的功能。包含用于所有标准组件的基本的CSS和HTML，包括排版、表单、按钮、表格、栅格、导航等等，风格与Facebook类似。

3. BootMetro

BootMetro框架的灵感来自于Metro UI CSS，基于Bootstrap 框架构建，用于创建Windows 8 的Metro风格的网站。它包括所有Bootstrap的功能，并添加了几个额外的功能，比如页面平铺，应用程序栏等等。

4. Kickstrap

Kickstrap是Bootstrap的一个变体。它基于Bootstrap，并在它的基础上添加了许多app，主题以及附加功能。这使得这个框架可以单独地用于构建网站，而不需要额外安装什么。你需要做的仅仅是把它放到你的网站上，然后用就可以了。

5. Foundation

Foundation 是一款强大的，功能丰富的并且支持响应式布局的前端开发框架，你可以通过Foundation快速创建原型，利用它所包含的大量布局框架，元素以及最优范例快速创建在各种设备上可以正常运行的网站以及app。Foundation在构建的时候秉承移动优先的策略，它拥有大量实用的语义化功能，并且使用Zepto类库来取代jQuery，这样可以带来更好的用户体验，并且提高运行的速度。

6. GroundworkCSS

GroundworkCSS 是前端框架家族里面新添的一款小清新框架。它是基于Sass和Compass的一个高级响应式的HTML5，CSS以及JavaScript工具包，可以用于快速创建原型并且建立在各种浏览设备上可以正常工作的网站和app。

7. Gumby

Gumby 是一款基于Sass和Compass的简单灵活并且稳定的前端开发框架。

它的流式-固定布局（fluid-fixed layout）可以根据桌面端以及移动设备的分辨率自动优化要呈现的网页内容。它支持多种网格布局，包括多列混杂的嵌套模式。Gumby提供两套PSD的模板，方便你在12列和16列的网格系统上进行设计。

8. HTML KickStart

HTML Kickstart 是一款可以用来方便创建任何布局的集合HTML5，CSS和jQuery的工具包。它提供了干净，符合标准以及跨浏览器兼容的代码。

9. IVORY

IVORY 是一款轻量，简单但是强大的前端框架，可以用于320到1200像素宽度的响应式布局。它基于12列的响应式网格布局，包含表格，按钮，表格，分页，拨动开关，工具提示，手风琴，选项卡等网站中常用的组件和样式。

10.Kube

最后，如果你的新项目需要一款实在的，不需要复杂的额外功能组件的，足够简单的框架，那么 Kube 将会是你正确的选择。Kube是一款最小化的，支持响应式的前端框架，它没有强加的样式设计，因此给了你充分的自由来开发自己的样式表。它提供了一些web元素的基本样式，比如网格，表单，排版，表格，按钮，导航，链接以及图片等等。

html不用框架能作出框架的效果么?

可以用XMLHttpRequest获得网页的源代码,并在DIV里显示出来,不过缺点很多!

代码如下:

html

head

title仿框架网页/title

meta http-equiv="Content-Type" content="text/html; charset=gb2312"

script language="JavaScript"

function viewSource(urlStr)

{

if (urlStr)

{ //用于读取CSS/Script/robots.txt

try

{

var srcStr='';

var objHTTP=new ActiveXObject("MSXML2.XMLHTTP");

with(objHTTP)

{

open("GET",urlStr,false);

onreadystatechange=function(){

if(readyState==4)

if(status==200)

srcStr=RSBinaryToString(responseBody);

}

try{ send(); }

catch(e){

srcStr="错误".fontcolor("red")+": br获取 "+urlStr.bold().link(urlStr)+" 发生错误br可能该地址已失

效或没有权限.";

}

}

objHTTP=null;

}

catch(e){srcStr=ImgWarn+"错误".fontcolor("red")+": br获取 "+urlStr.bold().link(urlStr)+" 发生错误br可能该地址已失

效或没有权限.";}

return srcStr;

}

}

function C4(urlStr)

{

window.status='正在载入源码...(可能需要几分钟)'

srcMap.innerHTML=viewSource(urlStr);

window.status='';

}

/script

body

input size=50 id=str type=text value=""

input type=button value=go onclick="C4(str.value);"

div class="mdiv" id=srcMap style="border: thin solid #FF6633;width:expression(document.body.offsetWidth-

50);height:expression(document.body.offsetHeight-110);overflow:auto;background:#FFFFFF" align="center"

这里是仿框架显示网页!/div

script language="vbscript"

function RSBinaryToString(xBinary)

Dim Binary

If vartype(xBinary)=8 Then Binary = MultiByteToBinary(xBinary) Else Binary = xBinary

Dim RS, LBinary

Const adLongVarChar = 201

Set RS = CreateObject("ADODB.Recordset")

LBinary = LenB(Binary)

If LBinary0 Then

RS.Fields.Append "mBinary", adLongVarChar, LBinary

RS.Open

RS.AddNew

RS("mBinary").AppendChunk Binary

RS.Update

RSBinaryToString = RS("mBinary")

Else

RSBinaryToString = ""

End If

End Function

/script

/body

/html

HTML的frame框架怎么自适应高度？

HTML的frame框架自适应高度的6个方法:

1、可以给它添加一个默认的CSS的min-height值，然后同时使用JavaScript改变高度。常用的兼容代码有：

// document.domain = "caibaojian.com";

function setIframeHeight(iframe) {

if (iframe) {

var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;

if (iframeWin.document.body) {

iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;

}

}

};

window.onload = function () {

setIframeHeight(document.getElementById('external-frame'));

};

（如果在同个顶级域名下，不同子域名之间互通信息，设置document.domain="域名.com"

2、只要修改以上的iframe的ID即可了。或者你可以直接在iframe里面写代码，我们一般为了不污染HTML代码，建议使用上面的代码。

iframe src="backtop.html" frameborder="0" scrolling="no" id="external-frame" onload="setIframeHeight(this)"/iframe

3、多个iframe的情况下

script language="javascript"

//输入你希望根据页面高度自动调整高度的iframe的名称的列表

//用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一个窗体，则不用逗号。

//定义iframe的ID

var iframeids=["test"];

//如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏，no表示不隐藏

var iframehide="yes";

function dyniframesize()

{

var dyniframe=new Array()

for (i=0; iiframeids.length; i++)

{

if (document.getElementById)

{

//自动调整iframe高度

dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);

if (dyniframe[i]  !window.opera)

{

dyniframe[i].style.display="block";

if (dyniframe[i].contentDocument  dyniframe[i].contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape

dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight;

else if (dyniframe[i].Document  dyniframe[i].Document.body.scrollHeight) //如果用户的浏览器是IE

dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;

}

}

//根据设定的参数来处理不支持iframe的浏览器的显示问题

if ((document.all || document.getElementById)  iframehide=="no")

{

var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i]);

tempobj.style.display="block";

}

}

}

if (window.addEventListener)

window.addEventListener("load", dyniframesize, false);

else if (window.attachEvent)

window.attachEvent("onload", dyniframesize);

else

window.onload=dyniframesize;

/script

4、打开调试运行窗口可以看到运行。·

跨域下的iframe自适应高度

跨域的时候，由于js的同源策略，父页面内的js不能获取到iframe页面的高度。需要一个页面来做代理。

方法如下：假设下的一个页面a.html要包含下的一个页面c.html。

我们使用下的另一个页面agent.html来做代理，通过它获取iframe页面的高度，并设定iframe元素的高度。

a.html中包含iframe:

iframe src="" id="Iframe" frameborder="0" scrolling="no" style="border:0px;"/iframe

5、在c.html中加入如下代码：

iframe id="c_iframe"  height="0" width="0"  src="" style="display:none" /iframe

script type="text/javascript"

(function autoHeight(){

var b_width = Math.max(document.body.scrollWidth,document.body.clientWidth);

var b_height = Math.max(document.body.scrollHeight,document.body.clientHeight);

var c_iframe = document.getElementById("c_iframe");

c_iframe.src = c_iframe.src + "#" + b_width + "|" + b_height;  // 这里通过hash传递b.htm的宽高

})();

/script

6、最后，agent.html中放入一段js:

script type="text/javascript"

var b_iframe = window.parent.parent.document.getElementById("Iframe");

var hash_url = window.location.hash;

if(hash_url.indexOf("#")=0){

var hash_width = hash_url.split("#")[1].split("|")[0]+"px";

var hash_height = hash_url.split("#")[1].split("|")[1]+"px";

b_iframe.style.width = hash_width;

b_iframe.style.height = hash_height;

}

/script

agent.html从URL中获得宽度值和高度值，并设置iframe的高度和宽度（因为agent.html在下，所以操作a.html时不受JavaScript的同源限制）

用HTML和JavaScript代码编写一个至少有3个框架的网页：

table width="660" border="0" cellpadding="2" cellspacing="1" bgcolor="#ECECEC" style="text-align:center"

tr style="background-color:#EAF8E6;color:#6EA358;"

td width="128"a href=";so=网络聊天" target="_blank"网络聊天/a/td

td width="128"a href=";so=网页浏览" target="_blank"网页浏览/a/td

td width="128"a href=";so=视频播放" target="_blank"视频播放/a/td

td width="128"a href=";so=音频播放" target="_blank"音频播放/a/td

td width="128"a href=";so=系统设置" target="_blank"系统设置/a/td

/tr

tr bgcolor="#FFFFFF"

tda href=";so=腾讯QQ" target="_blank"腾讯QQ/a/td

tda href=";so=傲游Maxthon" target="_blank"傲游Maxthon/a/td

tda href=";so=暴风影音" target="_blank"暴风影音/a/td

tda href=";so=Foobar" target="_blank"Foobar/a/td

tda href=";so=优化大师" target="_blank"优化大师/a/td

/tr

tr bgcolor="#F7F7F7"

tda href=";so=微软MSN" target="_blank"微软MSN/a/td

tda href=";so=火狐Firefox" target="_blank"火狐Firefox/a/td

tda href=";so=Kmplayer" target="_blank"Kmplayer/a/td

tda href=";so=Winamp" target="_blank"Winamp/a/td

tda href=";so=超级兔子" target="_blank"超级兔子/a/td

/tr

tr bgcolor="#FFFFFF"

tda href=";so=TM2008" target="_blank"TM2008/a/td

tda href=";so=腾讯TT" target="_blank"腾讯TT/a/td

tda href=";so=RealPlayer" target="_blank"RealPlayer/a/td

tda href=";so=千千静听" target="_blank"千千静听/a/td

tda href=";so=诺顿Ghost" target="_blank"诺顿Ghost/a/td

/tr

tr style="background-color:#EAF8E6;color:#6EA358;"

tda href=";so=汉字输入" target="_blank"汉字输入/a/td

tda href=";so=病毒防治" target="_blank"病毒防治/a/td

tda href=";so=网络安全" target="_blank"网络安全/a/td

tda href=";so=防疫木马" target="_blank"防疫木马/a/td

tda href=";so=压缩解压" target="_blank"压缩解压/a/td

/tr

tr bgcolor="#FFFFFF"

tda href=";so=搜狗拼音" target="_blank"搜狗拼音/a/td

tda href=";so=金山毒霸" target="_blank"金山毒霸/a/td

tda href=";so=天网防火墙" target="_blank"天网防火墙/a/td

tda href=";so=360安全卫士" target="_blank"360安全卫士/a/td

tda href=";so=WinRAR" target="_blank"WinRAR/a/td

/tr

tr bgcolor="#F7F7F7"

tda href=";so=紫光拼音" target="_blank"紫光拼音/a/td

tda href=";so=瑞星杀毒" target="_blank"瑞星杀毒/a/td

tda href=";so=瑞星防火墙" target="_blank"瑞星防火墙/a/td

tda href=";so=瑞星卡卡" target="_blank"瑞星卡卡/a/td

tda href=";so=WinZip" target="_blank"WinZip/a/td

/tr

tr bgcolor="#FFFFFF"

tda href=";so=极品五笔" target="_blank"极品五笔/a/td

tda href=";so=卡巴斯基" target="_blank"卡巴斯基/a/td

tda href=";so=江民防火墙" target="_blank"江民防火墙/a/td

tda href=";so=win清理助手" target="_blank"win清理助手/a/td

tda href=";so=7-zip" target="_blank"7-zip/a/td

/tr

tr style="background-color:#EAF8E6;color:#6EA358;"

tda href=";so=网络共享" target="_blank"网络共享/a/td

tda href=";so=下载工具" target="_blank"下载工具/a/td

tda href=";so=图像处理" target="_blank"图像处理/a/td

tda href=";so=邮件工具" target="_blank"邮件工具/a/td

tda href=";so=光盘处理" target="_blank"光盘处理/a/td

/tr

tr bgcolor="#FFFFFF"

tda href=";so=BitComet" target="_blank"BitComet/a/td

tda href=";so=网际快车" target="_blank"网际快车/a/td

tda href=";so=ACDSee" target="_blank"ACDSee/a/td

tda href=";so=FoxMail" target="_blank"FoxMail/a/td

tda href=";so=Nero" target="_blank"Nero/a/td

/tr

tr bgcolor="#F7F7F7"

tda href=";so=KuGoo" target="_blank"KuGoo/a/td

tda href=";so=迅雷" target="_blank"迅雷下载/a/td

tda href=";so=Photoshop" target="_blank"Photoshop/a/td

tda href=";so=DreamMail" target="_blank"DreamMail/a/td

tda href=";so=UltraISO" target="_blank"UltraISO/a/td

/tr

tr bgcolor="#FFFFFF"

tda href=";so=电驴emule" target="_blank"电驴emule/a/td

tda href=";so=IDM" target="_blank"IDM/a/td

tda href=";so=XNview" target="_blank"XNview/a/td

tda href=";so=KooMail" target="_blank"KooMail/a/td

tda href=";so=WinISO" target="_blank"WinISO/a/td

/tr

/table

主流HTML5移动web开发框架

肯定使用框架啊，不然还原生 JS、自己写样式？

H5 做移动开发也分两种，一种就是正常的网页，一种是封装的成 App 在手机上跑的。下面我只大致介绍一下又哪些框架，具体的特性不是三两句能说完的，题主可以自行搜索相关资料。

后者比较知名的框架就是 PhoneGap、MUI 等等了。

而前者具体分的话还分 CSS 框架和 JS 框架。样式框架有很多了，常见的有 jQuery Mobile、Bootstrap、Kendo UI、Amaze UI 等等。JS 框架一般是 AngularJS、Backbone、ReactJS 等等，但说实话这些 JS 框架都比较繁重，一般是为比较复杂的场景设计的，如果你的页面需求很简单，那么大可以不用它们只用样式框架就好了。

值得一提的是国内 BAT 三大巨头也分别有自己的 H5 框架，并且都已经开源了，百度的是 GMU（Global Mobile UI）、Clouda+、EFE 这三个，阿里的是 Kissy Mobile，腾讯的是 Frozen UI。

自动生成html框架的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于自动生成h5页面、自动生成html框架的信息别忘了在本站进行查找喔。