HTML meta标签基本讲解

263 阅读2分钟

1. meta概念

<meta>是HTML 语言头部的一个辅助性标签,常用于定义页面的说明,关键字,最后修改日期,页面编码语言,索引擎优化,自动刷新并指向新的页面,控制页面缓冲,响应式视窗等以及其它的元数据。这些元数据将服务于浏览器(如何布局或重载页面),搜索引擎和其它网络服务。该标签常用属性如下:

属性说明
charsetcharacter_set类型(如utf-8)定义文档的字符编码类型
content文本值定义与 http-equiv 或 name 属性相关的元信息
http-equiv常用可选值有content-type,default-style,refresh定义 HTTP 头部信息
name常用可选值有application-name,author,description,generator,keywords把 content 属性关联到一个名称

2. http-equiv

相当于HTTP头文件的作用,用于定义需要的头文件参数的值,它回应给浏览器一些有用的信息,以帮助正确和精确地显示网页内容。其格式为:

<meta http-equiv="头参数名" content="头参数值">

示例1:X-UA-Compatible用于告知浏览器以何种版本来渲染页面

<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--  定义ie浏览器使用最新版本渲染页面-->

示例2:content-Type用于设定网页字符集(HTML5建议使用charset属性来定义)

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

3. charset

HTML5设定网页字符集的方式,推荐使用UTF-8

<meta charset="utf-8"> 

4. name

name属性主要用于描述网页,比如网页的关键词,叙述等,以便于搜索引擎查找和搜索引擎优化。其常用值介绍如下:

4.1 keywords

用于告诉搜索引擎你的网页的关键字,多个关键字之间用逗号隔开

示例:

<meta name="keywords" content="html,css,javascript,sass,less,react,vue"/>

4.2. description

网站内容的简介描述,大致主题

示例:

<meta name="description" content="铸心个人博客,专注于互联网前端技术学习与分享">

4.3. viewport

网页的显示视口的设置(如视口大小,缩放设置)

示例:

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>

其中content中各属性简单介绍:

width:viewport的宽度

height :viewport 的高度

user-scalable:是否允许缩放(yes,no)

initial-scale:初始化缩放比例(范围为0到10)

minimum-scale:允许缩放的最小比例

maximum-scale:允许缩放的最大比例

4.4 robots

用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。

示例:

<meta name="robots" content="all"/>

其中content中可选值简单介绍:

all :文件将被检索,且页面上的链接可以被查询;

none :文件将不被检索,且页面上的链接不可以被查询;

index :文件将被检索;

follow :页面上的链接可以被查询;

noindex :文件将不被检索,但页面上的链接可以被查询;

nofollow :文件将被检索,但页面上的链接不可以被查询;

4.5. author

标注网页的作者

示例:

<meta name="author" content="铸心"/>

参考链接:blog.csdn.net/zhangank/ar…