<meta> 标签内的信息不会显示在页面中,定义<meta> 标签的主要目的是因为它对机器是可读的。

<meta> 标签有很多功能,它可以定义文档中的关键字,也可以对文档进行描述,还可以配合自身的属性设置网页的过期时间等等

当我们定义了页面的关键字或者描述信息后,搜索引擎蜘蛛(也就是常说的网络爬虫)就可以利用它们来搜索这个页面的信息。

下面来看一下 <meta> 标签的常用属性:

1. name属性

name 属性可以用来定义网页的关键字、描述、作者以及版权信息等等。我们来看一下它的常用属性值:

name 常见属性值:

  • keywords---- 用来定义网页的关键字。关键字可以是多个,之间需要用英文逗号,隔开。
  • description---- 用来定义网页的描述。
  • author---- 用来定义网页的作者。
  • copyright---- 用来定义网页的版权信息。

当 name 属性规定好这些信息后,后面还需紧跟 content 属性设置具体的内容,这样才可以生效。具体使用语法如下:

<meta name="keywords"   content="<head>标签描述">
<meta name="description"   content="这篇文章主要对<head>标签进行详细讲解">
<meta name="author"   content="author">
<meta name="copyright"   content="本站所有教程均为原创,版权所有,禁止转载。否则将追究法律责任。">

2. charset属性

charset 是 HTML 5 中的新属性,用来定义页面的编码格式。它的常用属性值见下表:

charset 常用属性值:

  • ISO-8859-1---- 表示网页的默认编码格式。
  • UTF-8---- 表示万国码,是目前最常用的编码格式。
  • gb2312 ----表示国际汉字码,不包含繁体。
  • gbk---- 表示国家标准扩展版。增加了繁体,包含所有亚洲字符集。

具体代码如下所示:

<head><meta charset="UTF-8"><meta charset="gb2312"><meta charset="ISO-8859-1"><meta charset="gbk">
</head>

以上为语法演示,在使用时根据需求,只使用其中一个即可。

3. http-equiv属性

所有主流浏览器都支持 http-equiv 属性。它可以设置网页的过期时间,自动刷新等,有以下几个常用属性值:

http-equiv 常用属性值:

  • expires ----设置网页的过期时间。
  • refresh ----设置网页自动刷新的时间间隔,单位是秒。
  • content-type ----定义文件的类型,用来告诉浏览器该以什么格式和编码来解析此文件。

我们通过一段简单的代码来看一下如何使用:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="content-type" content="text/html"><meta http-equiv="expires" content="Dec 20 2090"><meta http-equiv="refresh" content="1000"><title>Document</title>
</head>
<body>
</body>
</html>

上面使用了 <meta> 的几个常用属性,我们来看一下:

  • <meta charset="UTF-8"> 设置了网页的编码格式为 utf-8;
  • <meta http-equiv="content-type" content="text/html"> 用来告诉浏览器本网页编写的是HTML 代码,需要用 HTML 的格式来进行解析。在下面会附上 content-type 常用文件类型值讲解;
  • <meta http-equiv="expires" content="Dec 20 2090"> 定义网页于 2090 年 12 月20 日过期;
  • <meta http-equiv="refresh" content="1000"> 设置了页面每隔 1000 秒就会进行一次刷新。

我们可以看出,http-equiv 属性和 name 属性一般与 content 属性配合使用,有点类似固定搭配。以上只是 <meta> 标签常用的属性,实际上它的属性远远不止这些,但是到目前为止,我们只需会用上面讲过的这几个属性即可。

4. content-type常用属性值

上面我们提到了 content-type 用来定义文件的类型,在此处为读者附上 content-type 常用文件类型值(只做了解):

content-type 常用文件类型值:

  • text/html---- 表示该文档是 HTML 格式的文档。
  • text/plain---- 表示该文档是纯文本格式的文档。
  • text/xml---- 表示该文档是 XML 格式的文档。
  • image/gif---- 表示该文档是 gif 图片格式的文档。
  • image/jpeg---- 表示该文档是 jpg 图片格式的文档。
  • image/png ----表示该文档是 png 图片格式的文档。

13、HTML <meta>标签相关推荐

  1. HTML的meta标签详解

    meta是html语言head区的一个辅助性标签.几乎所有的网页里,我们可以看到类似下面这段的html代码: <head>     <meta http-equiv="co ...

  2. 前端工程师所不知道的meta标签用法

    http-equiv     META标签分两大部分:HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME).     ★HTTP-EQUIV HTTP-EQUIV类似于HTTP的头部协议 ...

  3. meta标签的使用方法(PC端)

    <!DOCTYPE html> <html lang="en"> <head><!--设定页面使用的字符集--><meta h ...

  4. SEO | 重新认识一下Meta标签

    很多人忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧! META标签是HTML语言HEAD区的一个辅 ...

  5. W3C中meta标签详解

    2019独角兽企业重金招聘Python工程师标准>>> meta是html语言head区的一个辅助性标签.几乎所有的网页里,我们可以看到类似下面这段的html代码: <meta ...

  6. Meta标签详解,太重要了

    您的个人网站即使做得再精彩,在"浩瀚如海"的网络空间中,也如一叶扁舟不易为人发现,如何推广 个人网站,人们首先想到的方法无外乎以下几种: ● 在搜索引擎中登录自己的个人网站 ● 在 ...

  7. HTML中可以有多个meta吗,HTML5中meta标签有三个主要属性是什么

    HTML5中meta标签有三个主要属性是什么 发布时间:2020-10-22 13:46:11 来源:亿速云 阅读:88 作者:小新 小编给大家分享一下HTML5中meta标签有三个主要属性是什么,相 ...

  8. html meta标签

    关于meta 标签 ,参考了网上的一些资料,总结了 一些基本的. 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 < ...

  9. SEO技巧:Meta标签详解

    网页设计:Meta标签详解 您的个人网站即使做得再精彩,在"浩瀚如海"的网络空间中,也如一叶扁舟不易为人发现,如何推广 个人网站,人们首先想到的方法无外乎以下几种: ●在搜索引擎中 ...

  10. HTML的meta标签

    Meta标签详解,在网上转的,希望对大家有用 引言 您的个人网站即使做得再精彩,在"浩瀚如海"的网络空间中,也如一叶扁舟不易为人发现,如何推广 个人网站,人们首先想到的方法无外乎以 ...

最新文章

  1. 带你深入理解图灵机--天才所在的时代
  2. html5鼠标下拉浮窗固定,【前端技术】vue-floating-menu可拖拽吸附的浮窗菜单
  3. 有关Canvas的一点小事—图像绘制
  4. JavaScript学习(七十三)—高阶函数
  5. Nginx+keepalive反向代理
  6. 【转载】完全手册 Flex 3.0 RIA开发详解(光盘内容)(书下载以及书的源代码下载)...
  7. margin和padding的学习
  8. 【生信进阶练习1000days】day22-复习day1~day14的知识点
  9. php 所有国家时区,php输出全球各个时区列表
  10. 源码下载地址及各类资源站点
  11. 读博太孤独?一个人的苦行!
  12. 光栅(Raster)性能优化
  13. 如何自己建网站,免费自助建站系统平台哪个最好?
  14. spring boot 作业管理系统
  15. macOS下 wacom “安全设置阻止Wacom软件发布事件”错误的解决方法
  16. Newtonsoft.Json 使用
  17. 小程序收集箱:批量调节图像曝光度、锐利度、对比度、亮度的demo
  18. 佛说:人就是苦今生修来生
  19. Linux上烧录CD
  20. PMSM的发展及研究现状

热门文章

  1. Dataset之UT Zappos50K:UT Zappos50K数据集的简介、安装、使用方法之详细攻略
  2. Interview:人工智能岗位面试—人工智能岗位求职之机器学习算法工程师必备知识框架结构图
  3. Py:Python实现好莱坞《黑客》影视中珠帘似吊炸天的华丽动态加密页面
  4. DL之BP:神经网络算法简介之BP算法简介(链式法则/计算图解释)、案例应用之详细攻略
  5. 集成学习-Boosting集成学习算法AdaBoost
  6. 【常用算法总结——最短路径四种方法】
  7. jquery iCheck 插件
  8. 一个小问题引发的论证思考
  9. STM32的CAN总线的接收双FIFO使用方法
  10. JavaScript定时器原理及高级使用