HTML--meta

最新推荐文章于 2021-06-21 20:57:58 发布
最新推荐文章于 2021-06-21 20:57:58 发布
阅读量144 收藏 1
点赞数
分类专栏： HTML/CSS/XML

简介

<meta>标签是 HTML 语言头部的一个辅助性标签，提供有关页面的元信息（比如：针对搜索引擎和更新频度的描述和关键词、定义页面使用的语言），使用好 <meta> 标签学习HTML 很有益。meta标签通常用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie；它可以用于鉴别作者，设定页面格式，标注内容提要和关键字；还可以设置页面使其可以根据你定义的时间间隔刷新自己,以及设置RASC内容等级，等等。

DOCTYPE

DOCTYPE(Document Type)，该声明位于文档中最前面的位置，处于 html 标签之前，此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。
DTD(Document Type Definition) 声明以 <!DOCTYPE> 开始，不区分大小写，前面没有任何内容，如果有其他内容(空格除外)会使浏览器在 IE 下开启怪异模式(quirks mode)渲染网页。公共 DTD，名称格式为注册//组织//类型 标签//语言,注册指组织是否由国际标准化组织(ISO)注册，+表示是，-表示不是。组织即组织名称，如：W3C。类型一般是 DTD。标签是指定公开文本描述，即对所引用的公开文本的唯一描述性名称，后面可附带版本号。最后语言是 DTD 语言的 ISO 639 语言标识符，如：EN 表示英文，ZH 表示中文。XHTML 1.0 可声明三种 DTD 类型。分别表示严格版本，过渡版本，以及基于框架的 HTML 文档。
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
最新 HTML5
<!doctype html>
在 HTML中 doctype 有两个主要目的。
- 对文档进行有效性验证。它告诉用户代理和校验器这个文档是按照什么 DTD 写的。这个动作是被动的，每次页面加载时，浏览器并不会下载 DTD 并检查合法性，只有当手动校验页面时才启用。
- 决定浏览器的呈现模式。对于实际操作，通知浏览器读取文档时用哪种解析算法。如果没有写，则浏览器则根据自身的规则对代码进行解析，可能会严重影响 html 排版布局。浏览器有三种方式解析 :非怪异（标准）模式;怪异模式;部分怪异（近乎标准）模式
关于IE浏览器的文档模式，浏览器模式，严格模式，怪异模式，DOCTYPE 标签，可详细阅读模式标准的内容。

HTTP-EQUIV

HTTP-EQUIV类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。

浏览器访问某个页面时会将它存在缓存中，下次再次访问时就可从缓存中读取，以提高速度。当你希望访问者每次都刷新你广告的图标，或每次都刷新你的计数器，就要禁用缓存了。通常HTML文件没有必要禁用缓存，对于ASP等页面，就可以使用禁用缓存，因为每次看到的页面都是在服务器动态生成的，缓存就失去意义。如果网页过期，那么存盘的cookie将被删除。
<Meta http-equiv="Set-Cookie" Content="cookievalue=xxx; expires=Wednesday,21-Oct-98 16:14:21 GMT; path=/">

Page-Enter、Page-Exit (进入与退出)

这个是页面被载入和调出时的一些特效。

<Meta http-equiv="Page-Enter" Content="blendTrans(Duration=0.5)">
<Meta http-equiv="Page-Exit" Content="blendTrans(Duration=0.5)">
注意：blendTrans是动态滤镜的一种，产生渐隐效果。另一种动态滤镜revealTrans也可以用于页面进入与退出效果:
<Meta http-equiv="Page-Enter" Content="revealTrans(duration=x, transition=y)">
<Meta http-equiv="Page-Exit" Content="revealTrans(duration=x, transition=y)">
duration　　表示滤镜特效的持续时间(单位：秒)
transition　滤镜类型。表示使用哪种特效，取值为0-23。
- 0 矩形缩小
- 1 矩形扩大
- 2 圆形缩小
- 3 圆形扩大
- 4 下到上刷新
- 5 上到下刷新
- 6 左到右刷新
- 7 右到左刷新
- 8 竖百叶窗
- 9 横百叶窗
- 10 错位横百叶窗
- 11 错位竖百叶窗
- 12 点扩散
- 13 左右到中间刷新
- 14 中间到左右刷新
- 15 中间到上下
- 16 上下到中间
- 17 右下到左上
- 18 右上到左下
- 19 左上到右下
- 20 左下到右上
- 21 横条
- 22 竖条
- 23 以上22种随机选择一种

声明文档使用的字符编码

<meta charset='utf-8'>
或者
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />　
该 meta 标签定义了 HTML 页面所使用的字符集为 utf-8 。目前我们一般推荐使用第一种写法，也是HTML5使用的写法。

声明使用的浏览器及版本

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />　
当指定的content值为IE=edge,chrome=1时，优先使用 IE 最新版本和 Chrome。假定客户端安装了Google Chrome Frame，则在IE中使用chrome的渲染引擎来渲染页面，否则，将会使用客户端IE最高的标准模式对页面进行渲染。

还有以下几种设置方式：

<meta http-equiv="X-UA-Compatible" content="IE=6" /><!-- 使用IE6 --> 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><!-- 使用IE7 --> 
<meta http-equiv="X-UA-Compatible" content="IE=8" /><!-- 使用IE8 --> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!--指示IE以目前可用的最高模式显示内容-->

SEO优化相关

每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。
<meta name="description" content="不超过150个字符" />
每个网页应具有描述该网页内容的一组唯一的关键字。
使用人们可能会搜索，并准确描述网页上所提供信息的描述性和代表性关键字及短语。
<meta name="keywords" content="html5, css3, 关键字"/>
定义网页作者，非必要
<meta name="author" content="月光光" />

页面重定向和刷新

content内的数字代表时间（秒），既多少时间后刷新。如果加url,则会重定向到指定网页。
<meta http-equiv="Refresh" contect="5;url=http://www.admin10000.com" />
上述代码表示停留5秒钟后自动刷新跳转到URL网址http://www.admin10000.com。

Expires网页过期时间

<meta http-equiv="Expires" contect="Mon,12 May 2016 00:20:00 GMT" />
设定网页的到期时间，一旦过期则必须到服务器上重新调用，需要注意的是必须使用GMT时间格式，或直接设为0(不缓存)。

Pragma禁止本地缓存

<meta http-equiv="Pragma" contect="no-cache" />
设定网页不保存在缓存中，每次访问都刷新页面。这样设定，访问者将无法脱机浏览。

viewport移动设备屏幕可视区域

由于移动设备屏幕宽度不同于传统 web，因此我们需要改变 viewport 值。
大部分4.7-5寸设备的viewport宽设为360px；5.5寸设备设为400px；iphone6设为375px；ipone6 plus设为414px。
width – viewport 的宽度 （范围从 200 到 10,000，默认为 980 像素）
height – viewport 的高度 （范围从 223 到 10,000 ）
initial-scale – 初始的缩放比例 （范围从 > 0 到 10）
minimum-scale – 允许用户缩放到的最小比例
maximum-scale – 允许用户缩放到的最大比例
user-scalable – 用户是否可以手动缩放 (no，yes)
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
强制让文档与设备的宽度保持 1:1 ；
文档最大的宽度比列是1.0（ initial-scale 初始刻度值和 maximum-scale 最大刻度值）；
user-scalable 定义用户是否可以手动缩放（ no 为不缩放），使页面固定设备上面的大小；
注意：实际测试中发现，有些安卓系统自带的浏览器并不支持这一条规则，能够对页面进行放大，一旦放大响应的 box 也随之放大，导致页面出现错乱问题，解决方法：定义页面的最小宽度。

body {
min-width: 320px;
}

注意，很多人使用initial-scale=1到非响应式网站上，这会让网站以100%宽度渲染，用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1，则用户将不能放大/缩小网页来看到全部的内容。

WebApp全屏模式：伪装app，离线应用。

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

隐藏状态栏/设置状态栏颜色

只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent 。
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

添加到主屏后的标题

<meta name="apple-mobile-web-app-title" content="标题" />

忽略数字自动识别为电话号码

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

忽略识别邮箱

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

参考

Meta标签的那些事
HTML页面Meta介绍

sunghosts
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html-meta-tags
03-04
html-meta-tags
html页面禁用浏览器缓存,禁止页面缓存的几种方法分享
weixin_34835470的博客
06-03 1598
今天在开发时碰到一种方法，就是客户要求页面不缓存，查了一下得出如下几种不让页面缓存的办法html只要加在头部就可以了.复制代码代码如下:asp教程做法复制代码代码如下:Response.Buffer = TrueResponse.ExpiresAbsolute = Now() - 1Response.Expires = 0Respon...
win10edge启用html5,win10系统下edge浏览器怎么启用和禁用flash
weixin_29491259的博客
06-16 2332
使用win10系统的用户都知道它内置有dege浏览器，而浏览器中通常都自带有Flash动画播放功能，但是有些用户想要将其禁用达到更快的上网体验，那么win10系统下edge浏览器怎么启用和禁用flash呢？具体步骤如下。1、我们用 Windows 10 的新 Edge 浏览器打开网页，如果这个网页上有 Flash 播放的声音、视频内容，在其标签页上会出现一个小喇叭的标志；2、如果这些 Flash ...
edge无效html5,Microsoft Edge在Windows 10上拥有最好的HTML5可访问性支持
weixin_33914679的博客
06-05 195
与 Internet Explorer 11 在同版本操作系统获得的 56％ 成绩相比，使用了 Chromium 内核的 Edge 在这方面无疑有了巨大的提升。同样可以看到，其他竞争对手的成绩与Microsoft Edge 相比都稍有落后。不过 Edge 团队也强调这样的比较意义不大，因为此处仅显示了竞争对手应用程序旧版本的成绩。要注意的是，HTML5 Accessibility(A11y)主要...
html禁止缓存
独自等待的专栏
04-23 294
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="0" /&gt...
edge86禁止html5本地缓存,Microsoft Edge 稳定渠道的存档发行说明
weixin_39928003的博客
06-21 448
Microsoft Edge 稳定渠道的存档发行说明03/03/2021本文内容这些发行说明提供有关 Microsoft Edge Stable 渠道中包含的新功能和非安全更新的信息。 此处列出所有安全更新。版本 86.0.622.38：10 月 9 日此处列出安全更新功能更新回退到先前的 Microsoft Edge 版本。 如果最新版本的 Microsoft Edge 中有问题，则“回退”功能...
html-meta标签详解
06-28
共13页，详细讲述<meta>标签，让你彻底明白meta标签的属性，功能，以及使用方法技巧。
react-metatags-hook:React Hook管理html meta标签
03-17
ReactMetaTags挂钩React钩子来管理HTML元标记。... 支持服务器端渲染的静态HTML生成打字稿声明安装 npm install react-metatags-hook或者 yarn add react-metatags-hook例子import useMetaTags from 're
html-meta-tags：从JSON数据生成HTML元标记
02-06
html-meta-tags 从JSON数据生成HTML元标记。 安装 npm install html-meta-tags -g 用法 命令行界面 您可以通过管道从标准输入中传输数据，也可以指定程序的文件路径。 $ html-meta-tags Usage: ...
babel-plugin-bundled-import-meta:Babel插件重写import.meta以用于捆绑使用
05-01
babel-plugin-bundled-import-meta Babel插件可重写import.meta.url以供捆绑使用。 安装babel-plugin-bundled-import-meta 此模块需要node.js 10或更高版本以及@babel/core 。... " bundleDir " : " html " }] ]
Html 禁用浏览器缓存 input值
baidu_23275675的博客
10-13 1196
如果不想让浏览器缓存input的值，有2种方法： 方法一：  在不想使用缓存的input中添加 autocomplete="off";   &lt;input type="text" autocomplete="off" name="name" /&gt; 方法二：  在 input 所在的form标签中添加 autocomplete="off";  &lt;form ac
使用 HTML meta 标签来禁用缓存
热门推荐
Harlan的专栏
08-28 1万+
如何完美滴使浏览器访问一个 HTML 页面时禁用缓存？ 在测试某个 Web应用程序项目时，发现更改后 Chrome 浏览器页面刷新还是使用之前的版本。经调试发现 Chrome 默认缓存值为 300 秒。 经测试跨浏览器禁止缓存的 headers 如下： Cache-Control: no-cache, no-store, must-revalidate Pragma: no-cache E...
edge86禁止html5本地缓存,默认情况下，Microsoft Edge现在会阻止Flash，并使其点击运行 | MOS86...
weixin_29775447的博客
06-21 346
由于我们急于等待Windows 10创作者更新，明年春天，微软在一个老化的互联网标准下摆动。看来，从明年开始，微软Edge浏览器将逐步淘汰Flash Player。没有什么大惊喜有一些像苹果，Mozilla和Chrome这样的大牌在过去的一年中已经撤出了Flash扩展的支持。据报道，一些网站将被列入白名单，但其他地方默认情况下将禁用Flash。从2017年开始，Windows 10周年纪念更新后，...
基于java的-28-“智慧食堂”设计与实现--LW-源码.zip
04-25
提供的源码资源涵盖了Java应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。 适用人群： 适合毕业设计、课程设计作业。这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。 使用场景及目标： 在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。 其他说明： 为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。 所有源码均经过严格测试，可以直接运行，可以放心下载使用。有任何使用问题欢迎随时与博主沟通，第一时间进行解答！
C#，回文分割问题（Palindrome Partitioning Problem）算法与源代码
04-25
C#，回文分割问题（Palindrome Partitioning Problem）算法与源代码 1 回文串 “回文串”是一个正读和反读都一样的字符串，初始化标志flag=true，比如“level”或者“noon”等等就是回文串。 2 回文分割问题 给定一个字符串，如果该字符串的每个子字符串都是回文的，那么该字符串的分区就是回文分区。 例如，“aba | b | bbabb | a | b | aba”是“abababababa”的回文分区。 确定给定字符串的回文分区所需的最少切割。 例如，“ababababababa”至少需要3次切割。 这三个分段是“a | babbab | b | ababa”。 如果字符串是回文，则至少需要0个分段。 如果一个长度为n的字符串包含所有不同的字符，则至少需要n-1个分段。
node-v9.2.1.tar.xz
最新发布
04-25
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
贪心算法解决活动选择问题，Java版源码
04-25
贪心算法是一种在每一步选择中都采取在当前状态下最好或最优的选择，从而希望导致结果是全局最好或最优的算法策略。贪心算法在有最优子结构的问题中尤为有效。最优子结构的意思是局部最优解可以决定全局最优解。 附件中一个使用贪心算法解决活动选择问题（也称为会议时间安排问题）的 Java 示例代码。这个问题的目标是选择最大的活动数量，使得活动之间互不重叠。 在示例中，我们定义了一个 Activity 类来表示每个活动的开始和结束时间。然后，我们创建了一个活动数组，并使用 Arrays.sort() 方法按照活动的结束时间对它们进行排序。 接下来，我们遍历排序后的数组，使用贪心算法的策略选择活动。选择的标准是当前活动的开始时间是否晚于或等于之前选择的最后一个活动的结束时间。如果是，我们就选择这个活动，并更新 lastActivityEnd 为当前活动的结束时间。最后，我们打印出可以执行的最大活动数量。
小程序-2-“最多跑一次”微信小程序--LW-源码.zip
04-25
提供的源码资源涵盖了小程序应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。 适用人群： 适合毕业设计、课程设计作业。这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。 使用场景及目标： 在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。 其他说明： 为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。 所有源码均经过严格测试，可以直接运行，可以放心下载使用。有任何使用问题欢迎随时与博主沟通，第一时间进行解答！
基于java的-198-ssm智能新冠疫苗接种助手--LW-源码.zip
04-25
提供的源码资源涵盖了Java应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。 适用人群： 适合毕业设计、课程设计作业。这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。 使用场景及目标： 在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。 其他说明： 为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。 所有源码均经过严格测试，可以直接运行，可以放心下载使用。有任何使用问题欢迎随时与博主沟通，第一时间进行解答！
meta http-equiv
04-04
- Content-Type: This tag is used to specify the type of content that is being sent to the browser, such as HTML, CSS, or JavaScript. - Cache-Control: This tag is used to specify caching directives ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值