作者声明:本博客中所写的文章,都是博主自学过程的笔记,参考了很多的学习资料,学习资料和笔记会注明出处,所有的内容都以交流学习为主。有不正确的地方,欢迎批评指正
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>