`

<meta>标签详解

    博客分类:
  • HTML
阅读更多

         如果我们在浏览器中按下F12或者Ctrl+shift+J,便可以打开开发者工具,在element中即可看到<head>元素中有不少<meta>元素。对于网页而言,<meta>元素是必不可少的。我们在创建一个html5文档时,就会发现类似于<meta charset="UTF-8">这样的标签,来规定解析文档的字符类型。那么,它还有哪些作用呢?下面,我将一探究竟!主要分为以下几个部分:

①<meta>标签的基本介绍

②<meta>标签中的属性列举

③<meta>标签中的name属性应用

④<meta>标签中的http-equiv属性应用

⑤<meta>标签中在移动端的使用

 

第一部分:<meta>标签的基本介绍

  <meta>标签是HTML网页源代码中的一个重要的html标签。META便签用来描述一个HTML网页文档的属性,例如作者、日期和时间、关键词、页面刷新。除此之外,<meta>标签用于搜索引擎优化(seo)。它位于HTML文档中<head>元素内,虽然它提供的信息用户不可见,但它却是文档最基本的元信息。

 

第二部分:<meta>标签中的属性列举

  <meta>标签中属性我们可以分为必选的属性和可选的属性。

      1.必选属性:content属性。该属性是为了定义与http-equiv或者name属性相关的元信息,其中的内容是为了便于搜索机器人查找信息和分类使用的。

      2.可选属性:

 

  • name属性。该属性主要用于描述网页。name属性的值可以有:author、description、keywords、generator等等
  • http-equiv属性。该属性相当于http的头文件作用,可以向浏览器返回一些有用的信息,以帮助正确和精确的显示内容。http-equiv属性的值可以有content-type、expires、refresh等等。

第三部分:<meta>标签中的name属性应用

 

  A keywords(关键字:告诉浏览器你的网页的关键字是什么)

  B description(描述:告诉浏览器你的网页的主要内容是什么)

    这两个属性值我放在一起说,是因为它们的作用非常相似。因为设置这两个值可以帮助你的主页被各大搜索引擎登陆,提高网站的访问量。于是这两个属性值的设置是格外重要的。因为按照搜索引擎的工作原理,搜索引擎会首先排除机器人自动检索页面中的keywords和description,并将其加入自己的数据库,然后根据关键词的密度将网站排序

我们可以像下面这样使用:

1
2
<meta name="keywords" content="关于meta标签,网页,918之初">
<meta name="description" content="HTML中<meta>标签如何正确使用">

   注意:keywords的content内容要限制在36个字。

      description的content内容要限制在76个字。

  值得注意的是,name一定要和content属性配合使用。

  C robot(机器人向导:用于高速机器人哪些页面需要索引,哪些页面不需要索引)

  该属性的值有all、none、index、noindex、follow和nofollow。默认为all。

  设定为all:文件将被检索,且页面上的链接可以被查询;

  设定为none:文件将不被检索,且页面上的链接不可以被查询;

  设定为index:文件将被检索;

  设定为follow:页面上的链接可以被查询;

  设定为noindex:文件将不被检索,但页面上的链接可以被查询;

  设定为nofollow:文件将不被检索,页面上的链接可以被查询。

 

  我们可以像下面这样使用:

1
<meta name="robot" content="none">

  即搜索机器人在自动检索页面时,将不会检索到这个页面。

  D author(作者:用于告诉搜索机器人网页的作者)

1
<meta name="author" content="somebody">

  

第四部分:<meta>标签中的http-equiv属性应用

A.content-type(文档内容类型:用于设定文档的类型和字符集)

  这是meta便签中最为常见的一中设置,在制作网页时,我们在纯HTML代码可看到它是定义你的网页的语言,当浏览器访问到你的网页时,浏览器便会根据此来识别并进行相应的设定,否则,浏览器就会使用默认的设定方法。

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

B.expires(期限:可以用于设定网页的到期期限)

  一旦网页过期,那么就必须在服务器上重新刷新而不能通过缓存获取网页。值得注意的是:其中设置的时间必须是GMT格式。

1
<meta http-equiv="expires" content="Fri,12 Jan 2001 15:15:15 GMT">

  如果你在浏览器中设置浏览器网页先从本地缓存中的页面获取,那么当浏览时,就会只从本地缓存获取,直到meta中设置的时间到期,浏览器才会获取新页面。

C.pragma(cashe模式:即是否从缓存中访问网页内容)

1
<meta http-equiv="pragma" content="no-cache">

 这行代码表示不从缓存获取页面,于是访问者将无法脱机工作。

D.refresh(刷新:等待一定时间自动刷新或跳转到其他url)

1
<meta http-equiv="refresh" content="1; url=https://www.baidu.com"/>

 

 

 第五部分:<meta>标签中在移动端的使用

   这几年,随着移动端的兴起,我们对移动端越来越需要进行专门的网页设计,下面,我来介绍一些关于移动端布局中<meta>标签的使用。

 

 1.name属性的viewport的值(移动端屏幕的缩放)

  viewport也就是可视区域,就是出去所有工具栏、状态栏、滚动条等等我们看网页的区域。一般我们可以操控的属性有width、height、initial-scale、minimum-scale、maxmum-scale、user-scalable。

  举例如下:

  

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

  即:强制让文档与设备的宽度保持1:1;文档的其实比例和最大比例都是1.0。利用user-scalable=no定义用户不可以通过手动缩放,使得页面固定。

  

  2.name属性的format-detection值。

  我们可以通过这个属性禁止自动识别电话和邮箱。举例如下:

1
<meta name="format-detection" content="telephone=no,email=no"/>

  这样,是设备浏览网页时对数字不启用电话功能(注意不同设备的解释可能不同),忽略将页面中的数字识别为电话号码。对邮箱同样如此。

 

 

  3.name属性的apple-mobile-web-app-capable值(网站开启对web app程序的支持)

  

1
<meta name="app-mobile-web-app-capable" content="yes"/>

  说明:1.网站开启对web app的支持

     2.该meta可以看出内容为”苹果设备web应用程序xx“,就是说该meta是专门定义web应用的。

 

  4.name属性的apple-mobile-web-app-status-bar-style值(改变顶部状态条的颜色)

1
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>

   说明:1.在web app应用下状态条的颜色为黑色;

     2.默认值为default(白色),可以定义为black(黑色)和black-translucent(灰色半透明);

  

  5.name属性设置作者姓名以及联系方式

1
<meta name="author" contect="zzw, zhuzhenwei789@gmail.com" />

 

 

.

分享到:
评论

相关推荐

    JSP标签 <meta>的作用

    ### JSP标签 `&lt;meta&gt;` 的作用详解 在探讨 `&lt;meta&gt;` 标签的功能与应用之前,我们先简单回顾一下 `&lt;meta&gt;` 标签的基本概念。`&lt;meta&gt;` 标签是 HTML 中的一个元数据(metadata)标签,它用于提供关于 HTML 文档的信息,...

    meta标签详解

    ### Meta标签详解 在网页开发过程中,正确使用`&lt;meta&gt;`标签对于确保页面的兼容性、搜索引擎优化(SEO)以及用户访问体验具有重要意义。本文将详细介绍`&lt;meta&gt;`标签的各种属性及其用途,并通过实例帮助读者更好地...

    HTML5.Canvas.教程

    然后,通过`&lt;script&gt;`标签内的JavaScript代码绘制了一条从`(100, 150)`到`(450, 50)`的直线。 #### 三、其他绘图功能简介 除了画直线之外,HTML5 Canvas 还提供了许多其他的绘图功能,例如: - **画路径**:可以...

    HTML5 对各个标签的定义与规定:section

    ### HTML5中的&lt;section&gt;标签详解 #### 一、引言 在HTML5中,为了更好地组织和呈现网页内容,引入了一系列新的语义化标签,其中`&lt;section&gt;`标签是一个非常重要的组成部分。它不仅有助于提高网页的可读性和可维护性...

    WebApp里的Meta标签大全

    ### WebApp中的Meta标签详解 #### 一、引言 在Web开发中,尤其是在构建适应移动设备的Web应用(WebApp)时,正确使用HTML中的`&lt;meta&gt;`标签至关重要。它不仅可以帮助开发者控制页面的布局与展示效果,还能优化SEO、...

    网页设计中meta详解

    在网页设计中,`&lt;meta&gt;` 标签扮演着至关重要的角色。它是 HTML5 文档类型中的一个元素,用于提供关于文档的各种元信息,这些信息包括网页的字符编码、描述、关键词、重定向、刷新等。`&lt;meta&gt;` 标签通常位于 `&lt;head&gt;`...

    HTML中的&lt;meta&gt;标签的使用详解

    本文将深入探讨`&lt;meta&gt;`标签的使用及其重要性。 首先,`&lt;meta&gt;`标签通常位于`&lt;head&gt;`部分,它的作用是提供页面的元信息,如字符编码、作者信息、页面描述、关键词等。下面是一段`&lt;meta&gt;`标签的示例: ```html ...

    HTML基础教程

    - 内容:`&lt;title&gt;`、`&lt;meta&gt;`、`&lt;link&gt;`等标签。 3. **`&lt;title&gt;`标签**:用于定义网页的标题,该标题会在浏览器标签页中显示。 - 开始标签:`&lt;title&gt;` - 结束标签:`&lt;/title&gt;` - 示例:`&lt;title&gt;我的首页&lt;/title...

    html中标签meta的详细使用方法和作用

    ### HTML中的`&lt;meta&gt;`标签详解与应用 #### 一、`&lt;meta&gt;`标签概述 在HTML中,`&lt;meta&gt;`标签主要用于定义元数据(metadata),即关于数据的数据。这些元数据不会显示在页面上,但会被浏览器用来理解网页的一些基本...

    HTML标签详解.pdf

    HTML标签详解 HTML标签是HTML语言的基础组成部分,它们是构建网页的基本结构单元。本文档将对HTML标签进行详细的解释,涵盖了HTML标签的基本结构、文件标题、文件更新、查询用表单、预设的基准路径、标题文字、字体...

    Dw Html 标签详解和查询软件

    10. **响应式设计**:`&lt;meta&gt;`标签中的`viewport`属性用于移动设备的视口设置,`&lt;media&gt;`查询允许根据设备特性应用不同的样式。 软件中可能还包含对CSS(Cascading Style Sheets)的支持,它用于定义HTML元素的样式...

    HTML标签详解大全

    - `&lt;meta&gt;` 元素用于定义文档的元数据。 - **10秒后自动更新一次**:使页面每隔10秒刷新一次。 ```html &lt;meta http-equiv="refresh" content="10"&gt; ``` - **10秒后自动链接到另一个文件**:10秒后跳转到指定...

    [Java.Web培训视频]_001.HTML常见标签深入详解

    `&lt;meta&gt;`标签提供元数据,例如字符编码(`charset="UTF-8"`)或描述(`name="description"`)。 3. 内容标签:`&lt;p&gt;`用于创建段落,`&lt;h1&gt;`到`&lt;h6&gt;`表示六级标题,`&lt;br&gt;`插入换行,`&lt;strong&gt;`强调文本,`&lt;em&gt;`表示...

    课程HTML标签详解大全.pdf

    `&lt;meta&gt;`标签用于提供元数据,如页面更新信息。例如,通过`http-equiv="refresh"`属性可以设置页面自动刷新或跳转,如每10秒更新一次或链接到其他页面。 表单元素`&lt;isindex&gt;`允许创建简单的查询输入,用户可以在...

    html标签详解 初学html

    ### HTML标签详解 #### 1. 基础标签与属性概述 HTML(HyperText Markup Language)是一种标记语言,用于创建网页结构。HTML文档由多个元素组成,这些元素通过标签来表示。每个标签都有特定的功能,并可以携带一个...

    html标签大全标签用法详解

    对于响应式设计,可以利用`&lt;meta&gt;`标签的`viewport`属性和媒体查询(`@media`)来适应不同设备。 表单元素:`&lt;form&gt;`用于创建表单,`&lt;input&gt;`、`&lt;textarea&gt;`、`&lt;select&gt;`和`&lt;button&gt;`则用于输入数据、文本区域、...

    HTML5 对各个标签的定义与规定:meta

    ### HTML5中的`&lt;meta&gt;`标签详解 在HTML5中,`&lt;meta&gt;`标签被用于定义文档中的元数据,即关于文档的数据。这些元数据不显示在页面上,但会被浏览器解析并用作其他用途,比如搜索引擎优化(SEO)、设置字符集、控制...

    html 标签详解HTML指令详解

    `&lt;meta&gt;` - **作用**:提供有关HTML文档的元信息,如字符集、视口设置、刷新等。 - **示例**: ```html &lt;meta http-equiv="refresh" content="10; URL=http://example.com"&gt; ``` - **解析**:上面的代码将使...

    HTML标签指令详解

    `<meta>` 标签用于设置文件的元数据,可以实现文件的自动更新。例如: * `<meta http-equiv="refresh" content="10"&gt;`:10 秒后自动更新一次 * `<meta http-equiv="refresh" content="10;URL=欲连结文件之 URL...

Global site tag (gtag.js) - Google Analytics