DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> 極簡的HTML5模版
極簡的HTML5模版
編輯：HTML5詳解     
這篇文章主要介紹了一個極簡的Html5模版,代碼功能的說明基本上都融入於注釋之中,需要的朋友可以參考下

分享一個Html5頁面開發的基礎性模板，包含了兩個版本：開發版本和注釋版本。可以被用於基礎的服務器端編程框架框架之中^_^

　　開發版本


 

XML/Html Code復制內容到剪貼板
  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/<span style="width: auto; height: auto; float: none;" id="11_nwp"><a style="text-decoration: none;" mpid="11" target="_blank" href="http://cpro.baidu.com/cpro/ui/uiJS.PHP?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=ab4a7d1f97e0f21c&k=html5&k0=Html5&kdi0=0&luki=6&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=1cf2e0971f7d4aab&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F4756%2EHtml&urlid=0" id="11_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">Html5</span></a></span>shiv/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. <!-- 這裡添加頁面主要內容 -->  
  20.     
  21. <!-- SCRIPTS：個人建議在天朝不要使用Google的CDN了，是不是你就發現你的網站功能失效了 -->  
  22. <!-- Example: <script src="//AJax.googleapis.com/AJax/libs/jquery/1.11.1/jquery.min.JS"></script> -->  
  23. </body>  
  24. </Html>  

　　注釋版本
 

XML/Html Code復制內容到剪貼板
  1. <!DOCTYPE <span style="width: auto; height: auto; float: none;" id="0_nwp"><a style="text-decoration: none;" mpid="0" target="_blank" href="http://cpro.baidu.com/cpro/ui/uiJS.PHP?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=ab4a7d1f97e0f21c&k=html&k0=Html&kdi0=0&luki=2&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=1cf2e0971f7d4aab&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F4756%2EHtml&urlid=0" id="0_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">Html</span></a></span>>  
  2. <!--    
  3.      設置lang值來保證<Html><span style="width: auto; height: auto; float: none;" id="1_nwp"><a style="text-decoration: none;" mpid="1" target="_blank" href="http://cpro.baidu.com/cpro/ui/uiJS.PHP?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=ab4a7d1f97e0f21c&k=%B1%EA%C7%A9&k0=%B1%EA%C7%A9&kdi0=0&luki=3&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=1cf2e0971f7d4aab&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F4756%2EHtml&urlid=0" id="1_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">標簽</span></a></span>的互操作性及其可訪問性   
  4. 　  更多Html標簽全局性屬性   
  5. 　  請閱讀這裡: http://www.w3.org/TR/html-markup/global-attributes.Html -->  
  6. <Html>  
  7.     
  8. <<span style="width: auto; height: auto; float: none;" id="2_nwp"><a style="text-decoration: none;" mpid="2" target="_blank" href="http://cpro.baidu.com/cpro/ui/uiJS.PHP?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=ab4a7d1f97e0f21c&k=head&k0=head&kdi0=0&luki=4&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=1cf2e0971f7d4aab&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F4756%2EHtml&urlid=0" id="2_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">head</span></a></span>>  
  9.     
  10. <!--   
  11.     告訴IE使用目前最新的布局引擎：   
  12.     更多信息閱讀這裡: https://www.modern.IE/en-us/performance/how-to-use-x-ua-compatible -->  
  13. <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  14.     
  15. <!--   
  16.      針對web性能定義字符集，首選通過HTTP header來設置   
  17. 　  確保HTTP header和Meta標簽設置一致   
  18. 　  更多信息閱讀這裡: https://developers.google.com/speed/docs/best-practices/rendering#SpecifyCharsetEarly -->  
  19. <meta charset="utf-8">    
  20.     
  21. <!-- 指定頁面標題 -->  
  22. <title></title>  
  23.     
  24. <!-- 指定web頁面描述 -->  
  25. <meta name="description" content="">  
  26.     
  27. <!-- 指定web頁面作者 -->  
  28. <meta name="author" content="">  
  29.     
  30. <!-- 提示移動浏覽器使用設備<span style="width: auto; height: auto; float: none;" id="3_nwp"><a style="text-decoration: none;" mpid="3" target="_blank" href="http://cpro.baidu.com/cpro/ui/uiJS.PHP?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=ab4a7d1f97e0f21c&k=%BF%ED%B6%C8&k0=%BF%ED%B6%C8&kdi0=0&luki=1&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=1cf2e0971f7d4aab&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F4756%2EHtml&urlid=0" id="3_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">寬度</span></a></span>和縮放比 -->  
  31. <meta name="vIEwport" content="width=device-width, initial-scale=1">  
  32.     
  33. <!-- 在頁面加載前來加載CSS   
  34.      保證相關樣式的及時加載   
  35.      指定對應的URI屬性 -->  
  36. <link rel="stylesheet" href="">  
  37.     
  38. <!--   
  39.      加載<span style="width: auto; height: auto; float: none;" id="4_nwp"><a style="text-decoration: none;" mpid="4" target="_blank" href="http://cpro.baidu.com/cpro/ui/uiJS.PHP?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=ab4a7d1f97e0f21c&k=Html&k0=html&kdi0=0&luki=2&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=1cf2e0971f7d4aab&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F4756%2EHtml&urlid=0" id="4_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">Html</span></a></span>shiv和respond.JS來兼容老版本的IE浏覽器   
  40. 　  方便使用Html5中的新元素和media querIEs -->  
  41. <!--[if lt IE 9]>  
  42. <script <span style="width: auto; height: auto; float: none;" id="5_nwp"><a style="text-decoration: none;" mpid="5" target="_blank" href="http://cpro.baidu.com/cpro/ui/uiJS.PHP?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=ab4a7d1f97e0f21c&k=src&k0=src&kdi0=0&luki=5&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=1cf2e0971f7d4aab&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F4756%2EHtml&urlid=0" id="5_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">src</span></a></span>="//cdn.JSdelivr.Net/<span style="width: auto; height: auto; float: none;" id="6_nwp"><a style="text-decoration: none;" mpid="6" target="_blank" href="http://cpro.baidu.com/cpro/ui/uiJS.PHP?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=ab4a7d1f97e0f21c&k=Html5&k0=Html5&kdi0=0&luki=6&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=1cf2e0971f7d4aab&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F4756%2EHtml&urlid=0" id="6_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">Html5</span></a></span>shiv/3.7.2/Html5shiv.min.JS"></script>  
  43. <script src="//cdnJS.cloudflare.com/<span style="width: auto; height: auto; float: none;" id="7_nwp"><a style="text-decoration: none;" mpid="7" target="_blank" href="http://cpro.baidu.com/cpro/ui/uiJS.PHP?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=ab4a7d1f97e0f21c&k=ajax&k0=AJax&kdi0=0&luki=8&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=1cf2e0971f7d4aab&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F4756%2EHtml&urlid=0" id="7_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">AJax</span></a></span>/libs/respond.js/1.4.2/respond.min.JS"></script>  
  44. <![endif]-->  
  45.     
  46. <!-- 指定favicon的URI -->  
  47. <link rel="shortcut icon" href="">  
  48.     
  49. <!-- 下面注釋掉的是iOS/android書簽圖標-->  
  50. <!--   
  51. <meta name="mobile-web-app-capable" content="yes">  
  52. <link rel="icon" sizes="196x196" href="">  
  53. <link rel="apple-touch-icon" sizes="152x152" href="">  
  54. -->  
  55.     
  56. <!--    
  57.      如果可能使用async屬性來非阻斷的加載腳本   
  58. 　  例子: <script <span style="width: auto; height: auto; float: none;" id="8_nwp"><a style="text-decoration: none;" mpid="8" target="_blank" href="http://cpro.baidu.com/cpro/ui/uiJS.PHP?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=ab4a7d1f97e0f21c&k=src&k0=src&kdi0=0&luki=5&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=1cf2e0971f7d4aab&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F4756%2EHtml&urlid=0" id="8_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">src</span></a></span>="" async></script> -->  
  59. </<span style="width: auto; height: auto; float: none;" id="9_nwp"><a style="text-decoration: none;" mpid="9" target="_blank" href="http://cpro.baidu.com/cpro/ui/uiJS.PHP?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=ab4a7d1f97e0f21c&k=head&k0=head&kdi0=0&luki=4&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=1cf2e0971f7d4aab&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F4756%2EHtml&urlid=0" id="9_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">head</span></a></span>>  
  60. <body>  
  61.     
  62. <!-- 這裡添加頁面主要內容 -->  
  63.     
  64. <!-- 如果可能使用async屬性來非阻斷的加載腳本 -->  
  65. <!-- SCRIPTS -->  
  66. <!-- 例子: <script src="http://<span style="width: auto; height: auto; float: none;" id="10_nwp"><a style="text-decoration: none;" mpid="10" target="_blank" href="http://cpro.baidu.com/cpro/ui/uiJS.PHP?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=ab4a7d1f97e0f21c&k=AJax&k0=AJax&kdi0=0&luki=8&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=1cf2e0971f7d4aab&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F4756%2EHtml&urlid=0" id="10_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">ajax</span></a></span>.googleapis.com/AJax/libs/jquery/1.11.1/jquery.min.JS"></script> -->  
  67. </body>  
  68. </Html>  
HTML5詳解
HTML 5 事件屬性
W3C 在 1 月 22 日發布了最新的 HTML 5 工作草案。HTML 5 工作組包括 AOL
15 個 HTML5 Canvas 應用欣賞
 Html5呈現了很多的新特性，這在之前的HTML中是不可見到的。其中一個最值得提及的特
Unicode – CSS中文字體轉編碼
在制作網頁的時候，為了兼容大部分浏覽器，我們常常要求在CSS樣式文檔中不出現中文字體的，因此通過參

相關文章

HTML入門知識HTML5教程關於HTMLHTML和XhtmlHTML5特效代碼HTML5詳解
小編推薦
html5第三方部署Mugeda內容時權限信息的設定 學習-10件Flash可以做而HTML5做不了的事情 canvas做loading動畫 html5基礎教程常用技巧整理 html5本地存儲之localstorage 、本地數據庫、sessionStorage簡單使用示例 使用HTML5的JS選擇器操作頁面中的元素 移動端前端筆記 — 遇到的常見JS與CSS問題及解決方法 html5 音樂播放器 audio 標簽使用概述 淺析HTML5的WebSocket與服務器推送事件 html5版canvas自由拼圖實例
熱門推薦
Flash Video Against HTML5 HTML5視頻支持檢測(檢查浏覽器是否支持視頻播放) HTML 5緩存機制:Cache Manifest配 HTML5特性的檢測：Local Storage HTML5 Canvas實現玫瑰曲線和心形圖案的代碼實例 HTML5 創建canvas元素示例代碼 html5教程實現Photoshop漸變色效果 學習JavaScript實現自適應寬度的瀑布流 下一W-HTML5
大家都在看
TML5 Canvas 繪圖――使用 Canvas 繪制圖形圖文教程 使用html5 canvas 繪制精美的圖 如何處理有沖突的CSS規則 jQuery中get和post方法教程傳值測試及注意事項 js圖片延遲加載的實現方法及思路 XAML 實例演示之六 – 控件嵌套Nesting 關於div自適應高度/左右高度自適應一致的js代碼 EasyUi中的Combogrid 實現分頁和動態搜索遠程數據 HTML5、CSS3應用教程之跟DIV說再見
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved