本篇文章给大家带来的内容是关于html meta标签使用及属性的详细分析，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
自学前端开始，我对meta标签接触不多，主要把精力都集中在能显示出来的标签上，比如span、button、h1等等。有时候去查看一些知名网站的源码，发现head标签里有一大摞的meta。
今天就来学习一下meta的用处，看看有些啥属性。
一、定义及作用
meta，即元数据（Metadata）是数据的数据信息。
该标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。
通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。
元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。
二、属性
| charset(htm5新增) | 定义文档的字符编码 |
| content | 定义与 http-equiv 或 name 属性相关的元信息。 |
| http-equiv | http响应头 |
| 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视频教程】
以上就是html meta标签使用及属性的详细分析的详细内容，更多请关注双恒网络其它相关文章！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » html meta标签使用及属性的详细分析
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
