扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
小编给大家分享一下html meta标签使用及属性的案例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
淮阳ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:18982081108(备注:SSL证书合作)期待与您的合作!自学前端开始,我对meta标签接触不多,主要把精力都集中在能显示出来的标签上,比如span、button、h2等等。有时候去查看一些知名网站的源码,发现head标签里有一大摞的meta。
今天就来学习一下meta的用处,看看有些啥属性。
一、定义及作用
meta,即元数据(Metadata)是数据的数据信息。
该标签提供了 HTML 文档的元数据。元数据不会显示在客户端,但是会被浏览器解析。
通常用于指定网页的描述,关键词,文件的最后修改时间,作者及其他元数据。
元数据可以被使用浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 Web 服务调用。
二、属性
charset(htm5新增) | 定义文档的字符编码 |
content | 定义与 http-equiv 或 name 属性相关的元信息。 |
http-equiv | http响应头 |
name | 属性名称 |
scheme (htm5废弃) | 翻译 content 属性的值的方案 |
1、charset
HTML5新增的属性,定义当前页面的字符编码
新写法:
老写法:
HTML5中优先用新写法
2、name属性
a、keywords,当前网页的关键字,便于搜索引擎识别,提高搜索准确性
b、description,对当前网页的简单描述,如果用百度搜索的话,在搜索结果的每个标题下面会显示description的内容,方便用户快速定位
c、viewport,这个meta有点复杂,主要用在移动网页中,需要单独写一篇文章,这里暂时略过
d、robots,搜索引擎爬虫的索引方式
content的取值有all、none、index、noindex、follow、nofollow,默认是all,具体的说明如表格所示:
all | 文档可以被索引,文档中的链接可以被查询 |
none | 文档不能被索引,同时文档中的链接不能被查询 |
index | 文档可以被索引 |
noindex | 文档不能被索引,但是文档中的链接可以被查询 |
follow | 文档中的链接可以被查询 |
nofollow | 文档可以被索引,但是文档中的链接不能被查询 |
e、author,文档的作者
f、copyright,文档的版权说明
g、revisit-after,搜索引擎爬虫重访的时间间隔,如果你的网站不经常更新,那可以把这个时间设置的稍长一些,能略微的减轻服务器的压力,节省带宽资源
h、renderer,双核浏览器的渲染方式,指定默认用哪个浏览器内核来渲染,例如360浏览器:
//默认webkit内核 //默认IE兼容模式 //默认IE标准模式
3、http-equiv
模拟http里的头,回传给服务器一些信息
a、expires,网页的到期时间,过期之后,需要重新访问服务器
b、pragma(兼容http1.0,1.1),cache-control(http1.1新增),设置缓存方式,建议用cache-control,该属性的content具体参考http里的cache-control
c、refresh,自动刷新并跳转到content中声明的url
//5秒后跳转向我自己的域名
d、set-cookie,添加cookie
e、content-Type,文档的字符编码,同charset,建议使用charset
f、x-ua-compatible,告诉浏览器用哪个版本来渲染文档
//指定IE和Chrome使用最新版本渲染当前页面
以上是html meta标签使用及属性的案例分析的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联网站制作公司行业资讯频道!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流