网页中head标签中的常用标签总结

最新推荐文章于 2024-03-17 08:30:20 发布

de985294664890

最新推荐文章于 2024-03-17 08:30:20 发布

阅读量389

点赞数

文章标签：运维

原文链接：http://www.cnblogs.com/wuzhike/p/5746829.html

版权

常见的<head></head>之间的标签为：meta , title , link , style ,script。

1、meta 标签----name

　　<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。　　

1.1　　Keywords
　　#关键词
<meta name="Keywords" content=""/>

1.2　　Description
　　#描述：主要用户搜索引擎中的说明
<meta name="Description" content=""/>

1.3　　Copyright
　　#版权信息
<meta name="Copyright" content=""/>

1.4　　author
　　#作者
<meta name="author" content=""/>

1.5、robots(机器人向导)
　　#告诉机器人那些页面需要索引，哪些页面不需要索引。
content的参数有：all,none,onindex,follow,nofollow
<meta name="robots" content="all">

2、meta 标签---http-equiv

　　http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容

2.1　　Expires（期限）
说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。
用法：<meta http-equiv="expires" content="Fri,12 Jan 2001 18:18:18 GMT">
注意：必须使用GMT的时间格式。

2.2　　Pragma(cache模式）
说明：禁止浏览器从本地计算机的缓存中访问页面内容。
用法：<meta http-equiv="Pragma" content="no-cache">
注意：这样设定，访问者将无法脱机浏览。

2.3　　cache-control（缓存控制）
说明：禁止缓存页面
用法：<meta http-equiv="cache-control" content="no-store">

2.3　　Refresh（刷新）
说明：自动刷新并转到新页面。
用法：<meta http-equiv="Refresh" content="2;URL">；（注意后面的分号，分别在秒数的前面和网址的后面，URL可为空）
注意：其中的2是指停留2秒钟后自动刷新到URL网址。

2.4　　Set-Cookie(cookie设定）
说明：如果网页过期，那么存盘的cookie将被删除。
用法：<meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT; path=/">
注意：必须使用GMT的时间格式。

2.5　　Window-target（显示窗口的设定）
说明：强制页面在当前窗口以独立页面显示。
用法：<meta http-equiv="Window-target" content="_top">
注意：用来防止别人在框架里调用自己的页面。

2.6　　content-Type（显示字符集的设定）
说明：设定页面使用的字符集。
用法：<meta http-equiv="content-Type" content="text/html; charset=gb2312">

2.7、content-Language（显示语言的设定）
用法：<meta http-equiv="Content-Language" content="zh-cn" />

http-equiv还有很多其他的key-values对，他们通常是由某个公司定制，以实现特殊用途的。

2.8 X-UA-Compatible (IE浏览器识别，规定浏览器的渲染引擎，这是微软为了保持兼容性采取的一种折中策略)

用法：<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
　　　　最新的引擎渲染网页，chrome=1则可以激活IE中的Chrome Frame插件.

******（任何人都可以定制这些key-value对，但如果没有人理解和使用你的个性key-value，那它们没有一点用处。）

例如：

网页定级评价
IE4.0以上版本的浏览器可以防止浏览一些受限制的网站，而之所以浏览器会自动识别某些网站是否受限制，就是因为在网站meta标签中已经设置好了该网站的级别，而该级别的评定是由美国RSAC，即娱乐委员会的评级机构评定的，如果你需要评价自己的网站，按要求提交表格，那么RSAC会提供一段meta代码给你，复制到自己网页里就可以了。下面就是一段代码的样例：
〈meta http-equiv=″PICS－Label″ content=′（PICS－1.1 l gen true comment ″RSACi North America Server″ for on ″2001.08.16T08:15－0500″ r (n 0 s 0 v 0 l 0））′〉

3、link(指向某一资源)

　　常用的格式<link rel="" href="" type=""></link>

　　rel：该资源与本网页的关系，href：该资源的地址，type：该资源的MIME类型。rel分类如下：

3.1　　rel = "stylesheet" (外部样式表)

3.2　　rel = "shortcut icon" (网站图标)
<link rel="shortcut icon" type="image/x-icon" href="xxx.ico"></link>

3.3　　rel = "dns-prefetch" (dns预解析)
<link rel="dns-prefetch" href="//www.baidu.com"></link>

我们知道，当我们访问一个网站如 www.amazon.com 时，需要将这个域名先转化为对应的 IP 地址，这是一个非常耗时的过程。

DNS prefetch 分析这个页面需要的资源所在的域名，浏览器空闲时提前将这些域名转化为 IP 地址，真正请求资源时就避免了上述这个过程的时间。

<meta http-equiv='x-dns-prefetch-control' content='on'> <link rel='dns-prefetch' href='http://g-ecx.images-amazon.com'> <link rel='dns-prefetch' href='http://z-ecx.images-amazon.com'> <link rel='dns-prefetch' href='http://ecx.images-amazon.com'> <link rel='dns-prefetch' href='http://completion.amazon.com'> <link rel='dns-prefetch' href='http://fls-na.amazon.com'>

应用场景1：我们的资源存在在不同的 CDN 中，那提前声明好这些资源的域名，就可以节省请求发生时产生的域名解析的时间。
应用场景2：如果我们知道用户接下来的操作一定会发起一起资源的请求，那就可以将这个资源进行 DNS-Prefetch，加强用户体验。

转载于:https://www.cnblogs.com/wuzhike/p/5746829.html

de985294664890

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页中head标签中的常用标签总结

常见的<head></head>之间的标签为：meta , title , link , style ,script。1、meta 标签----name　　<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。　　1.1　　Keywords 　　#关键词 <met...
复制链接

扫一扫