HTML元信息类标签：你知道head里一共能写哪几种标签吗？
winter
该思维导图由 AI 生成，仅供参考
你好，我是 winter。
我们在前面的 HTML 部分的课程中，已经学习了语义标签。这些标签涵盖了我们日常开发用到的多数标签，也是我们编写代码时最常用的一批标签。
但是我们今天要讲的标签，重要性丝毫不弱于语义类标签，这就是页面元信息类标签。
我们可以先来了解一下什么是元信息类标签。所谓元信息，是指描述自身的信息，元信息类标签，就是 HTML 用于描述文档自身的一类标签，它们通常出现在 head 标签中，一般都不会在页面被显示出来（与此相对，其它标签，如语义类标签，描述的是业务）。
元信息多数情况下是给浏览器、搜索引擎等机器阅读的，有时候这些信息会在页面之外显示给用户，有时候则不会。
元信息类标签数量不多，我在这里就逐一为你介绍一下。
head 标签
首先我们先来了解一下 head 标签，head 标签本身并不携带任何信息，它主要是作为盛放其它语义类标签的容器使用。
head 标签规定了自身必须是 html 标签中的第一个标签，它的内容必须包含一个 title，并且最多只能包含一个 base。如果文档作为 iframe，或者有其他方式指定了文档标题时，可以允许不包含 title 标签。
title 标签
title 标签表示文档的标题，从字面上就非常容易理解。这里我就讲讲需要注意的地方。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
HTML元信息类标签是页面中描述文档自身的一类标签，通常出现在head标签中，不会在页面被显示出来。这些标签包括head、title、base和meta。其中，head标签是元信息的容器，title标签表示文档的标题，base标签提供页面上所有的URL相对地址的基础，而meta标签是一种通用的元信息表示标签，可以包含charset属性、http-equiv属性和自定义的name属性。在具体用法上，charset属性的meta标签用于描述HTML文档的编码形式，http-equiv属性的meta标签表示执行一个命令，而name为viewport的meta标签是移动端开发的事实标准。此外，HTML标准中还定义了一批预定义的meta标签，如application-name、author、description等。掌握这些元信息类标签对于编写代码和页面的描述至关重要，可以使页面与浏览器、搜索引擎等结合更好。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《重学前端》，新⼈⾸单¥59
《重学前端》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(21)
- 最新
- 精选
- 火云邪神0007老师，我家的猫不让我给他剪指甲，怎么办？
作者回复: 有三个思路，可供参考： 1. 带去宠物医院剪 2. 拿毛巾包上或者装进袋子里强行剪 3. 忍着，被主子抓几道是一种赏赐
2019-02-236202 
AICC<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- 默认使用最新浏览器 --> <meta http-equiv="Cache-Control" content="no-siteapp"> <!-- 不被网页(加速)转码 --> <meta name="robots" content="index,follow"> <!-- 搜索引擎抓取 --> <meta name="renderer" content="webkit"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"> <meta name="apple-mobile-web-app-capable" content="yes"> <!-- 删除苹果默认的工具栏和菜单栏 --> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <!-- 设置苹果工具栏颜色 -->作者回复: 赞
2019-02-21157
CC阅读完今天的文章，才感觉自己其实不懂 meta，之前对 meta 的细节缺少分类和整理。感谢老师。 回到老师的问题，我平时还见过以下三种（组）标签： 1. Open Graph 的标签组，包括 title, type, URL, site_name, description 和 image，是为 Facebook 分享提供信息； 2. Twitter 的标签组，包括 card, title, description 和 image，是为 Twitter 分享提供信息； 3. msapplication 的标签组，包括 TileColor 和 TileImage，是为 Windows 8 以及以上系统识别 favicons 用的。作者回复: 赞 这部分我也不了解 推荐给大家。
2019-02-21238
MarlboroKaymeta基本用法： <meta name=application-name content="lsForums"> name = application-name 是不是少了 “” name = "applicaiton-name" ?作者回复: 属性可以不写引号 不过确实写了更好
2019-02-218
靠人品去赢突然想问一下，老是本尊是不是一个猫奴啊，感觉很喜欢那猫举例子做封面什么的。编辑回复: 是的呀 养了三只呢
2019-02-215- 有铭我是说为什么viewport在html标准里找不到，一直很疑惑是从哪里蹦出来的，搞了半天原来不是html标准是行业约定
作者回复: 是的 但是这个东西太重要了 比标准上的很多细节都重要得多。
2019-02-234 
阿成常见的还有 format-detection 禁止 iPhone 的自动识别作者回复: 赞。
2019-02-212
丘丘上面评论中的 <meta name="apple-mobile-web-app-capable" content="yes"> <!-- 删除苹果默认的工具栏和菜单栏 --> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <!-- 设置苹果工具栏颜色 --> 这两条，我试着似乎没有效果。 keywords这个属性，理论上对seo有作用，但是我随便进行了搜索，打开排名第一页的几个网站，都没有这么属性，是不是现在这种简单的seo打法已经被放弃了呢？2019-03-24211
LiH<meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="date=no"> <meta name="format-detection" content="address=no"> <meta name="format-detection" content="email=no"> 关闭iOS上的内容识别2019-03-01110
码屁@丘丘 你难道忘了 竞价排名[滑稽]2019-05-155
收起评论