资讯专栏INFORMATION COLUMN

HTML中的meta的属性作用

shadajin / 1153人阅读

摘要:参数,代表说明网站的采用的什么软件制作。的信息参数,表示说明此网站的版权信息。设置显示窗口的默认设定强制改变页面在当前窗口的显示方式为独立显示,可以用来防止别人在框架里调用自己的页面。

在写前端页面时,常常忽略meta标签的作业,只是习惯性的粘贴常用的一些代码,很多不明白meta还有其他很多用法,下面是我整理的一部分。
meta标签的组成:
meta标签原本有两个属性,它们分别是http-equiv属性和name属性,后h5发布了一个新属性charset;每个属性有不同的参数值,这些不同的参数值就实现了不同的网页功能;下面我们介绍一下属性;

charset(h5增加的属性)

charset 属性规定 HTML 文档的字符编码;html中必带属性;

name属性;
name属性主要用于描述网页,属性值为content,content中的内容常用在SEO中。

Keywords(关键字)
keywords用来告诉搜索引擎此页面的关键字是什么,主要用于SEO的优化

description(网站的内容描述)
description用来告诉搜索引擎网站主要内容,用简短的概括性文字描述网站,也是主要用于SEO的优化。

robots(机器人向导)
robots用来告诉搜索机器人哪些页面需要被索引,哪些页面不需要被索引。

具体参数如下:
信息参数为all:文件可被检索,且页面上的链接可以被查询;
信息参数为none:文件不可被检索,且页面上的链接不可以被查询;
信息参数为index:文件将被检索;
信息参数为follow:页面上的链接可以被查询;
信息参数为noindex:文件将不可检索,但页面上的链接可以被查询;
信息参数为nofollow:文件可被检索,但页面上的链接不可以被查询;

author(网页的开发人员)

标注网页的开发人员;
举例:

viewport(控制页面是否可以缩放,主要用于移动端)

在移动端的布局中,css中的1px并不等于物理上的1px,现在手机屏幕的分辨率已经越来越高,高像素但是屏幕尺寸却没有发生太大变化,这就说明一个物理像素点实际上塞入了好几个像素。
所以在做移动端开发时,为了使移动端的页面在不同的手机上同样的大小来显示,我们可以将页面的宽度固定,然后获取设备的宽度,可以得到我们之前设定的宽度与设备宽度的比例,再使用HTML5新增的viewport来对页面进行缩放,并固定不允许用户再重新缩放。

参数的详解如下:
width 设置layout viewport 的宽度,为一个正整数,使用字符串”width-device”表示设备宽度
initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
user-scalable 是否允许用户进行缩放,值为”no”或”yes”, no 代表不允许,yes代表允许

revisit-after
revisit-after参数表示多久后网站重新访问,1days代表1天,依此类推。

generator参数,代表说明网站的采用的什么软件制作。

COPYRIGHT
COPYRIGHT的信息参数,表示说明此网站的版权信息。

http-equiv属性

   http-equiv可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,对应的属性值为content;
   meta标签的http-equiv属性语法格式是:
   ******
   http-equiv属性有以下几种参数:

Expires(期限)

   用于设定网页的到期时间。时间到时网页自动过期,页面必须到服务器上重新传输。
   *** 注意:必须使用GMT的时间格式。***

Pragma(cache模式)

   Pragma禁止浏览器从本地计算机的缓存中访问页面内容,每一次的加载页都是从网络服务器中加载;这样设定,访问者将无法脱机浏览,必须在联网的状态下浏览页面;
   ****** 

Refresh(设置自动刷新)

   设置页面在等待多久时间后自动刷新页面或者指向新页面,跳转页面。
   *** //(注意后面的引号,分别在秒数的前面和网址的后面,此例子为10秒后跳转)*** 

Set-Cookie(cookie删除)

   网页过期时,本地计算机中的cookie将自动被删除。
   *** 注意:必须使用GMT的时间格式。***

Window-target(设置显示窗口的默认设定)

   强制改变页面在当前窗口的显示方式为独立显示,可以用来防止别人在框架里调用自己的页面。
   ****** 

content-Language(显示语言的设定)

meta其他

   忽略数字自动识别为电话号码
   
   忽略识别邮箱
   

WebApp(全屏模式:伪装app,离线应用)。

   ******

meta在移动端的用法

   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

HTML < base > 标签
为页面上所有默认链接:
例如:

    ******
     标签为页面上的所有链接规定默认地址或默认目标

为页面上所有链接指定默认打开方式(和meta的Window-target有作用相似):
例如:

    ******
    target指定页面中所有标签都是本页打开

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/51422.html

相关文章

  • HTMLmeta标签常用属性及其作用总结

    摘要:元素父元素属性中的变化为中新增的,用来声明字符编码属性在中有很多值,在中只有可用具体用途元素出去属性外,都是属性或属性结合来使用指定名值对定义元数据属性与属性结合使用用来表示元数据的类型,表示当前标签的具体作用属性用来提供值。 文章同步到github 以前没怎么太注意过meta标签的作用,只是简单了解一些常用属性,现在结合个人了解的进行记录与总结: 元数据 首先需要了解一下元数据(me...

    Keven 评论0 收藏0
  • HTML meta标签总结与属性使用介绍

    摘要:用处这句话对标签用处的介绍,简洁明了。组成标签共有两个属性,分别是属性和属性。与之对应的属性值为,中的内容是对填入类型的具体描述,便于搜索引擎抓取。为常用属性关键字说明用于告诉搜索引擎,你网页的关键字。安全措施缓存所有响应,但并非必须。 之前学习前端中,对meta标签的了解仅仅只是这一句。 但是打开任意的网站,其head标签内都有一列的meta标签。比如我博客的。showImg(ht...

    GeekQiaQia 评论0 收藏0

发表评论

0条评论

shadajin

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<