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>除了提供文档字符集、使用语言、作者等基本信息外，还涉及对关键词和网页等级的设定。在查阅w3school中，第一句话中的“元数据”就让我开始了Google之旅。然后很顺利的在英文版的w3school找到了想要的结果。（中文w3school说的是元信息，Google和百度都没有相关的词条。但元数据在Google就有详细解释。所以这儿采用英文版W3school的解释。） 不难看出，其中的关键是metadata，中文名叫元数据，是用于描述数据的数据。它不会显示在页面上，但是机器却可以识别。这么一来meta标签的作用方式就很好理解了。 立即学习“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”； meta常用于定义页面的说明，关键字，最后修改日期，和其它的元数据。这些元数据将服务于浏览器（如何布局或重载页面），搜索引擎和其它网络服务。 HTML中meta标签的使用方法介绍：<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中文网</title> </head></pre>以上都是关于HTML meta标签的作用和使用方法，还有很多属性，不过那些对现在的我们来说学这些还有点早。 再来分享几个著名网站的首页的meta文件： 京东首页的meta设置：<div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/code/8918" title="启科网络PHP商城系统"><img src="https://img.php.cn/upload/webcode/000/000/020/175722660670001.jpg" alt="启科网络PHP商城系统" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/code/8918" title="启科网络PHP商城系统">启科网络PHP商城系统</a> 启科网络商城系统由启科网络技术开发团队完全自主开发，使用国内最流行高效的PHP程序语言，并用小巧的MySql作为数据库服务器，并且使用Smarty引擎来分离网站程序与前端设计代码，让建立的网站可以自由制作个性化的页面。系统使用标签作为数据调用格式，网站前台开发人员只要简单学习系统标签功能和使用方法，将标签设置在制作的HTML模板中进行对网站数据、内容、信息等的调用，即可建设出美观、个性的网站。 </div> <a href="/xiazai/code/8918" title="启科网络PHP商城系统" class="aritcle_card_btn flexRow flexcenter">下载 </a> </div> </div><pre class="brush:html;toolbar:false"><meta charset="gbk"> <meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"> <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"></pre>淘宝首页的meta设置：<pre class="brush:html;toolbar:false"><meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="renderer" content="webkit"> <meta name="spm-id" content="a21bo"> <meta name="description" content="淘宝网 - 亚洲最大、最安全的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 8亿优质特价商品，同时提供担保交易(先收货后付款)、先行赔付、假一赔三、七天无理由退换货、数码免费维修等安全交易保障服务，让你全面安心享受网上购物乐趣！"> <meta name="keyword" content=""></pre>优酷首页的meta设置：<pre class="brush:html;toolbar:false"><meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="title" content="优酷-中国领先视频网站,提供视频播放,视频发布,视频搜索 - 优酷视频" /> <meta name="keywords" content="视频,视频分享,视频搜索,视频播放,优酷视频" /> <meta name="description" content="视频服务平台,提供视频播放,视频发布,视频搜索,视频分享" /></pre>除了上面的解释的那些，这在补一个也是常用的meta标签里的属性 X-UA-Compatible IE8的专用标记，用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式，以此来解决部分兼容问题。<pre class="brush:html;toolbar:false"><meta http-equiv="X-UA-Compatible" content="IE=7"></pre>以上代码告诉IE浏览器，无论是否用DTD声明文档标准，IE8/9都会以IE7引擎来渲染页面。 通过看到大网站对于meta的设置，我们可以看到常用的有：X-UA-Compatible、keywords、description这三种，我们要好好学会用。 【小编推荐】 <a href="http://www.php.cn/div-tutorial-409089.html" target="_blank">HTML中head标签是什么意思？一篇文章教你正确地使用head标签</a> <a href="http://www.php.cn/php-weizijiaocheng-409071.html" target="_blank">黑客应该学PHP还是python？理性分析PHP和python的十处差异</a>

HTML怎样设置文档的有效期限_HTML设置文档有效期限元标签【标签】

如何彻底解决 Vue 应用在客户端浏览器中的缓存问题

HTML怎样定义文档的更新频率_HTML定义文档更新频率元信息【元信息】

HTML如何定义文档的地理位置_HTML定义文档地理位置元信息【信息】

HTML中的元信息有什么作用_元标签对SEO优化的意义【说明】

HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载

相关专题

C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开，系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例，帮助开发者掌握构建高可用微服务系统的关键技术，提高系统的可扩展性与维护效率。

2026.03.11

Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开，系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示，帮助开发者构建稳定高效的 Go 并发任务处理系统，提高系统在高负载环境下的处理能力与稳定性。

2026.03.10

Kotlin Android模块化架构与组件化开发实践

本专题围绕 Kotlin 在 Android 应用开发中的架构实践展开，重点讲解模块化设计与组件化开发的实现思路。内容包括项目模块拆分策略、公共组件封装、依赖管理优化、路由通信机制以及大型项目的工程化管理方法。通过真实项目案例分析，帮助开发者构建结构清晰、易扩展且维护成本低的 Android 应用架构体系，提升团队协作效率与项目迭代速度。

2026.03.09

JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开，系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理，以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例，帮助开发者理解浏览器底层工作原理，并掌握提升网页加载速度与交互体验的实用技巧。

2026.03.06

Rust内存安全机制与所有权模型深度实践

本专题围绕 Rust 语言核心特性展开，深入讲解所有权机制、借用规则、生命周期管理以及智能指针等关键概念。通过系统级开发案例，分析内存安全保障原理与零成本抽象优势，并结合并发场景讲解 Send 与 Sync 特性实现机制。帮助开发者真正理解 Rust 的设计哲学，掌握在高性能与安全性并重场景中的工程实践能力。

218

2026.03.05

PHP高性能API设计与Laravel服务架构实践

本专题围绕 PHP 在现代 Web 后端开发中的高性能实践展开，重点讲解基于 Laravel 框架构建可扩展 API 服务的核心方法。内容涵盖路由与中间件机制、服务容器与依赖注入、接口版本管理、缓存策略设计以及队列异步处理方案。同时结合高并发场景，深入分析性能瓶颈定位与优化思路，帮助开发者构建稳定、高效、易维护的 PHP 后端服务体系。

420

2026.03.04

AI安装教程大全

2026最全AI工具安装教程专题：包含各版本AI绘图、AI视频、智能办公软件的本地化部署手册。全篇零基础友好，附带最新模型下载地址、一键安装脚本及常见报错修复方案。每日更新，收藏这一篇就够了，让AI安装不再报错！

168

2026.03.04

Swift iOS架构设计与MVVM模式实战

本专题聚焦 Swift 在 iOS 应用架构设计中的实践，系统讲解 MVVM 模式的核心思想、数据绑定机制、模块拆分策略以及组件化开发方法。内容涵盖网络层封装、状态管理、依赖注入与性能优化技巧。通过完整项目案例，帮助开发者构建结构清晰、可维护性强的 iOS 应用架构体系。

222

2026.03.03

C++高性能网络编程与Reactor模型实践

本专题围绕 C++ 在高性能网络服务开发中的应用展开，深入讲解 Socket 编程、多路复用机制、Reactor 模型设计原理以及线程池协作策略。内容涵盖 epoll 实现机制、内存管理优化、连接管理策略与高并发场景下的性能调优方法。通过构建高并发网络服务器实战案例，帮助开发者掌握 C++ 在底层系统与网络通信领域的核心技术。

2026.03.03

热门下载

网站特效

网站源码

网站素材

前端模板