HTML中的meta标签常用属性及其作用总结

Keven 发布于2019-08-01 17:15 / 1114人阅读

摘要：元素父元素属性中的变化为中新增的，用来声明字符编码属性在中有很多值，在中只有可用具体用途元素出去属性外，都是属性或属性结合来使用指定名值对定义元数据属性与属性结合使用用来表示元数据的类型，表示当前标签的具体作用属性用来提供值。

文章同步到github

以前没怎么太注意过meta标签的作用，只是简单了解一些常用属性，现在结合个人了解的进行记录与总结:

元数据

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

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

元素

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

元素可以定义文档的各种元数据，提供各种文档信息，通俗点说就是可以理解为提供了关于网站的各种信息。html文档中可以包含多个元素，每个元素只能用于一种用途，如果想定义多个文档信息，则需要在head标签中添加多个meta元素。

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

具体用途

元素出去charset属性外，都是http-equiv属性或name属性结合content来使用

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

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

例如:

元数据名称(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.一般都是进行如下设置，来实现视口宽等于设备宽，布局完成后屏幕显示也不进行缩放

renderer

 //默认webkit内核 
 //默认IE兼容模式 
 //默认IE标准模式

2. 声明字符编码

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

 //HTML5

 //旧的HTML

3. 模拟http标头字段

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

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

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

//2秒后在当前页跳转到百度

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

 //指定IE和Chrome使用最新版本渲染当前页面

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

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

//

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总结以上元素的常用属性及其功能，可能有些纰漏，还望大家多多包含和指正，文章参考了《HTML权威指南》及其他相关博客，在我能力外没有总结的可参考以上博客。后续有时间还会继续学习和更新此文章，希望能对大家有所帮助

参考文档:

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

专线服务私有云 html标签属性 html标签按钮属性 html标签的属性 html常用标签

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51054.html

面试知识点总结

摘要：最近面试几家前端职位，想知道目前的前端面试题是偏向哪一块，都主要问到的是语法，闭包，原型链，继承那一块。并且将面试题的知识点汇总一下。参考网站面试题图片过多的时候如何优化图标很多的时候可以用雪碧图图片过大时候可以压缩一下。最近面试几家前端职位，想知道目前的前端面试题是偏向哪一块，都主要问到的是ES6语法，闭包，原型链，继承那一块。并且将面试题的知识点汇总一下。有助于下次面试。 1.H...

王晗 2019-08-30 14:15 评论0 收藏0
面试知识点总结

摘要：最近面试几家前端职位，想知道目前的前端面试题是偏向哪一块，都主要问到的是语法，闭包，原型链，继承那一块。并且将面试题的知识点汇总一下。参考网站面试题图片过多的时候如何优化图标很多的时候可以用雪碧图图片过大时候可以压缩一下。最近面试几家前端职位，想知道目前的前端面试题是偏向哪一块，都主要问到的是ES6语法，闭包，原型链，继承那一块。并且将面试题的知识点汇总一下。有助于下次面试。 1.H...

CrazyCodes 2019-08-22 15:46 评论0 收藏0
HTMl

摘要：表格定义表格以网格形式表示数据。标题一标题二标题三用来创建表格，表格的内容逐行编写每行单元格表示行列的标题。在中，声明需引用文档类型声明，因为是基于标准通用标记语言。块级元素有些元素在浏览器窗口中显示总是另起一行，这些元素被称为块级元素结构 Document HTML 代码由包含在尖括号中的字符组成。这些成为 HTML 代...

stackfing 2019-08-02 16:04 评论0 收藏0