html框架_html框架标签

html框架_html框架标签

       非常感谢大家聚集在这里共同探讨html框架的话题。这个问题集合涵盖了html框架的广泛内容，我将用我的知识和经验为大家提供全面而深入的回答。

1.html5较成熟的开发框架有哪些

2.面向移动设备的html5开发框架哪个最好

3.html页面框架

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

html5较成熟的开发框架有哪些

       国外很有多优秀的HTML5前端开发框架比如：JQueryMobile，TwitterBootstrap，Schena Touch, ?BackBone等等。

       同样，也存在很多国内比较优秀的前端开发框架，其中中国互联网三巨头贡献了近一半：腾讯，阿里巴巴，百度。

       框架不是万能的，选择和项目匹配的框架可以显著提高开发效率，但是也有可能带来代码的臃肿，选择合适的框架是最重要的。其中每个框架各有特点，还需要你自己把关。如：腾讯的JX比较适合构建和组织大规模、工业级的WebApp，腾讯内部的WebQQ、Q+等产品都是采用JX框架开发。

       这里整理了一下文档，以附件形式分享给你吧~请收下~

面向移动设备的html5开发框架哪个最好

       1. Twitter BootStrap （Apache v2.0；响应式）

       时髦、直观并且强大的前端框架，让Web开发变得更加容易。

       2. Foundation （MIT；响应式）

       最先进的响应式前端框架。

       3. 960gs（GPL&MIT；响应式）

       960gs提供了一个简单的网格系统，适合快速开发。

       4. Skeleton（MIT；响应式）

       非常漂亮的Web模板，适合响应式、移动友好的开发。

       5. 99lime HTML KickStart（Free）

       适合网站快速开发的极简HTML构建模块。

       6. Kube（Free；响应式）

       面向专业人员的CSS框架。

       7. Less Framework（MIT；响应式）

       自适应的CSS网格系统。

       8. Flameinwork（Free）

       适合懒人开发者的前端微框架。

       9. G5 Framework（Free）

       (x)HTML5、CSS、PHP前端开发框架。

       10. Easy Framework（Free）

       Easy Framework是一个一体化前端解决方案，分structural、 presentational、interactive三层。

       11. Blueprint（Free）

       一个旨在减少开发时间的前端框架。

       12. YAML（Creative Commons）

       (x)HTML+CSS框架，适合开发现代化浮动布局。

       13. BlueTrip（Free）

       一个功能全面、并且美丽的CSS框架，适合于Blueprint搭配使用。

       14. YUI3:Grids CSS（BSD）

       YUI Grids CSS是最著名的CSS框架之一，是由Yahoo开发小组开发而成。 YUI Grids CSS为开发者提供了预先设置的四种不同页面宽度，六种不同的模板。

       15. 52framework（Creative Commons）

       对HTML5支持非常好，简单易用。

       16. elastiCSS（MIT）

       一个基于Web接口和印刷布局的简单CSS框架。

       17. Emastic（Free）

       一个与众不同的CSS框架。

       18. Fluid 960 Gride System（GPL/MIT）

       Fluid 960 Grid System的模版是根据Nathan Smith之前的作品而创建的。即960 Grid System：传承了MooTools和jQuery JavaScript libraries的效果。

       19. xCSS（MIT）

       一个面向对象的CSS框架，能让你的工作流更加简洁。xCSS基于CSS，可以在开发复杂样式时，提供面向对象的工作流。

       20. EM CSS Framework（MIT/GPL）

       EM CSS Framework提供了一个960px宽 + 12 列网格系统 + CSS的通用样式。

html页面框架

       1、Titanium

       的Titanium开发平台使开发者可以通过HTML、PHP、JavaScript、Ruby、Python等Web编程语言开发手机、平板和桌面的原生App。其优势在于它可以让用户轻松地访问超过300个API以及定位信息。

       此外，提供针对特定行为或事件定制的统计。App的数据既可储存在云端，也可储存在设备上。

       2、APICloud

       APICloud是一款“云端一体”的移动开发平台，信仰“云端一体”的理念，重新定义了移动应用开发。APICloud为开发者从“云”和“端”两个方向提供API，简化移动应用开发技术，让移动应用的开发周期从一个月缩短到7天。APICloud由“云API”和“端API”两部分组成，可以帮助开发者快速实现移动应用的开发、测试、发布、管理和运营的全生命周期管理。

       3、PhoneGap

       PhoneGap是一个免费且开源的开发环境，使开发者可以开发出在Android、Palm、黑莓、iPhone、iTouch及iPad等设备上运行的App。其使用的是HTML和JavaScript等标准的Web开发语言。开发者使用PhoneGap进行开发，可调用加速计、GPS/定位、照相机、声音等功能。

       PhoneGap还提供AdobeAIRApp以及在线的培训课程，帮助开发者了解原生API并在他们自己的平台上开发移动App。

       4、JavaScript

       是使用移动平台的JavaScript引擎来进行跨平台开发。逻辑部分自然无需多说，关键在于如何使用平台特性。是通过反射得到所有平台API，预编译它们，然后将这些API注入到JavaScript运行环境，接下来在Javascript调用后拦截这个调用，并运行native代码。是使用大量web开发的技巧来进行app开发，因为工具链和语言都非常熟悉受到了很多前端开发者的欢迎。

       5、Kinvey

       Kinvey同样是一个为移动应用开发者提供后台创建服务的平台。Kinvey强调加速移动应用开发与销售的“即取即用”理念。Kinvey的中间层与数据层均托管在多个云服务提供商处，包括Rackspace、Amazon与Microsoft。所有通过Kinvey存储的数据都会有四种方式备份：AmazonEC2、WindowsAzure、Rackspace以及Kinvey自己的服务器，假如其中一两个出现了故障，用户的数据依然安然无恙。

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

       html页面框架可以分为内框架和外框架

       外框架：多个独立的页面，组合成一个整体页面

       框架页面：使用框架页面，先把框架页面中的body删除

       <frameset cols/rows=”” frameborder=“”>

       <frame src=“” noresize="noresize">

       <frame src=“” noresize="noresize">

       <frame src=“” noresize="noresize">

       .....

       </frameset>

       frameset：框架（外框架），把该页面分割成若干个小区域

       cols:页面左右分割

       Rows：页面上下分割

       Frameborder：骨架显示/隐藏

       Framse:该区域引入页面

       Src：引入页面的路径

       Noresize： 固定相邻2个区域的骨架

       如果页面分割完成后，对某一区域再进行分割，那么把该区域所对应的frame删除，改成frameSet标签

       内框架：一个整体页面中的某一块区域，独立出来，放另外的单独一个页面

       <iframe width=”” height=”” src=”” frameborder=“” name=“”></iframe>

       Width:内框架宽度

       height:内框架高度

       Src：要放入网页的路径

       Frameborder：边框

       Name：起名字

       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;?i<iframeids.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页面的高度。需要一个页面来做代理。

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

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

       a.html中包含iframe:

<iframe?src="/c.html"?id="Iframe"?frameborder="0"?scrolling="no"?style="border:0px;"></iframe>

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

<iframe?id="c_iframe"?height="0"?width="0"?src="/agent.html"?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在www.a.com下，所以操作a.html时不受JavaScript的同源限制）

       好了，今天关于html框架就到这里了。希望大家对html框架有更深入的了解，同时也希望这个话题html框架的解答可以帮助到大家。