HTML 页面meta标签

时间：2022-09-02 12:56:15

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">

HTML 页面meta标签的更多相关文章

  1. HTML页面meta标签内容详解

    所有的浏览器都支持meta标签,用于提供页面相关信息,信息都是以名(http-equiv和name标示)/值(content标示)对的形式现实. 属性content,用于定义http-equiv(定义 ...

  2. h5移动端页面meta标签

    <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html lang="zh-cmn-Hans"&g ...

  3. 移动端h5页面meta标签设置

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable= ...

  4. 嵌套移动APP端的H5页面meta标签

    <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, ...

  5. HTML5&lowbar;嵌套移动APP端的H5页面meta标签

    <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, ...

  6. H5页面meta标签小结&colon;

    <meta name="viewport" content="width=device-width,user-scalable=no"> <m ...

  7. JSP页面中的Meta标签详解

    Meta标签详解 相信大家在平时开发中最常接触的页面就是html和jsp了,可在这两个页面中有一个Meta标签你天天都会看见,可是你真的了解这个标签的一些其他用处吗?今天给大家介绍一些该标签的其他应用 ...

  8. Meta标签详解&lpar;HTML JAVASCRIPT&rpar;

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

  9. 深入理解css系列：meta标签

    积累太少,时间管理技巧欠缺,所以导致了博客更新的速度迟缓.学习中成长,成长中学习.加油吧!最近在做h5的项目,对于meta标签层出不穷的各式属性值有点头晕,所以查资料整理了下. 关键字:meta na ...

随机推荐

  1. Protocol in Objective-C

    Objecttive-C  Protocal 相似 Java Interface

  2. FreeSWITCH无法读取wav文件

    错误日志如下: -- :: Invalid file format [wav] /suite-espanola-op--leyenda.wav]! -- :: Can't open /usr/loca ...

  3. Apache 2&period;4 多站点配置记录

    基于域名的虚拟主机配置 <VirtualHost *:80> DocumentRoot /var/www/cms ServerName www.example.com RewriteEng ...

  4. 获取Application中的spring容器

    方式1: ApplicationContext ac = (ApplicationContext) invocation.getInvocationContext().getApplication() ...

  5. iOS开发RunLoop

    最近处于离职状态,时间也多了起来,但是学习还是不能放松,今天总结一下RunLoop,RunLoop属于iOS系统层的东西,还是比较重要的. 一.什么是RunLoop 字面意思看是跑圈,也可以看作运行循 ...

  6. 在DirectShow的视频图像上叠加线条和文字

    在DirectShow的视频图像上叠加线条和文字 最近一直在从事工业测量方面的开发工作,难免会用到各种各样的相机,其中支持DX的USB相机开发起来比较方便,由于工作需要经常要在视频图像上叠加线条和文字 ...

  7. shell 脚本拼接

    var21=`echo $vvar|awk -F ',' '{print $1}'` echo $var21 var31=`echo $var21|awk -F ':' '{print $2}'` e ...

  8. NSUserDefaults用法详解

    一.了解NSUserDefaults以及它可以直接存储的类型 NSUserDefaults是一个单例,在整个程序中只有一个实例对象,他可以用于数据的永久保存,而且简单实用,这是它可以让数据*传递的一 ...

  9. JAVAEE——宜立方商城05：前台系统搭建、首页展示、Cms系统的实现

    1. 学习计划 1.前台系统搭建 2.商城首页展示 3.Cms系统的实现 a) 内容分类管理 b) 内容管理 4.前台内容动态展示 2. 商城首页展示 系统架构: 页面位置: 2.1. 工程搭建 可以 ...

  10. 转：docker的核心技术深度剖析

    一.docker是什么 Docker的英文本意是码头工人,也就是搬运工,这种搬运工搬运的是集装箱(Container),集装箱里面装的可不是商品货物,而是任意类型的App,Docker把App(叫Pa ...

相关文章