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">
  • 相关阅读:
    深度神经网络的优化算法
    Python 正则表达式
    《java面试十八式》第一式 --冈本零点零一
    《java面试十八式》--引子
    Redis第二讲【Redis基本命令和五大数据结构】
    redis第一讲【redis的描述,linux和docker下的安装使用】
    springboot中的pom文件是如何管理依赖的
    详谈springboot启动类的@SpringBootApplication注解
    工具类中注入service和dao
    windows下安装ssdb
  • 原文地址:https://www.cnblogs.com/ajuan/p/10109412.html
Copyright © 2011-2022 走看看