meta元素的介绍与使用

最新推荐文章于 2019-05-06 20:45:49 发布

Gideon丶M

最新推荐文章于 2019-05-06 20:45:49 发布

阅读量7.4k

点赞数 1

文章标签： html web meat http-equit name

本文链接：https://blog.csdn.net/mqqqq_1/article/details/51732807

版权

meta元素在HTML中占据了着很重要的位置，其作用是不可替代的。

一、meta元素是什么：

meta元素是html中的一个头部标签，通常用于描述网页的一些基本信息。

二、meta元素都有哪些属性：

meta元素包含四大属性： charset、 content 、http-equiv、name；

1.charset

charset属性声明了页面的字符编码，如果某个元素使用lang属性，他将被局部的覆盖。charset属性替换了

charset常用的值：

UTF-8 - Unicode 字符编码
ISO-8859-1 - 拉丁字母表的字符编码

在理论上，可以使用任何字符编码，但并不是所有浏览器都能够理解它们。某种字符编码使用的范围越广，浏览器就越有可能理解它。

注意：

1.这个属性的设定必须匹配页面，不能用错误的值。

2.HTTP-equiv的content-type和一些别的浏览器元素会优先该属性。

3.我们最好为每个页面都定义一个charset,这样能很好的提高我们网站的安全性。如果不设置该属性，一些置换脚本可能会影响到网页。

2.content

content属性通常配合name或http-equiv使用，能够给这两个属性提供一个值。

3.http-equiv

http-equiv可用用做 HTTP头部的某些作用，通过定义该属性可以改变服务器和用户代理的行为。

常用的值：

①refresh:设定网页定时刷新或者跳转

页面每5秒刷新一次

	<meta http-equiv="refresh" content="5"/>

页面5秒后跳转到百度首页

<meta http-equiv="refresh" content="5;url='http://www.baidu.com'"/>

②default-style：指定页面优先使用的样式表，content属性的值必须匹配同一文档中的一个link元素上的title属性的值，或者必须匹配同一文档中的一个style元素上的title属性的值。

<meta http-equiv="default-style" content="the document's preferred stylesheet">

③content-type:目前别charset属性取代了。

4.name

name属性用于定义页面的元数据。他不能与http-equiv、charset共存。通常是content配合使用。

常用的值：

①application-name：定义网站应用的名字。

②author：定义作者的名字。

③description：包含该网页的一个简单的、精准的描述。

④keywords：定义网站的关键字，主要用于百度的SEO，谷歌的排名不依靠该属性。

⑤viewport：主要用于移动端的设置，规定初始的窗口属性，

<meta name ="viewport" content ="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    content 参数解释：
    width  　　　　viewport 宽度(数值/device-width)
    height         viewport 高度(数值/device-height)
    initial-scale  初始缩放比例
    maximum-scale  最大缩放比例
    minimum-scale  最小缩放比例
    user-scalable  是否允许用户缩放(yes/no)
    minimal-ui      iOS 7.1 beta 2 中新增属性，可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

⑥robots

robots.txt是放在网站中，文件级的网络蜘蛛授权；而robots Meta标签是放在网页中，一般用于部分网页需要单独设置的情况下。两者的功能是一样的。

Meta robots标签必须放在<head>和</head>之间，格式：

<meta name="robots" content="index,follow" />

content中的值决定允许抓取的类型，必须同时包含两个值：是否允许索引（index）和是否跟踪链接（follow，也可以理解为是否允许沿着网页中的超级链接继续抓取）。共有4个参数可选，组成4个组合：

index,follow：允许抓取本页，允许跟踪链接。
index,nofollow：允许抓取本页，但禁止跟踪链接。
noindex,follow：禁止抓取本页，但允许跟踪链接。
noindex,nofllow：禁止抓取本页，同时禁止跟踪本页中的链接。
以上1和4还有另一种写法：

index,follow可以写成all，如：

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

noindex,nofollow可以写成none，如：

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

需要注意的是，robots Meta标签很多搜索引擎是不支持的，只有少数搜索引擎能够识别并按给定的值抓取。所以，尽可能的使用robots.txt文件来限制抓取。

ps：还有很多其他的用法，后续再补充。。。

Gideon丶M

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
meta元素的介绍与使用

meta元素在HTML中占据了着很重要的位置，其作用是不可替代的。一、meta元素是什么：meta元素是html中的一个头部标签，通常用于描述网页的一些基本信息。二、meta元素都有哪些属性：meta元素包含四大属性： charset、 content 、http-equiv、name；1.charset这个属性声明页面的字符编码，如果某个元素使用lang属性，他将被局部的
复制链接

扫一扫