HTML中的meta标签经常使用属性及其做用总结

时间 2019-11-05

标签 html meta 标签经常使用属性及其总结栏目 HTML 繁體版

原文原文链接

文章同步到githubhtml

之前没怎么太注意过meta标签的做用，只是简单了解一些经常使用属性，如今结合我的了解的进行记录与总结:html5

元数据

首先须要了解一下 元数据(metadata)元素的概念，用来构建HTML文档的基本结构，以及就如何处理文档向浏览器提供信息和指示，它们自己不是文档内容，但提供了关于后面文档内容的信息。——出自《html5权威指南》

如title、base、meta都是元数据元素。本文主要介绍<meta>。git

<meta>元素

元素	meta
父元素	head
属性	http-equiv、name、content、charset
HTML5中的变化	1. charset为HTML5中新增的，用来声明字符编码;2. http-equiv属性在HTML4中有不少值，在HTML5中只有refresh、default-style、content-type可用

<meta>具体用途

1. 指定名/值对定义元数据

name属性与content属性结合使用, name用来表示元数据的类型，表示当前<meta>标签的具体做用；content属性用来提供值。segmentfault

<meta name="参数" content="具体描述信息">

例如:浏览器

<!DOCTYPE HTML>
<html>
    <head>
        <title>demo</title>
        <meta name="keywords" content="电商,物流">
        <meta name="author" content="张三">
        <meta name="description" content="网站描述...">
    </head>
    <body>
        <div>welcome</div>
    </body>
</html>

元数据名称(name的值)	说明
application name	当前页所属Web应用系统的名称
keywords	描述网站内容的关键词,以逗号隔开，用于SEO搜索
description	当前页的说明
author	当前页的做者名
copyright	版权信息
renderer	renderer是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面
viewreport	它提供有关视口初始大小的提示，仅供移动设备使用

viewreport缓存

备注:图片截取自MDN服务器

主要介绍一个当meta标签的name属性值为viewreport时的视口的大小

1.mate标签name属性不设置viewreport

若是不设置name的值为viewreport，默认视口宽度为980

2.mate标签name属性设置viewreport

1.content内容为空时，默认视口宽度为980
2.content设置width，不设置initail-scale时，视口宽度为设置的width值
3.content不设置width，只设置initail-scale时，是能够根据initail-scale的值计算出视口的宽度

initail-scale = 屏幕宽度 / 视口宽度

4.content同时设置width和initail-scale时，视口宽度为width的值，页面显示按照initail-scale比率进行缩放
5.通常都是进行以下设置，来实现视口宽等于设备宽，布局完成后屏幕显示也不进行缩放

<meta name="viewport" content="width=device-width, initial-scale=1.0">

renderer

<meta name="renderer" content="webkit"> //默认webkit内核 
<meta name="renderer" content="ie-comp"> //默认IE兼容模式 
<meta name="renderer" content="ie-stand"> //默认IE标准模式

<meta name="renderer" content="webkit|ie-comp|ie-stand">

2. 声明字符编码

charset属性为HTML5新增的属性，用于声明字符编码,如下两种写法效果同样

<meta charset="utf-8"> //HTML5

<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //旧的HTML

3. 模拟http标头字段

http-equiv属性与content属性结合使用, http-equiv属性为指定所要模拟的标头字段的名称，content属性用来提供值。

<meta http-equiv="参数" content="具体的描述">

content-Type 声明网页字符编码:

<meta http-equiv="content-Type" content="text/html charset=UTF-8">

refresh 指定一个时间间隔(以秒为单位),在此时间过去以后从服务器从新载入当前页面,也能够另外指定一个页面.

<meta http-equiv="refresh" content="2;URL=http://www.baidu.com">//2秒后在当前页跳转到百度

X-UA-Compatible 浏览器采起何种版本渲染当前页面

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> //指定IE和Chrome使用最新版本渲染当前页面

expires 用于设定网页的到期时间，过时后网页必须到服务器上从新传输

<meta http-equiv="expires" content="Sunday 22 July 2016 16:30 GMT">

catch-control 用于指定全部缓存机制在整个请求/响应链中必须服从的指令

<meta http-equiv="cache-control" content="no-cache">//

content有如下值(百度百科):

content的值	说明
public	全部内容都将被缓存(客户端和代理服务器均可缓存)
private	内容只缓存到私有缓存中(仅客户端能够缓存，代理服务器不可缓存)
no-cache	必须先与服务器确认返回的响应是否被更改，而后才能使用该响应来知足后续对同一个网址的请求。所以，若是存在合适的验证令牌 (ETag)，no-cache 会发起往返通讯来验证缓存的响应，若是资源未被更改，能够避免下载。
no-store	全部内容都不会被缓存到缓存或 Internet 临时文件中
must-revalidation/proxy-revalidation	若是缓存的内容失效，请求必须发送到服务器/代理以进行从新验证
max-age=xxx (xxx is numeric)	缓存的内容将在 xxx 秒后失效, 这个选项只在HTTP 1.1可用, 并若是和Last-Modified一块儿使用时, 优先级较高

因为能力有限，结合demo总结以上<meta>元素的经常使用属性及其功能，可能有些纰漏，还望你们多多包含和指正，文章参考了《HTML权威指南》及其余相关博客，在我能力外没有总结的可参考以上博客。后续有时间还会继续学习和更新此文章，但愿能对你们有所帮助

参考文档:

移动web之viewport详解
 W3school
HTML meta标签总结与属性的使用介绍
 经常使用meta整理