HTML中Meta标签的作用及使用方法

闻语博客

发布于 2021-01-21 17:30:56

1.3K0

发布于 2021-01-21 17:30:56

文章被收录于专栏：闻语博客

1.meta标签的定义

meta标签是head部的一个辅助性标签，提供关于 HTML 文档的元数据。它并不会显示在页面上，但对于机器是可读的。可用于浏览器（如何显示内容或重新加载页面），搜索引擎（SEO），或其他 web 服务。<hr>

2.meta标签的作用

meta标签里的数据是供机器解读的，其主要作用有：搜索引擎优化（SEO），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等等。<hr>

3.meta标签的可选属性（带(#)的为 HTML5 中的新属性）

属性	值	描述
charset(#)	character_set	定义文档的字符编码。
content	text	定义与 http-equiv 或 name 属性相关的元信息。
http-equiv	content-typ/edefault-style/refresh	把 content 属性关联到 HTTP 头部。
name	application-nam/eauthor/description/generator/keywords	把 content 属性关联到一个名称。
scheme	format/URI	HTML5不支持。定义用于翻译 content 属性值的格式。

<hr>

4.下面展示了一些常用的Meta

<!-- 设定字符集 -->
<meta charset="utf-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
<!-- 页面关键词 -->
<meta name="keywords" content="your keywords"/>
 
<!-- 页面描述内容 -->
<meta name="description" content="your description"/>
 
<!-- 定义网页作者 -->
<meta name="author" content="author,email address"/>
 
<!-- 定义网页搜索引擎索引方式 -->
<meta name="robots" content="index,follow"/>
 
<!-- 禁止google自动翻译 -->
<meta name="google" content="notranslate" />

<!-- 优先使用最新的chrome版本 -->
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
 
<!-- 禁止转码 -->
<meta http-equiv="Cache-Control" content="no-transform"/>
 
<!-- 选择使用的浏览器解析内核（webkit：360浏览器的极速模式） -->
<meta name="renderer" content="webkit|ie-comp|ie-stand"/>

<!--用于设定网页在特定时间内自动刷新并转到新页面-->
<meta http-equiv="refresh" content="5;url=https://www.zpblogs.cn" />

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020 年 12 月，如有侵权请联系 cloudcommunity@tencent.com 删除

html