HTML頁面模板代碼

時間 2019-11-11

標籤 html 頁面模板代碼欄目 HTML 简体版

原文原文鏈接

做者聲明：本博客中所寫的文章，都是博主自學過程的筆記，參考了不少的學習資料，學習資料和筆記會註明出處，全部的內容都以交流學習爲主。有不正確的地方，歡迎批評指正css

HTML頁面模板代碼

經常使用的頁面模板html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <link rel="shortcut icon" href="/favicon.ico" />
  <link rel="bookmark" href="/favicon.ico" type="image/x-icon"/>
  <!-- 設置緩存 -->
  <!-- 設定網頁的到期時間  -->
  <meta http-equiv="Expires" content="-1">
  <!-- 清除緩存（再訪問這個網站要從新下載！） -->
  <meta http-equiv="Cache-Control" content="no-cache">
  <!-- 禁止瀏覽器從本地機的緩存中調閱頁面內容，訪問者將沒法脫機瀏覽 -->
  <meta http-equiv="Pragma" content="no-cache">

  <!-- author用於定義網頁做者 -->
  <meta name="author" content="aicoder.com">
  <!-- 就是當點擊網頁添加至主屏幕功能時，會在主屏幕上生成一個圖標。點擊該圖標會進入webapp功能。就是模擬本地應用的模式來瀏覽web頁面。 -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <!-- 當啓動webapp功能時，顯示手機信號、時間、電池的頂部導航欄的顏色。默認值爲default（白色），能夠定爲black（黑色）和black-translucent（灰色半透明）。這個主要是根據實際的頁面設計的主體色爲搭配來進行設置。 -->
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <!-- 添加到主屏幕後，app全屏顯示 -->
  <meta content="yes" name="apple-touch-fullscreen" />

  <!-- 默認設備會自動識別任何多是電話和郵箱的字符串。設置telephone=no能夠禁用這項功能。 -->
  <meta content="telephone=no,email=no" name="format-detection" />

  <!-- UC瀏覽器私有 -->
  <!-- 全屏模式 -->
  <meta name="full-screen" content="yes">
  <!-- 應用模式 -->
  <meta name="browsermode" content="application">

  <!-- QQ瀏覽器私有 -->
  <!-- 全屏模式 -->
  <meta name="x5-fullscreen" content="true">
  <!-- 應用模式 -->
  <meta name="x5-page-mode" content="app">
  <meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes" />


  <!-- iOS下頁面啓動加載時顯示的畫面圖片，避免加載時的白屏。 -->
  <!-- <link rel="apple-touch-startup-image" href="start.png" /> -->

  <!-- 蘋果爲iOS設備配備了apple-touch-icon私有屬性，添加該屬性，在iPhone,iPad,iTouch的safari瀏覽器上能夠使用添加到主屏按鈕將網站添加到主屏幕上，方便用戶之後訪問。 -->
  <!-- <link rel="apple-touch-icon" href="/custom_icon.png" /> -->
  <!-- 系統會自動爲apple-touch-icon圖標添加圓角及高光。若是不想系統對圖標添加效果，能夠用apple-touch-icon-precomposed代替apple-touch-icon， -->
  <!-- <link href="//gw.alicdn.com/tps/i2/TB1nmqyFFXXXXcQbFXXE5jB3XXX-114-114.png" rel="apple-touch-icon-precomposed"> -->
  <link rel="stylesheet" href="./lib/swiper/css/swiper.min.css">
  <link rel="stylesheet" href="./font/font-shop/iconfont.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/index.css">
  <script src="./js/rem.js"></script>
  <title>優選網</title>
</head>

<body>
  
</body>

</html>