分享一个HTML5页面开发的基础性模板，包含了两个版本： 开发版本 注释版本

　　开发版本

  1. <!DOCTYPE html>
  2.  
  3. <html>
  4.  
  5. <head>
  6.  
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.  
  9. <meta charset="utf-8">
  10.  
  11. <title></title>
  12.  
  13. <meta name="description" content="">
  14.  
  15. <meta name="author" content="">
  16.  
  17. <meta name="viewport" content="width=device-width, initial-scale=1">
  18.  
  19. <link rel="stylesheet" href="">
  20.  
  21. <!--[if lt IE 9]>
  22.  
  23. <script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
  24.  
  25. <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
  26.  
  27. <![endif]-->
  28.  
  29. <link rel="shortcut icon" href="">
  30.  
  31. </head>
  32.  
  33. <body>
  34.  
  35. <!-- 这里添加页面主要内容 -->
  36.  
  37. <!-- SCRIPTS：个人建议在天朝不要使用Google的CDN了，是不是你就发现你的网站功能失效了 -->
  38.  
  39. <!-- Example: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> -->
  40.  
  41. </body>
  42.  
  43. </html>

　　注释版本

  1. <!DOCTYPE html>
  2.  
  3. <!-- 
  4.  
  5. 设置lang值来保证<html>标签的互操作性及其可访问性
  6.  
  7. 　  更多HTML标签全局性属性
  8.  
  9. 　  请阅读这里: http://www.w3.org/TR/html-markup/global-attributes.html -->
  10.  
  11. <html>
  12.  
  13. <head>
  14.  
  15. <!--
  16.  
  17. 告诉IE使用目前最新的布局引擎：
  18.  
  19. &nbsp;更多信息阅读这里: https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
  20.  
  21. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  22.  
  23. <!--
  24.  
  25. 针对web性能定义字符集，首选通过HTTP header来设置
  26.  
  27. 　  确保HTTP header和Meta标签设置一致
  28.  
  29. 　  更多信息阅读这里: https://developers.google.com/speed/docs/best-practices/rendering#SpecifyCharsetEarly -->
  30.  
  31. <meta charset="utf-8"> 
  32.  
  33. <!-- 指定页面标题 -->
  34.  
  35. <title></title>
  36.  
  37. <!-- 指定web页面描述 -->
  38.  
  39. <meta name="description" content="">
  40.  
  41. <!-- 指定web页面作者 -->
  42.  
  43. <meta name="author" content="">
  44.  
  45. <!-- 提示移动浏览器使用设备宽度和缩放比 -->
  46.  
  47. <meta name="viewport" content="width=device-width, initial-scale=1">
  48.  
  49. <!-- 在页面加载前来加载CSS
  50.  
  51. 保证相关样式的及时加载
  52.  
  53. 指定对应的URI属性 -->
  54.  
  55. <link rel="stylesheet" href="">
  56.  
  57. <!--
  58.  
  59. 加载htmlshiv和respond.js来兼容老版本的IE浏览器
  60.  
  61. 　  方便使用HTML5中的新元素和media queries -->
  62.  
  63. <!--[if lt IE 9]>
  64.  
  65. <script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
  66.  
  67. <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
  68.  
  69. <![endif]-->
  70.  
  71. <!-- 指定favicon的URI -->
  72.  
  73. <link rel="shortcut icon" href="">
  74.  
  75. <!-- 下面注释掉的是ios/android书签图标-->
  76.  
  77. <!--
  78.  
  79. <meta name="mobile-web-app-capable" content="yes">
  80.  
  81. <link rel="icon" sizes="196x196" href="">
  82.  
  83. <link rel="apple-touch-icon" sizes="152x152" href="">
  84.  
  85. -->
  86.  
  87. <!-- 
  88.  
  89. 如果可能使用async属性来非阻断的加载脚本
  90.  
  91. 　  例子: <script src="" async></script> -->
  92.  
  93. </head>
  94.  
  95. <body>
  96.  
  97. <!-- 这里添加页面主要内容 -->
  98.  
  99. <!-- 如果可能使用async属性来非阻断的加载脚本 -->
  100.  
  101. <!-- SCRIPTS -->
  102.  
  103. <!-- 例子: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> -->
  104.  
  105. </body>
  106.  
  107. </html>

HTML5页面开发的基础性模板的更多相关文章

  1. 今天再给大家带点html5前端开发的干货模板“text/tpl”怎么用 script template怎么用

    text/tpl 顾名思义就是模板,其实和C++模板函数类似的作用,就是利用他生成一个HMTL内容,然后append或者替换html里面 有什么好处,假如后端返回来的数据都是一样的,但是需要生成不同的 ...

  2. html5 app开发重大消息-腾讯在技术端推进Html5生态发展

    中新网5月3日电 日前,腾讯正式发布腾讯浏览服务(Tencent Browser Service,以下简称TBS),宣布为合作伙伴提供整合腾讯底层技术.内容框架.广告体系以及大数据等多方面能力的升级浏 ...

  3. 小强的HTML5移动开发之路（50）——jquerymobile页面初始化过程

    为了方便说明和更加直观的展示jquerymobile的页面初始化过程以及各个事件的触发过程,我绘制了一幅流程图: 图中用红色框圈起来的是界面中的事件,測试代码例如以下: <!DOCTYPE ht ...

  4. 快速入门系列--MVC--07与HTML5移动开发的结合

    现在移动互联网的盛行,跨平台并兼容不同设备的HTML5越来越盛行,很多公司都在将自己过去的非HTML5网站应用渐进式的转化为HTML5应用,使得一套代码可以兼容不同的物理终端设备和浏览器,极大的提高了 ...

  5. 15款免费的 HTML5/CSS3 响应式网页模板

    如果你想快速制作出一个优秀的网站,网站模板一定是必不可少的.网页设计师和开发人员也可以从网站模板入手,学习先进的布局方式和编码风格.下面这个列表为大家挑选了15款免费的 HTML5/CSS3 响应式网 ...

  6. HTML5 页面制作工具

    https://www.zhihu.com/question/30087283 HTML5 页面制作工具 免费的基于 HTML 5 的 Web Apps 生成器工具网站     81 235 初页 制 ...

  7. HTML5移动开发学习笔记之Canvas基础

    1.第一个Canvas程序 看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...

  8. C#开发微信门户及应用(44)--微信H5页面开发的经验总结

    在我们开发微信页面的时候,需要大量用到了各种呈现的效果,一般可以使用Boostrap的效果来设计不同的页面,不过微信团队也提供很多这方面的资源,包括JSSDK的接口,以及Weui的页面样式和相关功能页 ...

  9. H5案例分享：html5移动开发细微之美

    html5移动开发细微之美 1.H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=dev ...

随机推荐

  1. PAT甲题题解-1043. Is It a Binary Search Tree (25)-二叉搜索树

    博主欢迎转载,但请给出本文链接,我尊重你,你尊重我,谢谢~http://www.cnblogs.com/chenxiwenruo/p/6789220.html特别不喜欢那些随便转载别人的原创文章又不给 ...

  2. 3D 立体 backface-visibility

    <!DOCTYPE html> <html> <head> <!-- backface-visibility属性用来设置,是否显示元素的背面,默认是显示的 b ...

  3. 组件 -- Button

    .btn --------------------------------- button的背景色: .btn-primary .btn-success .btn-secondary .btn-dan ...

  4. 深入理解ajax系列第六篇——头部信息

    前面的话 每个HTTP请求和响应都会带有相应的头部信息,其中有的对开发人员有用.XHR对象提供了操作头部信息的方法.本文将详细介绍HTTP的头部信息 默认信息 默认情况下,在发送XHR请求的同时,还会 ...

  5. 洛谷P2114 [NOI2014]起床困难综合症

    P2114 [NOI2014]起床困难综合症 题目描述 21世纪,许多人得了一种奇怪的病:起床困难综合症,其临床表现为:起床难,起床后精神不佳.作为一名青春阳光好少年,atm一直坚持与起床困难综合症作 ...

  6. [国家集训队]middle

    [国家集训队]middle 题目 解法 开\(n\)颗线段树,将第\(i\)颗线段树中大于等于第\(i\)小的数权值赋为1,其他的则为-1,对于每个区间维护一个区间和,最大前缀和,最大后缀和. 然后二 ...

  7. 关于链表的总结（C++循环实现）

    0.目录 1.链表的基本操作 1.1 结点定义 1.2 创建链表 1.3 销毁链表 1.4 打印链表 1.5 获取链表长度 2.结点的基本操作 2.1 删除结点 2.2 查找结点 3.面试题 3.1 ...

  8. pom.xml文件中，添加自定义参数Properties

    <properties> <powermock.version>1.6.6</powermock.version> </properties> < ...

  9. Racket Cheat Sheet

    Racket Cheat Sheet 来源  http://docs.racket-lang.org/racket-cheat/index.html?q=Racket%20Cheat%20Sheet ...

  10. in packet sniffer

    in packet sniffer 来源 https://kb.fortinet.com/kb/microsites/search.do?cmd=displayKC&docType=kc&am ...