企业网站制作模板免费下载,淘宝指数查询官网手机版,上海网站建设免费推荐,万网云服务器网站上线之前学习前端中#xff0c;对meta标签的了解仅仅只是这一句。 meta charsetUTF-8 但是打开任意的网站#xff0c;其head标签内都有一列的meta标签。比如我博客的。 但是自己却很不熟悉#xff0c;于是把meta标签加入了寒假学习计划的最前方。 简介 在查…之前学习前端中对meta标签的了解仅仅只是这一句。 meta charsetUTF-8 但是打开任意的网站其head标签内都有一列的meta标签。比如我博客的。 但是自己却很不熟悉于是把meta标签加入了寒假学习计划的最前方。 简介 在查阅w3school中第一句话中的“元数据”就让我开始了Google之旅。然后很顺利的在英文版的w3school找到了想要的结果。中文w3school说的是元信息Google和百度都没有相关的词条。但元数据在Google就有详细解释。所以这儿采用英文版W3school的解释。 The meta tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable. 不难看出其中的关键是metadata中文名叫元数据是用于描述数据的数据。它不会显示在页面上但是机器却可以识别。这么一来meta标签的作用方式就很好理解了。 用处 Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services 这句话对meta标签用处的介绍简洁明了。翻译过来就是meta常用于定义页面的说明关键字最后修改日期和其它的元数据。这些元数据将服务于浏览器如何布局或重载页面搜索引擎和其它网络服务。 组成 meta标签共有两个属性分别是http-equiv属性和name属性。 1. name属性 name属性主要用于描述网页比如网页的关键词叙述等。与之对应的属性值为contentcontent中的内容是对name填入类型的具体描述便于搜索引擎抓取。meta标签中name属性语法格式是 meta name参数content具体的描述。 其中name属性共有以下几种参数。 (A-C为常用属性) A. keywords(关键字) 说明用于告诉搜索引擎你网页的关键字。举例 meta namekeywordscontentLxxyx,博客文科生前端 B. description(网站内容的描述) 说明用于告诉搜索引擎你网站的主要内容。举例 meta namedescriptioncontent文科生热爱前端与编程。目前大二这是我的前端博客 C. viewport(移动端的窗口) 说明这个概念较为复杂具体的会在下篇博文中讲述。这个属性常用于设计移动端网页。在用bootstrap,AmazeUI等框架时候都有用过viewport。 举例常用范例 meta nameviewport contentwidthdevice-width, initial-scale1 D. robots(定义搜索引擎爬虫的索引方式) 说明robots用来告诉爬虫哪些页面需要索引哪些页面不需要索引。content的参数有all,none,index,noindex,follow,nofollow。默认是all。 举例 meta namerobots contentnone 具体参数如下 1.none : 搜索引擎将忽略此网页等价于noindexnofollow。 2.noindex : 搜索引擎不索引此网页。 3.nofollow: 搜索引擎不继续通过此网页的链接索引搜索其它的网页。 4.all : 搜索引擎将索引此网页与继续通过此网页的链接索引等价于indexfollow。 5.index : 搜索引擎索引此网页。 6.follow : 搜索引擎继续通过此网页的链接索引搜索其它的网页。 E. author(作者) 说明用于标注网页作者举例 meta nameauthorcontentLxxyx,841380530qq.com F. generator(网页制作软件) 说明用于标明网页是什么软件做的举例(不知道能不能这样写) meta namegeneratorcontentSublime Text3 G. copyright(版权) 说明用于标注版权信息举例 meta namecopyrightcontentLxxyx //代表该网站为Lxxyx个人版权所有。 H. revisit-after(搜索引擎爬虫重访时间) 说明如果页面不是经常更新为了减轻搜索引擎爬虫对服务器带来的压力可以设置一个爬虫的重访时间。如果重访时间过短爬虫将按它们定义的默认时间来访问。举例 meta namerevisit-after content7 days I. renderer(双核浏览器渲染方式) 说明renderer是为双核浏览器准备的用于指定双核浏览器默认以何种方式渲染页面。比如说360浏览器。举例 meta namerenderer contentwebkit //默认webkit内核
meta namerenderer contentie-comp //默认IE兼容模式 meta namerenderer contentie-stand //默认IE标准模式 2. http-equiv属性 介绍之前先说个小插曲。看文档和博客关于http-equiv的介绍时有这么一句。 http-equiv顾名思义相当于http的文件头作用。 一开始看到这句话的时候我是迷糊的。因为我看各类技术名词都会习惯性的去记住它的英文全称。equiv的全称是equivalent意思是相等相当于。然后我脑子里出现了大大的迷惑“HTTP相等” 后来还准备去Segmentfault提问来着。结果在写问题的时候突然反应出equivalent还有相当于的意思。意思就是相当于http的作用。至于文件头是哪儿出来的估计是从其作用来分析的。我认为顾名思义并不能得出相当于http的文件头作用这个论断。 这个我所认为的http-equiv意思的简介。 相当于HTTP的作用比如说定义些HTTP参数啥的。 meta标签中http-equiv属性语法格式是 meta http-equiv参数 content具体的描述 其中http-equiv属性主要有以下几种参数 A. content-Type(设定网页字符集)(推荐使用HTML5的方式) 说明用于设定网页字符集便于浏览器解析与渲染页面举例 meta http-equivcontent-Type contenttext/html;charsetutf-8 //旧的HTML不推荐meta charsetutf-8 //HTML5设定网页字符集的方式推荐使用UTF-8 B. X-UA-Compatible(浏览器采取何种版本渲染当前页面) 说明用于告知浏览器以何种版本来渲染页面。一般都设置为最新模式在各大框架中这个设置也很常见。举例 meta http-equivX-UA-Compatible contentIEedge,chrome1/ //指定IE和Chrome使用最新版本渲染当前页面 C. cache-control(指定请求和响应遵循的缓存机制) 用法1. 说明指导浏览器如何缓存某个响应以及缓存多长时间。这一段内容我在网上找了很久但都没有找到满意的。最后终于在Google Developers中发现了我想要的答案。 举例: meta http-equivcache-control contentno-cache 共有以下几种用法 no-cache: 先发送请求与服务器确认该资源是否被更改如果未被更改则使用缓存。 no-store: 不允许缓存每次都要去服务器上下载完整的响应。安全措施 public : 缓存所有响应但并非必须。因为max-age也可以做到相同效果 private : 只为单个用户缓存因此不允许任何中继进行缓存。比如说CDN就不允许缓存private的响应 maxage : 表示当前请求开始该响应在多久内能被缓存和重用而不去服务器重新请求。例如max-age60表示响应可以再缓存和重用 60 秒。 参考链接HTTP缓存 用法2.(禁止百度自动转码) 说明用于禁止当前页面在移动端浏览时被百度自动转码。虽然百度的本意是好的但是转码效果很多时候却不尽人意。所以可以在head中加入例子中的那句话就可以避免百度自动转码了。举例 meta http-equivCache-Control contentno-siteapp / D. expires(网页到期时间) 说明:用于设定网页的到期时间过期后网页必须到服务器上重新传输。举例 meta http-equivexpires contentSunday 26 October 2016 01:00 GMT / E. refresh(自动刷新并指向某页面) 说明网页将在设定的时间内自动刷新并调向设定的网址。举例: meta http-equivrefresh content2URLhttp://www.lxxyx.win/ //意思是2秒后跳转向我的博客 F. Set-Cookie(cookie设定) 说明如果网页过期。那么这个网页存在本地的cookies也会被自动删除。 meta http-equivSet-Cookie contentname, date //格式meta http-equivSet-Cookie contentUserLxxyx; path/; expiresSunday, 10-Jan-16 10:00:00 GMT //具体范例 最后 暂时总结的就这么多了meta标签的自定义属性实在太多了。所以只去找了常用的一些还有像 Window-target 这样已经基本被废弃的属性我也没有添加。 meta标签作用 META标签是HTML标记HEAD区的一个关键标签提供文档字符集、使用语言、作者等基本信息以及对关键词和网页等级的设定等最大的作用是能够做搜索引擎优化SEO。 PS便于搜索引擎机器人查找、分类互联网应用应该要注意。 大网站都是怎么写 在了解这个标签之前我查找了各个主流网站他们的对于Meta的设置如下 京东首页的Meta设置 meta charsetgbk
meta namedescription content京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务为您提供愉悦的网上购物体验!
meta nameKeywords content网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东 淘宝首页的Meta设置 meta charsetutf-8
meta http-equivX-UA-Compatible contentIEedge,chrome1
meta namerenderer contentwebkit
meta namespm-id contenta21bo
meta namedescription content淘宝网 - 亚洲最大、最安全的网上交易平台提供各类服饰、美容、家居、数码、话费/点卡充值… 8亿优质特价商品同时提供担保交易(先收货后付款)、先行赔付、假一赔三、七天无理由退换货、数码免费维修等安全交易保障服务让你全面安心享受网上购物乐趣
meta namekeyword content youku首页的Meta设置 meta charsetutf-8
meta http-equivX-UA-Compatible contentIEEdge
meta nametitle content优酷-中国领先视频网站,提供视频播放,视频发布,视频搜索 - 优酷视频 /
meta namekeywords content视频,视频分享,视频搜索,视频播放,优酷视频 /
meta namedescription content视频服务平台,提供视频播放,视频发布,视频搜索,视频分享 / 斗鱼首页的Meta设置 meta http-equivContent-Type contenttext/html; charsetutf-8 /
meta namerenderer contentwebkit|ie-comp|ie-stand
meta http-equivX-UA-Compatible contentIEEdge,chrome1
namekeywords contentDOTA2,热门游戏直播,游戏直播,高清游戏直播,手机游戏直播,电子竞技直播 /
meta namedescription content斗鱼 - 全民直播平台提供高清、快捷、流畅的视频直播和游戏赛事直播服务包含DOTA2等各类热门游戏赛事直播和各种名家大神游戏直播内容丰富推送及时带给你不一样的视听体验一切尽在斗鱼 - 全民直播平台。 / 腾讯网首页的Meta设置 meta charsetUTF-8
meta namerenderer contentwebkit /
meta http-equivX-UA-Compatible contentIEedge,chrome1
meta namekeywords content新闻 新闻中心 事实派 新闻频道,时事报道
meta namedescription content腾讯新闻事实派。新闻中心,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站
meta nameauthor contentskeetershi / 起点小说网首页的Meta设置 meta namekeywords content小说,小说网,言情小说,青春小说,玄幻小说,武侠小说,都市小说,历史小说,网络小说,原创网络文学 /
meta namedescription content小说阅读,精彩小说尽在起点小说。起点小说提供玄幻小说,武侠小说,原创小说,网游小说,都市小说,言情小说,青春小说,历史小说,军事小说,网游小说,科幻小说,恐怖小说,首发小说最新章节免费小说阅读,精彩尽在起点小说ver:071011热门小说:。 /
meta http-equivContent-Type idmeta_ContentType contenttext/html;charsetUTF-8 /
meta namerobots contentall /
meta namegooglebot contentall /
meta namebaiduspider contentall /
meta namecopyright content本页版权 www.qidian.com 起点中文网所有。All Rights Reserved /
meta http-equivmobile-agent contentformatwml; urlhttp://m.qidian.com /meta http-equivmobile-agent contentformatxhtml; urlhttp://m.qidian.com /meta http-equivmobile-agent contentformathtml5; urlhttp://h5.qidian.com/bookstore.html /
meta nameapplication-name content起点中文小说网 /
meta namemsapplication-starturl content/Default.aspx?_sie9 /
meta namemsapplication-tooltip content小说阅读_起点中文小说网|免费小说,玄幻小说,武侠小说,言情小说,青春小说,小说网各类小说下载 /
meta namemsapplication-task contentname起点小游戏;action-urihttp://game.qidian.com/?_sie9;icon-urihttp://www.qidian.com/Images/ie9/game.ico /
meta namemsapplication-task contentname藏书架;action-urihttp://me.qidian.com/BookCase/1/1?_sie9;icon-urihttp://www.qidian.com/Images/ie9/book.ico /
meta namemsapplication-task contentname读书客户端;action-urihttp://c.qidian.com/android/?_sie9;icon-urihttp://www.qidian.com/Images/ie9/phone.ico /
meta namemsapplication-task contentname排行榜;action-urihttp://top.qidian.com/?_sie9;icon-urihttp://www.qidian.com/Images/ie9/chart.ico /
meta namemsapplication-task contentname搜索;action-urihttp://sosu.qidian.com/?_sie9;icon-urihttp://www.qidian.com/Images/ie9/search.ico /
meta propertyqc:admins content204236767661141166375 / meta详解 meta标签可分为两大部分http-equiv和name变量。 http-equiv http-equiv相当于http的文件头作用它可以向浏览器传回一些有用的信息以帮助浏览器正确地显示网页内容。 值描述例子content-type设定页面使用的字符集 meta http-equivcontent-Type contenttext/html; charsetutf-8 GB2312时代表说明网站是采用的编码是简体中文 ISO-8859-1时代表说明网站是采用的编码是英文 UTF-8时代表世界通用的语言编码 PShtml5页面的做法是直接使用meta charsetutf-8/ X-UA-CompatibleIE8的专用标记用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式以此来解决部分兼容问题。 meta http-equivX-UA-Compatible contentIE7 以上代码告诉IE浏览器无论是否用DTD声明文档标准IE8/9都会以IE7引擎来渲染页面。 meta http-equivX-UA-Compatible contentIE8 以上代码告诉IE浏览器IE8/9都会以IE8引擎来渲染页面。 meta http-equivX-UA-Compatible contentIEedge 以上代码告诉IE浏览器IE8/9及以后的版本都会以最高版本IE来渲染页面。 meta http-equivX-UA-Compatible contentIEEdge,chrome1 以上代码IEedge告诉IE使用最新的引擎渲染网页chrome1则可以激活Chrome Frame. PS谷歌添加一个插件Google Chrome Frame谷歌内嵌浏览器框架GCF这个插件可以让用户的IE浏览器外不变但用户在浏览网页时实际上使用的是Google Chrome浏览器内核而且支持IE6、7、8等多个版本的IE浏览器。 expires设定网页的过期时间。 meta http-equivexpirescontentFri,12Jan200118:18:18GMT PS必须使用GMT的时间格式 refresh自动刷新并指向新页面。 meta http-equivRefresh content2;URLhttps://www.baidu.com PS2代表页面停留2秒后跳转到后面的网址上 set-cookie如果网页过期那么自动删除本地cookie。 meta http-equivSet-Cookiecontentcookie valuexxx;expiresFriday,12-Jan-200118:18:18GMTpath/ PS必须使用GMT的时间格式。 windows-target强制页面在当前窗口中以独立页面显示可以防止自己的网页被别人当作一个frame页调用 meta http-equivWindow-target content_top cache-control缓存机制 meta http-equivcache-control contentno-cache Public指示响应可被任何缓存区缓存。 Private指示对于单个用户的整个或部分响应消息不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息此响应消息对于其他用户的请求无效。 no-cache指示请求或响应消息不能缓存。 no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。 max-age指示客户机可以接收生存期不大于指定时间以秒为单位的响应。 min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应。 max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值那么客户机可以接收超出超时期指定值之内的响应消息。 name name属性主要用于描述网页与之对应的属性值为contentcontent中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。 值描述例子author标注网页的作者 meta nameauthor contentdashen / keywords页面关键词用于被搜索引擎收录 meta namekeywords content新闻,新闻中心, 新闻频道 description页面描述用于搜索引擎收录 meta namedescription content新闻中心,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站 viewport用于控制页面缩放 meta nameviewport contentwidthdevice-width, initial-scale1, maximum-scale1, minimum-scale1, user-scalableno 详情可查看http://www.cnblogs.com/lovesong/p/4355029.htmlrenderer指定双核浏览器默认以何种方式渲染页面。 meta namerenderer contentwebkit//默认webkit内核
meta namerenderer contentie-comp//默认IE兼容模式
meta namerenderer contentie-stand//默认IE标准模式 PS360浏览器支持 generator说明网站的采用的什么软件制作 meta namegenerator contentMicrosoft/ revised网页文档的修改时间 meta namerevised content设计网, 6/24/2015/ robots用来告诉搜索机器人哪些页面需要索引哪些页面不需要索引。 meta namerobots contentnone/ 取值all|none|index|noindex|follow|nofollow, 默认all all文件将被检索且页面上的链接可以被查询 none文件将不被检索且页面上的链接不可以被查询 index文件将被检索 follow页面上的链接可以被查询 noindex文件将不被检索但页面上的链接可以被查询 nofollow文件将不被检索页面上的链接可以被查询。 copyright网站版权信息 meta namecopyright content本页版权XXX所有。All Rights Reserved / 总结 通过大网站对于meta的设置可以看到常用的有X-UA-Compatible、keywords、description。 参考文献 1. http://www.haorooms.com/post/html_meta_ds 转 http://www.cnblogs.com/lovesong/p/5745893.html
