0

0

HTML meta标签的作用是什么?html meta标签的使用方法介绍

寻∝梦

寻∝梦

发布时间:2018-08-27 18:44:58

|

4054人浏览过

|

来源于php中文网

原创

本篇文章介绍了html meta标签的作用及其使用的方法,介绍了很多使用的方法,希望大家能够自己把这些代码多练习几遍,解释都在旁边,最后还介绍了html meta标签的几种著名网站的meta设置。

开始我们先说说meta标签的作用:

meta标签是HTML标记head区的一个关键标签,它位于HTML文档的

之间(有些也不是在和<title>之间)。它提供的信息虽然对用户不可见,但却是文档的最基本的信息。HTML<meta>除了提供文档字符集、使用语言、作者等基本信息外,还涉及对关键词和网页等级的设定。<p>在查阅w3school中,第一句话中的“元数据”就让我开始了Google之旅。然后很顺利的在英文版的w3school找到了想要的结果。(中文w3school说的是元信息,Google和百度都没有相关的词条。但元数据在Google就有详细解释。所以这儿采用英文版W3school的解释。)</p> <p>不难看出,其中的关键是metadata,中文名叫元数据,是用于描述数据的数据。它不会显示在页面上,但是机器却可以识别。这么一来meta标签的作用方式就很好理解了。</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记(深入)</a>”;</p> <p>meta常用于定义页面的说明,关键字,最后修改日期,和其它的元数据。这些元数据将服务于浏览器(如何布局或重载页面),搜索引擎和其它网络服务。</p> <p><strong>HTML中meta标签的使用方法介绍:</strong></p><pre class="brush:html;toolbar:false"><head> <! - 声明文档使用的字符编码 - > <meta charset =“utf-8”/> <! - 页面关键词 - > <meta name =“keywords”content =“个人活动发布,会办app,活动管理,会议管理,社群管理“/> <! - 页面描述 - > <meta name =”description“content =”发布个人会议,发布公司会议,w我们都可以帮你找到合适的会议地点和参会观众“> <! - 网页作者 - > <meta name =”author“content =”xin1642868874@163.com“> <! - 搜索引擎抓取robotterms是一组使用逗号(, )分割的值,通常有如下几种取值:none,noindex,nofollow,all,index和follow。 - > <meta name =“机器人“content =”索引,按照“> <! - 页面重定向和刷新 - > <meta http-equiv =”refresh“content =”0; url =“/> <! - 禁止Chrome浏览器中自动提示翻译 - > <meta name =“google”value =“notranslate”> <! - - 禁止百度转码 - > <meta http-equiv =“Cache-Control”content =“no-siteapp”> <! - 自定义标签:app版本号说明 - > <meta name =“app-version”content =“1.13.3”> <title>php中文网

以上都是关于HTML meta标签的作用和使用方法,还有很多属性,不过那些对现在的我们来说学这些还有点早。

再来分享几个著名网站的首页的meta文件:

京东首页的meta设置:

启科网络PHP商城系统
启科网络PHP商城系统

启科网络商城系统由启科网络技术开发团队完全自主开发,使用国内最流行高效的PHP程序语言,并用小巧的MySql作为数据库服务器,并且使用Smarty引擎来分离网站程序与前端设计代码,让建立的网站可以自由制作个性化的页面。 系统使用标签作为数据调用格式,网站前台开发人员只要简单学习系统标签功能和使用方法,将标签设置在制作的HTML模板中进行对网站数据、内容、信息等的调用,即可建设出美观、个性的网站。

下载


淘宝首页的meta设置:






优酷首页的meta设置:





除了上面的解释的那些,这在补一个也是常用的meta标签里的属性

X-UA-Compatible IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式,以此来解决部分兼容问题。

以上代码告诉IE浏览器,无论是否用DTD声明文档标准,IE8/9都会以IE7引擎来渲染页面。  

通过看到大网站对于meta的设置,我们可以看到常用的有:X-UA-Compatible、keywords、description这三种,我们要好好学会用。

【小编推荐】

HTML中head标签是什么意思?一篇文章教你正确地使用head标签

黑客应该学PHP还是python?理性分析PHP和python的十处差异

相关专题

更多
c++ 根号
c++ 根号

本专题整合了c++根号相关教程,阅读专题下面的文章了解更多详细内容。

42

2026.01.23

c++空格相关教程合集
c++空格相关教程合集

本专题整合了c++空格相关教程,阅读专题下面的文章了解更多详细内容。

46

2026.01.23

yy漫画官方登录入口地址合集
yy漫画官方登录入口地址合集

本专题整合了yy漫画入口相关合集,阅读专题下面的文章了解更多详细内容。

202

2026.01.23

漫蛙最新入口地址汇总2026
漫蛙最新入口地址汇总2026

本专题整合了漫蛙最新入口地址大全,阅读专题下面的文章了解更多详细内容。

341

2026.01.23

C++ 高级模板编程与元编程
C++ 高级模板编程与元编程

本专题深入讲解 C++ 中的高级模板编程与元编程技术,涵盖模板特化、SFINAE、模板递归、类型萃取、编译时常量与计算、C++17 的折叠表达式与变长模板参数等。通过多个实际示例,帮助开发者掌握 如何利用 C++ 模板机制编写高效、可扩展的通用代码,并提升代码的灵活性与性能。

16

2026.01.23

php远程文件教程合集
php远程文件教程合集

本专题整合了php远程文件相关教程,阅读专题下面的文章了解更多详细内容。

100

2026.01.22

PHP后端开发相关内容汇总
PHP后端开发相关内容汇总

本专题整合了PHP后端开发相关内容,阅读专题下面的文章了解更多详细内容。

73

2026.01.22

php会话教程合集
php会话教程合集

本专题整合了php会话教程相关合集,阅读专题下面的文章了解更多详细内容。

75

2026.01.22

宝塔PHP8.4相关教程汇总
宝塔PHP8.4相关教程汇总

本专题整合了宝塔PHP8.4相关教程,阅读专题下面的文章了解更多详细内容。

67

2026.01.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3万人学习

AngularJS教程
AngularJS教程

共24课时 | 2.9万人学习

CSS教程
CSS教程

共754课时 | 23.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号