vs2012 html5

简介: 引用:http://developer.51cto.com/art/201009/228743.htm Visual Studio 2010中的HTML 5项目模板可以让您率先体验HTML 5的魅力。

引用:http://developer.51cto.com/art/201009/228743.htm

Visual Studio 2010中的HTML 5项目模板可以让您率先体验HTML 5的魅力。本文将告诉大家如何运用这一项目模板。

AD:51CTO云计算架构师峰会 抢票进行中!

 

HTML5时代来了,还不为你的Visual Studio 2010添加HTML5的项目模板!!!

本文在简单不过了,就是为你的Visual Studio2010创建一个项目模板,一个HTML5的项目模板。谁叫HTML5时代来了,Visual Studio 2010又没提供此模板呢?那我们就动手做一个吧!

先写一个HTML5的基本模板,index.html代码如下:

  1. <!doctype html> 
  2. <html lang="en"><head>      
  3. <meta charset="utf-8" />      
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />      
  5. <title></title>      
  6. <meta name="description" content="" />      
  7. <meta name="keywords" content="" />      
  8. <meta name="author" content="" />      
  9. <meta name="viewport" content="width=device-width; initial-scale=1.0" />       
  10. <!-- !CSS -->      
  11. <link href="css/html5reset.css" rel="stylesheet" />    
  12. <link href="css/style.css" rel="stylesheet" />      
  13. <!-- !Modernizr - All other JS at bottom      
  14. <script src="js/modernizr-1.5.min.js"> 
  15. </script> -->       
  16. <!-- Grab Microsoft's or Google's CDN'd jQuery. fall back to local if necessary -->      
  17. <!-- <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript">
  18. </script> -->      
  19. <!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> -->      
  20. <script>        
  21. !window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')  
  22. </script> </head> <body>      
  23. <div id="container">       
  24. </div></body> </html> 

按照msdn上的How to: Create Item Templates这篇文章,为Visual Studio 2010创建一个项目模板。当我做到第3步,怎么也找不到 Export Template这个菜单项。经过一番摸索,原来Visual Studio 2010还需要安装一个插件才会有这个菜单项,下载地址为:Export Template Wizard。安装完成后按照下面步骤配置。

1、启动 Visual Studio 2010。

2、在“文件”菜单中,依次选择“新建”和“项目”。将打开“新建项目”对话框。在 Visual Basic 或 Visual C# 中选择“WEB应用程序”,然后将其命名为“HTML5Template”。单击“确定”。

3、在这个项目中添加下面这些文件。

两个分别放置js和css的文件夹:css、js 

HTML5基本模板页:index.html

jQuery:jquery-1.4.2.min.js
    Modernizr :modernizr-1.5.min.js
    HTML5 样式文件:html5reset.css

一个空的css文件:style.css 

项目结构如下图:


  4、在“文件”菜单中选择“全部保存”来保存项目。

下面我将在上面4个步骤的基础上创建一HTML5页的模板项和一个创建HTML5网站的模板项。

创建HTML5页的模板项

1、File ->Export Template:

第二步:选择item Template,选择index.html文件,点击next。

第三步:这里可以什么都不选,直接next。

第四步:填写一些Template的基本信息,点next。

第五步:点击完成。

第六步:在添加新建项中查看到模板:

创建创建一HTML5网站的模板项

回到保存过的那个vs项目。和创建HTML5页的模板项类似。

不过在第二步选择project Template,如下图:

填写一些Template的基本信息,点击下一步:

点击完成:

当我们选择file-new-project的时候,可以找到此项目模板:

点击OK,生成的项目代码结构如下,和我们创建时候是一样的。

 

接下来,你就可以使用Visual Studio 2010编写HTML5的应用程序了。

总结:本文非常简单,为你Visual Studio 2010搭建了使用HTML5的环境。

原文链接:http://www.cnblogs.com/zhuqil/archive/2010/09/29/HTML5Template.html

相关文章
|
3月前
|
前端开发 JavaScript 定位技术
Flutter vs 前端 杂谈:SliverAppBar、手动实现Appbar、前端Html+JS怎么实现滚动变化型Appbar - 比较
Flutter vs 前端 杂谈:SliverAppBar、手动实现Appbar、前端Html+JS怎么实现滚动变化型Appbar - 比较
33 0
|
10月前
|
XML 前端开发 JavaScript
【CSS】CSS+HTML‘VS’CSS+XML
【CSS】CSS+HTML‘VS’CSS+XML
64 0
html+css实战7-vs code的简介和使用
html+css实战7-vs code的简介和使用
116 0
html+css实战7-vs code的简介和使用
|
Web App开发 存储 XML
深入学习SAP UI5框架代码系列之三:HTML原生事件 VS UI5 Semantic事件
(0) SAP UI5应用开发人员了解UI5框架代码的意义 (1) UI5 module懒加载机制 (2) UI5 控件渲染机制 (3) HTML原生事件 VS SAP UI5 Semantic事件(本文) (4) UI5控件元数据实现细节 (5) UI5控件的实例数据实现细节 (6) UI5控件数据绑定的实现原理 (7) UI5控件数据绑定的三种模式:One Way,Two Way和OneTime实现原理比较 (8) UI5控件ID的生成逻辑 (9) UI5控件的多语言(国际化,Internationalization,i18n)支持的实现原理 (10) XML视图里的b
161 0
深入学习SAP UI5框架代码系列之三:HTML原生事件 VS UI5 Semantic事件
|
移动开发 API C++
微信小程序 vs html5 :能力及限制
最后更新时间:2017-08-25 能力 生物识别。一般是指纹识别。基础库版本1.5.0 手机号快速填写组件(需用户主动点击,并确认授权,且小程序主体非个人),获得微信绑定的手机号。
1824 0
|
Web App开发 编解码 iOS开发
学习整理与细化(2)——HTML VS XHTML
//文档头 webpage title //文档体 webpage content 以上是HTML的文档基本结构 //声明文档类型 //文档头 webage title //文档体 weboage con...
898 0
|
JavaScript C++ 测试技术
$().html(value) vs $().empty().append(value)
当需要清空某个dom结点内容时,我所知道的有两种方法: 1.Element.removeChild(child) // Removing all children from an element var element = document.getElementById("test"); while (element.firstChild) { element.removeChild(element.firstChild); } 2.Element.innerHTML="" 第一种方式虽然可读性较好,但显然不如第二种方法简洁。
855 0
|
移动开发 C++ HTML5
vs 2010 支持 html5
引用:http://ppmoon.diandian.com/post/2012-01-16/17785152 为什么要准备浏览器因为要上网下载东西啦!嘿嘿,想要vs2010支持html首先要让vs升级到sp1。
942 0
|
9天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
19 0