微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

html meta标签使用及属性的详细分析

本篇文章给大家带来的内容是关于html Meta标签使用及属性的详细分析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

自学前端开始,我对Meta标签接触不多,主要把精力都集中在能显示出来的标签上,比如span、button、h1等等。有时候去查看一些知名网站的源码,发现head标签里有一大摞的Meta

今天就来学习一下Meta的用处,看看有些啥属性

一、定义及作用

Meta,即元数据(Metadata)是数据的数据信息。

标签提供了 HTML 文档的元数据。元数据不会显示在客户端,但是会被浏览器解析。

通常用于指定网页的描述,关键词,文件的最后修改时间,作者及其他元数据。

元数据可以被使用浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 Web 服务调用

二、属性

charset(htm5新增)定义文档的字符编码
content 定义与 http-equiv 或 name 属性相关的元信息。
http-equivhttp响应头
name      属性名称
scheme (htm5废弃)翻译 content 属性的值的方案

1、charset

HTML5新增的属性,定义当前页面的字符编码

新写法:

<Meta charset=UTF-8>

老写法:

<Meta http-equiv=Content-Type content=text/html; charset=UTF-8>

HTML5中优先用新写法

2、name属性

a、keywords,当前网页的关键字,便于搜索引擎识别,提高搜索准确性

<Meta name=keywords content=cdn,网络加速,运营商>

b、description,对当前网页的简单描述,如果用百度搜索的话,在搜索结果的每个标题下面会显示description的内容,方便用户快速定位

<Meta name=description content=本公司专注提供CDN网络加速,同时也提供云计算服务>

c、viewport,这个Meta有点复杂,主要用在移动网页中,需要单独写一篇文章,这里暂时略过

<Meta name=viewport content=width=device-width, initial-scale=1.0, maximum-scale=1.0 />

d、robots,搜索引擎爬虫的索引方式

<Meta name=robots content=none>

content的取值有all、none、index、noindex、follow、nofollow认是all,具体的说明如表格所示:

all文档可以被索引,文档中的链接可以被查询
none文档不能被索引,同时文档中的链接不能被查询
index文档可以被索引
noindex文档不能被索引,但是文档中的链接可以被查询
follow文档中的链接可以被查询
nofollow文档可以被索引,但是文档中的链接不能被查询

e、author,文档的作者

<Meta name=author content=liuhw,liuhuansir@126.com>

f、copyright,文档的版权说明

<Meta name=copyright content=liuhw>

g、revisit-after,搜索引擎爬虫重访的时间间隔,如果你的网站不经常更新,那可以把这个时间设置的稍长一些,能略微的减轻服务器的压力,节省带宽资源

<Meta name=revisit-after content=5 days >

h、renderer,双核浏览器的渲染方式,指定认用哪个浏览器内核来渲染,例如360浏览器:

<Meta name=renderer content=webkit> //认webkit内核
<Meta name=renderer content=ie-comp> //认IE兼容模式
<Meta name=renderer content=ie-stand> //认IE标准模式

3、http-equiv

模拟http里的头,回传给服务器一些信息

a、expires,网页的到期时间,过期之后,需要重新访问服务器

<Meta http-equiv=expires content=Sunday 26 October 2018 01:00 GMT />

b、pragma(兼容http1.0,1.1),cache-control(http1.1新增),设置缓存方式,建议用cache-control,该属性的content具体参考http里的cache-control

<Meta http-equiv=cache-control content=no-cache>

c、refresh,自动刷新并跳转到content中声明的url

<Meta http-equiv=refresh content=5;URL=http://www.liuhw.club/> //5秒后跳转向我自己的域名

d、set-cookie,添加cookie

<Meta http-equiv=set-cookie content=TOKEN_KEY=81BBF72619795017B6AC214AE705F1F8; Domain=10.1.100.111; Path=/>

e、content-Type,文档的字符编码,同charset,建议使用charset

<Meta http-equiv=content-type content=text/html;charset=gb2312>

f、x-ua-compatible,告诉浏览器用哪个版本来渲染文档

<Meta http-equiv=x-ua-compatible content=IE=edge,chrome=1/> //指定IE和Chrome使用最新版本渲染当前页面

总结一下,上面只是列出了一些常用的属性,没有列出来的等需要用到的时候再查文档

【相关推荐:HTML5视频教程

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。