meta标签的常见用法

twohappy 发布于2019-04-23 13:25 / 1294人阅读

摘要：元数据总是以名称值的形式被成对传递的。典型的情况是，元素被用于规定页面的描述关键词文档的作者最后修改时间以及其他元数据。此方案应该在由标签的属性指定的概况文件中进行了定义。

一、定义和用法

标签始终位于 head 元素中。元素可提供有关页面的元信息（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 属性的标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。

常用的有：

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

用法：
注意：charset是声明文档使用的字符编码，解决乱码问题主要用的就是它，charset一定要写第一行，不然就可能会产生乱码了。

<meta charset="utf-8">

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

两个都是等效的。

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

用法：  
注意：必须使用GMT的时间格式。 

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

 用法：  //(注意后面的引号，分别在秒数的前面和网址的后面) 注意：其中的2是指停留2秒钟后自动刷新到URL网址。

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

用法：  
注意：必须使用GMT的时间格式。

2、name 属性

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

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

常用的有：

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

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

举例：



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

举例：


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

举例：


另一部分是viewport

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

content 有参数：
width viewport 宽度(数值/device-width)；height viewport 高度(数值/device-height)；
initial-scale 初始缩放比例；maximum-scale 最大缩放比例；
minimum-scale 最小缩放比例；user-scalable 是否允许用户缩放(yes/no)

3、scheme 属性（没用过）

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

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

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

HTML meta标签总结与属性使用介绍

摘要：用处这句话对标签用处的介绍，简洁明了。组成标签共有两个属性，分别是属性和属性。与之对应的属性值为，中的内容是对填入类型的具体描述，便于搜索引擎抓取。为常用属性关键字说明用于告诉搜索引擎，你网页的关键字。安全措施缓存所有响应，但并非必须。之前学习前端中，对meta标签的了解仅仅只是这一句。但是打开任意的网站，其head标签内都有一列的meta标签。比如我博客的。showImg(ht...

GeekQiaQia 2019-08-01 15:01 评论0 收藏0
HTML知识梳理（笔记）

摘要：标签位于文档的头部，不包含任何内容。这其中包括标签中的。参考链接默认样式问题处理浏览器的默认样式。让浏览器知道元素的合法性。属于，是进行严格化的结果。机器容易理解结构搜索读屏软件有助于优化。是中的，是可以通过进行更改的，是活的。 HTML常见元素 showImg(https://segmentfault.com/img/bVbdnq2?w=861&h=365); meta 定义和用法 ...

amc 2019-08-02 10:51 评论0 收藏0
重学 html の meta 标签

摘要：标签的个属性。缓存所有响应，但并非必须。只为单个用户缓存，因此不允许任何中继进行缓存。比如说就不允许缓存的响应表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。 meta简介网页元数据，常用于定义网页的编码、说明、关键字、修改日期及其他信息。这些数据服务于浏览器、搜索引擎等。 meta 标签的2个属性name, http-equiv。。 name 属性 ...

guyan0319 2019-08-02 16:15 评论0 收藏0