一、定义和用法

<meta> 标签始终位于 head 元素中。<meta> 元素可提供有关页面的元信息（meta-information），元数据不会显示在页面上，但是对于机器是可读的。比如针对搜索引擎和更新频度的描述和关键词。

元数据（metadata）是关于数据的信息。元数据总是以名称/值的形式被成对传递的。

典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

二、可选的属性

属性 值 描述
http-equiv
  • content-type
  • expires
  • refresh
  • set-cookie
 把 content 属性关联到 HTTP 头部。
name
  • author
  • description
  • keywords
  • generator
  • revised
  • others
 把 content 属性关联到一个名称。
scheme some_text 定义用于翻译 content 属性值的格式。

注意：当有http-equiv或者name属性时，必须要有content属性，content 属性提供了名称/值对中的值，content属性定义与 http-equiv 或 name 属性相关的元信息。content始终要和 name 属性或 http-equiv 属性一起使用

1、http-equiv 属性

http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。

http-equiv属性是添加http头部内容，对一些自定义的，或者需要额外添加的http头部内容，需要发送到浏览器中，我们就可以是使用这个属性。

使用带有 http-equiv 属性的 <meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。

常用的有：

1、content-Type(显示字符集的设定)：设定页面使用的字符集。



用法：<meta http-equiv="content-Type" content="text/html;charset=utf-8">
注意：charset是声明文档使用的字符编码，解决乱码问题主要用的就是它，charset一定要写第一行，不然就可能会产生乱码了。

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

两个都是等效的。
、Expires(期限)：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。 

用法： <meta http-equiv="expires" content="Fri,12Jan200118:18:18GMT"> 
注意：必须使用GMT的时间格式。 

、Refresh(刷新)：自动刷新并指向新页面。

 用法： <meta http-equiv="Refresh" content="2; URL=http://www.baidu.com"> //(注意后面的引号，分别在秒数的前面和网址的后面) 注意：其中的2是指停留2秒钟后自动刷新到URL网址。

4、Set-Cookie(cookie设定)：如果网页过期，那么存盘的cookie将被删除。

用法： <meta http-equiv="Set-Cookie" content="cookie value=xxx; expires=Friday,12-Jan-200118:18:18GMT；path=/"> 
注意：必须使用GMT的时间格式。

2、name 属性

name 属性提供了名称/值对中的名称。通常情况下，您可以自由使用对自己和源文档的读者来说富有意义的名称。

如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。

常用的有：

分成两部分：
一个是SEO部分（搜索引擎优化）

、Keywords(关键字)：keywords用来告诉搜索引擎你网页的关键字是什么。

举例：

<meta name="keywords" content="xxxx">

2、description(网站内容描述)：description用来告诉搜索引擎你的网站主要内容。



举例：

<meta name="description" content="xxx">

、author(作者)：标注网页的作者

举例：

<meta name="author" content="github.com/lihuijuan">

另一部分是viewport

viewport：主要是影响移动端页面布局的

举例：

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

content 有参数：

width viewport 宽度(数值/device-width)；height viewport 高度(数值/device-height)；

initial-scale 初始缩放比例；maximum-scale 最大缩放比例；

minimum-scale 最小缩放比例；user-scalable 是否允许用户缩放(yes/no)

3、scheme 属性（没用过）

scheme 属性用于指定要用来翻译属性值的方案。此方案应该在由 <head> 标签的 profile 属性指定的概况文件中进行了定义。

meta标签的常见用法的更多相关文章

  1. [HTML知识体系]meta标签的常见用法

    1.meta是什么 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. 标签位于文档的头部,不包含任何内容. 标签的属性定义了与文档相关联的名称 ...

  2. html中a标签的常见用法

    html中a标签的常见用法 一.总结 一句话总结: a.页面跳转 b.使用锚点定位 c.下载文件 二.html中<a>标签的用法 转自或参考:html中<a>标签的用法http ...

  3. meta标签的一些用法

    meta是html语言head区的一个辅助性标签.几乎所有的网页里,我们可以看到类似下面这段的html代码: <head> <meta http-equiv="conten ...

  4. <meta>标签 的一些用法

    网上找到的一些资料:自己留着! 链接 :http://www.wzsky.net/html/Website/htmlcss/116165.html meta是html语言head区的一个辅助性标签.也 ...

  5. html meta标签用法详细介绍

    meta是html语言head区的一个辅助性标签. 在页面中都有类似这样的html代码: <head> <meta http-equiv="content-Type&quo ...

  6. meta标签用法总结

    注:本文并非本人撰写,摘自百度百科 meta标签用来描述一个HTML网页文档的属性,例如作者.日期和时间.网页描述.关键词.页面刷新等. 一.作用:       META标签是HTML标记HEAD区的 ...

  7. 【JSP】<meta>标签用法

    转载自:http://blog.sina.com.cn/s/blog_65c74cce0102v39z.html  非常感谢这位博主,急着用,改日再细细品味重新整理这篇博文. http-equiv M ...

  8. html中meta标签及用法理解

    自己一直想成为高级前端开发工程师,而自学.奈何最近感觉自学收效甚微,一度迷茫. 不破不立,打算改变这样的状态. 春节后上班第一天,今年打算好好实现自己的前端梦想. 重新整理.总结前端技术. 废话,就不 ...

  9. 前端三部曲之Html -- 1（html的基本结构和常见的meta标签的作用）

    一个H5页面的基本结构是什么 我么在编辑器中输入html:5可以得到 <!DOCTYPE html> <!-- 声明文档类型 --> <html lang="e ...

随机推荐

  1. QTP基本方法2------截取字符串

    1.instr: 返回字符串在另外一个字符串中第一次出现的位置 结构:instr([start],string1,string2[,compare]) start:开始位置,可选参数,默认为1 str ...

  2. hibernate二级缓存实例

    hibernate.cfg.xml <?xml version='1.0' encoding='UTF-8'?><!DOCTYPE hibernate-configuration P ...

  3. 定义一个类Point，代表一个点，public属性有x和y，方法有显示点坐标 show（），构造函数有两个参数分别给x,y赋值，在main方法中构造两个对象，再创建一方法(getMiddle)为取两个点构成线段的中点的坐标，参数为2个点对象，调用此方法后得到一个新的点，编写Application，显示该对象的坐标值。

    这个题让我更加明白了类创建对象的实质 代码中用到:1.对象作形参;2.对象作返回值 以下用代码具体分析: class Point1{ public double x; public double y; ...

  4. CGContextRef 用法总结

    0  CGContextRef context = UIGraphicsGetCurrentContext(); 设置上下文1 CGContextMoveToPoint 开始画线2 CGContext ...

  5. C#多个if与if+多个else if有何不同？

    int a=1; if(a==1){System.out.println("1");} if(a==2){System.out.println("2");} i ...

  6. webpack+vuecli使用问题总结

    1,按照官网安装步骤install $ npm install -g vue-cli $ vue init webpack my-project $ cd my-project $ npm insta ...

  7. 1004. Counting Leaves（30）—PAT 甲级

    A family hierarchy is usually presented by a pedigree tree. Your job is to count those family member ...

  8. 由object元素引出的事件注册问题和层级显示问题

    项目有一个双击监控视频全屏的需求,视频播放使用的是IE下的ActiveX控件,web页面中使用HTML嵌入对象元素object.预期方案如下: 1.在开发ActiveX控件时加入双击事件. 2.通过d ...

  9. Redis学习笔记（二）

    解读Retwis官网例子 Redis需要考虑需要哪些keys以及对应的value使用合适的数据类型进行存储.在retwis例子中,我们需要users,user的粉丝列表, user的关注用户列表等等. ...

  10. STM32 HAL库学习系列第4篇 定时器TIM----- 开始定时器与PWM输出配置

    基本流程: 1.配置定时器 2.开启定时器 3.动态改变pwm输出,改变值  HAL_TIM_PWM_Start(&htim4, TIM_CHANNEL_1); 函数总结: __HAL_TIM ...