• HTML <meta>标签

    <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 图片格式的文档。

更多...

加载中...