WEB前端程序猿必看的meta标签汇总
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
WEB前端程序猿必看的meta标签汇总
对于一般的前端工程师来说,知道一些常用的就好了,但是突然有一天,BOSS提出一些比较另类的需求,譬如:忽略页面中的数字识别为电话,忽略email识别这一类的需求等,我们又不得不去满足Ta。
那些写过的代码一股脑的上涌,但是这并没有用,瞬间大脑一片空白,对这个需求一点印象。
这时,如果有一位大牛能点拨一下,是不是会有一种想以身相许的冲动。
呵呵……这时候小编的这编汇总就可以帮到您。
小编查阅大量国内外相关资源,终于总结出了以下的文章,希望以下的内容对您有帮助。
那么我们就直奔我们的主题吧!来,上代码。
首先,我们先来了解一下,什么是meta标签?
<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
以上是w3c上的解释。
元信息,是用来描述数据的数据,也就是用来描述当前页面的一些信息。
例如:定义页面的一些描述信息、文件编码、关键词、作者等等。
一、<meta>标签包含的属性
属性
name 属性提供了名称/值对中的名称(而后面要说的content属性则是该名称对应的值)。
假如我们把页面想象成一个我们生活中的实物的话,拿个人简历来作类比,诸如姓名、性别、籍贯、技能、项目经验等等这些都可以看做是个人简历的name属性,content属性相当于这些名称对应的值。
基本语法结构:
<meta name="名称" content="具体的描述">
2.content属性
content 属性提供了名称/值对中的值。
该值可以是任何有效的字符串。
content 属性始终要和name 属性或http-equiv 属性一起使用。
3.http-equiv属性
equiv是equivalent的简写,是相等的,等价物的意思。
不难理解,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。
(http不了解的同学,可以找找相关的资料了解一下)。
基本语法结构:
<meta http-equiv="名称" content="具体的描述">
二、<meta>标签常用的名称/值对
1.keywords(关键字)
说明:用于告诉搜索引擎,你网页的关键字。
示例:
<meta name="keywords" content="java培训,php培训,UI设计培训,web前端培训,成都it培训机构,源码时代,源代码教育" />
2.description(网站内容的描述)
说明:用于告诉搜索引擎,你网站的主要内容。
示例:
<meta name="description" content="源代码教育品牌升级为源码时代,源码时代提供java培训、php培训、web前端培训、UI设计培训等高端培训课程,是西南地区靠谱并注重实战的IT培训机构,免费试听,就业后分期付款!致力于打造西南地区IT教育知名品牌,旨在时代成就高薪!" />
3.author(作者)
说明:用于标注网页作者。
示例:
<meta name="author"content="猿妹儿">
4.renderer(双核浏览器渲染方式)
说明:renderer是为双核浏览器准备的,用于指定双核浏览器默认以何种方式渲染页面。
比如说360浏览器。
示例:
<meta name="renderer" content="webkit"> //默认webkit内核
<meta name="renderer" content="ie-comp"> //默认IE兼容模式
<meta name="renderer" content="ie-stand"> //默认IE标准模式
5.viewport(移动端的窗口)
说明:viewport视为移动终端设计的属性
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" name="viewport">
常用参数说明:
. width – viewport的宽度
. height – viewport的高度
. initial-scale –初始的缩放比例
. minimum-scale –允许用户缩放到的最小比例
. maximum-scale –允许用户缩放到的最大比例
. user-scalable –用户是否可以手动缩放
6.content-Type(设定网页字符集)
说明:用于设定网页字符集,便于浏览器解析与渲染页面
示例:
<meta http-equiv="content-Type" content="text/html; charset=utf-8"> //旧的HTML,不推荐
<meta charset="utf-8"> //HTML5设定网页字符集的方式,推荐使用UTF-8
7.X-UA-Compatible(浏览器采取何种版本渲染当前页面)
说明:用于告知浏览器以何种版本来渲染页面。
(一般都设置为最新模式,在各大框架中这个设置也很常见。
)
示例:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome 使用最新版本渲染当前页面
8.refresh(自动刷新并指向某页面)
说明:网页将在设定的时间内,自动刷新并调向设定的网址。
示例:
<meta http-equiv="Refresh" content="5; url=" /> //5秒后重定向到w3c官网
三、总结:
却实写不下去了,我们们直接上代码截图来一张。
以下就是meta标签的汇总,如果还有不清楚的同鞋,可以直接看下面的图哦,然后千万不要忘了一定要写在<head></head>里面哦。