开启辅助访问
切换到宽版

王洪林个人官网

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 3714|回复: 0

HTML5网站开发专用基础模板(包含完整注释)

[复制链接]

升级   100%

发表于 2015-3-1 23:51:27 | 显示全部楼层 |阅读模式 来自 广东东莞
王红林个人官网免责声明
本网站内容仅代表作者本人的观点,不代表本网站的观点和看法,与本网站立场无关,相关责任作者自负。本网站有部分内容来自互联网,如无意中侵犯了哪个媒体 、公司 、企业或个人等的知识产权,请来电或致函告之,本网站将在规定时间内给予删除等相关处理,若有涉及版权费等问题,请及时提供相关证明等材料并与我们联系,通过友好协商公平公正原则处理纠纷。
分享一个HTML5页面开发的基础性模板,包含了两个版本: 开发版本 注释版本
开发版本
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5. <meta charset="utf-8">
  6. <title></title>
  7. <meta name="description" content="">
  8. <meta name="author" content="">
  9. <meta name="viewport" content="width=device-width, initial-scale=1">
  10. <link rel="stylesheet" href="">
  11. <!--[if lt IE 9]>
  12. <script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
  13. <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
  14. <![endif]-->
  15. <link rel="shortcut icon" href="">
  16. </head>
  17. <body>

  18. <!-- 这里添加页面主要内容 -->

  19. <!-- SCRIPTS:个人建议在天朝不要使用Google的CDN了,是不是你就发现你的网站功能失效了 -->
  20. <!-- Example: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> -->
  21. </body>
  22. </html>
复制代码
注释版本
  1. <!DOCTYPE html>
  2. <!--
  3.      设置lang值来保证<html>标签的互操作性及其可访问性
  4.    更多HTML标签全局性属性
  5.    请阅读这里: http://www.w3.org/TR/html-markup/global-attributes.html -->
  6. <html>

  7. <head>

  8. <!--
  9.     告诉IE使用目前最新的布局引擎:
  10.     更多信息阅读这里: https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
  11. <meta http-equiv="X-UA-Compatible" content="IE=edge">

  12. <!--
  13.      针对web性能定义字符集,首选通过HTTP header来设置
  14.    确保HTTP header和Meta标签设置一致
  15.    更多信息阅读这里: https://developers.google.com/speed/docs/best-practices/rendering#SpecifyCharsetEarly -->
  16. <meta charset="utf-8">

  17. <!-- 指定页面标题 -->
  18. <title></title>

  19. <!-- 指定web页面描述 -->
  20. <meta name="description" content="">

  21. <!-- 指定web页面作者 -->
  22. <meta name="author" content="">

  23. <!-- 提示移动浏览器使用设备宽度和缩放比 -->
  24. <meta name="viewport" content="width=device-width, initial-scale=1">

  25. <!-- 在页面加载前来加载CSS
  26.      保证相关样式的及时加载
  27.      指定对应的URI属性 -->
  28. <link rel="stylesheet" href="">

  29. <!--
  30.      加载htmlshiv和respond.js来兼容老版本的IE浏览器
  31.    方便使用HTML5中的新元素和media queries -->
  32. <!--[if lt IE 9]>
  33. <script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
  34. <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
  35. <![endif]-->

  36. <!-- 指定favicon的URI -->
  37. <link rel="shortcut icon" href="">

  38. <!-- 下面注释掉的是ios/android书签图标-->
  39. <!--
  40. <meta name="mobile-web-app-capable" content="yes">
  41. <link rel="icon" sizes="196x196" href="">
  42. <link rel="apple-touch-icon" sizes="152x152" href="">
  43. -->

  44. <!--
  45.      如果可能使用async属性来非阻断的加载脚本
  46.    例子: <script src="" async></script> -->
  47. </head>
  48. <body>

  49. <!-- 这里添加页面主要内容 -->

  50. <!-- 如果可能使用async属性来非阻断的加载脚本 -->
  51. <!-- SCRIPTS -->
  52. <!-- 例子: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> -->
  53. </body>
  54. </html>
复制代码
王红林个人官网免责声明
本网站内容仅代表作者本人的观点,不代表本网站的观点和看法,与本网站立场无关,相关责任作者自负。本网站有部分内容来自互联网,如无意中侵犯了哪个媒体 、公司 、企业或个人等的知识产权,请来电或致函告之,本网站将在规定时间内给予删除等相关处理,若有涉及版权费等问题,请及时提供相关证明等材料并与我们联系,通过友好协商公平公正原则处理纠纷。
懒得打字嘛,点击右侧快捷回复 充值金钱,充值卡购买等请点此联系站长
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|小黑屋|手机版|Gamart.net Inc. ( 蜀ICP备11002741号  

GMT+8, 2024-3-29 15:47 , Processed in 0.307419 second(s), 34 queries , Gzip On.

Powered by Discuz! X3.2

© 2001-2023 Comsenz Inc.

快速回复 返回顶部 返回列表