王朝235网址导航
立即发布
当前位置:首页 > HTML代码
文章资讯分类
文章资讯
  • a标签链接功能大全 a标签链接功能大全

    a标签链接功能大全

    允许用户在页面上,从一个网址跳转到另一个网址,从而把所有资源联系在一起。 URL 是链接指向的地址。链接不仅可以指向另一个网页,也可以指向文本、图像、文件等资源。可以这样说,所有互联网上的资源,都可以通过链接访问。1、链接通过 标签表示,用户点击后,浏览器会跳转到指定的网址。下面就是一个典型的链接。 <a href="https://www.zhansanjie.com/">站三界导航</a> 上面代码就定义了一个超级链接。浏览器显示“站三界导航”,文字下面默认会有下划线,表示这是一个链接。用户点击后,浏览器跳转到 href 属性指定的网址。 标签内部不仅可以放置文字,也可以放置其他元素,比如段落、图像、多媒体等等。 <a href="https://www.zhansanjie.com/"><img src="https://www.zhansanjie.com/uploads/20220611/343ed4cd2a6cbf7eef13c1af3a4f7d39.png"></a> 上面代码中, 标签内部就是一个图像。用户点击图像,就会跳转到指定网址。 标签有如下属性。 (1)href href 属性给出链接指向的网址。它的值应该是一个 URL 或者锚点。 上文已经给出了完整 URL 的例子,下面是锚点的例子。 <a href="#demo">示例</a> 上面代码中, href 属性的值是 # 加上锚点名称。点击后,浏览器会自动滚动,停在当前页面里面 demo 锚点所在的位置。 (2)hreflang hreflang 属性给出链接指向的网址所使用的语言,纯粹是提示性的,没有实际功能。 <a href="https://www.zhansanjie.com/" hreflang="en">站三界导航</a> 上面代码表明, href 属性指向的网址的语言是英语。 该属性的值跟通用属性 lang 一样,语言代码可以参考《属性》一章的 lang 属性的介绍。 (3)title title 属性给出链接的说明信息。鼠标悬停在链接上方时,浏览器会将这个属性的值,以提示块的形式显示出来。 <a href="https://www.zhansanjie.com/" title="hello">站三界导航</a>。 上面代码中,用户鼠标停留在链接上面,会出现文字提示 hello 。 (4)target target 属性指定如何展示打开的链接。它可以是在指定的窗口打开,也可以在 里面打开。 <p><a href="http://www.zhansanjie.com" target="test">zhansanjie</a></p> <p><a href="http://www.wc235.com" target="test">wc235</a></p> 上面代码中,两个链接都在名叫 test 的窗口打开。首先点击链接zhansanjie,浏览器发现没有叫做 test 的窗口,就新建一个窗口,起名为 test ,在该窗口打开www.wc235.com。然后,用户又点击链接 www.wc235.com,由于已经存在 test 窗口,浏览器就在该窗口打开www.wc235.com,取代里面已经打开的www.zhansanjie.com。 target 属性的值也可以是以下四个关键字之一。_self:当前窗口打开,这是默认值。_blank:新窗口打开。_parent:上层窗口打开,这通常用于从父窗口打开的子窗口,或者里面的链接。如果当前窗口没有上层窗口,这个值等同于_self。_top:顶层窗口打开。如果当前窗口就是顶层窗口,这个值等同于_self。 <a href="https://www.zhansanjie.com" target="_blank">站三界导航</a> 上面代码点击后,浏览器会新建一个窗口,在该窗口打开链接,并且新窗口没有名字。 注意,使用 target 属性的时候,最好跟 rel="noreferrer" 一起使用,这样可以避免安全风险。 (5)rel rel 属性说明链接与当前页面的关系。 <a href="help.html" rel="help">帮助</a> 上面代码的 rel 属性,说明链接是当前页面的帮助文档。 下面是一些常见的 rel 属性的值。alternate:当前文档的另一种形式,比如翻译。author:作者链接。bookmark:用作书签的永久地址。external:当前文档的外部参考文档。help:帮助链接。license:许可证链接。next:系列文档的下一篇。nofollow:告诉搜索引擎忽略该链接,主要用于用户提交的内容,防止有人企图通过添加链接,提高该链接的搜索排名。noreferrer:告诉浏览器打开链接时,不要将当前网址作为 HTTP 头信息的Referer字段发送出去,这样可以隐藏点击的来源。noopener:告诉浏览器打开链接时,不让链接窗口通过 JavaScript 的window.opener属性引用原始窗口,这样就提高了安全性。prev:系列文档的上一篇。search:文档的搜索链接。tag:文档的标签链接。(6)referrerpolicy referrerpolicy 属性用于精确设定点击链接时,浏览器发送 HTTP 头信息的 Referer 字段的行为。 该属性可以取下面八个值: no-referrer 、 no-referrer-when-downgrade 、 origin 、 origin-when-cross-origin 、 unsafe-url 、 same-origin 、 strict-origin 、 strict-origin-when-cross-origin 。 其中, no-referrer 表示不发送 Referer 字段, same-origin 表示同源时才发送 Referer 字段, origin 表示只发送源信息(协议+域名+端口)。其他几项的解释,请查阅 HTTP 文档。 (7)ping ping 属性指定一个网址,用户点击的时候,会向该网址发出一个 POST 请求,通常用于跟踪用户的行为。 (8)type type 属性给出链接 URL 的 MIME 类型,比如到底是网页,还是图像或文件。它也是纯粹提示性的属性,没有实际功能。 <a href="smile.jpg"type="image/jpeg">示例图片</a> 上面代码中, type 属性提示这是一张图片。 (9)download download 属性表明当前链接用于下载,而不是跳转到另一个 URL。 <a href="demo.txt" download>下载</a> 上面代码点击后,会出现下载对话框。 注意, download 属性只在链接与网址同源时,才会生效。也就是说,链接应该与网址属于同一个网站。 如果 download 属性设置了值,那么这个值就是下载的文件名。 <a href="zhansanjie.exe"download="wc235.exe">点击下载</a> 上面代码中,下载文件的原始文件名是 zhansanjie.exe 。点击后,下载对话框提示的文件名是wc235.exe 。 注意,如果链接点击后,服务器的 HTTP 回应的头信息设置了 Content-Disposition 字段,并且该字段的值与 download 属性不一致,那么该字段优先,下载时将显示其设置的文件名。 download 属性还有一个用途,就是有些地址不是真实网址,而是数据网址,比如 data: 开头的网址。这时, download 属性可以为虚拟网址指定下载的文件名。 <a href="data:,Hello%2C%20World!">点击</a> 上面链接点击后,会打开一个虚拟网页,上面显示 Hello World! 。 <a href="data:,Hello%2C%20World!" download="hello.txt">点击</a> 上面链接点击后,下载的 hello.txt 文件内容就是“Hello, World!”。2、邮件链接链接也可以指向一个邮件地址,使用 mailto 协议。用户点击后,浏览器会打开本机默认的邮件程序,让用户向指定的地址发送邮件。 <a href="mailto:492298663@qq.com">联系我们</a> 上面代码中,链接就指向邮件地址。点击后,浏览器会打开一个邮件地址,让你可以向492298663@qq.com发送邮件。 除了邮箱,邮件协议还允许指定其他几个邮件要素。subject:主题cc:抄送bcc:密送body:邮件内容 <a href="mailto:492298663@qq.com?cc=test@test.com&subject=The%20subject&body=The%20body">发送邮件</a> 上面代码中,邮件链接里面不仅包含了邮箱地址,还包含了 cc 、 subject 、 body 等邮件要素。这些要素的值需要经过 URL 转义,比如空格转成 %20 。 不指定邮箱也是允许的,就像下面这样。这时用户自己在邮件程序里面,填写想要发送的邮箱,通常用于邮件分享网页。 <a href="mailto:">告诉朋友</a> 3、电话链接如果是手机浏览的页面,还可以使用 tel 协议,创建电话链接。用户点击该链接,会唤起电话,可以进行拨号。 <a href="tel:13312345678">13312345678</a> 上面代码在手机中,点击链接会唤起拨号界面,可以直接拨打指定号码。4、4.1、基本用法标签主要用于将当前网页与相关的外部资源联系起来,通常放在 元素里面。最常见的用途就是加载 CSS 样式表。 <link rel="stylesheet" type="text/css" href="theme.css"> 上面代码为网页加载样式表 theme.css 。 除了默认样式表,网页还可以加载替代样式表,即默认不生效、需要用户手动切换的样式表。 <link href="default.css" rel="stylesheet" title="Default Style"><link href="fancy.css" rel="alternate stylesheet" title="Fancy"><link href="basic.css" rel="alternate stylesheet" title="Basic"> 上面代码中, default.css 是默认样式表,默认就会生效。 fancy.css 和 basic.css 是替换样式表( rel="alternate stylesheet" ),默认不生效。 title 属性在这里是必需的,用来在浏览器菜单里面列出这些样式表的名字,供用户选择,以替代默认样式表。 还可以加载网站的 favicon 图标文件。 <link rel="icon" href="/favicon.ico" type="image/x-icon"> 手机访问时,网站通常需要提供不同分辨率的图标文件。 <link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png"><link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png"> 上面代码指定 iPhone 设备需要的114像素和72像素的图标。 也用于提供文档的相关链接,比如下面是给出文档的 RSS Feed 地址。 <link rel="alternate" type="application/atom+xml" href="/blog/news/atom"> 4.2、rel 属性rel 属性表示外部资源与当前文档之间的关系,是 标签的必需属性。它可以但不限于取以下值。alternate:文档的另一种表现形式的链接,比如打印版。author:文档作者的链接。dns-prefetch:要求浏览器提前执行指定网址的 DNS 查询。help:帮助文档的链接。icon:加载文档的图标文件。license:许可证链接。next:系列文档下一篇的链接。pingback:接收当前文档 pingback 请求的网址。preconnect:要求浏览器提前与给定服务器,建立 HTTP 连接。prefetch:要求浏览器提前下载并缓存指定资源,供下一个页面使用。它的优先级较低,浏览器可以不下载。preload:要求浏览器提前下载并缓存指定资源,当前页面稍后就会用到。它的优先级较高,浏览器必须立即下载。prerender:要求浏览器提前渲染指定链接。这样的话,用户稍后打开该链接,就会立刻显示,感觉非常快。prev:表示当前文档是系列文档的一篇,这里给出上一篇文档的链接。search:提供当前网页的搜索链接。stylesheet:加载一张样式表。下面是一些示例。 <link rel="author" href="humans.txt"><link rel="license" href="copyright.html"><link rel="alternate" href="https://es.zhansanjie.com/" hreflang="es"><link rel="me" href="https://zhansanjie.com/profiles/someone" type="text/html"><link rel="me" href="mailto:name@example.com"><link rel="me" href="sms:+18888888888"><link rel="archives" href="http://zhansanjie.com/archives/"><link rel="index" href="http://zhansanjie.com/article/"><link rel="first" href="http://zhansanjie.com/article/"><link rel="last" href="http://zhansanjie.com/article/?page=42"><link rel="prev" href="http://zhansanjie.com/article/?page=1"><link rel="next" href="http://zhansanjie.com/article/?page=3"> 4.3、资源的预加载某些情况下,你需要浏览器预加载某些资源,也就是先把资源缓存下来,等到使用的时候,就不用再从网上下载了,立即就能使用。预处理指令可以做到这一点。 预加载主要有下面五种类型。 (1) 告诉浏览器尽快下载并缓存资源(如脚本或样式表),该指令优先级较高,浏览器肯定会执行。当加载页面几秒钟后需要该资源时,它会很有用。下载后,浏览器不会对资源执行任何操作,脚本未执行,样式表未应用。它只是缓存,当其他东西需要它时,它立即可用。 <link rel="preload" href="image.png" as="image"> rel="preload" 除了优先级较高,还有两个优点:一是允许指定预加载资源的类型,二是允许 onload 事件的回调函数。下面是 rel="preload" 配合 as 属性,告诉浏览器预处理资源的类型,以便正确处理。 <link rel="preload" href="style.css" as="style"><link rel="preload" href="main.js" as="script"> 上面代码要求浏览器提前下载并缓存 style.css 和 main.js 。 as 属性指定加载资源的类型,它的值一般有下面几种。"script""style""image""media""document"如果不指定 as 属性,或者它的值是浏览器不认识的,那么浏览器会以较低的优先级下载这个资源。 有时还需要 type 属性,进一步明确 MIME 类型。 <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4"> 上面代码要求浏览器提前下载视频文件,并且说明这是 MP4 编码。 下面是预下载字体文件的例子。 <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin> 注意,所有预下载的资源,只是下载到浏览器的缓存,并没有执行。如果希望资源预下载后立刻执行,可以参考下面的写法。 <link rel="preload" as="style" href="async_style.css" onload="this.rel='stylesheet'"> 上面代码中, onload 指定的回调函数会在脚本下载完成后执行,立即插入页面。 (2) 的使用场合是,如果后续的页面需要某个资源,并且希望预加载该资源,以便加速页面渲染。该指令不是强制性的,优先级较低,浏览器不一定会执行。这意味着,浏览器可以不下载该资源,比如连接速度很慢时。 <link rel="prefetch" href="https://www.zhansanjie.com/"> (3) 要求浏览器提前与某个域名建立 TCP 连接。当你知道,很快就会请求该域名时,这会很有帮助。 <link rel="preconnect" href="https://www.zhansanjie.com/"> (4) 要求浏览器提前执行某个域名的 DNS 解析。 <link rel="dns-prefetch" href="//zhansanjie.com/"> (5) 要求浏览器加载某个网页,并且提前渲染它。用户点击指向该网页的链接时,就会立即呈现该页面。如果确定用户下一步会访问该页面,这会很有帮助。 <link rel="prerender" href="http://zhansanjie.com/"> 4.4、media 属性media 属性给出外部资源生效的媒介条件。 <link href="print.css" rel="stylesheet" media="print"><link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)"> 上面代码中,打印时加载 print.css ,移动设备访问时(设备宽度小于600像素)加载 mobile.css 。 下面是使用 media 属性实现条件加载的例子。 <link rel="preload" as="image" href="map.png" media="(max-width: 600px)"><link rel="preload" as="script" href="map.js" media="(min-width: 601px)"> 上面代码中,如果屏幕宽度在600像素以下,则只加载第一个资源,否则就加载第二个资源。4.5、其他属性标签的其他属性如下。crossorigin:加载外部资源的跨域设置。href:外部资源的网址。referrerpolicy:加载时Referer头信息字段的处理方法。as:rel="preload"或rel="prefetch"时,设置外部资源的类型。type:外部资源的 MIME 类型,目前仅用于rel="preload"或rel="prefetch"的情况。title:加载样式表时,用来标识样式表的名称。sizes:用来声明图标文件的尺寸,比如加载苹果手机的图标文件。5、用于加载脚本代码,目前主要是加载 JavaScript 代码。 <script>console.log('hello world');</script> 上面代码嵌入网页,会立即执行。 也可以加载外部脚本, src 属性给出外部脚本的地址。 <script src="javascript.js"></script> 上面代码会加载 javascript.js 脚本文件,并执行。 type 属性给出脚本的类型,默认是 JavaScript 代码,所以可省略。完整的写法其实是下面这样。 <script type="text/javascript" src="javascript.js"><script> type 属性也可以设成 module ,表示这是一个 ES6 模块,不是传统脚本。 <script type="module" src="main.js"><script> 对于那些不支持 ES6 模块的浏览器,可以设置 nomodule 属性。支持 ES6 模块的浏览器,会不加载指定的脚本。这个属性通常与 type="module" 配合使用,作为老式浏览器的回退方案。 <script type="module" src="main.js">script><script nomodule src="fallback.js">script> 还有下面一些其他属性,大部分跟 JavaScript 语言有关,可以参考相关的 JavaScript 教程。async:该属性指定 JavaScript 代码为异步执行,不是造成阻塞效果,JavaScript 代码默认是同步执行。defer:该属性指定 JavaScript 代码不是立即执行,而是页面解析完成后执行。crossorigin:如果采用这个属性,就会采用跨域的方式加载外部脚本,即 HTTP 请求的头信息会加上origin字段。integrity:给出外部脚本的哈希值,防止脚本被篡改。只有哈希值相符的外部脚本,才会执行。nonce:一个密码随机数,由服务器在 HTTP 头信息里面给出,每次加载脚本都不一样。它相当于给出了内嵌脚本的白名单,只有在白名单内的脚本才能执行。referrerpolicy:HTTP 请求的Referer字段的处理方法。6、标签用于浏览器不支持或关闭 JavaScript 时,所要显示的内容。 <noscript> 您的浏览器不能执行 JavaScript 语言,页面无法正常显示。noscript> 上面这段代码,只有浏览器不能执行 JavaScript 代码时才会显示,否则就不会显示。
    2022-09-12 11
  • html各种样式整理 html各种样式整理

    html各种样式整理

    background-color:#ff0000;  //设置背景颜色   background-image: url(stars.gif); background-repeat: repeat-x 设置背景图片,设置重复方向,no-repeat为无,全屏  background-position:center;设置背景图片的位置上,可以设置为 横坐标?px,纵坐标?pxborder-top:5px solid black;//设置边框宽度,样式,颜色,top可以设置方位,并且可以省略; border-style:solid;//设置边框样式,如实心,空心;border-color:black;//设置边框颜色;border-width:4px;//设置边框宽度  border-radius:20px;  //设置边框圆角border-collapse: collapse;  //为表格设置合并边框模型;将两条边框合并为一条边框border-spacing:1px 50px;  //设置相邻单元格的边界间的距离(仅用于“边界分离”模式)。左右,上下box-shadow: 10px 10px 5px #888888;  //设置盒子阴影,右偏移,下偏移,扩散,颜色color:#00ff00;  //设置字体颜色cursor:pointer;  //设置光标属性,光标图案clip:rect(0px,100px,140px,0px);  //对图像进行裁剪,上,右,下,左display:none;  //此元素不会被显示。block,此元素将显示为块级元素,此元素前后会带有换行符;等。empty-cells:show;  //在table表格里面,可以设置空的单元格显示  empty-cells:hide;  //在table表格里面,可以设置空的单元格隐藏float:left;  //左浮动,向左对齐;float:right;  //右浮动,向右对齐  clear:both  //清除浮动font-style:normal;//字体样式正常,italic字体样式斜体,oblique字体样式斜体  font-size:20px;  //设置字体大小font-weight:bold  //设置文本粗细  font-weight:900flex:1  //让所有弹性盒模型对象的子元素都有相同的长度,并且忽略其内部的内容;flex-direction  //弹性盒对象,规定灵活项目的方向<iframe src="//www.baidu.com" width="500px" height="500px">  //标记一个内联框架,内嵌一个网页line-height:30%  //设置行间距letter-spacing: 20px  //设置字母之间的间距list-style:none;  //不显示ol图标  ul{list-style:square url("sqpurple.gif");}  //使用方形图片作为每列标题minlength="2"  //最小输入长度为 2  max-width:100px;  //定义元素的最大宽度margin:10px 5px 15px 20px;  //设置所有外边距属性,可以缩小div区域  上,右,下, 左  margin: 0 auto;//上下为0,左右平分父空间,居中min-height:100px;  //段落的最小间距list-style:none; //不显示ol图标  ul{list-style:square url("sqpurple.gif");}  //使用方形图片作为每列标题overflow: scroll;  //如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为,默认值是 visible。outline:#00FF00 dotted thick;  //border外面的线,可以设置的属性分别是(按顺序):轮廓颜色,轮廓样式,轮廓宽度opacity: 0.5;  //设置透明度级别 0-1padding:10px 5px 15px 20px;  //设置内边距,可以扩大div区域 上,右,下,左text-align:left;center;right;  //文本左对齐,居中,右对齐text-transform://文字转换属性  uppercase全部转换为大写,lowercase全部转换为小写,capitalize转换为首字母大写text-decoration:none;  //overline:上划线,line-through:中划线,underline:下划线,none:无样式 text-decoration: underline overline dotted red;上划线加下划线红色虚线 text-decoration: underline overline dotted red;上划线加下划线蓝色波浪text-indent: -99999px;  //将文字向左缩进,使用户看不到transform:rotate(25deg);  //旋转元素required="required" oninvalid="setCustomValidity('请输入')" oninput="setCustomValidity('')"  //必填,可更改提示信息vertical-align:20px;  //设置向上偏移或者向下偏移valign="top"   //表格里的内容常用对齐方式,top,与内容进行上对齐;middle,居中对齐;bottom,下对齐;baseline,与基线对齐width:50px;  //height:100px;  设置宽度和高度width:50px;  //height:100px;  设置宽度和高度writing-mode:vertical-rl;  //书写模式属性,水平-TB,垂直-LR,垂直-RL,横盘-LR,横盘-RLwhite-space:nowrap;  //文本不会换行,文本会在同一行上继续,直到遇到<br>标签为止。z-index: 0;  //设置图像的层级,越大则越在顶层!important;  //可以覆盖父级的样式,如果有同名称的两个样式,总是优先执行-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  //指定两个盒子接壤
    2022-09-10 11
  • SEO优化中你需要了解简单的HTML代码 SEO优化中你需要了解简单的HTML代码

    SEO优化中你需要了解简单的HTML代码

    很多新手在开始学习SEO的时候都会被程序代码吓坏,所以不敢迈出学习SEO的第一步。所以学习搜索引擎优化真的需要了解程序代码吗?当然,如果你知道,它会更强大。但事实上,学习SEO并不需要精通程序代码,只需要一些HTML代码。首先,我们需要了解网页的基本结构,它分为head和body、中文解释头部和内容部分。以下是一些在SEO优化过程中经常遇到的基本HTML标记代码:记住,所有标记都有封闭的结尾。1、title标签:页面标题,写下页面标题的标题标签;2、description标签:页面描述,写下页面描述的描述标签。3、keywords关键词标签:页面关键词,编写页面关键词标签;4、超链接标签:a超链接标签,标记用于向文本添加链接。链接的地址显示在href中,链接文本描述放置在title属性中。一般来说,如果网站有外部链或内部链不参与排名,我们可以使用nofollow,即在a标签中添加rel=“nofollow”;5、img图片标签:img图片标签,IMG标签用于插入图片。图片有四个属性,包括带图片地址的SRC、带文本描述的ALT、带图片的宽度和带图片高度的高度。除了四个标记之外,title属性是图片标题。6、meta标签:meta标签,此代码显示在网站的标题中。需要注意以下编码格式:charset=UTF-8国际编码格式,charset=GB2312中文编码格式。不正确的编码格式会导致编码混乱。7、h标签:例如,h1页面的重要内容或页面的标题、段落标题等,需要了解标签在页面上最多出现一次,建议对一般文章内容页面和文章标题使用标签。8、strong加粗标签:strong加粗标签,强调重要性的粗体标签。除了学习基本的HTML代码知识外,还需要学习div+CSS。如果你知道一点更简单的JS特效,它会更完美。总之,你所学的一切都是你自己的。HTML代码非常简单,很容易开始,我希望能对您有所帮助。
    2022-07-07 25
  • 在HTML中用meta控制360浏览器默认用极速模式 在HTML中用meta控制360浏览器默认用极速模式

    在HTML中用meta控制360浏览器默认用极速模式

    代码示例:浏览器默认内核的指定只需在head标签中添加一行代码即可: 若页面需默认用极速核,增加标签:<meta name="renderer" content="webkit"> 若页面需默认用ie兼容内核,增加标签:<meta name="renderer" content="ie-comp"> 若页面需默认用ie标准内核,增加标签:<meta name="renderer" content="ie-stand"> 极速模式可以连同下面代码一起使用,增加兼容性!<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    2022-07-01 32
  • meta标签name= meta标签name=

    meta标签name="referrer"属性的写法和用法

    HTML<meta>标签name="referrer"属性主要用于控制网页发送给服务器的referrer信息,可以告诉服务器端用户是从哪个页面来到当前网页的。什么是referrer?referrer有“引用页面”或“来源页面”的意思,用来指定当前页面是从哪个页面跳转过来的,也就是说HTTP请求报头中的referrer包含了跳转至当前页面的上一个页面的url地址;比如,你点击A页面中链接到B页面的URL地址,当你从浏览器进入B页面时,会向服务器发送请求,在这个请求的报头中会带上一个referrer,包含了A页面的URL地址;referrer的作用referrer可以告诉你用户是从哪个页面url地址过来的,这样就可以用来统计用户的来源,还可以用于分析用户的兴趣爱好、收集日志、优化缓存等等。如果禁止referrer,可以防止盗链,或也可以绕过防盗链,也能防范一些攻击。referrer的隐患如果网页中,由于涉及隐私和安全问题,防止 referrer 泄漏就显得很重要了。比如,很多情况下我们的url会包含用户的个人信息。因此,有时候,我们需要移除或禁用页面上的referer信息再比如,在后台中使用了referer属性,会导致js和php的一些跳转出现问题,同时,也很有可能会导致一些第三方的统计代码失效,比如cnzz,百度统计,解决方法是不用该属性,或者使用iframe包裹一层,用一个独立的html页面加载统计代码!referrer属性写法在html页面中的<head>头部区域用meta标签添加referrer属性 <meta name="referrer" content="属性值"> content后面的“属性值”,常见有以下几种:no-referrer:任何情况下都不发送Referrer信息;no-referrer-when-downgrade:仅当协议降级(如从HTTPS页面跳转到HTTP页面)时不发送Referrer信息。是大部分浏览器默认策略。origin:发送只包含host部分的referrer信息,也就是只包含了协议和域名的url,不包含域名后面部分,比如,来源网页url是https://www.zhansanjie.com/1.html,但referrer值只包含http://www.zhansanjie.com;origin-when-cross-origin:仅在发生跨域访问时,发送只包含host的Referer信息,但在同域下还是完整的,而只有协议、域名和端口都一致时,浏览器才认为是同域。unsafe-url:全部都发送Referrer信息,是最宽松,也是最不安全的策略温馨提示:1、referrer属性的<meta> 标签需要放在 <head> ...</head> 之间,如果出现的位置不对就会被忽略。2、如果没有content 属性,或者 content 属性值为空,也会被忽略。3、如果 content 属性后面的取值不合法,浏览器会自动选择 no-referrer 。referrer属性用法在html网页文档中,有两种方式,可以添加发送请求的referrer信息,分别是<meta>标签法和单个连接标签法1、<meta>标签法(针对整个页面)这种方法是针对属于当前网页中的所有链接,从任何一个链接跳转到其他页面,都会带上referrer信息。如果想要在任何情况下,当前页面发送的请求不携带referrer信息,就这样写: <meta name="referrer" content="no-referrer"> 如果想要在任何情况下,当前页面发送的请求包含referrer信息,就这样写: <meta name="referrer" content="unsafe-url"> 这种情况下,如果当前页面使用了 https 协议,而要加载的资源使用的是 http 协议,加载资源的请求头中也会携带 referer。2、单个链接标签法这种方法可以只针对网页中具体的某一个或多个链接单独设置referrer,常常运用在<a>、<img>、<area>、<iframe>、<link>标签上。    <a rel="no-referrer" href="http://www.zhansanjie.com" />站三界导航</a>    <img rel="no-referrer" src="logo.png" />值得注意的是:这种单个链接标签法,只对该标签中链接有效,且referrer的属性值,只有三个,分别是:no-referrer、origin、unsafe-url;而且,单个链接标签法设置referrer的优先级比<meta>标签法要高。另外,<a>、<area>、<link>标签中的单个链接,还可以使用rel="noreferrer"属性达到和no-referrer同样的效果,写法如下: <a rel="noreferrer" href="http://www.zhansanjie.com" />站三界导航</a> 同样的,该方法使用rel="noreferrer"属性设置referrer的优先级比<meta>标签法要高。
    2022-06-27 62
  • HTML5的 meta 标签 使用汇总 HTML5的 meta 标签 使用汇总

    HTML5的 meta 标签 使用汇总

    Meat对象代表HTML的一个元素,提供HTML元素的元信息,比如描述、关键字、刷新频率。对象属性:content 设置或返回元素的content属性httpEquiv 把content属性连接到一个HTTP头部name 把content属性连接到某个名称scheme 设置或返回用于解释content属性的格式百度主页阿里主页美团主页滴滴主页字节跳动淘宝主页京东主页华为主页微软官网百度主页 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta content="always" name="referrer"> <meta name="theme-color" content="#2932e1"> <meta name="description" content="全球最大的中文搜索引擎、致力于让网民更便捷地获取信息,找到所求。百度超过千亿的中文网页数据库,可以瞬间找到相关的搜索结果。"> 阿里主页 <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="ahot-aplus" content="1"> <meta name="aplus-rate-ahot" content="0.5"> <title>阿里云-上云就上阿里云</title> <!-- TRACK 埋点--> <meta name="data-spm" content="5176" /> <meta name="description" content="230万用户正享用阿里云提供的云服务器、云数据库、云存储、CDN、大数据等服务,7x24小时售后支持,专业快速备案,助企业无忧上云。"> <meta name="keyword" content="阿里云,云数据库,云服务器,云计算,域名注册"> <!-- SHARE 分享--> <meta property="og:title" content="阿里云-上云就上阿里云" /> <meta property="og:description" content="230万用户正享用阿里云提供的云服务器、云数据库、云存储、CDN、大数据等服务,7x24小时售后支持,专业快速备案,助企业无忧上云。" /> <meta property="og:image" content="https://img.alicdn.com/tfs/TB1qNVdXlGw3KVjSZFDXXXWEpXa-620-620.png" /> 美团主页 <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>美团网-美食_团购_外卖_酒店_旅游_电影票_吃喝玩乐全都有</title> <meta name="description" content="美团网:美食攻略,外卖网上订餐,酒店预订,旅游团购,飞机票火车票,电影票,ktv团购吃喝玩乐全都有!店铺信息查询,商家评分/评价一站式生活服务网站"> <meta name="keywords" content="美食,团购,外卖,网上订餐,酒店,旅游,电影票,火车票,飞机票"> <meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="address=no"> <meta name="lx:category" content="group"> <meta name="lx:cid" content=""> <meta name="lx:appnm" content="mtpc"> <meta name="lx:autopv" content="off"> 滴滴官网 <meta charset="utf-8"> <meta name="baidu-site-verification" content="9YtFhXJtQL" /> <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"> <meta name="theme-color" content="#000000"> <link rel="manifest" href="https://website.didiglobal.com/manifest.json"> <link rel="shortcut icon" href="https://website.didiglobal.com/DDlogo.ico"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src 'self' https://common.diditaxi.com.cn https://view.officeapps.live.com "> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="Cache-Control:no-cache" content="max-age=0"> <meta http-equiv="expires" content="0"> <meta name="apple-mobile-web-app-capable" content="yes"> //从桌面icon启动IOS Safari是否进入全屏状态(APP模式) <meta name="renderer" content="webkit"> //双核浏览的渲染方式设定 <meta name="HandheldFriendly" content="true"> // 手持设备优化 <meta name="screen-orientation" content="portrait"> //uc强制竖屏 <meta name="x5-orientation" content="portrait"> //QQ强制竖屏 <meta name="full-screen" content="yes"> // 强制全屏 <meta name="x5-fullscreen" content="true"> //QQ强制全屏 <meta name="browsermode" content="application"> //浏览模式 <meta name="x5-page-mode" content="app"> //QQ应用模式 <meta name="msapplication-tap-highlight" content="no"> //移动端winphone系统a、input标签被点击时产生的半透明灰色背景是否去掉,点击无高光 <meta name="format-detection" content="telephone=no"> //指定是否将网页内容中的手机号码显示为拨号的超链接。 <meta name="apple-touch-fullscreen" content="yes"> // apple 触摸进入,是否进入全屏 <title>首页-滴滴官网</title> <meta name="description" content="滴滴出行,滴滴打车,滴滴打车官网 "> <meta name="Keywords" ontent="滴滴出行,滴滴打车,滴滴打车官网,滴滴打车官方网站 "> 字节跳动 <meta charSet="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <meta name="applicable-device" content="pc,mobile" /> //应用设备 <meta name="robots" content="index, follow" /> //搜索引擎抓取 <meta name="google" content="notranslate" /> //谷歌翻译 <meta name="format-detection" content="telephone=no" /> //指定是否将网页内容中的手机号码显示为拨号的超链接。 淘宝主页 <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="renderer" content="webkit" /> <title>淘宝网 - 淘!我喜欢</title> <meta name="spm-id" content="a21bo" /> <meta name="description" content="淘宝网 - 亚洲较大的网上交易平台,提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品,同时提供担保交易(先收货后付款)等安全交易保障服务,并由商家提供退货承诺、破损补寄等消费者保障服务,让你安心享受网上购物乐趣!" /> <meta name="aplus-xplug" content="NONE"> <meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺" /> 京东官网 <meta charset="utf8" version='1'/> <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物!</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"/> <meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!"/> <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/> 华为官网 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-cn" /> <title>【华为商城超级618】</title> <meta name="keywords" content="华为商城、618、华为商城618、华为618、荣耀618、Vmall、 华为、荣耀、5G、5G手机、华为5G、荣耀5G、华为5G手机、荣耀5G手机、折叠屏、华为MateXs、华为Mate30、华为Mate30 Pro、华为P40、华为P40 Pro、畅享Z、n华为nova 7、华为nova 7Pro、华为P30、华为P30 Pro、华为 Mate 20、华为P20、华为 Mate10、华为保时捷、HUAWEI Mate RS 保时捷设计、华为nova 5、华为nova 5Pro、华为nova 5i、nova 5iPro、nova 5Z、华为nova 4、华为nova 4e、华为畅享 10Plus、华为畅享 10、华为畅享 10S、华为畅享 9、华为畅享 9e、华为畅享 9s、华为畅享9 Plus、华为畅享MAX、华为麦芒8、华为笔记本、华为平板、华为智慧屏、华为手表、华为手环、华为穿戴、华为体脂秤、华为官网、华为、华为手机、华为手机官网、华为商城官网、华为商城官方、荣耀V30、荣耀V30PRO、荣耀20、荣耀20、荣耀20PRO、荣耀9X、荣耀9X PRO、荣耀V20、荣耀20青春、荣耀20S、荣耀20i、荣耀Magic2、荣耀Play3、荣耀10青春、荣耀NOTE 10、荣耀8X、荣耀智慧屏、荣耀MagicBook、智慧屏、荣耀笔记本、荣耀商城、荣耀官网、荣耀商城、荣耀手机、荣耀手环、荣耀手表" /> <meta name="description" content="HUAWEI 华为商城是华为公司旗下自营电商平台,提供华为5G手机(华为P40系列、Mate30系列、荣耀30系列、荣耀V30系列、荣耀30S等)、华为笔记本、华为平板、华为穿戴、华为智慧屏、华为配件、华为智能家居等全场景智慧生活产品和服务" /> <meta name="mobile-agent" content="format=xhtml;url=http://m.vmall.com/"> //移动端代理 微软官网 <meta charset="UTF-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Microsoft - Official Home Page</title> <meta name="twitter:url" content="https://www.microsoft.com/zh-cn" /> <meta property="og:url" content="https://www.microsoft.com/zh-cn" /> <meta name="twitter:title" content="Microsoft - Official Home Page" /> <meta property="og:title" content="Microsoft - Official Home Page" /> <meta name="twitter:description" content="At Microsoft our mission and values are to help people and businesses throughout the world realize their full potential." /> <meta property="og:description" content="At Microsoft our mission and values are to help people and businesses throughout the world realize their full potential." /> <meta name="twitter:card" content="summary" /> <meta property="og:type" content="website" /> 总结 <meta> 有2个属性 http-equiv 和 name http-equiv 1. Content-Type 设定网页字符集,说明网页制作所用语言和文字,浏览器会据此调用。 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> //旧的HTML,不推荐 <meta charset="UTF-8" > //HTML5设定网页字符集的方式 2. X-UA-Compatible 告知浏览器以何种方式渲染当前页面 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> //优先使用IE最新版本和Chrome 3. pragma Cache-Control expires 各种http强缓存方式,优先级p>c>e <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Cache-Control:no-cache" content="max-age=0"> //不缓存 <meta http-equiv="Cache-Control" content="max-age=7200"> // 7200s后缓存内容失效 <meta http-equiv="expires" contect="Mon,12 May 2001 00:20:00 GMT"> //网页到期时间,GMT格式,过期后必须到服务器上重新调用 <meta http-equiv="Pragma" contect="no-cache"> //禁止浏览器从本地缓存中调取信息,一旦离开页面就无法从Cache中再调用 4. refresh 让网页在一定时间内刷新,或者一定时间后跳转到其他页面 <meta http-equiv="refresh" content="30" > //30s后刷新自己 <meta http-equiv="Refresh" contect="n;url=http://yourlink">定时让网页在指定的时间n内,跳转到页面http://yourlink; 5. Cache-Control 避免百度等浏览器打开网页时可能对其进行转码,比如 贴广告等 <meta http-equiv="Cache-Control" content="no-siteapp" /> //先发送请求,与服务器确认该资源是否被更改,未被更改则使用缓存 6. Content-Security-Policy 内容安全策略,指定浏览器智能加载content中的js代码,其他所有均拒绝 <meta http-equiv="Content-Security-Policy" content="default-src https://cdn.example.net; child-src 'none'; object-src 'none'"> base-uri: 用于限制可在页面的 <base> 元素中显示的网址。 child-src: 用于列出适用于工作线程和嵌入的帧内容的网址。例如:child-src https://youtube.com 将启用来自 YouTube(而非其他来源)的嵌入视频。 使用此指令替代已弃用的 frame-src 指令。 connect-src: 用于限制可(通过 XHR、WebSockets 和 EventSource)连接的来源。 font-src: 用于指定可提供网页字体的来源。Google 的网页字体可通过 font-src https://themes.googleusercontent.com 启用。 form-action: 用于列出可从 <form> 标记提交的有效端点。 frame-ancestors: 用于指定可嵌入当前页面的来源。此指令适用于 <frame>、<iframe>、<embed> 和 <applet> 标记。此指令不能在 <meta> 标记中使用,并仅适用于非 HTML 资源。 frame-src: 已弃用。请改用 child-src。 img-src: 用于定义可从中加载图像的来源。 media-src: 用于限制允许传输视频和音频的来源。 object-src: 可对 Flash 和其他插件进行控制。 plugin-types: 用于限制页面可以调用的插件种类。 指定一个 default-src 指令替换大部分指令的默认行为: <meta http-equiv="Content-Security-Policy" content="default-src 'self' https://common.diditaxi.com.cn https://view.officeapps.live.com "> 其他指令服从default-scr的规则,还有4个关键字: none 表示不执行任何匹配。 self'表示与当前来源(而不是其子域)匹配。 unsafe-inline表示允许使用内联 JavaScript 和 CSS。 unsafe-eval 表示允许使用类似 eval 的 text-to-JavaScript 机制。 7. date 原始服务器消息发出的时间 <meta http-equiv="date" content="Wed, 16 Feb 2011 22:34:13 GMT"> 8. location 用来重定向接收方到非请求URL的位置来完成请求或标识新的资源 <meta http-equiv="location" content="URL=http://www.runoob.com"> name 1. keywords 告诉搜索引擎网页关键字 <meta name="Keywords" ontent="滴滴出行,滴滴打车,滴滴打车官网,滴滴打车官方网站 "> 2. description 网站的描述,告诉搜索引擎网站的主要内容 <meta name="description" content="滴滴出行,滴滴打车,滴滴打车官网 "> 3. author 标注作者 4. viewport 用于移动端显示页面,将网页宽度设置为视口宽度,设置缩放比例,是否允许用户缩放等。 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> //用户不能缩放 <meta name="viewport" content="width=device-width, initial-scale=1 shrink-to-fit=no"> //网页宽度自适应手机屏幕宽度 但在iOS9中要想起作用,得加上"shrink-to-fit=no" 5. renderer:双核浏览器的渲染方式,用于指定双核浏览器默认以何种方式渲染页面 <meta name="renderer" content="webkit/ie-comp/ie-stand" /> //默认webkit内核/默认IE兼容模式/默认IE标准模式 6. referrer 引用页信息 4个参数: never:删除http head中的referer; default:如果当前页面使用的是https协议,而正要加载资源使用的是普通的http协议,则将http header中额referer置为空; origin:只发送origin部分; always:不改变http header中的referer的值; 百度首页的 <meta content="always" name="referrer"> A页面值为always的时候,B页面能取得他是从哪个页面来的。 7. theme-color 浏览器地址栏变色 百度首页 <meta name="theme-color" content="#2932e1"> 8. Generator <meta name="Generator" contect="">用以说明生成工具(如Microsoft FrontPage 4.0)等; 9. <meta name="Robots" contect= "all|none|index|noindex|follow|nofollow"> all:文件将被检索,且页面上的链接可以被查询; none:文件将不被检索,且页面上的链接不可以被查询; index:文件将被检索; follow:页面上的链接可以被查询; noindex:文件将不被检索,但页面上的链接可以被查询; nofollow:文件将不被检索,页面上的链接可以被查询。 10. revisit-after (重访) 通知浏览器多少天访问一次 <meta name="revisit-after" CONTENT="7 days" > 11. coperight 版权 <meta name="coprright" content="版权"> name 的分类汇总 1. <!-- SEO --> <meta name="keywords" content="your, tags"/> <meta name="description" content="150 words"/> <meta name="subject" content="your website's subject"> <meta name="copyright"content="company name"> <meta name="language" content="ES"> <meta name="robots" content="index,follow" /> <meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm" /> <meta name="abstract" content=""> <meta name="topic" content=""> <meta name="summary" content=""> <meta name="Classification" content="Business"> <meta name="author" content="name, email@hotmail.com"> <meta name="designer" content=""> <meta name="copyright" content=""> <meta name="reply-to" content="email@hotmail.com"> <meta name="owner" content=""> <meta name="url" content="http://www.websiteaddrress.com"> <meta name="identifier-URL" content="http://www.websiteaddress.com"> <meta name="directory" content="submission"> <meta name="category" content=""> <meta name="coverage" content="Worldwide"> <meta name="distribution" content="Global"> <meta name="rating" content="General"> <meta name="revisit-after" content="7 days"> <meta http-equiv="Expires" content="0"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> 2. 为提高传播效率,通过Open Graph(开放图景协议)把其他社交网站建构的网络给连接起来 <meta name="og:title" content="The Rock"/> <meta name="og:type" content="movie"/> <meta name="og:url" content="http://www.imdb.com/title/tt0117500/"/> <meta name="og:image" content="http://ia.media-imdb.com/rock.jpg"/> <meta name="og:site_name" content="IMDb"/> <meta name="og:description" content="A group of U.S. Marines, under command of..."/> <meta name="fb:page_id" content="43929265776" /> <meta name="og:email" content="me@example.com"/> <meta name="og:phone_number" content="650-123-4567"/> <meta name="og:fax_number" content="+1-415-123-4567"/> <meta name="og:latitude" content="37.416343"/> <meta name="og:longitude" content="-122.153013"/> <meta name="og:street-address" content="1601 S California Ave"/> <meta name="og:locality" content="Palo Alto"/> <meta name="og:region" content="CA"/> <meta name="og:postal-code" content="94304"/> <meta name="og:country-name" content="USA"/> <meta property="og:type" content="game.achievement"/> <meta property="og:points" content="POINTS_FOR_ACHIEVEMENT"/> <meta property="og:video" content="http://example.com/awesome.swf" /> <meta property="og:video:height" content="640" /> <meta property="og:video:width" content="385" /> <meta property="og:video:type" content="application/x-shockwave-flash" /> <meta property="og:video" content="http://example.com/html5.mp4" /> <meta property="og:video:type" content="video/mp4" /> <meta property="og:video" content="http://example.com/fallback.vid" /> <meta property="og:video:type" content="text/html" /> <meta property="og:audio" content="http://example.com/amazing.mp3" /> <meta property="og:audio:title" content="Amazing Song" /> <meta property="og:audio:artist" content="Amazing Band" /> <meta property="og:audio:album" content="Amazing Album" /> <meta property="og:audio:type" content="application/mp3" /> 3. 公司/服务 标签 <meta name="microid" content="mailto+http:sha1:e6058ed7fca4a1921cq91d7f1f3b8736cd3cc1g7" /> APPLE META TAGS:: <!-- 从桌面icon启动IOS Safari是否进入全屏状态(APP模式) --> <meta name="apple-mobile-web-app-capable" content="yes"> <!-- 添加到主屏幕“后,全屏显示 --> <meta name="apple-touch-fullscreen" content="yes" > <!-- 指定状态栏的颜色 --> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- ios设备上禁止将数字识别为可点击的telephone link --> <meta name="format-detection" content="telephone=no"> <!-- 页面CSS计算时使用宽度为320,初始缩放比例2.3, 不允许用户缩放, 最大缩放因子为1 --> <meta name="viewport" content="width = 320, initial-scale = 2.3, user-scalable = no, maximum-scale=1 "> <!-- 页面CSS计算时使用的宽度根据设备给定值自适应 --> <meta name= "viewport" content = "width = device-width"> INTERNET EXPLORER META TAGS 网络扩展元标记标签: <meta http-equiv="Page-Enter" content="RevealTrans(Duration=2.0,Transition=2)" /> <meta http-equiv="Page-Exit" content="RevealTrans(Duration=3.0,Transition=12)" /> <meta name="mssmarttagspreventparsing" content="true"> <!-- 告诉IE浏览器以什么模式展示网页 --> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta name="msapplication-starturl" content="http://blog.reybango.com/about/"/> <meta name="msapplication-window" content="width=800;height=600"/> <meta name="msapplication-navbutton-color" content="red"/> <meta name="application-name" content="Rey Bango Front-end Developer"/> <meta name="msapplication-tooltip" content="Launch Rey Bango's Blog"/> <meta name="msapplication-task" content="name=About;action-uri=/about/;icon-uri=/images/about.ico" /> <meta name="msapplication-task" content="name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico" /> <meta name="msapplication-task" content="name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico" /> <meta name="msapplication-task" content="name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico" /> <!-- Tab标签icon --> <link rel="shortcut icon" href="/images/favicon.ico" /> 移动端头部标签 ### <meta name=”description” content=”不超过150个字符”/> 页面描述 <meta name=”keywords” content=””/> 页面关键词 <meta name=”author” content=”name, email@gmail.com”/> 网页作者 <meta name=”robots” content=”index,follow”/> 搜索引擎抓取 <meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> 为移动设备添加 viewport <meta name=”apple-mobile-web-app-title” content=”标题”> iOS 设备 begin <meta name=”apple-mobile-web-app-capable” content=”yes”/> 添加到主屏后的标题(iOS 6 新增) 是否启用 WebApp 全屏模式,删除苹果默认的工具栏和菜单栏 <meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”> 添加智能 App 广告条 Smart App Banner(iOS 6+ Safari) <meta name=”apple-mobile-web-app-status-bar-style” content=”black”/> 设置苹果工具栏颜色 <meta name=”format-detection” content=”telphone=no, email=no”/> 禁止将网页上的数字变为 telphone 及 email 的link <meta name=”renderer” content=”webkit”> 启用360浏览器的极速模式(webkit) <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> 避免IE使用兼容模式 <meta http-equiv=”Cache-Control” content=”no-siteapp” /> 不让百度转码 <meta name=”HandheldFriendly” content=”true”> 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 <meta name=”MobileOptimized” content=”320″> 微软的老式浏览器 <meta name=”screen-orientation” content=”portrait”> uc强制竖屏 <meta name=”x5-orientation” content=”portrait”> QQ强制竖屏 <meta name=”full-screen” content=”yes”> UC强制全屏 <meta name=”x5-fullscreen” content=”true”> QQ强制全屏 <meta name=”browsermode” content=”application”> UC应用模式 <meta name=”x5-page-mode” content=”app”> QQ应用模式 <meta name=”msapplication-tap-highlight” content=”no”> windows phone 点击无高光
    2022-06-27 21