简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)
Home > Web Front-end > HTML Tutorial > body text

[Transfer] What you don't know about the HTML header tag

WBOY
Release： 2016-10-22 00:00:10
Original
8193 people have browsed it

HTML has a lot of header content, including header information for SEO and header information for mobile devices. Moreover, each browser core and each domestic browser manufacturer have their own tag elements, which have many differences. Mobile work has increasingly become an important part of front-end work. In addition to ordinary project development, the HTML header tag function, especially the functional attributes of meta, link and other tags, is very important. Here is a list of parts, so that everyone can understand the meaning of each tag and corresponding attributes, and write head tags that meet your needs, which can effectively enhance the page. Availability.

Note: Last year, I compiled the html5 head tags that mobile front-ends must know. With time and browser manufacturers’ upgrades, it seems a bit outdated now. So I reorganized it. Added new content, some outdated tips, and added some instructions for some desktop browsers.

Basic HTML header tags

The following are the basic header elements of HTML:

doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    
    <title>页面标题title>
    ...
head>
Copy after login

Among them

<meta http-equiv="x-ua-compatible" content="ie=edge">
Copy after login

During desktop development, you can let IE browser render the page in the latest mode. For details, please see the Internet Explorer browser section of this article.
If your page is determined to only run in desktop browsers, then 

<meta name="viewport" content="width=device-width, initial-scale=1">
Copy after login

Can also be omitted.

DOCTYPE

DOCTYPE (Document Type), this declaration is located at the forefront of the document, before the html tag. This tag tells the browser which HTML or XHTML specification the document uses.

Use HTML5 doctype, case-insensitive. 

DOCTYPE html>
Copy after login

charset

Declare the character encoding used by the document, 

<meta charset="utf-8">
Copy after login

Before html5, the web page would read like this: 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Copy after login

These two are equivalent, you can read more specifically: vs , so it is recommended to use Short and easy to remember.

lang attribute

More standard way of writing lang attribute http://zhi.hu/XyIa

Simplified Chinese

<html lang="zh-cmn-Hans">
Copy after login

Traditional Chinese

<html lang="zh-cmn-Hant">
Copy after login

In rare cases, it is necessary to add area codes, usually to emphasize the differences in Chinese usage in different regions, for example: 

<p lang="zh-cmn-Hans">
<strong lang="zh-cmn-Hans-CN">菠萝strong>和<strong lang="zh-cmn-Hant-TW">鳳梨strong>其实是同一种水果。只是大陆和台湾称谓不同，且新加坡、马来西亚一带的称谓也是不同的，称之为<strong lang="zh-cmn-Hans-SG">黄梨strong>。
p>
Copy after login

Why lang="zh-cmn-Hans" instead of what we usually write lang="zh-CN" , please read further: Should the statement at the head of the page be lang="zh" or lang =”zh-cn”.

Meta tag

The

meta tag is an auxiliary tag in the head of HTML. It is located between the and </code> tags in the head of the HTML document. It provides information invisible to the user. Although this part of information is invisible to users, it is very powerful, especially in today's front-end development work. Setting appropriate meta tags can greatly improve the usability of website pages. </p> <p>In desktop development, the meta tag is usually used to define page themes for search engine optimization (SEO) and robots, or to define cookies on the user's browser; it can be used to identify the author, set the page format, and mark the content summary and Keywords; you can also set the page to refresh itself based on intervals you define, set RASC content levels, and more. </p> <p>In mobile development, in addition to the functional settings in the desktop, meta tags also include practical settings such as viewport settings, icons added to the home screen, tab colors, etc. For details, please see the detailed introduction later. </p> <h4>meta tag classification</h4> <p>meta tags can be divided into two parts according to different attributes: http-equiv and name attributes. </p> <p>http-equiv: It is equivalent to the file header function of http. It can return some useful information to the browser to help the browser display the web page content correctly. <br>name attribute: mainly used to describe web pages, and the corresponding attribute value is content. The content in content is mainly convenient for browsers, search engines and other robots to identify, etc. </p> <h4>Recommended meta tags</h4> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #008000;"><!--</span><span style="color: #008000;"> 设置文档的字符编码 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="utf-8"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="x-ua-compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="ie=edge"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, initial-scale=1, shrink-to-fit=no"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 以上 3 个 meta 标签 *必须* 放在 head 的最前面；其他任何的 head 内容必须在这些标签的 *后面* </span><span style="color: #008000;">--></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 允许控制资源的过度加载 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="Content-Security-Policy"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="default-src 'self'"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 尽早地放置在文档中 </span><span style="color: #008000;">--></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 仅应用于该标签下的内容 </span><span style="color: #008000;">--></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> Web 应用的名称（仅当网站被用作为一个应用时才使用）</span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="application-name"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="应用名称"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 针对页面的简短描述（限制 150 字符）</span><span style="color: #008000;">--></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 在*某些*情况下，该描述是被用作搜索结果展示片段的一部分 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="description"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="一个页面描述"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 控制搜索引擎的抓取和索引行为 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="robots"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="index,follow,noodp"</span><span style="color: #0000ff;">></span><span style="color: #008000;"><!--</span><span style="color: #008000;"> 所有的搜索引擎 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="googlebot"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="index,follow"</span><span style="color: #0000ff;">></span><span style="color: #008000;"><!--</span><span style="color: #008000;"> 仅对 Google 有效 </span><span style="color: #008000;">--></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 告诉 Google 不显示网站链接的搜索框 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="google"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="nositelinkssearchbox"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 告诉 Google 不提供此页面的翻译 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="google"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="notranslate"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 验证 Google 搜索控制台的所有权 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="google-site-verification"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="verification_token"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 用来命名软件或用于构建网页（如 - WordPress、Dreamweaver）</span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="generator"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="program"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 关于你的网站主题的简短描述 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="subject"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="你的网站主题"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 非常简短（少于 10 个字）的描述。主要用于学术论文。</span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="abstract"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 完整的域名或网址 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="url"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="https://example.com/"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="directory"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="submission"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 基于网站内容给出一般的年龄分级 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="rating"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="General"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 允许控制 referrer 信息如何传递 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="referrer"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="never"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 禁用自动检测和格式化可能的电话号码 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="format-detection"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="telephone=no"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 通过设置为 “off” 完全退出 DNS 预取 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="x-dns-prefetch-control"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="off"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 在客户端存储 cookie，web 浏览器的客户端识别 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="set-cookie"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="name=value; expires=date; path=url"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 指定要显示在一个特定框架中的页面 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="Window-Target"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="_value"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 地理标签 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="ICBM"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="latitude, longitude"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="geo.position"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="latitude;longitude"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 国家代码 (ISO 3166-1): 强制性, 州代码 (ISO 3166-2): 可选; 如 content="US" / content="US-NY" </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="geo.region"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="country[-state]"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 如 content="New York City" </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="geo.placename"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="city/town"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> <p>For related detailed instructions, please check: </p> <ul> <li>Meta tags recognized by Google</li> <li>WHATWG Wiki: Meta extension</li> <li>ICBM – Wikipedia</li> <li>GeoTagging – Wikipedia</li> </ul> <h4>Add viewport for mobile devices</h4> <p><code>viewport</code> can make the layout display better on mobile browsers. I usually write </p> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name </span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content </span><span style="color: #0000ff;">="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz </span><span style="color: #008000;">--></span></pre><div class="contentsignin">Copy after login</div></div> </div> <p><code>width=device-width</code> 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://bigc.at/ios-webapp-viewport-meta.orz)</p> <p>content 参数：</p> <ul> <li>width viewport 宽度(数值/device-width)</li> <li>height viewport 高度(数值/device-height)</li> <li>initial-scale 初始缩放比例</li> <li>maximum-scale 最大缩放比例</li> <li>minimum-scale 最小缩放比例</li> <li>user-scalable 是否允许用户缩放(yes/no)</li> <li>minimal-ui iOS 7.1 beta 2 中新增属性（注意：iOS8 中已经删除），可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写： <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, initial-scale=1, minimal-ui"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> </li> </ul> <p>而如果你的网站不是响应式的，请不要使用 initial-scale 或者禁用缩放。</p> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width,user-scalable=yes"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> <p>相关链接：非响应式设计的viewport</p> <p>适配 iPhone 6 和 iPhone 6plus 则需要写：</p> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=375"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=414"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> <p>大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px，iPhone 6 上却是 375px，大部分 5.5 寸安卓机器（比如说三星 Note）的 viewport 宽为 400，iPhone 6 plus 上是 414px。</p> <h4>SEO 优化部分</h4> <ul> <li>页面标题<code><title></code>标签(head 头部必须) <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>your title<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> </li> <li>页面关键词 keywords <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="keywords"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="your keywords"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> </li> <li>页面描述内容 description <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="description"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="your description"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> </li> <li>定义网页作者 author <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="author"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="author,email address"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> </li> <li>定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。 <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="robots"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="index,follow"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> </li> </ul> <p>相关链接：WEB1038 – 标记包含无效的值</p> <h4>百度禁止转码</h4> <p>通过百度手机打开网页时，百度可能会对你的网页进行转码，脱下你的衣服，往你的身上贴狗皮膏药的广告，为此可在 head 内添加</p> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="Cache-Control"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="no-siteapp"</span> <span style="color: #0000ff;">/></span></pre><div class="contentsignin">Copy after login</div></div> </div> <p>相关链接：SiteApp 转码声明</p> <h4>不推荐的 meta 属性</h4> <p>下面是不推荐使用的 meta 属性，因为它们采用率低，或已弃用：</p> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #008000;"><!--</span><span style="color: #008000;"> 用于声明文档语言，但支持得不是很好。最好使用 <html lang=""> </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="language"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> Google 无视 & Bing 认为垃圾的指示器 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="keywords"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="你,关键字,在这里,不使用空格,而用逗号进行分隔"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 目前没有在任何搜索引擎中使用过的声明 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="revised"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="Sunday, July 18th, 2010, 5:15 pm"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 为垃圾邮件机器人收获 email 地址提供了一种简单的方式 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="reply-to"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="email@example.com"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 最好使用 <link rel="author"> 或 humans.txt 文件 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="author"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="name, email@example.com"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="designer"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="owner"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 告诉搜索机器人一段时间后重新访问该网页。这不支持，因为大多数搜索引擎使用随机时间间隔来重新抓取网页 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="revisit-after"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="7 days"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 在一段时间后将用户重定向到新的 URL </span><span style="color: #008000;">--></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> W3C 建议不要使用该标签。Google 建议使用服务器端的 301 重定向。</span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="refresh"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="300; url=https://example.com/"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 描述网站的主题 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="topic"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 公司概要或网站目的 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="summary"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 一个已废弃的标签，和关键词 meta 标签的作用相同 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="classification"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="business"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 是否是相同的 URL，年代久远且不支持 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="identifier-URL"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="https://example.com/"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 和关键词标签类似的功能 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="category"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 确保你的网站在所有国家和语言中都能显示 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="coverage"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="Worldwide"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 和 coverage 标签相同 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="distribution"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="Global"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 控制在互联网上哪些用户可以访问 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="Pics-label"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="value"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 缓存控制 </span><span style="color: #008000;">--></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 最好在服务器端配置缓存控制 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="Expires"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="0"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="Pragma"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="no-cache"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="Cache-Control"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="no-cache"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> <h3>link 标签</h3> <p>说到 link 标签，估计大家的第一反应和我一样，就是引入外部CSS样式文件的，不错，这是 link 标签最最常用的功能。不过它还有很多别的用处，比如这是浏览器 favicon 图标，touch图标等等。</p> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #008000;"><!--</span><span style="color: #008000;"> 有助于防止出现内容重复的问题 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="canonical"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://example.com/2010/06/9-things-to-do-before-entering-social-media.html"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 之前用于包含 icon 链接，但已被废弃并不再使用 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="shortlink"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://example.com/?p=42"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 链接到当前文档的一个 AMP HTML 版本 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="amphtml"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://example.com/path/to/amp-version.html"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 表明一个 CSS 样式表 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://example.com/styles.css"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 链接到一个指定 Web 应用程序“安装”证书的 JSON 文件 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="manifest"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="manifest.json"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 链接到文档的作者 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="author"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="humans.txt"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 指向一个适用于链接内容的版权申明 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="copyright"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="copyright.html"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 给出可能的你的另一种语言的文档位置参考 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="alternate"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://es.example.com/"</span><span style="color: #ff0000;"> hreflang</span><span style="color: #0000ff;">="es"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 提供了关于作者或其他人的信息 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="me"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://google.com/profiles/thenextweb"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text/html"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="me"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="mailto:name@example.com"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="me"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="sms:+15035550125"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 链接到一个文档，包含当前文档的一个归档链接 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="archives"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://example.com/2003/05/"</span><span style="color: #ff0000;"> title</span><span style="color: #0000ff;">="May 2003"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 链接到层次结构中的顶级资源 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="index"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://example.com/"</span><span style="color: #ff0000;"> title</span><span style="color: #0000ff;">="DeWitt Clinton"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 给出该文档的起点 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="start"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://example.com/photos/pattern_recognition_1_about/"</span><span style="color: #ff0000;"> title</span><span style="color: #0000ff;">="Pattern Recognition 1"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 引导当前文档的前述资源序列 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="prev"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://example.com/opensearch/opensearch-and-openid-a-sure-way-to-get-my-attention/"</span><span style="color: #ff0000;"> title</span><span style="color: #0000ff;">="OpenSearch and OpenID? A sure way to get my attention."</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 给出一个自我参考 - 当文档有多个可能的参考时非常有用 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="self"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="application/atom+xml"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://example.com/atomFeed.php?page=3"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 分别是在一系列文件中的第一个、下一个、上一个和最后一个 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="first"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://example.com/atomFeed.php"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="next"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://example.com/atomFeed.php?page=4"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="previous"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://example.com/atomFeed.php?page=2"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="last"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://example.com/atomFeed.php?page=147"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 当使用第三方服务来维护 blog 时使用 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="EditURI"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://example.com/xmlrpc.php?rsd"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="application/rsd+xml"</span><span style="color: #ff0000;"> title</span><span style="color: #0000ff;">="RSD"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 当另一个 WordPress 博客链接到你的 WordPress 博客或文章时形成一个自动化的评论 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="pingback"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://example.com/xmlrpc.php"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 当你在自己的页面上链接到一个 url 时通知它 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="webmention"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://example.com/webmention"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 加载一个外部的 HTML 文件到当前 HTML 文件中 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="import"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="component.html"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 打开搜索 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="search"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="/open-search.xml"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="application/opensearchdescription+xml"</span><span style="color: #ff0000;"> title</span><span style="color: #0000ff;">="Search Title"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> Feeds </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="alternate"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://feeds.feedburner.com/example"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="application/rss+xml"</span><span style="color: #ff0000;"> title</span><span style="color: #0000ff;">="RSS"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="alternate"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://example.com/feed.atom"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="application/atom+xml"</span><span style="color: #ff0000;"> title</span><span style="color: #0000ff;">="Atom 0.3"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 预取，预载，预浏览 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="dns-prefetch"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="//example.com/"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="preconnect"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://www.example.com/"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="prefetch"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://www.example.com/"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="prerender"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://example.com/"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="preload"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="image.png"</span><span style="color: #ff0000;"> as</span><span style="color: #0000ff;">="image"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 更多信息：https://css-tricks.com/prefetching-preloading-prebrowsing/ </span><span style="color: #008000;">--></span></pre><div class="contentsignin">Copy after login</div></div> </div> <p>具体说明查看：https://css-tricks.com/prefetching-preloading-prebrowsing/</p> <h4>rss订阅</h4> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="alternate"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="application/rss+xml"</span><span style="color: #ff0000;"> title</span><span style="color: #0000ff;">="RSS"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="/rss.xml"</span> <span style="color: #0000ff;">/></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 添加 RSS 订阅 </span><span style="color: #008000;">--></span></pre><div class="contentsignin">Copy after login</div></div> </div> <h4>不推荐的link标签</h4> <p>以下是不推荐使用的链接关系：</p> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="shortcut icon"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="path/to/favicon.ico"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 没有用的, 专有的和错误的, 详见 https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/Y_2eFRh9BOs/gULYapoRBwAJ </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="subresource"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="styles.css"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> <p>具体说明查看：https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/Y_2eFRh9BOs/gULYapoRBwAJ</p> <h4>favicon 图标</h4> <p>IE 11, Chrome, Firefox, Safari, Opera支持<code><link></code>形式设置：</p> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="icon"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="path/to/favicon-16.png"</span><span style="color: #ff0000;"> sizes</span><span style="color: #0000ff;">="16x16"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="image/png"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="icon"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="path/to/favicon-32.png"</span><span style="color: #ff0000;"> sizes</span><span style="color: #0000ff;">="32x32"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="image/png"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="icon"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="path/to/favicon-48.png"</span><span style="color: #ff0000;"> sizes</span><span style="color: #0000ff;">="48x48"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="image/png"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="icon"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="path/to/favicon-62.png"</span><span style="color: #ff0000;"> sizes</span><span style="color: #0000ff;">="62x62"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="image/png"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="icon"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="path/to/favicon-192.png"</span><span style="color: #ff0000;"> sizes</span><span style="color: #0000ff;">="192x192"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="image/png"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> <p>注意：对于IE 10及以下版本不支持<code><link></code>形式设置，只通过将命名为<code>favicon.ico</code>的文件放置在网站根目录中实现。</p> <p>比较详细的 favicon 介绍可参考：</p> <ul> <li>所有关于网站图标（和触摸图标）</li> <li>favicon 对照表</li> </ul> <h2>浏览器及平台详细说明</h2> <h3>QQ 浏览器（X5 内核）</h3> <p>QQ 浏览器（X5 内核）同样适用于微信，QQ等第三方应用页面开发。</p> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #008000;"><!--</span><span style="color: #008000;"> 设置锁定横屏、竖屏显示模式，portrait（横屏），landscape（竖屏）</span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="x5-orientation"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="portrait|landscape"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 设置全屏显示页面 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="x5-fullscreen"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="true"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 开启页面以应用模式显示（全屏显示等） </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="x5-page-mode"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="app"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> <h3>360浏览器</h3> <p>设置 360 浏览器渲染模式：<code>webkit</code> 为极速内核，<code>ie-comp</code> 为 IE 兼容内核，<code>ie-stand</code> 为 IE 标准内核。</p> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="renderer"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="webkit|ie-comp|ie-stand"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> <p>详情文档链接：浏览器内核控制Meta标签说明文档<br>360 浏览器就会在读取到这个标签后，立即切换对应的极速核。 另外为了保险起见再加入</p> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="IE=Edge,chrome=1"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> <p>这样写可以达到的效果是如果安装了 Google Chrome Frame，则使用 GCF 来渲染页面，如果没有安装 GCF，则使用最高版本的 IE 内核进行渲染。</p> <h3>UC 浏览器</h3> <h4>设置屏幕方向</h4> <p>portrait 为横屏，landscape 为竖屏。</p> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="screen-orientation"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="portrait|landscape"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> <h4>设置全屏</h4> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="full-screen"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="yes"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> <h4>设置适应屏幕排版（缩放是否显示滚动条）</h4> <p>UC 浏览器在标准排版效果实现的基础上，提供适应屏幕的排版方式，当设置为 uc-fitscreen=yes，页面进行缩放操作时，仅放大图片和文字等元素，但不放大屏幕宽度，保持不出现水平（横向）滚动条。</p> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="uc-fitscreen=no|yes"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> <h4>排版模式</h4> <p>UC 浏览器提供两种排版模式，分别是适屏模式（fitscreen）及标准模式（standard），其中适屏模式简化了一些页面的处理，使得页面内容更适合进行页面阅读、节省流量及响应更快，而标准模式则能按照标准规范对页面进行排版及渲染。</p> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="layoutmode"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="fitscreen|standard"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> <h4>夜间模式</h4> <p>可以帮助用户在低亮度或黑暗情况下更舒适的进行页面浏览。由于基于网页的应用愈加复杂，由浏览器实现的单一夜间模式不一定能够适应所有情况(例如游戏应用)，因此 UC 浏览器允许网页设计者对其设计的页面禁用浏览器的夜间模式，自行设计更适合用户使用的夜间模式。</p> <p>注意：页面内的 frame/iframe 中的夜间模式的 meta 不生效。</p> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="nightmode"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="enable|disable"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> <h4>整页图片强制显示</h4> <p>为了节省流量及加快速度，UC 为用户提供了无图模式，在实际使用中存在页面中的图片是不可缺少的，例如验证码，地图等。通过强制图片显示的功能可以保证图片显示不受用户的设置影响。</p> <p>**注意：整页图片强制显示仅对当前页面生效，对页面内的 frame/iframe 不生效，也不影响前进后退的页面</p> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="imagemode"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="force"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> <h4>开启应用模式</h4> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="browsermode"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="application"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> <p>应用模式是为方便 Web 应用及游戏开发者设置的综合开关，通过meta标签进行指示打开，当进入应用模式时，浏览器将自动调整以下参数:</p> <table> <thead> <tr><th style="text-align: center;">参数</th><th align="center">状态</th><th>说明</th></tr> </thead> <tbody> <tr> <td>全屏</td> <td align="center">生效</td> <td>可通过 <code>meta</code> 或 JS API 调用退出全屏</td> </tr> <tr> <td>长按菜单</td> <td align="center">失效</td> <td>可通过 JS API 调用重新生效</td> </tr> <tr> <td>浏览器默认手势</td> <td align="center">失效</td> <td>可通过 JS API 调用重新生效</td> </tr> <tr> <td>排版模式</td> <td align="center">标准模式</td> <td>可通过 <code>meta</code> 或 JS API 调用设置其他排版模式</td> </tr> <tr> <td>强制图片显示</td> <td align="center">生效</td> <td>/</td> </tr> <tr> <td>夜间模式</td> <td align="center">失效</td> <td>可通过 <code>meta</code> 或 JS API 调用启用夜间模式</td> </tr> </tbody> </table> <h4>缩放字体</h4> <p>例如：禁用的 UC 浏览器的字体缩放功能</p> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="wap-font-scale"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="no"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> <p>具体UC 浏览器文档链接：UC 浏览器文档</p> <h3>Apple iOS原生浏览器</h3> <h4>添加智能 App 广告条</h4> <p>告诉浏览器这个网站对应的app，并在页面上显示下载banner，需要注意的是Smart App Banners标签不能用在frame框架内部，否则不起作用。</p> <p>其中app-id(必须), affiliate-data (可选), app-argument (可选)</p> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="apple-itunes-app"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> <p>例如Digg的写法：</p> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="apple-itunes-app"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="app-id=362872995, affiliate-data=bevbOqLt02I, app-argument=digg://"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> <h4>忽略数字自动识别为电话号码</h4> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="format-detection"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="telephone=no"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> <h4>启用 WebApp 全屏模式</h4> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="apple-mobile-web-app-capable"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="yes"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> <h5>添加到主屏后设置状态栏的背景颜色</h5> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="apple-mobile-web-app-status-bar-style"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="black"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> <p>只有在 “apple-mobile-web-app-capable” content=”yes” 时生效。</p> <ul> <li>如果设置为 default 或 black ，网页内容从状态栏底部开始。</li> <li>如果设置为 black-translucent ，网页内容充满整个屏幕，顶部会被状态栏遮挡。</li> </ul> <h5>添加到主屏后的标题（iOS 6 新增）</h5> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="apple-mobile-web-app-title"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="App Title"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> <h4>iOS 图标</h4> <p>图片自动处理成圆角和高光等效果。</p> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="apple-touch-icon"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="path/to/apple-touch-icon.png"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> <p>禁止系统自动添加效果，直接显示设计原图。</p> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="apple-touch-icon-precomposed"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="path/to/apple-touch-icon-precomposed.png"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> <p>iOS 8+ 不再支持 precomposed, 只有 apple-touch-icon 是必须的<br>在大多数情况下，在head中一个180×180px的图标就足够了。如果您想要由设备确定的唯一图标，请使用不同大小的图标。</p> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="apple-touch-icon"</span><span style="color: #ff0000;"> sizes</span><span style="color: #0000ff;">="57x57"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="path/to/icon@57.png"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="apple-touch-icon"</span><span style="color: #ff0000;"> sizes</span><span style="color: #0000ff;">="72x72"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="path/to/icon@72.png"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="apple-touch-icon"</span><span style="color: #ff0000;"> sizes</span><span style="color: #0000ff;">="114x114"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="path/to/icon@114.png"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="apple-touch-icon"</span><span style="color: #ff0000;"> sizes</span><span style="color: #0000ff;">="144x144"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="path/to/icon@144.png"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> <h4>启动画面 ( 不赞成使用 )</h4> <p>iPad 的启动画面是不包括状态栏区域的，iPhone 和 iPod touch 的启动画面是包含状态栏区域的</p> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="apple-touch-startup-image"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="path/to/startup.png"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> <p>具体描述设置请查看http://www.css88.com/archives/5480中相应的说明。</p> <h4>iOS 应用深度链接</h4> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="apple-itunes-app"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="app-id=APP-ID, app-argument=http/url-sample.com"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="alternate"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="ios-app://APP-ID/http/url-sample.com"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> <h3>Google Android原生浏览器</h3> <h4>标签页选项卡颜色</h4> <p>Android Lollipop 中的 Chrome 39 增加 theme-color meta 标签，用来控制选项卡颜色。</p> <p>http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android</p> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="theme-color"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="#db5945"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> <h4>添加到主屏</h4> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #008000;"><!--</span><span style="color: #008000;"> 添加到主屏 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="mobile-web-app-capable"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="yes"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> <p>详细链接: https://developer.chrome.com/multidevice/android/installtohomescreen</p> <h4>安卓应用深度链接（网页上唤起应用）</h4> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #008000;"><!--</span><span style="color: #008000;"> Android app deep linking </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="google-play-app"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="app-id=package-name"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="alternate"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="android-app://package-name/http/url-sample.com"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> <p>注：貌似没测试成功，如果你知道如何正确设置，欢迎留言斧正。</p> <h3>Apple Safari 浏览器</h3> <p>Safari 10开始支持固定书签页的SVG favicons了，你可以这样使用：</p> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #008000;"><!--</span><span style="color: #008000;"> Pinned Site </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="mask-icon"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="path/to/icon.svg"</span><span style="color: #ff0000;"> color</span><span style="color: #0000ff;">="red"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> <p>类似的效果<br><br>扩展阅读：https://yoast.com/dev-blog/safari-pinned-tab-icon-mask-icon/</p> <h3>Google Chrome浏览器</h3> <h4>关闭chrome浏览器下翻译插件</h4> <p>有些时候感觉chrome浏览器下翻译插件很烦人，可以通过下面的代码禁用它。</p> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="google"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="notranslate"</span> <span style="color: #0000ff;">/></span><span style="font-family: verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5; background-color: #ffffff;"> </span></pre><div class="contentsignin">Copy after login</div></div> </div> <h4>chrome浏览器插件安装</h4> <p>有时候，你需要在你的页面上点击某个安卓，直接安卓你的chrome浏览器插件，而不是链接到Chrome webstore 的详细地址再安装，那么你可以使用：</p> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="chrome-webstore-item"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://chrome.google.com/webstore/detail/APP_ID"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> <p>具体使用，请查看：Using Inline Installation</p> <h3>Google Chrome Mobile (只针对 Android)</h3> <p>从 Chrome 31 开始，你可以设置你的 Web 应用为“app mode”，如 Safari。</p> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #008000;"><!--</span><span style="color: #008000;"> 链接到一个 manifest 并定义 manifest 的元数据。</span><span style="color: #008000;">--></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> manifest.json 中的例子也可以通过以下链接找到。</span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="manifest"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="manifest.json"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 定义你的网页为 Web 应用 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="mobile-web-app-capable"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="yes"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 第一个是官方推荐格式。</span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="icon"</span><span style="color: #ff0000;"> sizes</span><span style="color: #0000ff;">="192x192"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="nice-highres.png"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="icon"</span><span style="color: #ff0000;"> sizes</span><span style="color: #0000ff;">="128x128"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="niceicon.png"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 所有带 apple 前缀的格式已废弃，所以不要使用它们。</span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="apple-touch-icon"</span><span style="color: #ff0000;"> sizes</span><span style="color: #0000ff;">="128x128"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="niceicon.png"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="apple-touch-icon-precomposed"</span><span style="color: #ff0000;"> sizes</span><span style="color: #0000ff;">="128x128"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="niceicon.png"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> <h3>Internet Explorer浏览器</h3> <h4>模式设置</h4> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #000000;">//IE8以下以IE7标准模式呈现网页，而IE9则以IE9的标准模式呈现网页： </span><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="IE=EmulateIE7; IE=EmulateIE9"</span><span style="color: #0000ff;">></span><span style="color: #000000;"> //如果安装了GCF，则使用GCF来渲染页面（"chrome=1"）， //如果没有安装GCF，则使用最高版本的IE内核进行渲染（"IE=edge"） </span><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="x-ua-compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="ie=edge"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> <p>GCF（Google Chrome Frame ）相关链接：https://www.chromium.org/developers/how-tos/chrome-frame-getting-started</p> <p>X-UA-Compatible相关链接：https://blogs.msdn.microsoft.com/ie/2010/06/16/ies-compatibility-features-for-site-developers/</p> <h4>win8,win10下的一些设置</h4> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="cleartype"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="on"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="skype_toolbar"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="skype_toolbar_parser_compatible"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> Disable link highlighting on IE 10 on Windows Phone 具体说明查看：https://blogs.windows.com/buildingapps/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10/</span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="msapplication-tap-highlight"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="no"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> Pinned sites 具体说明查看：https://msdn.microsoft.com/en-us/library/dn255024(v=vs.85).aspx</span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="application-name"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="Contoso Pinned Site Caption"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="msapplication-tooltip"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="Example Tooltip Text"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="msapplication-starturl"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="/"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="msapplication-config"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="http://example.com/browserconfig.xml"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="msapplication-allowDomainApiCalls"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="true"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="msapplication-allowDomainMetaTags"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="true"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="msapplication-badge"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="frequency=30; polling-uri=http://example.com/id45453245/polling.xml"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="msapplication-navbutton-color"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="#FF3300"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="msapplication-notification"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="frequency=60;polling-uri=http://example.com/livetile"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="msapplication-square150x150logo"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="path/to/logo.png"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="msapplication-square310x310logo"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="path/to/largelogo.png"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="msapplication-square70x70logo"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="path/to/tinylogo.png"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="msapplication-wide310x150logo"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="path/to/widelogo.png"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="msapplication-task"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="name=Check Order Status;action-uri=./orderStatus.aspx?src=IE9;icon-uri=./favicon.ico"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="msapplication-task-separator"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="1"</span><span style="color: #0000ff;">></span><span style="color: #000000;"> //Windows 8 磁贴颜色 </span><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="msapplication-TileColor"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="#FF3300"</span><span style="color: #0000ff;">></span><span style="color: #000000;"> //Windows 8 磁贴图标 </span><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="msapplication-TileImage"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="path/to/tileimage.jpg"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="msapplication-window"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=1024;height=768"</span><span style="color: #0000ff;">></span></pre><div class="contentsignin">Copy after login</div></div> </div> <h2>APP 链接</h2> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #008000;"><!--</span><span style="color: #008000;"> iOS </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">property</span><span style="color: #0000ff;">="al:ios:url"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="applinks://docs"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">property</span><span style="color: #0000ff;">="al:ios:app_store_id"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="12345"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">property</span><span style="color: #0000ff;">="al:ios:app_name"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="App Links"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> Android </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">property</span><span style="color: #0000ff;">="al:android:url"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="applinks://docs"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">property</span><span style="color: #0000ff;">="al:android:app_name"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="App Links"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">property</span><span style="color: #0000ff;">="al:android:package"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="org.applinks"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> Web Fallback </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">property</span><span style="color: #0000ff;">="al:web:url"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="http://applinks.org/documentation"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> More info: http://applinks.org/documentation/ </span><span style="color: #008000;">--></span></pre><div class="contentsignin">Copy after login</div></div> </div> <p>具体请查看：App Links Docs</p><div id="MySignature"></div> <div class="clear"></div> </body></html> </div> </div> <div style="height: 25px;"> <div class="wzconBq" style="display: inline-flex;"> <span>Related labels：</span> <div class="wzcbqd"> <a onclick="hits_log(2,'www',this);" href-data="//m.sbmmt.com/search?word=【转】你所不知道的html<head>头标签" target="_blank">【转】你所不知道的HTML <head/> 头标签</a> </div> </div> <div style="display: inline-flex;float: right; color:#333333;">source：php.cn</div> </div> <div class="wzconOtherwz"> <a href="//m.sbmmt.com/faq/338071.html" title="easyui-panel scroll bar disabled"> <span>Previous article：easyui-panel scroll bar disabled</span> </a> <a href="//m.sbmmt.com/faq/338074.html" title="Yahoo Fourteen: 14 principles for website front-end web page optimization"> <span>Next article：Yahoo Fourteen: 14 principles for website front-end web page optimization</span> </a> </div> <div class="wzconShengming"> <!-- <img src="/static/images/images/benzhanshengming.png" /> --> <div class="bzsmdiv">Statement of this Website</div> <div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div> </div> <div class="wwads-cn wwads-horizontal" data-id="156" style="max-width:955px"></div> <div class="wzconZzwz"> <div class="wzconZzwztitle">Latest Articles by Author</div> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/1796516219.html">How to creatively plan short video content? How many types of content creative planning are there?</a> </div> <div>2024-07-03 11:35:22</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/1796516218.html">How to hand in homework in Quark How to hand in homework</a> </div> <div>2024-07-03 11:35:07</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/1796516216.html">How to turn off private message reminders on Mango TV. Share the steps to turn off private message reminders on Mango TV.</a> </div> <div>2024-07-03 11:34:45</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/1796516215.html">How to check business license information on Tujia app How to check business license information on Tujia app</a> </div> <div>2024-07-03 11:34:37</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/1796516214.html">How to transfer Aiqicha to manual service? Aiqicha tutorial for contacting manual customer service</a> </div> <div>2024-07-03 11:34:23</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/1796516212.html">How to turn off the gift broadcast in Kuaishou Live Companion. Introduction to the tutorial of turning off the gift broadcast in Kuaishou Live Companion.</a> </div> <div>2024-07-03 11:33:39</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/1796516205.html">How to set the area of ​​concern in the earthquake early warning app Tutorial on setting the area of ​​concern in the earthquake early warning app</a> </div> <div>2024-07-03 11:31:23</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/1796516204.html">How to change the theme of Dragonfly FM? Introduction to how to set the theme of Dragonfly FM</a> </div> <div>2024-07-03 11:31:17</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/1796516203.html">Realme GT6 opens for pre-order on JD.com and will be officially released on July 9</a> </div> <div>2024-07-03 11:31:01</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/1796516201.html">How to give good reviews to Xiaolu Team?</a> </div> <div>2024-07-03 11:30:38</div> </li> </ul> </div> <div class="wzconZzwz"> <div class="wzconZzwztitle">Latest Issues</div> <div class="wdsyContent"> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/wenda/172904.html" target="_blank" title="How to make header images, text and buttons responsive" class="wdcdcTitle">How to make header images, text and buttons responsive</a> <a href="//m.sbmmt.com/wenda/172904.html" class="wdcdcCons">I'm making a website using Bootstrap5. In the header of the website I am using carousel fr...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2023-09-17 09:51:15</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>283</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/wenda/171600.html" target="_blank" title="How to automatically replace predefined tags" class="wdcdcTitle">How to automatically replace predefined tags</a> <a href="//m.sbmmt.com/wenda/171600.html" class="wdcdcCons">I have some characters that need to be replaced as above, but I don't know how: Characters...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2023-09-03 12:43:03</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>176</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/wenda/171365.html" target="_blank" title="How to animate grid layout expansion?" class="wdcdcTitle">How to animate grid layout expansion?</a> <a href="//m.sbmmt.com/wenda/171365.html" class="wdcdcCons">I want to know how to animate the expansion of a grid layout. As you can see in the code, ...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2023-08-31 21:09:37</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>222</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/wenda/75023.html" target="_blank" title="angular.js - angularjs中路由的HTML5模式下的URL问题" class="wdcdcTitle">angular.js - angularjs中路由的HTML5模式下的URL问题</a> <a href="//m.sbmmt.com/wenda/75023.html" class="wdcdcCons">在angularjs的路由中使用HTML5模式，结果无法加载模版（templateUrl没有发送http请求），而且URL中还出现的转义。但使用标签模式时一切OK，求大佬告知？&a...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2017-04-17 15:04:31</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>618</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/wenda/68411.html" target="_blank" title="python - 让 jinja2 转义 html 的时候允许指定部分 <img>、<code> 之类的标签转义" class="wdcdcTitle">python - 让 jinja2 转义 html 的时候允许指定部分 <img>、<code> 之类的标签转义</a> <a href="//m.sbmmt.com/wenda/68411.html" class="wdcdcCons">Flask 的模板 Jinja2 会将所有的 html 转义，我想让输出的 &lt;img&gt;、&lt;code&gt; 等指定的标签不进行转义...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2017-04-17 13:26:28</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>2</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>287</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> </div> </div> <div class="wzconZt" > <div class="wzczt-title"> <div>Related Topics</div> <a href="//m.sbmmt.com/faq/zt" target="_blank">More> </a> </div> <div class="wzcttlist"> <ul> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/faq/Pythonyxcxsyn"><img src="https://img.php.cn/upload/subject/202312/04/2023120414055676542.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Solution to syntaxerror when running Python" /> </a> <a target="_blank" href="//m.sbmmt.com/faq/Pythonyxcxsyn" class="title-a-spanl" title="Solution to syntaxerror when running Python"><span>Solution to syntaxerror when running Python</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/faq/esxtx"><img src="https://img.php.cn/upload/subject/202307/17/2023071717320290603.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="es6 new features" /> </a> <a target="_blank" href="//m.sbmmt.com/faq/esxtx" class="title-a-spanl" title="es6 new features"><span>es6 new features</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/faq/marqueecsynjz"><img src="https://img.php.cn/upload/subject/202310/23/2023102314035379642.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="What are the parameters of marquee?" /> </a> <a target="_blank" href="//m.sbmmt.com/faq/marqueecsynjz" class="title-a-spanl" title="What are the parameters of marquee?"><span>What are the parameters of marquee?</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/faq/ipadcdcbjqzmb"><img src="https://img.php.cn/upload/subject/202403/07/2024030717095185178.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="What should I do if my iPad cannot be charged?" /> </a> <a target="_blank" href="//m.sbmmt.com/faq/ipadcdcbjqzmb" class="title-a-spanl" title="What should I do if my iPad cannot be charged?"><span>What should I do if my iPad cannot be charged?</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/faq/mfhwwzfwqdydq"><img src="https://img.php.cn/upload/subject/202403/11/2024031110390870260.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Advantages and Disadvantages of Free Overseas Website Servers" /> </a> <a target="_blank" href="//m.sbmmt.com/faq/mfhwwzfwqdydq" class="title-a-spanl" title="Advantages and Disadvantages of Free Overseas Website Servers"><span>Advantages and Disadvantages of Free Overseas Website Servers</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/faq/linuxplxgwjmh"><img src="https://img.php.cn/upload/subject/202404/11/2024041116303775488.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Linux batch modification file name suffix" /> </a> <a target="_blank" href="//m.sbmmt.com/faq/linuxplxgwjmh" class="title-a-spanl" title="Linux batch modification file name suffix"><span>Linux batch modification file name suffix</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/faq/linuxckip"><img src="https://img.php.cn/upload/subject/202307/20/2023072011240357383.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="linux view ip command" /> </a> <a target="_blank" href="//m.sbmmt.com/faq/linuxckip" class="title-a-spanl" title="linux view ip command"><span>linux view ip command</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/faq/macdzssm"><img src="https://img.php.cn/upload/subject/202308/02/2023080214023271477.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="what is mac address" /> </a> <a target="_blank" href="//m.sbmmt.com/faq/macdzssm" class="title-a-spanl" title="what is mac address"><span>what is mac address</span> </a> </li> </ul> </div> </div> </div> </div> <div class="phpwzright"> <div class="wzrOne"> <div class="wzroTitle">Popular Recommendations</div> <div class="wzroList"> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="What does url mean?" href="//m.sbmmt.com/faq/418772.html">What does url mean?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="What does DOM mean?" href="//m.sbmmt.com/faq/414303.html">What does DOM mean?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="What does 404 not found mean?" href="//m.sbmmt.com/faq/413685.html">What does 404 not found mean?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="How to change image size" href="//m.sbmmt.com/faq/414252.html">How to change image size</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="What HTML editors are there? Recommended 4 best HTML editors" href="//m.sbmmt.com/faq/412520.html">What HTML editors are there? Recommended 4 best HTML editors</a> </div> </li> </ul> </div> </div> <div class="wzrThree"> <div class="wzrthree-title"> <div>Popular Tutorials</div> <a target="_blank" href="//m.sbmmt.com/course.html">More> </a> </div> <div class="wzrthreelist swiper2"> <div class="wzrthreeTab swiper-wrapper"> <div class="check tabdiv swiper-slide" data-id="one">Related Tutorials <div></div></div> <div class="tabdiv swiper-slide" data-id="two">Popular Recommendations<div></div></div> <div class="tabdiv swiper-slide" data-id="three">Latest courses<div></div></div> </div> <ul class="one"> <li> <a target="_blank" href="//m.sbmmt.com/course/812.html" title="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)" href="//m.sbmmt.com/course/812.html">The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)</a> <div class="wzrthreerb"> <div>1385235 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/course/74.html" title="PHP introductory tutorial one: Learn PHP in one week" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253d1e28ef5c345.png" alt="PHP introductory tutorial one: Learn PHP in one week"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PHP introductory tutorial one: Learn PHP in one week" href="//m.sbmmt.com/course/74.html">PHP introductory tutorial one: Learn PHP in one week</a> <div class="wzrthreerb"> <div>4190288 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="74"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/course/286.html" title="JAVA Beginner's Video Tutorial" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA Beginner's Video Tutorial"/> </a> <div class="wzrthree-right"> <a target="_blank" title="JAVA Beginner's Video Tutorial" href="//m.sbmmt.com/course/286.html">JAVA Beginner's Video Tutorial</a> <div class="wzrthreerb"> <div>2269401 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/course/504.html" title="Little Turtle's zero-based introduction to learning Python video tutorial" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle's zero-based introduction to learning Python video tutorial"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Little Turtle's zero-based introduction to learning Python video tutorial" href="//m.sbmmt.com/course/504.html">Little Turtle's zero-based introduction to learning Python video tutorial</a> <div class="wzrthreerb"> <div>486979 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/course/2.html" title="PHP zero-based introductory tutorial" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253de27bc161468.png" alt="PHP zero-based introductory tutorial"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PHP zero-based introductory tutorial" href="//m.sbmmt.com/course/2.html">PHP zero-based introductory tutorial</a> <div class="wzrthreerb"> <div>817604 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="2"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="two" style="display: none;"> <li> <a target="_blank" href="//m.sbmmt.com/course/812.html" title="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)" href="//m.sbmmt.com/course/812.html">The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)</a> <div class="wzrthreerb"> <div >1385235 times of learning</div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/course/286.html" title="JAVA Beginner's Video Tutorial" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA Beginner's Video Tutorial"/> </a> <div class="wzrthree-right"> <a target="_blank" title="JAVA Beginner's Video Tutorial" href="//m.sbmmt.com/course/286.html">JAVA Beginner's Video Tutorial</a> <div class="wzrthreerb"> <div >2269401 times of learning</div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/course/504.html" title="Little Turtle's zero-based introduction to learning Python video tutorial" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle's zero-based introduction to learning Python video tutorial"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Little Turtle's zero-based introduction to learning Python video tutorial" href="//m.sbmmt.com/course/504.html">Little Turtle's zero-based introduction to learning Python video tutorial</a> <div class="wzrthreerb"> <div >486979 times of learning</div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/course/901.html" title="Quick introduction to web front-end development" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="Quick introduction to web front-end development"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Quick introduction to web front-end development" href="//m.sbmmt.com/course/901.html">Quick introduction to web front-end development</a> <div class="wzrthreerb"> <div >212710 times of learning</div> <div class="courseICollection" data-id="901"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/course/234.html" title="Master PS video tutorials from scratch" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="Master PS video tutorials from scratch"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Master PS video tutorials from scratch" href="//m.sbmmt.com/course/234.html">Master PS video tutorials from scratch</a> <div class="wzrthreerb"> <div >823959 times of learning</div> <div class="courseICollection" data-id="234"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="three" style="display: none;"> <li> <a target="_blank" href="//m.sbmmt.com/course/1648.html" title="[Web front-end] Node.js quick start" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="[Web front-end] Node.js quick start"/> </a> <div class="wzrthree-right"> <a target="_blank" title="[Web front-end] Node.js quick start" href="//m.sbmmt.com/course/1648.html">[Web front-end] Node.js quick start</a> <div class="wzrthreerb"> <div >1643 times of learning</div> <div class="courseICollection" data-id="1648"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/course/1647.html" title="Complete collection of foreign web development full-stack courses" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="Complete collection of foreign web development full-stack courses"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Complete collection of foreign web development full-stack courses" href="//m.sbmmt.com/course/1647.html">Complete collection of foreign web development full-stack courses</a> <div class="wzrthreerb"> <div >1338 times of learning</div> <div class="courseICollection" data-id="1647"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/course/1646.html" title="Go language practical GraphQL" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Go language practical GraphQL"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Go language practical GraphQL" href="//m.sbmmt.com/course/1646.html">Go language practical GraphQL</a> <div class="wzrthreerb"> <div >1094 times of learning</div> <div class="courseICollection" data-id="1646"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/course/1645.html" title="550W fan master learns JavaScript from scratch step by step" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="550W fan master learns JavaScript from scratch step by step"/> </a> <div class="wzrthree-right"> <a target="_blank" title="550W fan master learns JavaScript from scratch step by step" href="//m.sbmmt.com/course/1645.html">550W fan master learns JavaScript from scratch step by step</a> <div class="wzrthreerb"> <div >359 times of learning</div> <div class="courseICollection" data-id="1645"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/course/1644.html" title="Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours" href="//m.sbmmt.com/course/1644.html">Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours</a> <div class="wzrthreerb"> <div >5523 times of learning</div> <div class="courseICollection" data-id="1644"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper2', { autoplay: false,//可选选项，自动滑动 slidesPerView : 'auto', }) $('.wzrthreeTab>div').click(function(e){ $('.wzrthreeTab>div').removeClass('check') $(this).addClass('check') $('.wzrthreelist>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> <div class="wzrFour"> <div class="wzrfour-title"> <div>Latest Downloads</div> <a href="//m.sbmmt.com/xiazai">More> </a> </div> <script> $(document).ready(function(){ var sjyx_banSwiper = new Swiper(".sjyx_banSwiperwz",{ speed:1000, autoplay:{ delay:3500, disableOnInteraction: false, }, pagination:{ el:'.sjyx_banSwiperwz .swiper-pagination', clickable :false, }, loop:true }) }) </script> <div class="wzrfourList swiper3"> <div class="wzrfourlTab swiper-wrapper"> <div class="check swiper-slide" data-id="onef">Web Effects <div></div></div> <div class="swiper-slide" data-id="twof">Website Source Code<div></div></div> <div class="swiper-slide" data-id="threef">Website Materials<div></div></div> <div class="swiper-slide" data-id="fourf">Front End Template<div></div></div> </div> <ul class="onef"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery enterprise message form contact code" href="//m.sbmmt.com/xiazai/js/8071">[form button] jQuery enterprise message form contact code</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5 MP3 music box playback effects" href="//m.sbmmt.com/xiazai/js/8070">[Player special effects] HTML5 MP3 music box playback effects</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5 cool particle animation navigation menu special effects" href="//m.sbmmt.com/xiazai/js/8069">[Menu navigation] HTML5 cool particle animation navigation menu special effects</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery visual form drag and drop editing code" href="//m.sbmmt.com/xiazai/js/8068">[form button] jQuery visual form drag and drop editing code</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="VUE.JS imitation Kugou music player code" href="//m.sbmmt.com/xiazai/js/8067">[Player special effects] VUE.JS imitation Kugou music player code</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Classic html5 pushing box game" href="//m.sbmmt.com/xiazai/js/8066">[html5 special effects] Classic html5 pushing box game</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery scrolling to add or reduce image effects" href="//m.sbmmt.com/xiazai/js/8065">[Picture special effects] jQuery scrolling to add or reduce image effects</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="CSS3 personal album cover hover zoom effect" href="//m.sbmmt.com/xiazai/js/8064">[Photo album effects] CSS3 personal album cover hover zoom effect</a> </div> </li> </ul> <ul class="twof" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8328" title="Home Decor Cleaning and Repair Service Company Website Template" target="_blank">[Front-end template] Home Decor Cleaning and Repair Service Company Website Template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8327" title="Fresh color personal resume guide page template" target="_blank">[Front-end template] Fresh color personal resume guide page template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8326" title="Designer Creative Job Resume Web Template" target="_blank">[Front-end template] Designer Creative Job Resume Web Template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8325" title="Modern engineering construction company website template" target="_blank">[Front-end template] Modern engineering construction company website template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8324" title="Responsive HTML5 template for educational service institutions" target="_blank">[Front-end template] Responsive HTML5 template for educational service institutions</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8323" title="Online e-book store mall website template" target="_blank">[Front-end template] Online e-book store mall website template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8322" title="IT technology solves Internet company website template" target="_blank">[Front-end template] IT technology solves Internet company website template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8321" title="Purple style foreign exchange trading service website template" target="_blank">[Front-end template] Purple style foreign exchange trading service website template</a> </div> </li> </ul> <ul class="threef" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/sucai/3078" target="_blank" title="Cute summer elements vector material (EPS PNG)">[PNG material] Cute summer elements vector material (EPS PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/sucai/3077" target="_blank" title="Four red 2023 graduation badges vector material (AI EPS PNG)">[PNG material] Four red 2023 graduation badges vector material (AI EPS PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/sucai/3076" target="_blank" title="Singing bird and cart filled with flowers design spring banner vector material (AI EPS)">[banner picture] Singing bird and cart filled with flowers design spring banner vector material (AI EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/sucai/3075" target="_blank" title="Golden graduation cap vector material (EPS PNG)">[PNG material] Golden graduation cap vector material (EPS PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/sucai/3074" target="_blank" title="Black and white style mountain icon vector material (EPS PNG)">[PNG material] Black and white style mountain icon vector material (EPS PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/sucai/3073" target="_blank" title="Superhero silhouette vector material (EPS PNG) with different color cloaks and different poses">[PNG material] Superhero silhouette vector material (EPS PNG) with different color cloaks and different poses</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/sucai/3072" target="_blank" title="Flat style Arbor Day banner vector material (AI+EPS)">[banner picture] Flat style Arbor Day banner vector material (AI+EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/sucai/3071" target="_blank" title="Nine comic-style exploding chat bubbles vector material (EPS+PNG)">[PNG material] Nine comic-style exploding chat bubbles vector material (EPS+PNG)</a> </div> </li> </ul> <ul class="fourf" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8328" target="_blank" title="Home Decor Cleaning and Repair Service Company Website Template">[Front-end template] Home Decor Cleaning and Repair Service Company Website Template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8327" target="_blank" title="Fresh color personal resume guide page template">[Front-end template] Fresh color personal resume guide page template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8326" target="_blank" title="Designer Creative Job Resume Web Template">[Front-end template] Designer Creative Job Resume Web Template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8325" target="_blank" title="Modern engineering construction company website template">[Front-end template] Modern engineering construction company website template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8324" target="_blank" title="Responsive HTML5 template for educational service institutions">[Front-end template] Responsive HTML5 template for educational service institutions</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8323" target="_blank" title="Online e-book store mall website template">[Front-end template] Online e-book store mall website template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8322" target="_blank" title="IT technology solves Internet company website template">[Front-end template] IT technology solves Internet company website template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8321" target="_blank" title="Purple style foreign exchange trading service website template">[Front-end template] Purple style foreign exchange trading service website template</a> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper3', { autoplay: false,//可选选项，自动滑动 slidesPerView : 'auto', }) $('.wzrfourlTab>div').click(function(e){ $('.wzrfourlTab>div').removeClass('check') $(this).addClass('check') $('.wzrfourList>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> </div> </div> <div class="phpFoot"> <div class="phpFootIn"> <div class="phpFootCont"> <div class="phpFootLeft"> <dl> <dt> <a href="//m.sbmmt.com/about/us.html" rel="nofollow" target="_blank" title="About us" class="cBlack">About us</a> <a href="//m.sbmmt.com/about/disclaimer.html" rel="nofollow" target="_blank" title="Disclaimer" class="cBlack">Disclaimer</a> <a href="//m.sbmmt.com/update/article_0_1.html" target="_blank" title="Sitemap" class="cBlack">Sitemap</a> <div class="clear"></div> </dt> <dd class="cont1">php.cn：Public welfare online PHP training，Help PHP learners grow quickly！</dd> </dl> </div> </div> </div> </div> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1720215393"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all'/> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> </body> </html>