HTML5網站開發專用基礎模板（包含完整註釋）

gbtags發表於2014-07-21
HTML網站

　　分享一個HTML5頁面開發的基礎性模板，包含了兩個版本： 開發版本 註釋版本

　　開發版本

<!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="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="">
</head>
<body>

<!-- 這裡新增頁面主要內容 -->

<!-- SCRIPTS：個人建議在天朝不要使用Google的CDN了，是不是你就發現你的網站功能失效了 -->
<!-- Example: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> -->
</body>
</html>

　　註釋版本

<!DOCTYPE html>
<!-- 
     設定lang值來保證<html>標籤的互操作性及其可訪問性
　  更多HTML標籤全域性性屬性
　  請閱讀這裡: http://www.w3.org/TR/html-markup/global-attributes.html -->
<html>

<head>

<!--
    告訴IE使用目前最新的佈局引擎：
   &nbsp;更多資訊閱讀這裡: https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!--
     針對web效能定義字符集，首選通過HTTP header來設定
　  確保HTTP header和Meta標籤設定一致
　  更多資訊閱讀這裡: https://developers.google.com/speed/docs/best-practices/rendering#SpecifyCharsetEarly -->
<meta charset="utf-8"> 

<!-- 指定頁面標題 -->
<title></title>

<!-- 指定web頁面描述 -->
<meta name="description" content="">

<!-- 指定web頁面作者 -->
<meta name="author" content="">

<!-- 提示移動瀏覽器使用裝置寬度和縮放比 -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- 在頁面載入前來載入CSS
     保證相關樣式的及時載入
     指定對應的URI屬性 -->
<link rel="stylesheet" href="">

<!--
     載入htmlshiv和respond.js來相容老版本的IE瀏覽器
　  方便使用HTML5中的新元素和media queries -->
<!--[if lt IE 9]>
<script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

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

<!-- 下面註釋掉的是ios/android書籤圖示-->
<!--
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="196x196" href="">
<link rel="apple-touch-icon" sizes="152x152" href="">
-->

<!-- 
     如果可能使用async屬性來非阻斷的載入指令碼
　  例子: <script src="" async></script> -->
</head>
<body>

<!-- 這裡新增頁面主要內容 -->

<!-- 如果可能使用async屬性來非阻斷的載入指令碼 -->
<!-- SCRIPTS -->
<!-- 例子: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> -->
</body>
</html>

相關文章