HTML系列 -- meta标签

346 阅读2分钟

meta 标签

作用

1. 便于被搜索
如:name="keywords"
    name="description"
2. 设置缓存机制
如:http-equiv="expires"
    http-equiv="Cache-Control"
3. 可以自动刷新
如:http-equiv="Refresh"

name属性

作用

1. 用来【描述网页】
2. 以便于搜索引擎机器人查找、分类
3. 搜索引擎的工作原理:就是根据这些网页的关键字和描述内容进行搜索和分类的

格式

<meta name="参数类型" content="参数具体的值">

例子

name="keywords"[网页关键字]    content="Lxxyx,博客,工科生,前端"
    
name="description"[网页内容]   content="工科生,热爱前端与编程。目前大二,这是我的前端博客"
    
name="viewport"[移动端窗口]
    视图模式
        content="width=device-width,initial-scale=1"
    响应式设计
        width:控制 viewport 的大小,可以指定的一个值,如 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
        height:和 width 相对应,指定高度。
        initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
        user-scalable:用户是否可以手动缩放。
        maximum-scale:允许用户缩放到的最大比例。
        minimum-scale:允许用户缩放到的最小比例。
            
name="robots"[索引方式]
    content="none"       [搜索引擎将忽略此网页]
    content="noindex"    搜索引擎不索引此网页
    content="nofollow"   搜索引擎不继续通过此网页的链接索引搜索其它的网页
    content="all"      [搜索引擎将索引此网页]
    content="index"    搜索引擎索引此网页
    content="follow"   搜索引擎继续通过此网页的链接索引搜索其它的网页
            
name="renderer"[渲染模式]
    content="webkit"
    content="ie-comp"

http-equiv属性

作用

1. 【向浏览器传回一些有用的信息】
2. 以帮助正确和精确地显示网页内容

格式

<meta http-equiv="参数类型" content="参数具体的值">

例子

http-equiv="expires"[网页缓存的到期时间]
    content="Fri,01Jan201618:18:18GMT"  必须使用GMT的时间格式  过期后必须重新从服务器传输过来
        
http-equiv="Cache-Control"[设置缓存机制]
     content="max-age=3600"    缓存有效时间为3600秒
     content="no-cache"    不缓存  直接进行协商缓存  HTTP1.1的,现在大多数浏览器都是用这个
         
http-equiv="Pragma"[设置不缓存] 
    content="no-cache"    HTTP/1.0,老IE浏览器用的,为了兼容跟上面的一起用
        
http-equiv="Refresh"[自动刷新并指向新页面]
    content="2;URL=http://www.jb51.net"   停留2秒钟后自动刷新到URL网址
        
http-equiv="Set-Cookie"[cookie设定]
    content="cookievalue=xxx;expires=Wednesday, 20-Jun-2007 22:33:00 GMT; path=/"
        
http-equiv="content-Type"[字符集]
    content="text/html;charset=gb2312"   编码为简体中文
    content="text/html;charset=big5"   编码为繁体中文
        
http-equiv="content-Language"[显示语言的设定]
    content="zh-cn"