HTML 中常用的 meta 元素


初看这个标题很容易理解错误,这里的meta元素不仅仅指的是<meta>,而是指元信息(meta information),即

头元素包含关于文档的概要信息,也称为元信息,元信息是关于信息的信息。

明白这一点以后,我们就可以总结一下常用的meta元素有哪些了。


<title>

<title>元素定义文档的标题,显示在标题栏或者标签页上。

  • 属性
  • 全局属性
  • 使用环境
  • 必须要有开始标签和结束标签,如果没有结束标签</title>,将会导致浏览器或略掉页面剩余的标签。
  • 一个<head>元素只能包含一个<title>元素

<base>

<base>表示文档中所有相对url地址的基础url

  • 属性
  • href
    该属性值允许绝对URL和相对URL
  • target

为没有显示target引用属性的元素指定一个名字或关键字,当元素的超链接或导致导航的形式被激活时,指定显示结果的默认位置

以下是关键字的含义:
1. _self:表示在当前窗口打开链接,是target属性的默认值

  1. _blank:表示在新的窗口打开链接
  • _parent: 表示在当前窗口的父级窗口打开链接,如果没有父级窗口,就和_self一样
  1. _top:载入结果到顶级浏览上下文(该浏览上下文是当前上下文的最顶级上下文)。如果没有父级,该选项的行为和_self一样。

如果含有多个包含href或者target的元素,则只有第一个有效,所以<base>元素必须写在所有属性值是URL的元素之前。另外hreftarget两个属性必须要使用其中一个或者都用。


<link>

<link>元素用来链接css等外部资源

  • 属性
  • 全局属性
  • charset:定义被链接资源的字符编码
  • crossorigin
  • disabled:用来启用或禁用多个样式表链接
  • href :用来指定被链接资源的URL,这个属性必须存在且要包含有效的url,如果不存在则不定义链接
  • hreflang:指明被链接资源的语言
  • integrity
  • meida:指定链接资源适用的媒体,例如:print(打印)、handheld(手持设备)
  • methods
  • rel:表明链接文档与当前文档的关系。最常见的值:stylesheet
  • rev
  • sizes
  • target
  • type:表示链接的内容类型,例如:text/css

<meta>

MDN HTML元素参考中关于<meta>的概述:

<meta>元素表示那些不能由其它HTML元相关元素 <base><link><style><title>之一表示的任何元数据信息.

<meta>可以提供一些页面的元信息,这些元信息可以分为以下几种:

  • <name>:把整个文档关联一个名称
    可以设定的值有
    • keywords:页面关键字
    • description:页面描述
    • robots:搜索引擎索引方式
    • author:网页作者

更多值可在MDN HTML meta元素概述中找到
特别说明name的一个可选值—viewport。这个属性在响应式设计中有很大用处,具体可以看:Viewport Meta标签

  • <http-equiv>:把 content属性关联到HTTP头部
    可以设定的值有:

  • content-type / expire /refresh / set-cookie

  • <charset>:声明网页字符集

  • <itemprop>:将定义一个用户自定义的元数据

  • 属性

  • charset: 声明html文档使用的字符编码,但是这个声明可以被任何一个元素的

  • content:定义与http-equiv或者name属性相关的元信息,是<meta>标签的必要属性

  • 其它
    还有一些只有在特定浏览器里才能发挥作用的<meta>。例如:

<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<!-- 浏览器内核控制:国内浏览器很多都是双内核(webkit和Trident) -->
<meta name="renderer" content="webkit" />

<meta>是所有html元素里需要深入了解的元素之一,想了解更多,可以阅读

  1. HTML5 spec-the meta element
  2. 博文 <meta>详解

<style>

MDN HTML元素参考中关于<style>的概述:

<style>元素包含了文档的样式化信息或者文档的一部分。指定的样式化星系包含的该元素内,通常是CSS的格式。

  • 属性
  • type:默认值为text/css
  • media : 制定某个媒体使用该样式
  • scoped:如果该属性存在,则样式应用于其父元素;如果不存在,则应用于整个文档。
  • title:这里的title属性和别的地方不太一样,这里代表的意思是可选指定样式表
  • disabled :如果使用了这个属性,则禁用了此样式

以上总结的是常用的meta元素,这些属性有些共同特点,其中重要的两点就是:

  1. 它们都在<head>元素里面
  2. 都不显示在呈现的页面上

在我看来,它们在html文档“低调”但是同时又非常重要,这些标签都比较抽象,需要我们多花点功夫了解熟悉。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,835评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,598评论 1 295
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,569评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,159评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,533评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,710评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,923评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,674评论 0 203
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,421评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,622评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,115评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,428评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,114评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,097评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,875评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,753评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,649评论 2 271

推荐阅读更多精彩内容

  • 1.meta的意义: 在HTML文档中,meta元素可放置在head标签内用于定义整个文档层面的元数据信息。使用m...
    马建阳阅读 842评论 0 2
  • 虽然之前我有整理过一次meta 标签,但是心中对于meta 标签还是一知半解,所以再次对meta 标签进行整理,并...
    微风玉米阅读 1,092评论 0 0
  • 作者:彭志明日期:2017年4月29日 本文主要针对常用的meta元素的http-equiv,content属性值...
    pz明阅读 1,130评论 0 0
  • 标签提供了 HTML 文档的元数据。元数据不会显示在客户端,但是会被浏览器解析。META元素通常用于指定网页的描述...
    shadow123阅读 521评论 0 0
  • < meta > 元素 定义meta标签提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的...
    莱昂纳德刚阅读 322评论 0 0