A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 一车水萝卜 于 2019-7-24 17:21 编辑


                                                         

元信息类标签——就是HTML用于描述文档自身的一类标签,它们通常出现在head标签中,一般都不会在页面被显示出来。 多数的情况是给浏览器、搜索引擎等机器阅读的,有时候这些信息回在页面之外显示给用户,有时候则不会。


head标签

head标签本身不携带任何信息,它主要作为盛放其它语义类标签的容器使用。

head标签规定了自身必须是html标签中的第一个标签,内容中必须包含一个title,最多只能包含一个base。如果文档作为iframe,或者有其他方式指定了文档标题时,可以允许不包含title标签


title标签

title标签表示文档的标题,从字面上就非常容易理解。然而语义类标签中有一组表示标题的标签:h1~h6。

英文单词heading和title的词义区分十分微妙,在中文中找不到对应的词汇来区分,但在实际应用中,还是有去别的。

title作为元信息,可能会被用在浏览器收藏夹、微信推送卡片、微博等各种场景,这个时候往往时上下文缺失的,所以title应该时完整地概括整个网页内容地。

而h1则仅用于页面展示,它可以默认具有上下文,并且有链接辅助,所以可以简写,即便无法概括全文,也不会有太大地影响。


base标签

base标签是给页面上所有的URL相对地址提供一个基础。base标签最多只有一个,它改变全局地链接地址,是一个非常危险地标签,容易造成跟JavaScript地配合问题,在实际开发中,可以用JavaScript来代替base标签。


meta标签

meta标签是一组键值对,是一种通用地元信息表示标签。

在head中可以出现任意多个meta标签。一般地meta标签由name和content两个属性来定义。name表示元信息的名,content 表示元信息地值。其中name是一种比较自由地约定,HTTP标准规定了一些name作为大家使用地共识,也鼓励大家发明自己的name来使用。




除了基本用法,meta 标签还有一些变体,主要用于简化书写方式或者声明自动化行为。


1、具有 charset 属性的 meta

从 HTML5 开始,为了简化写法,meta 标签新增了 charset 属性。添加了 charset 属性的 meta 标签无需再有 name 和 content。

<meta charset="UTF-8" >


<meta charset="UTF-8" >

charset 型 meta 标签非常关键,它描述了 HTML 文档自身的编码形式。因此,meta标签放在 head 的第一个。


<html><head><meta charset="UTF-8">……


这样,浏览器读到这个标签之前,处理的所有字符都是 ASCII 字符,众所周知,ASCII 字符是 UTF-8 和绝大多数字符编码的子集,所以,在读到 meta 之前,浏览器把文档理解多数编码格式都不会出错,这样可以最大限度地保证不出现乱码。


一般情况下,HTTP 服务端会通过 http 头来指定正确的编码方式,但是有些特殊的情况如使用 file 协议打开一个 HTML 文件,则没有 http 头,这种时候,charset meta 就非常重要了。


2、具有 http-equiv 属性的 meta

具有 http-equiv 属性的 meta 标签,表示执行一个命令,这样的 meta 标签可以不需要 name 属性了。

例如,下面一段代码,相当于添加了 content-type 这个 http 头,并且指定了 http 编码方式。


<meta http-equiv="content-type" content="text/html; charset=UTF-8">

除了 content-type,还有以下几种命令:

  content-language 指定内容的语言;

  default-style 指定默认样式表;

  refresh 刷新;

  set-cookie 模拟 http 头 set-cookie,设置 cookie;

  x-ua-compatible 模拟 http 头 x-ua-compatible,声明 ua 兼容性;

  content-security-policy 模拟 http 头 content-security-policy,声明内容安全策略。


3、name 为 viewport 的 meta

实际上,meta 标签可以被自由定义,只要写入和读取的双方约定好 name 和 content 的格式就可以了。

viewport 的 meta 类型,它没有在 HTML 标准中定义,却是移动端开发的事实标准,它的 content 是一个复杂结构,是用逗号分隔的键值对,键值对的格式是 key=value。

例如:


<meta name="viewport" content="width=500, initial-scale=1">

这里只指定了两个属性,宽度和缩放,实际上 viewport 能控制的更多,它能表示的全部属性如下:


  width:页面宽度,可以取值具体的数字,也可以是 device-width,表示跟设备宽度相等。

  height:页面高度,可以取值具体的数字,也可以是 device-height,表示跟设备高度相等。

  initial-scale:初始缩放比例。

  minimum-scale:最小缩放比例。

  maximum-scale:最大缩放比例。

  user-scalable:是否允许用户缩放。


对于已经做好了移动端适配的网页,应该把用户缩放功能禁止掉,宽度设为设备宽度,一个标准的 meta 如下:


<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

4、其它预定义的 meta

在 HTML 标准中,还定义了一批 meta 标签的 name,可以视为一种有约定的 meta,可以简单了解一下。


  application-name:如果页面是 Web application,用这个标签表示应用名称。

  author: 页面作者。

  description:页面描述,这个属性可能被用于搜索引擎或者其它场合。

  generator: 生成页面所使用的工具,主要用于可视化编辑器,如果是手写 HTML 的网页,不需要加这个 meta。

  keywords: 页面关键字,对于 SEO 场景非常关键。

  referrer: 跳转策略,是一种安全考量。

  theme-color: 页面风格颜色,实际并不会影响页面,但是浏览器可能据此调整页面之外的 UI(如窗口边框或者 tab 的颜色)。




结语

元信息仅仅是对页面的描述,掌握它们可以使我们编写的页面跟各种浏览器、搜索引擎等结合地更好。


0 个回复

您需要登录后才可以回帖 登录 | 加入黑马