文章同步到github

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

元数据

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

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

<meta>元素

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

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

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

<meta>具体用途

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

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

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

<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整理

HTML中的meta标签常用属性及其作用总结的更多相关文章

  1. meta标签常用属性整理

    在segmentfault看到这篇文章,觉得整理的很详细,所以转载过来和大家分享一下. 原文地址:http://segmentfault.com/blog/ciaocc/119000000240791 ...

  2. meta标签常用属性

    Keywords(关键词) 说明:告诉搜索引擎你网页的关键字(keywords)使用方法:<meta name="keywords" content="标签,属性, ...

  3. video标签常用属性及说明

    video标签常用属性(在标签内部使用) video常用API属性及方法(API属性是供JS调用的,不在video标签元素中直接使用)

  4. HTML中的<meta>标签的使用

    HTML中<meta>标签的使用 在我们制作的网页中,要是想让它能够让更多的人去访问,最好的方法就是通过搜索引擎来找到你的网址,于是需要你的网页可以有关键词能够让搜索引擎来识别,于是HTM ...

  5. 【Bean】标签常用属性

    [Bean]标签常用属性 Id 说明:起名称,id属性值名称任意,不能包含特殊符号,根据id得到配置对象. Class 说明:创建对象所在类的全路径. Name 说明:功能和id是一样的,id属性值不 ...

  6. 学习meta标签http-equiv属性

    meta标签http-equiv属性的使用:meta标签http-equiv属性的使用

  7. Android中TextView和EditView常用属性设置

    Android中TextView和EditView常用属性设置 点击跳转

  8. html中的meta标签是什么？有哪些属性？

    meta标签介绍 meta标签是HTML语言head区域的一个辅助性标签,常用于定义页面的说明,关键字,最后修改的日期和其他的元数据.这些元数据将服务于浏览器,搜索引擎和其他网络服务. meta标签的 ...

  9. HTML 中的meta标签中的http-equiv与name属性使用介绍

    meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言, ...

随机推荐

  1. fibonacci-Heap（斐波那契堆）原理及C++代码实现

    斐波那契堆是一种高级的堆结构,建议与二项堆一起食用效果更佳. 斐波那契堆是一个摊还性质的数据结构,很多堆操作在斐波那契堆上的摊还时间都很低,达到了θ(1)的程度,取最小值和删除操作的时间复杂度是O(l ...

  2. 八、linux-mysql的mysql主从复制原理和实战

    1.mysql主从复制介绍 mysql支持单向.双向.链式级联.实时.异步复制,在复制过程中,一台服务器充当主服务器(Master),而一个或多个其它服务器充当从服务器(Slave). 复制:单向同步 ...

  3. 二十、linux文件系统讲解

    1.分区和文件系统的关系: 为什么需要格式化呢?这是因为分区文件系统在没有格式化前,操作系统是无法识别系统分区的格式的,就没办法组织文件目录属性和权限等内容,把分区格式化成操作系统支持的某个文件系统后 ...

  4. [LC] 299. Bulls and Cows

    Example 1: Input: secret = "1807", guess = "7810" Output: "1A3B" Expla ...

  5. mui 左侧选项卡-div模式 的选项卡切换监听

    使用$('#segmentedControls').on('change', '.mui-control-item', function () { })和 document.getElementByI ...

  6. 熊海CMS_1.0 代码审计

    熊海是一款小型的内容管理系统,1.0版本是多年前的版本了,所以漏洞还是比较多的,而且审计起来难度不大,非常适合入门,所以今天我进行这款cms的代码审计.程序安装后使用seay源代码审计系统打开,首先使 ...

  7. pycharm打印出的汉字显示乱码

    pycharm未配置时,默认配置为: 打印汉字时显示乱码 简单设置即可 这下以后就没有问题了.

  8. Grails Controller - respond 方法

    基本用法 官方文档:http://docs.grails.org/latest/ref/Controllers/respond.html 为当前 respond 语句所在 action 所对应的页面返 ...

  9. python-django-linux上mysql的安装和配置_20191124

    又有了阻塞了,怎么在Linux创建数据库,mysql, 我把数据库安装在Linux上, 1,sudo apt-get install mysql-server 2,ps -aux | grep 'my ...

  10. Point Estimate|unbiased estimator|Confidence-Interval Estimate

    8.1 Estimating a Population Mean Point Estimate estimate  a single number, or point. 因为:the mean of ...