HTML元信息类标签有哪些？

2020-09-30 本文已影响0人读行笔记

所谓元信息标签，就是用来描述自身信息的一类标签，通常出现在head标签中，一般不会显示在页面上。它们多是为浏览器和搜索引擎服务的，用于提升性能或者检索信息。

head

head标签本身并不携带任何信息，它主要是作为盛放各种元信息标签、语义类标签的容器使用。规定head标签是html标签的第一个元素，并且head里面必须包含一个title。

title

从字面上讲，title表示标题，但是title标签的含义却与此有点出入，它表示一个页面的精确概要信息，会作为页面标题显示在浏览器窗口上。另外，合理的title标签对SEO也有好处。

例如得到Web版：

<title>得到APP - 知识就是力量，知识就在得到</title>

meta

从meta的含义就知道，它表示元信息。meta标签是一组键值对，一般用name和content分别表示键和值，在head中可以出现多个meta标签。基本用法是这样的：

<meta name=application-name content="StackOverflow">

上面的标签表示页面所在的Web应用名为StackOverflow。

charset

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

<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
    ...
    </body>
</html>

为了数据格式保持正确，建议将charset作为head的第一个标签。

http-equiv

从字面上看，http-equiv即http equivalent，表示执行一条和HTTP头相关的指令，自然就不再需要name属性了。例如：

<!-- 添加Content-Type -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!-- 设置网页到期时间 -->
<meta http-equiv="expires" content="Wed, 20 Jun 2007 22:33:00 GMT"＞  

<!-- 每2秒刷新一次指定网页 -->
<meta http-equiv="Refresh" content="2；URL=http://www.net.cn/"＞

<!-- 设置cookie -->
<meta http-equiv="Set-Cookie" content="cookievalue=xxx;expires=Wednesday, 20-Jun-2007 22:33:00 GMT； path=/"＞

<!-- 设定进入、离开页面时的特殊效果 -->
<meta http-equiv="Page-Enter"    contect="revealTrans(duration=1.0,transtion=    12)">    
<meta http-equiv="Page-Exit"    contect="revealTrans(duration=1.0,transtion=12)">    

<!-- 清除缓存 -->
<meta http-equiv="cache-control" content="no-cache"> 

<!-- 设置关键字，有助于SEO -->
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  

<!-- 设置页面描述 -->
<meta http-equiv="description" content="This is my page"> 

<!-- 设置IE兼容性，告诉IE该用哪个版本渲染，应该尽可能放在前面 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

x-ua-compatible兼容性

viewport

viewport元信息标签虽然不是HTML标准定义的内容，但是却成为移动端Web开发的事实标准。它主要表示视口的属性，比如大小、缩放范围等。

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

所有属性包括：

width：页面宽度，可以取值具体的数字，也可以是device-width，表示跟设备宽度相等。
height：页面高度，可以取值具体的数字，也可以是device-height，表示跟设备高度相等。
initial-scale：初始缩放比例。
minimum-scale：最小缩放比例。
maximum-scale：最大缩放比例。
user-scalable：是否允许用户缩放。
minimal-ui：Safari上隐藏地址栏和导航栏。

总结

元信息类标签，是用于描述文档自身信息的标签，必须放在head标签中，而head标签又是html标签中的第一个标签。元信息类标签主要由title和meta标签构成。meta标签由name作为key，content作为value的键值对组成，主要包含：

charset，文档字符编码方式，一般为"UTF-8"；
http-equiv，表示执行一条和HTTP头相关的指令，包括content-type、refresh、expires等；
viewport，虽然不是HTML标准定义的内容，但实际上已成为移动Web开发的标准，主要规定了视口属性。