关于html头部引用(meta,link)

/*这一段头部表示 如果安装了GCF,则使用GCF来渲染页面,如果为安装GCF,则使用最高版本的IE内核进行渲染。*/
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">

/*这一段头部表示 IE浏览器用IE7模拟,IE9还是用IE9来渲染*/
<meta content="IE=EmulateIE7, IE=9" http-equiv="X-UA-Compatible">

/*头部的申明 利于SEO*/
<meta charset="utf-8">/*一般性简写成这样的也就够了*/
<meta content="Apple Inc." name="Author">/*这个是网站的所属标签提示*/

/*可以阻止用户触摸放大屏幕*/
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">/*一般性这种写法就可以了*/
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">/*这种写法更严谨,只是没有必要,效果和上面的一样*/
/*width - viewport的宽度 height - viewport的高度 
initial-scale - 初始的缩放比例 
minimum-scale - 允许用户缩放到的最小比例 
maximum-scale - 允许用户缩放到的最大比例 
user-scalable - 用户是否可以手动缩放*/

/*这个是html中写ico的方法,另外js和php后台都可以控制替换最初静态的html中的ico*/
/*其中<link rel="shortcut icon" href="favicon.ico">这段代码最关键*/
<link rel="shortcut icon" href="http://www.luxiw.com/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="icon" href="http://www.luxiw.com/favicon.ico" type="image/vnd.microsoft.icon">
/*底下的代码是在收藏夹中也可以显示图标*/
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="Bookmark" href="images/favicon.ico">

第一:针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓(虽然黑莓在国内的市场占有率很低,但是多家一行有 好处)
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

第二:微软的老式浏览器(这个可以不用,比较基本没有了。)
<meta name="MobileOptimized" content="320"/>

第三:UC浏览器(市场占有很强势的一个moblie浏览器)
强制竖屏:
<meta name="screen-orientation" content="portrait"/>
强制全屏:
<meta name="full-screen" content="yes"/>
应用模式:
<meta name="browsermode" content="application"/>

QQ浏览器(腾讯的就不多说了,用户群体在那)
强制竖屏:
<meta name="x5-orientation" content="portrait"/>
强制全屏:
<meta name="x5-fullscreen" content="true"/>
应用模式:
<meta name="x5-page-mode" content="app"/>

第四:windows phone 点击无高光
<meta name="msapplication-tap-highlight" content="no"/>

第六:忽略页面中的数字识别为电话号码 还有一个email识别
<meta name="format-detection" content="telephone=no,email=no"/>

这个里面可以设置address=no;email=no;telephone=no用分号隔开即可。

<meta content="email=no" name="format-detection" />

第七:是否启动webapp功能,会删除默认的苹果工具栏和菜单栏
<meta name="mobile-webapp-frame-capable" content="yes"/>

第八:当启动webapp功能时,显示手机信号、时间、电池的顶部导航栏的颜色。
<meta name="mobile-webapp-frame-status-bar-style" content="black"/>

第九:隐藏浏览器导航栏
<meta name="apple-mobile-web-app-capable" content="yes" />

如何关闭iOS中键盘自动大写

我们知道在iOS中,当虚拟键盘弹出时,默认情况下键盘是开启首字母大写的功能的
移动版本webkit为input元素提供了autocapitalize属性,通过指定autocapitalize="off"来关闭键盘默认首字母大写

缓存控制
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Cache-Control" content="max-age=300"/>
<meta http-equiv="Cache-Control" content="max-age=0"/>

HTTP刷新
WAP 浏览器不支持用 <meta/> 标签来控制缓存, 但它们确实知道 HTTP 头 "Cache-Control: no-cache" 的意思. 这种情况下, 
解决方案是在服务器端的 HTTP 响应中设置 HTTP 头
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="refresh" content="15"/>

/*关于强制全屏 IOS*/
<meta name="apple-touch-fullscreen" content="yes"/>
/*关于标签的问题,每个浏览器可能自己有一套设定的方式,这个就是IOS的document链接地址*/
https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

关于设置IOS的桌面添加主屏的功能(可以让web页面更像一个native app)
<link rel="apple-touch-icon-precomposed" href="这里是你的图片地址" />
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-retina.png" />

其中,apple-touch-icon-precomposed添加到桌面时有圆角/高光修饰,apple-touch-icon只处理圆角,没有高光修饰

<link rel=”dns-prefetch” href=”http://a0.twimg.com”/>

<link rel=”dns-prefetch” href=”http://a1.twimg.com”/>
<link rel=”dns-prefetch” href=”http://a2.twimg.com”/>
<link rel=”dns-prefetch” href=”http://a3.twimg.com”/>
<link rel=”dns-prefetch” href=”http://api.twitter.com”/>

dns-prefetch是HTML5的新增内容,主要用于前端优化,减少DNS的请求,预解析DNS。通过以上的例子可以看到,它将域名缓存后,当用户点击其它页面地址后自动的获取。从而控制浏览器来解析域名。

另外,<meta http-equiv="x-dns-prefetch-control" content="on"> 可以设置当前页面是否要进行DNS解析。content="on"代表的是解析/content="off"代表的是不解析。默认解析。

时间: 2024-10-20 13:50:06

关于html头部引用(meta,link)的相关文章

移动端meta头部引用/

最近有在写移动端的页面,现将移动端头部所用到的<meta>整理一下,方便日后使用. <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /><!-- 禁止缩放 --> <meta http-equiv="Cache-Control" conten

html meta link script form

<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前.<!DOCTYPE> 声明不是 HTML 标签:它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令. <meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词.<meta> 标签位于文档的头部,不包含任何内容.<meta> 标签的属性定义了与文档相关联的名称/值对.

css的两种引用方式 link和@import

学习web开发的最大乐趣就是不断的发现自己以前不曾见过的东西,这些东西对于我来说是那么的新鲜有趣. 比如说今天偶尔研究别人的网站,就发现了有趣的东东. 当点开此网页的css时(这个css文件命名方式就有些奇怪,后来才知道文件名里的all是什么意思) 下面就是点开之后所看见的,之后又回到源代码,但是并没有找到其它的css文件,显然下面这些语句已经引用上了所有的css语句. 下面我就对link和@import这种引用方式进行了总结,和在应用方面进行了区分. 1.link语法结构<link href=

html5手机网站需要加的那些meta/link标签,html5 meta全解

原文链接:http://blog.csdn.net/kongjiea/article/details/17092413(收藏专用!如需转载,请点击链接,联系博主,获得同意后方可转载) 3.name之设置作者姓名及联系方式 说明:设置作者姓名及联系方式 <meta name="author" contect="name, [email protected]" /> 4.其他 <!-- 声明文档使用的字符编码 -->    <meta ch

1、HTML+DIV+CSS零基础快速入门到制作企业站视频课程_8 css 3种样式引用方法&lt;link&gt;&lt;style&gt;

0.行内样式添加CSS <p style="color: red;">这是一个段落</p> 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css</title> 6 </head> 7 <body> 8 <p&

php获取json文件数据并动态修改网站头部文件meta信息 --基于CI框架

话不多说了.直接开始吧  (如果有中文.请注意json只认utf-8编码) 首先你需要有一个json文件数据 {        "index": {                 "title": "indexmytitle",                 "keywords": "中文",                 "content": "中文",   

HTML “头部” 之&lt;meta&gt;标签

<meta>在head标签中使用,不在网页中显示 设置文档编码 设置关键字和描述方便SEO 设置移动端开发缩放比例 设置刷新和跳转   设置兼容IE7 微软的IE6是通过XP.Win2003等操作系统发布出来,作为占统治地位的桌面操作系统,也使得IE占据了通知地位,许多的网站开发的时候,就按照IE6的标准去开发,而IE6自身的标准也是微软公司内部定义的.到了IE7出来的时候,采用了微软公司内部标准以及部分W3C的标准,这个时候许多网站升级到IE7的时候,就比较痛苦,很多代码必须调整后,才能够正

关于jQuery插件imgAreaSelect基础讲解

关于ImgAreaSelect,  是一jQuery插件,它支持用户通过鼠标拖曳选择图片的一部分,如图片拖曳.图片编辑等~~来具体看一下 1.先下载imgAreaSelect插件 下载地址: 英文:http://odyniec.net/projects/imgareaselect/ 中文:http://www.css88.com/EasyTools/javascript/jQueryPlugin/imgAreaSelect/index.html 在头部引用: <link rel="styl

html头部meta属性大全——各种奇葩属性设置大归类

常用通用属性: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <!--设置屏幕缩放--> <link rel="dns-prefetch" href="//www.zhoulujun.cn"> <!--设置dns缓存-->