zoukankan      html  css  js  c++  java
  • HTML 页面meta标签

    1. 概述

    1.1 说明

    <meta>标签提供了HTML文档的元数据【元数据(Metadata)是数据的数据信息】,即页面的元信息,元数据不会显示在客户端,但是会被浏览器解析。meta元素通常用于指定网页的描述,关键词,使用字符,作者等信息。元数据可以被浏览器(如何显示内容或重新加载页面),搜索引擎(关键字),或其他Web服务调用。

    注:所有主流浏览器都支持<meta>标签。

    1.2 用法

    1.<meta>标签位于<head>标签内;在HTML中<meta>标签没有结束标签,在XHTML中<meta>标签必须包含结束标签(标签中不包含任何内容,其内容信息都由标签的属性进行定义)。

    2.元数据以 名称/值 的形式被成对传递,如 name(名称)/content(值)。

    3.如果没有提供 name 属性,那么 名称/值 对中的名称会采用 http-equiv 属性的值。

    1.3 属性

      content:必须属性,用来定义与http-equiv或name属性相关的元信息。content属性提供了名称/值对中的值,该值可以是任何有效的字符串,始终要和name属性或http-equiv属性一起使用。

      name:可选属性,用来把content属性关联到一个名称。name属性提供了名称/值对中的名称,常用的值有:author(作者),description(描述),keywords(关键字)等。

      http-equiv:可选属性,用来把content属性关联到HTTP头部。http-equiv属性为名称/值对中的名称,提供了content属性的信息/值的HTTP头,可用于模拟一个HTTP响应头。常用的值有:content-type(规定文档的字符编码),default-style(规定要使用的预定义的样式表),refresh(文档自动刷新的时间间隔)。

      charset:HTML5新属性,规定HTML文档的字符编码,可以通过任意元素上的lang属性来重写。

     2. 实例

     2.1 name属性

      2.1.1 文档关键词,用于搜索引擎

    <meta name="keywords" content="HTML, CSS, VUE, JavaScript">

      2.1.2 web页面描述,不超过150个字符

    <meta name="description" content="This is a test page">

      2.1.3 web页面作者

    <meta name="author" content="Lisi">

      2.1.4 浏览器使用

        1.强制Chromium内核,作用于360浏览器、QQ浏览器等国产双核浏览器  <meta name=renderer content=webkit> ;

        2.强制Chromium内核,作用于其他双核浏览器 <meta name=force-rendering content=webkit> ;

      2.1.5 移动设备设置(viewport)

      注意:viewport可视区域,即为除去所有工具栏/状态栏/滚动条等网页的区域,一般可操控的属性有width/height/initial-scale/maximum-scale/minimum-scale/user-scalable。

      content属性值:

        1.width:可视区域的宽度,值可为数字或关键词device-width.

        2.height:可是区域的高度,值可为数字或关键词device-height.

        3.intial-scale:页面首次被显示是可是区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放

        4.maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别,maximum-scale用户可将页面放大的程序,1.0将禁止用户放大到实际尺寸之上

        5.user-scalable:是否可对页面进行缩放,no 禁止缩放

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

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

    2.2 http-equiv属性

      注意:http-equiv属性的值必须是浏览器所接受的值,否则无效。

      2.2.1 刷新页面间隔(一分钟)

    <meta http-equiv="refresh" content="60">

      2.2.2 浏览器使用

        优先使用IE最新版本和Chrome <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> 

      2.2.3 字符集

    <meta http-equiv="content-Type" content="text/html; charset=gb2312">

      2.2.4 清除缓存

        再次访问网站要重新下载 <meta http-equiv="cache-control" content="no-cache"> 

    2.3 charset属性

      2.3.1 字符集

    <meta charset="UTF-8">
  • 相关阅读:
    Linux命令应用大词典-第11章 Shell编程
    Kubernetes 学习12 kubernetes 存储卷
    linux dd命令
    Kubernetes 学习11 kubernetes ingress及ingress controller
    Kubernetes 学习10 Service资源
    Kubernetes 学习9 Pod控制器
    Kubernetes 学习8 Pod控制器
    Kubernetes 学习7 Pod控制器应用进阶2
    Kubernetes 学习6 Pod控制器应用进阶
    Kubernetes 学习5 kubernetes资源清单定义入门
  • 原文地址:https://www.cnblogs.com/ajuan/p/10109412.html
Copyright © 2011-2022 走看看