精华内容
下载资源
问答
  • meta元素属性的作用 - 小meta大作用

    千次阅读 2011-11-12 10:46:23
    meta属性有两种:name和http-equiv。name属性主要用于描述网页,对应于content(网页内容),以便于搜索引擎机器人查找、分类(目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类)。这其中最...

    meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的<head>与</head>中,meta 标签的用处很多。meta 的属性有两种:name和http-equiv。name属性主要用于描述网页,对应于content(网页内容),以便于搜索引擎机器人查找、分类(目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类)。这其中最重要的是description(站点在搜索引擎上的描述)和keywords(分类关键词),所以应该给每页加一个meta值。比较常用的有以下几个:

    name 属性

    1、<meta name="Generator" contect="">用以说明生成工具(如Microsoft FrontPage 4.0)等;

    2、<meta name="KEYWords" contect="">向搜索引擎说明你的网页的关键词;

    3、<meta name="DEscription" contect="">告诉搜索引擎你的站点的主要内容;

    4、<meta name="Author" contect="你的姓名">告诉搜索引擎你的站点的制作的作者;

    5、<meta name="Robots" contect= "all|none|index|noindex|follow|nofollow">

    其中的属性说明如下:

    定为all:文件将被检索,且页面上的链接可以被查询;

    设定为none:文件将不被检索,且页面上的链接不可以被查询;

    设定为index:文件将被检索;

    设定为follow:页面上的链接可以被查询;

    设定为noindex:文件将不被检索,但页面上的链接可以被查询;

    设定为nofollow:文件将不被检索,页面上的链接可以被查询。

    http-equiv属性

    1、<meta http-equiv="Content-Type" contect="text/html";charset=gb_2312-80"> 和 <meta http-equiv="Content-Language" contect="zh-CN">用以说明主页制作所使用的文字以及语言;

    2、<meta http-equiv="Refresh" contect="n;url=http://yourlink">定时让网页在指定的时间n内,跳转到页面http://yourlink;

    3、<meta http-equiv="Expires" contect="Mon,12 May 2001 00:20:00 GMT">可以用于设定网页的到期时间,一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式;

    4、<meta http-equiv="Pragma" contect="no-cache">是用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出;

    5、<meta http-equiv="set-cookie" contect="Mon,12 May 2001 00:20:00 GMT">cookie设定,如果网页过期,存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式;

    6、<meta http-equiv="Pics-label" contect="">网页等级评定,在IE的internet选项中有一项内容设置,可以防止浏览一些受限制的网站,而网站的限制级别就是通过meta属性来设置的;

    7、<meta http-equiv="windows-Target" contect="_top">强制页面在当前窗口中以独立页面显示,可以防止自己的网页被别人当作一个frame页调用;

    8、<meta http-equiv="Page-Enter" contect="revealTrans(duration=10,transtion= 50)">和<meta http-equiv="Page-Exit" contect="revealTrans(duration=20,transtion=6)">设定进入和离开页面时的特殊效果,这个功能即FrontPage中的"格式/网页过渡",不过所加的页面不能够是一个frame页面。

    以上是常用的几个meta属性,有个人主页的朋友不妨在你的主页中加上它,效果可是不一样的哦:)。

    关于手持设备的meta设置(ipad、ipod、iphone、Android等)

    设置viewpoint

    viewpoint,可以理解为:视窗、可视区域,相对于iPad硬件限定的窗口来定义的。iPad窗口大小不可改变,但viewpoint视窗大小可以设置调整。

    如果在iPhone开发中指定了视窗标签设置, 在iPad开发中必须进行必要的校正。例如:

    在iPhone中,我们会用下述代码的方式指定屏幕宽度

    
      
      

    而在iPad中,则必须用device-width替代具体的宽度像素数。

    
      
      

    我们在设置宽度的同时可以设置可缩放的比例范围

    
      
      

    我们在设置宽度的同时可以设置可缩放的比例范围

    
      

    iphone Safari的viewport详细说明请看这里:传送门

    展开全文
  • meta标签属性有哪些

    千次阅读 2020-05-02 15:36:55
    meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性不同的参数值,这些不同的参数值就实现了不同的网页功能。

    meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。

    charset属性

    <!-- 定义网页文档的字符集 -->
    <meta charset="utf-8" />
    

    name + content属性

    <!-- 网页作者 -->
    <meta name="author" content="开源技术团队"/>
    <!-- 网页地址 -->
    <meta name="website" content="https://sanyuan0704.github.io/frontend_daily_question/"/>
    <!-- 网页版权信息 -->
     <meta name="copyright" content="2018-2019 demo.com"/>
    <!-- 网页关键字, 用于SEO -->
    <meta name="keywords" content="meta,html"/>
    <!-- 网页描述 -->
    <meta name="description" content="网页描述"/>
    <!-- 搜索引擎索引方式,一般为all,不用深究 -->
    <meta name="robots" content="all" />
    <!-- 移动端常用视口设置 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
    <!-- 
      viewport参数详解:
      width:宽度(数值 / device-width)(默认为980 像素)
      height:高度(数值 / device-height)
      initial-scale:初始的缩放比例 (范围从>0 到10)
      minimum-scale:允许用户缩放到的最小比例
      maximum-scale:允许用户缩放到的最大比例
      user-scalable:用户是否可以手动缩 (no,yes)
     -->
    

    http-equiv属性

    <!-- expires指定网页的过期时间。一旦网页过期,必须从服务器上下载。 -->
    <meta http-equiv="expires" content="Fri, 12 Jan 2020 18:18:18 GMT"/>
    <!-- 等待一定的时间刷新或跳转到其他url。下面1表示1秒 -->
    <meta http-equiv="refresh" content="1; url=https://www.baidu.com"/>
    <!-- 禁止浏览器从本地缓存中读取网页,即浏览器一旦离开网页在无法连接网络的情况下就无法访问到页面。 -->
    <meta http-equiv="pragma" content="no-cache"/>
    <!-- 也是设置cookie的一种方式,并且可以指定过期时间 -->
    <meta http-equiv="set-cookie" content="name=value expires=Fri, 12 Jan 2001 18:18:18 GMT,path=/"/>
    <!-- 使用浏览器版本 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!-- 针对WebApp全屏模式,隐藏状态栏/设置状态栏颜色,content的值为default | black | black-translucent -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    
    展开全文
  • meta元素的介绍与使用

    千次阅读 2016-06-22 16:31:54
    meta元素在HTML中占据了着很重要的...二、meta元素哪些属性meta元素包含四大属性: charset、 content 、http-equiv、name; 1.charset 这个属性声明页面的字符编码,如果某个元素使用lang属性,他将被局部的

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

    一、meta元素是什么:

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

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

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

    1.charset

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

    <meta http-equiv="Content-Type" content="text/html; charset= UTF-8">,目前仍然允许使用 http-equiv 属性来规定字符集,但是使用 新方法可以减少代码量。

    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:还有很多其他的用法,后续再补充。。。

    展开全文
  • Meta 标签属性含义与详细用法

    千次阅读 2020-10-16 09:59:01
      meta 元素用于指定页面的信息和部分行为。通常用于指定网页的描述,关键字等元数据。   可以被使用浏览器、搜索引擎或其他 Web 服务调用。 <meta name="" http-equip="" content="" charset=""> ...

    在这里插入图片描述

      meta 元素用于指定页面的信息和部分行为。通常用于指定网页的描述,关键字等元数据。

      可以被使用浏览器、搜索引擎或其他 Web 服务调用。

    <meta name="" http-equip="" content="" charset="">
    

    charset

      charset规定HTML文档的字符编码。

    <meta charset="utf-8">
    

      charsetHTML 5的新属性,替换了HTML 4.01的指定字符编码的方式,可以减少部分代码量。

    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    

    name

    keyewords

      指定页面关键字。

    <meta name="keyewords" content="html,css">
    

    description

      指定页面描述信息。

    <meta name="description" content="html description">
    

    author

      标注页面作者。

    <meta name="author" content="DonGW">
    

    copyright

      标注页面版权信息。

    <meta name="copyright" content="Baidu">
    

    generator

      标注开发网页的工具或软件。

    <meta name="generator" content="VS Code">
    

    robots

      告知搜索引擎抓取页面的方式。

      其中content参数如下。

    • index:搜索引擎可以索引此页面,默认属性,不设置meta标签,搜索引擎也会默认索引此页面
    • noindex:搜索引擎不可索引此页面
    • noimageindex:搜索引擎不可索引此页面的图片
    • follow:爬虫可以爬取此页面的链接
    • nofollow:爬虫不可爬取此页面的链接
    • allindexfollow的简写,搜索引擎可以索引此页面,爬虫可以爬取此页面的链接
    • nonenoindexnofollow的简写,搜索引擎不可索引此页面,爬虫不可爬取此页面的链接
    • noarchive:阻止搜索引擎在搜索结果中显示此页面的缓存版本,即网页快照
    • nocache:功能同noarchive一致,适用于MSN/Live引擎
    • nosnippet:搜索引擎的搜索结果中将显示一部分搜索文字上下文的内容,此属性即搜索引擎不可显示该内容,另外搜索引擎也不会保存该页面的快照
    • noodp:搜索引擎的搜索结果中将显示一部分搜索文字上下文的内容,阻止使用DMOZ信息做为此内容
    • noydir:搜索引擎的搜索结果中将显示一部分搜索文字上下文的内容,阻止Yahoo directory信息作为此内容
    <meta name="robots" content="index, follow">
    

    renderer

      指定浏览器以哪种浏览器内核渲染页面,其中content参数包括webkitwebkit内核,极速模式)、ie-compIE兼容模式,即IE6IE7IE8的渲染模式)、ie-standIE标准模式,即以IE9及以上版本渲染)。

    <meta name="renderer" content="">
    

    format-detection

      移动端浏览器中,用于识别电话号码、电子邮箱和地理位置的格式。其中content参数为yes(开启,默认值)、no(关闭)。

    <meta name="format-detection"  content="telephone=no">
    <meta name="format-detection"  content="email=no">
    <meta name="format-detection"  content="address=no">
    

    revisit-after

      告知搜索引擎每隔多少天访问一次此页面。

      一般情况下,网站不需要此属性来限制搜索引擎的访问频率。只有网站数据量非常大时,被搜索引擎频繁抓取,会占用过多的服务器资源,影响网站的反应速度,这种情况一般设置每隔5-7天来访问抓取一次网页即可。

      网站抓取时间取决于此属性和搜索引擎的重访时间,假设revisit-after设置为5天,若搜索引擎每隔10天访问一次,revisit-after不会生效,而最终搜索引擎按照10天访问一次。搜索引擎每隔3天访问一次,revisit-after设置的5天则会生效,最终搜索引擎每隔5天访问一次页面。

    <meta name="revisit-after"  content="5 days">
    

    referrer

      referrer有来源页面的意思,即表示当前页面是由哪个页面跳转过来的,具体则是跳转至当前页面的http请求的请求头中的Referer字段包含了上一个页面的URL地址。

      可能会发现拼写少了一个r,正确的拼写其实是Referrer,但是由于http标准发布时没有发现拼写错误,所以就一直沿用至今。

      例如,当前页面的URL地址为http://127.0.0.1:5500/

    <!DOCTYPE html>
    <html lang="zh-CN">
    
    <body>
        <a href="http://www.baidu.com">百度</a>
    </body>
    
    </html>
    

      点击跳转至百度页面,查看页面请求的请求头。

    在这里插入图片描述

      因此服务端可以统计用户来源,并以此进行统计分析、日志记录以及缓存优化等。

      但是注意Referer可能会暴露用户的浏览历史 ,并且很多时候当前页面的URL是会包含用户的个人信息的(例如token),所以某些时候需要移除、禁用或者修改策略。

    <meta name="referrer" content="">
    

      content属性值如下。

    • no-referrer:不发送Referer信息
    • no-referrer-when-downgrade:默认值,安全级别下降时不发送Referer信息,目前仅一种情况安全级别下降,即https网页跳转至http网页,其它情况发送Referer完整信息
    • origin:会发送Referer信息,但是仅发送源信息,包括协议、域名和端口号
    • same-origin:仅同源链接发送Referer完整信息
    • strict-origin:即originno-referrer-when-downgrade合并,安全级别下降时不发送Referer信息,安全级别未下降时发送 Referer源信息
    • origin-when-cross-origin:跨域时发送Referer源信息,非跨域时即同源情况发送Referer完整信息
    • strict-origin-when-cross-origin:同源链接发送Referer完整信息,安全级别下降时不发送Referer信息,其它情况发送Referer源信息
    • unsafe-url:最不安全的策略,无论什么情况都发送 Referer完整信息

      meta标签指定content是修改全局策略。

      单个a标签可通过referrerpolicy属性修改局部策略,更多 详细参考

    <a href="http://www.baidu.com" referrerpolicy="no-referrer">百度</a>
    

    在这里插入图片描述

    http-equiv

    content-type

      规定HTML文档的字符编码。

    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    

    content-language

      标注页面的目标受众或者标注当前页面存在的语言。

    <meta http-equiv="content-language" content="en">
    

    content-script-type

      标注页面中脚本的类型。

    <meta http-equiv="content-script-type" content="text/javascript">
    

    refresh

      刷新或跳转(重定向)页面,content表示刷新或跳转的时间与跳转的网址。

      3s后刷新页面。

    <meta http-equiv="refresh" content="3">
    

      3s后页面跳转至百度,跳转方式为当前窗口下跳转。

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

    expires

      指定网页在缓存中的过期时间,一旦网页过期,必须到服务器上重新加载到本地缓存才能访问。

      指定网页在未来的某个时间过期,注意时间格式为GMT(格林尼治标准时间)。

    <meta http-equiv="expires" content="Mon, 31 May 3021 06:00:00 GMT">
    

      指定网页可在本地缓存的时间(秒),指定0或负数,则每次访问网页都需要从服务器重新加载内容。

    <meta http-equiv="expires" content="2000">
    

    pragma

      禁止浏览器从本地缓存中访问页面的内容,即用户无法脱机浏览。

      注意仅IE浏览器能识别此段meta标签含义,其它主流浏览器仅能识别cache-control属性的meta标签。为了网页兼容性,最好pragmacache-control两者一起使用。

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    

    window-target

      设置页面显示的窗口方式,content参数如下,详细参考

    • _top:页面以当前整个窗口的方式显示,可用于防止页面被其他网页嵌套
    • _black:页面以新打开的方式显示
    • _self:页面以当前容器或窗口显示
    • _parent:页面以父容器或窗口显示
    <meta http-equiv="window-target" content="_top">
    

    set-cookie

      设置cookie值及其有效时间。

      注意浏览器正在远离此方式,可能由于浏览器版本原因,会产生警告或错误。此功能已在M63中废弃,并且在M65中完全删除。

    <meta http-equiv="set-cookie" content="cookievalue=xxx; expires=Mon, 31 May 3021 06:00:00 GMT; path=/">
    

    pics-label

      网页等级评定,IE浏览器可以根据网页的限制等级来过滤网页。

    <meta http-equiv="pics-label" content="">
    

    page-enter / page-exit

      设置网页退出和进入的过渡效果。

      其中包括blendTrans淡入淡出过渡效果,此效果只能设置过渡持续时间(秒)。

      另一种revealTrans,可以设置过渡效果类型和过渡持续时间(秒)。

      淡入持续5秒。

    <meta http-equiv="page-enter" content="blendTrans(duration=5)">
    

      矩形扩大持续2秒。

    <meta http-equiv="page-enter" content="revealTrans(duration=2, transition=1)">
    

      其中transition过渡效果有24种,包括0(矩形缩小)、1(矩形扩大)、2(圆形缩小)、3(圆形扩大)、4(下到上刷新)、5(上到下刷新)、6(左到右刷新)、7(右到左刷新)、8(竖百叶窗)、9(横百叶窗)、10(错位横百叶窗)、11(错位竖百叶窗)、12(点扩散)、13(左右到中间刷新)、14(中间到左右刷新)、15(中间到上下)、16(上下到中间)、17(右下到左上)、18(右上到左下)、19(左上到右下)、20(左下到右上)、21(横条)、22(竖条)、23(以上22种随机选择一种)。

      注意由于浏览器的版本原因,多数都不再支持page-enter/page-exit属性。

    X-UA-compatible

      针对IE8的特殊属性,指定在IE8浏览器内以哪种IE版本的模式来渲染页面内容,以此来解决IE浏览器的兼容问题。

      指定多个模式,如下在IE8中浏览页面时,将会使用IE7的标准模式渲染页面。由于IE8自身不支持IE9IE10,而IE7是相对IE5IE6的最高版本的渲染模式,故最终会以IE7渲染页面。

    <meta http-equiv="X-UA-compatible" content="IE=5,6,7,9,10">
    

      使用最新版本的IE浏览器渲染页面,即使用的是什么版本的IE浏览器,就用什么版本的标准渲染模式。

    <meta http-equiv="X-UA-compatible" content="IE=edge">
    

      指定IE浏览器使用Google Chrome FrameGCF)模式渲染页面,GCF是谷歌内嵌浏览器框架,专门为IE浏览器开发的浏览器内核插件,支持IE6IE7IE8等多个版本的IE浏览器。

    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    

       绝大多数网站均使用如下方式,即IE浏览器安装了GCF插件,则使用GCF浏览器内核渲染页面,若未安装GCF插件,则使用最高版本的IE内核渲染页面。

    <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1">
    

    cache-control

       用于控制浏览器和服务器之间的缓存请求和响应。

    <meta http-equiv="cache-control" content="">
    

       其中content参数如下。

    • public:可以在任何客户端(浏览器、本地缓存、各种代理服务器等)中缓存,但是不能设置缓存期限
    • max-age:不仅可以被任何客户端缓存,而且还可以设置缓存期限。缓存期限是相对服务器时间而言的,超过设置时间,缓存则被认为过期,再次访问需要重新请求服务器加载缓存。如下最大缓存时间为60秒,超过60秒,缓存则被认为过期
    <meta http-equiv="cache-control" content="max-age=60">
    
    • private:只能被单个用户缓存,不允许中间代理缓存。例如CDN不能缓存private的响应
    • only-if-cached:若缓存存在,只使用缓存,不需要请求服务器加载更新内容
    • no-cache:先发送请求,与服务器确认资源是否被修改,若未被修改,则使用缓存
    • no-store:不允许缓存,再次访问需重新从服务器上加载缓存
    • no-transform:不可对网页内容或网页中的资源进行转换,以便节省缓存空间
    • no-siteapp:禁止百度、搜狗等搜索引擎对网页进行转码

      禁止百度、搜狗等网页进行转码处理。

    <meta http-equiv="cache-control"  content="no-transform">
    <meta http-equiv="cache-control"  content="no-siteapp">
    

      每次打开网页,清除网页缓存。http 1.1协议需要用到cache-control来规范,而http 1.0适用pragmaexpires来规范,为了网页兼容性,最好三个一起使用。

    <meta http-equiv="cache-control"  content="no-cache">
    <meta http-equiv="pragma"  content="no-cache">
    <meta http-equiv="expires"  content="0">
    

    x-dns-prefetch-control

      禁用隐式的 DNS 预解析。

    <meta http-equiv="x-dns-prefetch-control" content="off">
    

    移动端

    viewport

      用于优化移动端的网页,使得web端的网页在手机端正常显示,页面布局不会错位。注意metaviewpoint属性只对移动端浏览器有效,对pc端浏览器是无效的。

      viewport主要包括如下三种类型。

    • 布局视区:是指整个网页在移动端浏览器中显示的区域,此布局在大多数移动端浏览器中默认显示的宽度为980px(也有少部分1024px或者其他宽度的),故只要整个网页宽度不超过此默认值,页面就可以正常显示
    • 可见视区:指的是移动端设备本身的屏幕显示区域,不同的移动设备,可见视区的尺寸也不同
    • 理想视区:指的是布局视区能完美适配移动设备的可见视区,即布局视区的宽度等于可见视区的宽度,因此不需要缩放和横向滚动条就能正常查看整个网页
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    

      viewport属性及其用法如下。

    • width:控制布局视区的宽度,也可指定为固定宽度值,或者设置为device-width。如果width不设置或者为空,则使用默认宽度,即上述的980px1024px。如果设置为device-width,则表示设置为理想视区,即布局视区宽度等于可见视区宽度。如果width设置为固定宽度,单位为px,也可以不带单位,默认单位为px
    • height:控制布局视区的高度,一般不设置,极少使用
    • initial-scale:设置布局视区初始化缩放比例(即每一次加载页面时的缩放比例),为一个数字,可以是小数。如果设置initial-scale1,则和width=device-width一致,表示设置为理想视区。但是两者均有一个小缺陷,即width=device-width会导致iPhoneiPad横竖屏不分,initial=1.0会导致IE横竖屏不分,故两者都使用,可互相弥补缺陷
    • maximum-scale:允许用户缩放的最大比例值,为一个数字,可以带小数。需要大于minimum-scale
    • minimum-scale:允许用户缩放的最小比例值,为一个数字,可以带小数
    • user-scalable:是否允许用户手动缩放布局视区,非必须参数,其中参数为no(不允许)、yes(允许)

    浏览器

    QQ 浏览器

    x5-orientation

      指定屏幕方向,其中content参数为landscape(横屏)、portrait(竖屏)。

    <meta name="x5-orientation" content="landscape">
    

    x5-fullscreen

      全屏显示。

    <meta name="x5-fullscreen" content="true">
    

    x5-page-mode

      指定页面以应用模式显示。

    <meta name="x5-page-mode" content="app">
    

    UC 浏览器

    screen-orientation

      指定屏幕方向,其中content参数为landscape(横屏)、portrait(竖屏)。

    <meta name="screen-orientation" content="portrait">
    

    full-screen

      全屏显示。

    <meta name="full-screen" content="yes">
    

    browsermode

      指定页面以应用模式显示。

    <meta name="browsermode" content="application">
    

    nightmode

      夜间模式,其中content参数为enable(开启)、disable(关闭),注意若用户开启浏览器的夜间模式,而nightmode设置为disable,页面也是以非夜间模式显示。

    <meta name="nightmode" content="disable">
    

    imagemode

      强制图片显示,浏览器为用户提供了无图模式,但是某些页面图片是必须的(如验证码等),如下可强制页面显示图片。

    <meta name="imagemode" content="force">
    

      imagemode设置为force会作用于整个页面,单张可设置如下。

    <img src="" show="force">
    

    layoutmode

      指定页面排版模式,其中content参数为fitscreen(简化页面处理,适用页面阅读省流)、standard(同标准浏览器一致),注意layoutmode指定后,浏览器提供的页面排版模式将会失效。

    <meta name="layoutmode" content="fitscreen">
    

    viewport

      缩放不显示滚动条,其中content参数为yes(用户缩放不会出现滚动条)、no(同标准浏览器一致)。

    <meta name="viewport" content="uc-fitscreen=yes">
    

    IOS

    apple-mobile-web-app-capable

      隐藏苹果默认的工具栏和菜单栏,其中content参数包括yes(页面以全屏运行)、no(正常显示)。

    <meta name="apple-mobile-web-app-capable" content="no">
    

    apple-mobile-web-app-status-bar-style

      设备顶部状态栏背景色,其中content参数包括default(白色,默认值)、black(黑色)、black-translucent(灰色半透明)。

    <meta name="apple-mobile-web-app-status-bar-style" content="">
    

    apple-mobile-web-app-title

      网页添加到主屏幕后的标题(类似App的名称)。

    <meta name="apple-mobile-web-app-title" content="">
    

    apple-touch-icon

      网页添加到主屏幕后的图标如下,其中apple-touch-icon支持sizes属性,用来对应不同设备。

      57 * 57(默认值)对应320 * 640iPhone老设备,72 * 72对应iPad114 * 114对应retina屏幕的iPhoneiTouch144 * 144对应iPad的高分辨率。

      其中图标匹配方式如下。

    • 若没有与当前设备推荐尺寸一致的图标,则优先使用比推荐尺寸大,最接近推荐尺寸的图标
    • 若没有比推荐尺寸大的图标,则优先使用最接近推荐尺寸的图标
    • 若多个图标符合推荐尺寸,优先使用含precomposed关键字的图标
    • 若未用link指定图标,自动搜索网站根目录下带有app-touch-icon或者app-touch-icon-precomposed前缀的图标

      retina图标是标准图标大小的两倍,实际仅仅需要114 * 114144 * 144两款图标即可。将retina图标的大小设置成标准图标的尺寸,IOS会根据情况自动进行缩放。

    <link rel="apple-touch-icon" sizes="57x57" href="assets/imgs/logo.png">
    <link rel="apple-touch-icon" sizes="114x114" href="assets/imgs/logo.png">
    <link rel="apple-touch-icon" sizes="72x72" href="assets/imgs/logo@2x.png">
    <link rel="apple-touch-icon" sizes="144x144" href="assets/imgs/logo@2x.png">
    

    apple-touch-startup-image

      网页添加到主屏幕后,设置打开后的启动画面。

      其中在iPhoneiTouch设备上只支持竖屏模式,图片分辨率为320 * 640,在iPad上支持竖屏和横屏两种模式,分辨率为768 * 1004748 * 1024

      apple-touch-startup-image不支持sizes属性,可以使用media来支持多种屏幕。

    <link rel="apple-touch-startup-image" href="assets/imgs/startup-l.png"  media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">
    <link rel="apple-touch-startup-image" href="assets/imgs/startup-l.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
    <link rel="apple-touch-startup-image" href="assets/imgs/startup.png">
    

    apple-touch-icon-precomposed

      区别于apple-touch-icon,若属性值为apple-touch-icon-precomposed时,系统不会对图标添加类似于圆角和高光的效果,若属性值为apple-touch-icon时系统会自动为图标添加圆角和高光。

    <link rel="apple-touch-icon-precomposed" href="assets/imgs/logo.png">
    

    apple-itunes-app

      告知iPhonesafari浏览器,网页对应的appid,便于在页面显示app的下载广告条。

    <meta name="apple-itunes-app" content="app-id=123456789">
    

    Google 浏览器

    google

      禁止自动翻译。

    <meta name="google" value="notranslate">
    

    mobile-web-app-capable

      使用Chrome for Android版本的浏览器添加到主屏幕后,页面以全屏显示,即隐藏工具栏和菜单栏。

    <meta name="mobile-web-app-capable" content="yes">
    

    theme-color

      指定Chrome for Android版的浏览器的设备顶部状态栏主题色。

    <meta name="theme-color" content="#000000">
    

    Web

    application-name

      指定页面代表的web应用程序的名称,光标悬停在Win7任务栏的固定网站按钮上时,此名称将出现在工具提示中,详细参考 application-name

    <meta name="application-name" content="">
    

    msapplication-tap-highlight

      禁止页面链接高亮。

    <meta name="msapplication-tap-highlight" content="no">
    

    msapplication-tooltip

      光标悬停在网页快捷方式上,将会显示此提示文本,详细参考 msapplication-tooltip

    <meta name="msapplication-tooltip" content="">
    

    msapplication-starturl

      指定网页快捷方式的根URL,不指定则默认使用当前页的地址,详细参考 msapplication-starturl

    <meta name="msapplication-starturl" content="">
    

    msapplication-window

      指定网页快捷方式的首次启动的初始窗口大小,若用户调整了窗口大小,网页将保留新的尺寸值,详细参考 msapplication-window

    <meta name="msapplication-window" content="width=1024;height=768">
    

    msapplication-navbutton-color

      自定义网页快捷方式的浏览器窗口中前进和后退按钮的颜色,详细参考 msapplication-navbutton-color

    <meta name="msapplication-navbutton-color" content="#FF3300">
    

    msapplication-task

      将某个网页同引用程序一般固定在Win7任务栏,在点击后显示一个相关站点的列表,详细参考 msapplication-task

    <meta name="msapplication-task" content="name=xxx; action-uri=http://www.xxx.com; icon-uri=/imgs/logo.ico">
    

    msapplication-task-separator

      在msapplication-task中呈现的站点列表中,在各个任务之间放置一条分割线。若指定多条分割线,则通过声明不同content来使每条分割线都具有唯一性。

    <meta name="msapplication-task-separator" content="id">
    

    msapplication-TileImage

      Win8版本后,支持将网页固定在开始屏幕中,且可以自定义图标和背景图,此属性用来指定图标,详细参考 msapplication-TileImage

    <meta name="msapplication-TileImage" content="/imgs/logo.png">
    

    msapplication-TileColor

      同 msapplication-TileImage类似,指定背景色,详细参考 msapplication-TileColor

    <meta name="msapplication-TileColor" content="#FF3300">
    

    msApplication-ID

      用于网页关联Win8应用程序,IE识别用户计算机是否安装了关联应用,若未安装,则提供指向安装此应用程序的直接链接,若安装了则显示切换到xxx应用,详细参考 msApplication-ID

    <meta name="msApplication-ID" content="App">
    

    msApplication-PackageFamilyName

      用于将网页连接到商店,详细参考 msApplication-PackageFamilyName

    <meta name="msApplication-PackageFamilyName"content="">
    

    msApplication-Arguments

      传递给应用程序的参数字符串,详细参考 msApplication-Arguments

    <meta name="msApplication-Arguments" content="">
    

    msApplication-MinVersion

      强制要求应用程序的最低版本,若用户尝试切换到过低版本的应用程序,会被链接到应用商店更新应用程序,详细参考 msApplication-Arguments

    <meta name="msApplication-MinVersion" content="">
    

    msApplication-OptOut

      是否阻止用户安装或者切换应用程序,详细参考 msApplication-Arguments

    <meta name="msApplication-OptOut" content="install">
    

    msapplication-badge

      将网页固定到开始屏幕后,Win8可以轮询更新更新其中的应用程序,如下指定应用程序的更新方式,详细参考 msapplication-badge

    <meta name="msapplication-badge" content="">
    

    msapplication-config

      自定义网页快捷方式的更新方式、开始屏幕中图标等,注意需使用XML文件设置,详细参考 msapplication-config

    <meta name="msapplication-config" content="http://www.xxx.com/config.xml">
    

    MSThemeCompatible

      是否在IE中开启xp的主题,其中yes表示打开xp的蓝色立体按钮系统显示样式。

    <meta http-equiv="MSThemeCompatible" content="yes">
    

    MSSmartTagsPreventParsing

      IE 6中包含有Smart tag开关,如下用户将看不到某些链接。

    <meta name="MSSmartTagsPreventParsing" content="true">
    

    HandheldFriendly

      针对手持设备优化,主要是部分不识别viewport的浏览器,例如黑莓。

    <meta name="HandheldFriendly" content="true">
    

    MobileOptimized

      布局菜单桌面选择,浏览器根据此属性的content值与屏幕宽度对比,决定使用何种布局方式,详细参考 MobileOptimized

    <meta name="MobileOptimized" content="240">
    

    其他

    Open Graph Protocol

      og是一种新的http头部标记,此协议可以让网页成为富媒体对象,即网页内容可以被其它社会化网站引用,目前此协议被SNS网站(Facebook等)采用。

      网页遵守此协议,SNS可以有效从页面提取信息并呈现给用户,从而提高网站的传播效率。

      og主要标签属性包括title(标题)、type(类型,常用值包括articlebookmovie)、image(缩略图地址)、url(页面地址)、description(页面描述)、site_name(页面所在网站名)、videosrc(视频或flash地址)、audiosrc(音频地址)。

    <meta property="og:title" content="">
    <meta property="og:description" content="">
    

    App Links

      移动端点击一个链接会产生一个弹出框,询问用户打开哪种应用。而App Links让用户在点击一个普通链接时候可以打开指定app的指定页面,若用户未安装则跳转到web页面,或者直接跳转到app的下载页面。

    <meta property="al:ios:url" content="">
    <meta property="al:ios:app_store_id" content="">
    <meta property="al:ios:app_name" content="">
    <meta property="al:android:url" content="">
    <meta property="al:android:app_name" content="">
    <meta property="al:android:package" content="">
    <meta property="al:web:url" content="">
    
    展开全文
  • meta元素的常用方法

    2019-02-10 16:06:29
    meta元素主要用来描述一个html文档的一些属性。 以下是一些常用的方法: 1、用来描述本html文档的字体 例如:&lt;meta charset="utf-8"&gt; 指定本html文档的字体为utf-8 &lt;meta ...
  • 本文实例讲述了jQuery元素属性操作的方法。分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title&...
  • 万能的meta属性详解

    千次阅读 2015-10-10 13:08:58
    元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部,不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。 属性 必选:...
  • meta属性详解

    千次阅读 2016-06-05 18:07:33
    其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的页面,实现网页转换时的动态效果,控制页面缓冲,网页定级评价,控制网页...
  • 获取<meta-data>元素的value属性的值

    千次阅读 2015-10-20 15:09:39
    获取元素的value属性的值,注释不解释。import android.app.Activity; import android.content.ComponentName; import android.content.Context; import android.content.pm.ActivityInfo; import android.content...
  • HTML meta viewport属性说明

    万次阅读 2012-08-16 22:40:30
    什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)...移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和
  • 需要获取 meta 里面的值, 就是 content 里面的值: <meta name="basepath" id="basepath" content="$!webPath" /> jq两种方式 console.log('test>>>>'+">&g...
  • HTML页面meta标签常用的属性/属性

    千次阅读 2017-04-13 10:34:20
    META元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者及其他元数据。 元数据可以被使用浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 Web 服务调用。 web开发中我们经常用到meta...
  • 网站Meta标签都哪些属性及作用?

    千次阅读 2016-08-22 10:53:51
    网站Meta标签都哪些属性及作用?  Meta标签是网页最顶部出现的几段英文语句,那么Meta标签都哪些呢?它们各自的属性又代表什么呢?下面就讲述一下,希望大家能了解一下:   1、meta标签  meta标签是...
  • HTML - meta标签中属性详解

    千次阅读 2016-11-17 10:46:47
    元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部,不包含任何内容。标签的属性定义了与文档相关联的名称/值对。 该标签主要两个属性:...
  • JS获取元素属性和自定义属性

    千次阅读 2018-09-11 18:41:34
    获取元素属性分为两种类型: 1-获取元素常见的属性(class,id,type,value……) 2-获取自定义的元素属性(data-value,data-mess…….)   获取元素属性,设置元素属性: 1-原生JS 设置属性 ....
  • HTML <meta> charset 属性

    千次阅读 2016-07-05 10:17:39
    HTML  charset 属性  HTML 标签 实例 ...所有主流浏览器都支持 charset 属性。...charset 属性规定 HTML 文档的字符编码。...提示:charset 属性可以通过任意元素上的 lang 属性来重写。
  • 元素属性出现在元素的< >内,并且和元素名之间一个空格分隔;属性值用“”引起来。 (编者具有绝对的权利,这一个简单网页的编写,你就是上帝) <html> <head> <title>第一张网页&.....
  • 动态添加js、css、meta元素

    千次阅读 2012-04-03 13:55:22
     我测试两种方法:  1、在母版页中添加一个入口(会提示错误,但能运行)            然后再在内容页中添加就行。  2、下面是我写的一个类,用于动态添加  using System;  ...
  • meta元素的lang属性用来定义content属性值的语言;dir属性用来定义content属性值中的文字的方向;例如: <meta name="Author" content="zuozhe" lang="US-en" dir="LTR"> 上面的代码表示content属性...
  • <meta> 元素详解

    千次阅读 2014-12-19 10:17:23
    robotterms是一组使用逗号(,)分割的值,通常如下几种取值:none,noindex,nofollow,all,index和follow。确保正确使用nofollow和noindex属性值。 <meta name="robots" content="index,follow" /> <!-- ...
  • html— Meta— http-equiv属性

    千次阅读 2019-04-20 17:00:07
    ①<meta>...元数据可用于浏览器(如何显示内容或重新加载页面),... 标签始终位于 head 元素中。 <meta> 标签的属性定义了与文档相关联的名称/值对。 ② <meta>的<http-equiv> 相当于http...
  • Meta标签常用属性值的写法和作用

    千次阅读 2018-03-22 10:07:46
    典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。 标签始终位于 head 元素中。 元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 ...
  • meta的各个属性及作用

    2014-07-07 10:32:15
    meta是html语言head区的一个辅助性标签。...<head> <meta http-equiv="content-Type" content="text/html; charset=gb2312"> ...其实如果你能够用好meta标签,会给你带来意想不到的效果,例如加入关键
  • HTML之——<meta> 元素是什么

    千次阅读 2015-03-04 09:47:25
    发现项目里面的前端页面,手机设备的页面,一些没见过的meta标签,感到好奇,因为之前被问到一个关于手机前端的问题,我只回答了自己不懂当时对适配是怎么做到是很兴趣的,刚好找到了一篇比较好的文章。...
  • 原生JS获取元素属性

    千次阅读 2018-03-02 23:24:13
    &lt;!DOCTYPE html&gt; &lt;html lang="en"&...meta charset="...原生JS获取元素属性&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div
  • 导读:meta属性有name,http-equiv,content,charset 属性(HTML5 新属性), scheme (已弃用)。元素可提供相关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 193,960
精华内容 77,584
关键字:

meta元素的属性有