首页 > 代码库 > HTML中<meta>标签的使用
HTML中<meta>标签的使用
HTML中<meta>标签的使用
<meta>标签基本介绍
<meta>标签是HTML网页源代码中一个重要的html标签。META便签用来描述一个HTML网页文档的属性，例如作者、日期、关键词、页面刷新。除此之外<meta>标签用于搜索引擎优化（SEO）。它位于HTML文档中<head>元素内，虽然它提供的信息不可见，但它却是文档最基本的元信息。
<meta>标签的属性列举
<meta>标签中属性可以分为必选属性和可选的属性。
1.必选属性：content属性。该属性是为了定义与http-equiv或者name属性相关的元信息，其中的内容是为了便于搜索机器人查找信息和分类使用的。
2.可选属性
① name属性该属性主要用于描述网页。Name属性的值可以有：author、description、keyword、generator等等
② http-equiv属性。该属性相当与http的头文件作用，可以向浏览器返回一些有用的信息，以帮助正确和精确显示内容。http-equiv属性的值可以有content-type、expires、refresh等等；
<meta>标签中name属性应用
1. name=”Keywords”（关键字：告诉浏览器你的网页的关键字是什么）
2. name=”description”（描述：告诉浏览器你的网页主要内容是什么）
这两个属性值作用相似，设置这两个值可以帮助你的主页被各大搜索引擎登录，提高网站的访问量。于是这两个属性值得设置是格外重要的。因为按照搜索引擎的工作原理，搜索引擎会首先检索页面中的keywords和description，并将其加入到自己的数据库，然后根据关键词的密度将网站排序。
<meta name=”keywords” content=”关于meta标签的使用”>
<meta name=”description” content=”HTML中的<meta>标签如何正确使用”>
注意:keywords的content内容要限制在36个字之内；
Description的content内容要限制在76个字之内;
name一定要和content属性配合使用。
3.robot（机器人向导：用于告诉机器人哪些页面需要索引，哪些页面不需要索引）
该属性的值有all、none、index、noindex、follow和nofollow 默认为all
设为all:文件将被检索，且页面上的链接可以被查询；
设为none：文件将不被检索，且页面上的链接不可以被查询；
设为index：文件将被检索；
设为follow：页面上的链接可以被查询；
设为noindex：文件将不被检索，但页面上的链接可以被查询；
设为nofollow：文件将被检索，页面上的链接不可以被查询；
<meta>标签中的http-equiv属性应用
1.http-equiv=’content-type’（文档内容类型：用于设定文档类型和字符集）
这是meta便签中最为常见的一种设置，在制作网页时，我们在纯HTML代码可以看到他是定义你的网页的语言当浏览器访问到你的网页时，浏览器便会根据此来识别并进行相应的设定，否则，浏览器就会使用默认的设定方法。
<meta http-equiv=”content-type” content=”text/html;charset=UTF-8”>
2.http-equiv=’expires’(期限：可以用于设定网页的到期期限)
一旦网页过期，那么就必须在服务器上重新刷新而不能通过缓存获取网页。值得注意的是:其中设置的时间必须是GMT格式。
<meta http-eqive=”expires” content=”Fri,12 Jan 2001 15:15:15 GMT”>
如果你在浏览器中设置浏览器网页先从本地缓存中的页面获取，那么当浏览时，就会只从本地缓存中获取，直到meta中设置的时间到期，浏览器才会获取新页面。
3.http-equiv=’pragma’(cache模式)
说明:禁止浏览器从本地计算的缓存中访问页面内容。
<meta http-equiv=”pragma” content=”no-cache”>
这代码表示不从缓存获取页面，于是访问者将无法脱机工作。
4.refresh（刷新:等待一定时间自动刷新或跳转到到其他url）
<meta http-equiv=”refresh” content=”1;url=https://www.baidu.com”/>
<meta>标签中在移动端的使用
1.name=”viewport”(移动端屏幕的缩放)
Viewport也就是可是区域
<meta name=”viewport”
content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no”>
即：强制让文档与设备的宽度保持1:1；文档的其实比例和最大比例都是1.0。利用user-scalable=no定义用户不可以通过手动缩放，使得页面固定；
2.name=”formmat-detection”
可以通过这个属性禁止自动时别电话和邮箱。
<meta name=”format-detection” content=”telephone=no,email=no”/>
这样，是设备浏览网页对数字不启动电话功能（注意不同设备的解释可能不同），忽略将页面中的数字识别为电话号码。对邮箱有同样如此。
3.name=”apple-mobile-web-app-capable”(网站开启对web app的支持)
<meta name =”app-mobile-web-app-capable” content=”yes”/>
说明;1.网站开启对web APP的支持
2.该meta可以看出内容为“苹果设备web应用程序**”，就是说该meta专门定义web 应用的。
4.name=”apple-mobile-web-app-status-bar-style”(改变顶部状态条的颜色)
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
说明：1.在web app应用下状态条的颜色为黑色;
2.默认为default（白色），可以定义为black（黑色）和black-translucent（灰色半透明）
5.name属性设置作者姓名以及联系方式
<meta name=”author” content=”xx,xxxx@xxx.com”>
参考：http://www.cnblogs.com/zhuzhenwei918/p/6028414.html
HTML中<meta>标签的使用