這篇文章主要介紹了一個極簡的HTML5模版,代碼功能的說明基本上都融入于注釋之中,需要的朋友可以參考下
分享一個HTML5頁面開發(fā)的基礎(chǔ)性模板，包含了兩個版本：開發(fā)版本和注釋版本。可以被用于基礎(chǔ)的服務(wù)器端編程框架框架之中^_^
開發(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 style="width: auto; height: auto; float: none;" id="11_nwp"><a style="text-decoration: none;" mpid="11" target="_blank" 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>
<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>
<!-- 這里添加頁面主要內(nèi)容 -->
<!-- SCRIPTS：個人建議在天朝不要使用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 style="width: auto; height: auto; float: none;" id="0_nwp"><a style="text-decoration: none;" mpid="0" target="_blank" id="0_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">html</span></a></span>>
<!--
設(shè)置lang值來保證<html><span style="width: auto; height: auto; float: none;" id="1_nwp"><a style="text-decoration: none;" mpid="1" target="_blank" id="1_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">標簽</span></a></span>的互操作性及其可訪問性
更多HTML標簽全局性屬性
請閱讀這里: http://www.w3.org/TR/html-markup/global-attributes.html -->
<html>
<<span style="width: auto; height: auto; float: none;" id="2_nwp"><a style="text-decoration: none;" mpid="2" target="_blank" id="2_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">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">
<!--
針對web性能定義字符集，首選通過HTTP header來設(shè)置
確保HTTP header和Meta標簽設(shè)置一致
更多信息閱讀這里: 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="">
<!-- 提示移動瀏覽器使用設(shè)備<span style="width: auto; height: auto; float: none;" id="3_nwp"><a style="text-decoration: none;" mpid="3" target="_blank" id="3_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">寬度</span></a></span>和縮放比 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 在頁面加載前來加載CSS
保證相關(guān)樣式的及時加載
指定對應(yīng)的URI屬性 -->
<link rel="stylesheet" href="">
<!--
加載<span style="width: auto; height: auto; float: none;" id="4_nwp"><a style="text-decoration: none;" mpid="4" target="_blank" id="4_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">html</span></a></span>shiv和respond.js來兼容老版本的IE瀏覽器
方便使用HTML5中的新元素和media queries -->
<!--[if lt IE 9]>
<script <span style="width: auto; height: auto; float: none;" id="5_nwp"><a style="text-decoration: none;" mpid="5" target="_blank" id="5_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">src</span></a></span>="http://cdn.jsdelivr.net/<span style="width: auto; height: auto; float: none;" id="6_nwp"><a style="text-decoration: none;" mpid="6" target="_blank" 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>
<script src="http://cdnjs.cloudflare.com/<span style="width: auto; height: auto; float: none;" id="7_nwp"><a style="text-decoration: none;" mpid="7" target="_blank" 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>
<![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 <span style="width: auto; height: auto; float: none;" id="8_nwp"><a style="text-decoration: none;" mpid="8" target="_blank" id="8_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">src</span></a></span>="" async></script> -->
</<span style="width: auto; height: auto; float: none;" id="9_nwp"><a style="text-decoration: none;" mpid="9" target="_blank" id="9_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">head</span></a></span>>
<body>
<!-- 這里添加頁面主要內(nèi)容 -->
<!-- 如果可能使用async屬性來非阻斷的加載腳本 -->
<!-- SCRIPTS -->
<!-- 例子: <script src="http://<span style="width: auto; height: auto; float: none;" id="10_nwp"><a style="text-decoration: none;" mpid="10" target="_blank" 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> -->
</body>
</html>
版權(quán)所有:易賢網(wǎng)
公眾號
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試