這篇文章主要介紹了一個(gè)極簡(jiǎn)的HTML5模版,代碼功能的說(shuō)明基本上都融入于注釋之中,需要的朋友可以參考下
分享一個(gè)HTML5頁(yè)面開(kāi)發(fā)的基礎(chǔ)性模板，包含了兩個(gè)版本：開(kāi)發(fā)版本和注釋版本。可以被用于基礎(chǔ)的服務(wù)器端編程框架框架之中^_^
開(kāi)發(fā)版本
XML/HTML Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<!--[if lt IE 9]>
<script src="http://cdn.jsdelivr.net/<span id="11_nwp"><a mpid="11" target="_blank" id="11_nwl"><span>html5</span></a></span>shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="">
</head>
<body>
<!-- 這里添加頁(yè)面主要內(nèi)容 -->
<!-- SCRIPTS：個(gè)人建議在天朝不要使用Google的CDN了，是不是你就發(fā)現(xiàn)你的網(wǎng)站功能失效了 -->
<!-- Example: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> -->
</body>
</html>
注釋版本
XML/HTML Code
<!DOCTYPE <span id="0_nwp"><a mpid="0" target="_blank" id="0_nwl"><span>html</span></a></span>>
<!--
設(shè)置lang值來(lái)保證<html><span id="1_nwp"><a mpid="1" target="_blank" id="1_nwl"><span>標(biāo)簽</span></a></span>的互操作性及其可訪問(wèn)性
更多HTML標(biāo)簽全局性屬性
請(qǐng)閱讀這里: http://www.w3.org/TR/html-markup/global-attributes.html -->
<html>
<<span id="2_nwp"><a mpid="2" target="_blank" id="2_nwl"><span>head</span></a></span>>
<!--
告訴IE使用目前最新的布局引擎：
更多信息閱讀這里: https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
針對(duì)web性能定義字符集，首選通過(guò)HTTP header來(lái)設(shè)置
確保HTTP header和Meta標(biāo)簽設(shè)置一致
更多信息閱讀這里: https://developers.google.com/speed/docs/best-practices/rendering#SpecifyCharsetEarly -->
<meta charset="utf-8">
<!-- 指定頁(yè)面標(biāo)題 -->
<title></title>
<!-- 指定web頁(yè)面描述 -->
<meta name="description" content="">
<!-- 指定web頁(yè)面作者 -->
<meta name="author" content="">
<!-- 提示移動(dòng)瀏覽器使用設(shè)備<span id="3_nwp"><a mpid="3" target="_blank" id="3_nwl"><span>寬度</span></a></span>和縮放比 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 在頁(yè)面加載前來(lái)加載CSS
保證相關(guān)樣式的及時(shí)加載
指定對(duì)應(yīng)的URI屬性 -->
<link rel="stylesheet" href="">
<!--
加載<span id="4_nwp"><a mpid="4" target="_blank" id="4_nwl"><span>html</span></a></span>shiv和respond.js來(lái)兼容老版本的IE瀏覽器
方便使用HTML5中的新元素和media queries -->
<!--[if lt IE 9]>
<script <span id="5_nwp"><a mpid="5" target="_blank" id="5_nwl"><span>src</span></a></span>="http://cdn.jsdelivr.net/<span id="6_nwp"><a mpid="6" target="_blank" id="6_nwl"><span>html5</span></a></span>shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdnjs.cloudflare.com/<span id="7_nwp"><a mpid="7" target="_blank" id="7_nwl"><span>ajax</span></a></span>/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- 指定favicon的URI -->
<link rel="shortcut icon" href="">
<!-- 下面注釋掉的是ios/android書(shū)簽圖標(biāo)-->
<!--
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="196x196" href="">
<link rel="apple-touch-icon" sizes="152x152" href="">
-->
<!--
如果可能使用async屬性來(lái)非阻斷的加載腳本
例子: <script <span id="8_nwp"><a mpid="8" target="_blank" id="8_nwl"><span>src</span></a></span>="" async></script> -->
</<span id="9_nwp"><a mpid="9" target="_blank" id="9_nwl"><span>head</span></a></span>>
<body>
<!-- 這里添加頁(yè)面主要內(nèi)容 -->
<!-- 如果可能使用async屬性來(lái)非阻斷的加載腳本 -->
<!-- SCRIPTS -->
<!-- 例子: <script src="http://<span id="10_nwp"><a mpid="10" target="_blank" id="10_nwl"><span>ajax</span></a></span>.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> -->
</body>
</html>