首页 > 代码库 > 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属性的值可以有:authordescriptionkeywordgenerator等等

② http-equiv属性。该属性相当与http的头文件作用,可以向浏览器返回一些有用的信息,以帮助正确和精确显示内容。http-equiv属性的值可以有content-typeexpiresrefresh等等;

<meta>标签中name属性应用

1. name=Keywords(关键字:告诉浏览器你的网页的关键字是什么)

2. name=description(描述:告诉浏览器你的网页主要内容是什么)

  这两个属性值作用相似,设置这两个值可以帮助你的主页被各大搜索引擎登录,提高网站的访问量。于是这两个属性值得设置是格外重要的。因为按照搜索引擎的工作原理,搜索引擎会首先检索页面中的keywordsdescription,并将其加入到自己的数据库,然后根据关键词的密度将网站排序。

<meta name=”keywords” content=”关于meta标签的使用”>

<meta name=”description” content=”HTML中的<meta>标签如何正确使用”>

 

注意:keywords的content内容要限制在36个字之内;

     Description的content内容要限制在76个字之内;

     name一定要和content属性配合使用。

3.robot(机器人向导:用于告诉机器人哪些页面需要索引,哪些页面不需要索引)

 该属性的值有allnoneindexnoindexfollownofollow  默认为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>标签的使用