Summary of commonly used codes-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

Summary of commonly used codes

php中世界最好的语言

Jun 04, 2018 am 11:36 AM

metatidySummary

This time I will bring you a summary of commonly used codes. What are the precautions for using codes? Here are practical cases, let’s take a look.

Required attributes

Attributes	Value	Description
##content	some text	Define meta-information related to the http-equiv or name attribute

Optional attributes

##http-equivnamecontent

Properties	Value	Description
##content-type / expire / refresh / set-cookie	Associate the content attribute to the HTTP header.
##author / description / keywords / generator / revised / others	Associate the content attribute to a name.
some text	Definition is used to translate content The format of the attribute value.	SEO Optimization Reference Document Page keywords, each web page should have a description A unique set of keywords for the content of this web page. Use descriptive and representative keywords and phrases that people are likely to search for, and accurately describe the information provided on the web page. Mark content that is too short and search engines may not consider it relevant. Also tags should not exceed 874 characters. <span style="font-size: 14px;"><meta name="keywords" content="your tags"></span> Page description, each web page should have a description tag that is no longer than 150 characters and accurately reflects the content of the web page. <span style="font-size: 14px;"><meta name="description" content="150 words"></span> Search engine indexing method, robotterms is a set of values separated by commas (,), and usually has the following values : none, noindex, nofollow, all, index and follow. Make sure you use the nofollow and noindex attribute values correctly. <span style="font-size: 14px;"><meta name="robots" content="index,follow"> <!--<br/> all：文件将被检索，且页面上的链接可以被查询；<br/> none：文件将不被检索，且页面上的链接不可以被查询；<br/> index：文件将被检索；<br/> follow：页面上的链接可以被查询；<br/> noindex：文件将不被检索；<br/> nofollow：页面上的链接不可以被查询。<br/> --></span> Page redirection and refresh: The number in the content represents the time (seconds), that is, how long it takes to refresh. If you add a URL, it will redirect to the specified web page (search engines can automatically detect it, and it can easily be regarded as misleading by the engine and punished). <span style="font-size: 14px;"><pre class="brush:html;toolbar:false"><meta http-equiv="refresh" content="0;url="> Other <span style="font-size: 14px;"><meta name="author" content="author name"> <!-- 定义网页作者 --><meta name="google" content="index,follow"> <meta name="googlebot" content="index,follow"> <meta name="verify" content="index,follow"></span> Mobile Device #viewport: can optimize the display of mobile browsers. If the website is not responsive, do not use initial-scale or disable scaling. The viewport width of most 4.7-5-inch devices is set to 360px; the 5.5-inch device is set to 400px; the iphone6 is set to 375px; the iphone6 plus is set to 414px. <span style="font-size: 14px;"><meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"> <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 --></span> width: width (number/device-width) (range 200 to 10,000, default 980 pixels) height: height (number/device-height) (range from 223 to 10,000) initial-scale: initial scaling (ranging from >0 to 10) minimum-scale：允许用户缩放到的最小比例 maximum-scale：允许用户缩放到的最大比例 user-scalable：用户是否可以手动缩 (no,yes) minimal-ui：可以在页面加载时最小化上下状态栏。（已弃用）注意，很多人使用initial-scale=1到非响应式网站上，这会让网站以100%宽度渲染，用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1，则用户将不能放大/缩小网页来看到全部的内容。 WebApp全屏模式：伪装app，离线应用。 <span style="font-size: 14px;"><meta name="apple-mobile-web-app-capable" content="yes"> <!-- 启用 WebApp 全屏模式 --></span> 隐藏状态栏/设置状态栏颜色：只有在开启WebApp全屏模式时才生效。content的值为default \| black \| black-translucent 。 <span style="font-size: 14px;"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"></span> 添加到主屏后的标题 <span style="font-size: 14px;"><meta name="apple-mobile-web-app-title" content="标题"></span> 忽略数字自动识别为电话号码 <span style="font-size: 14px;"><meta content="telephone=no" name="format-detection"> </span> 忽略识别邮箱 <span style="font-size: 14px;"><meta content="email=no" name="format-detection"></span> 添加智能 App 广告条 Smart App Banner：告诉浏览器这个网站对应的app，并在页面上显示下载banner <span style="font-size: 14px;"><meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> </span> 其他参考文档 <span style="font-size: 14px;"><!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 --><meta name="HandheldFriendly" content="true"> <!-- 微软的老式浏览器 --><meta name="MobileOptimized" content="320"> <!-- uc强制竖屏 --><meta name="screen-orientation" content="portrait"> <!-- QQ强制竖屏 --><meta name="x5-orientation" content="portrait"> <!-- UC强制全屏 --><meta name="full-screen" content="yes"> <!-- QQ强制全屏 --><meta name="x5-fullscreen" content="true"> <!-- UC应用模式 --><meta name="browsermode" content="application"> <!-- QQ应用模式 --><meta name="x5-page-mode" content="app"> <!-- windows phone 点击无高光 --><meta name="msapplication-tap-highlight" content="no"></span> 网页相关申明编码 <span style="font-size: 14px;"><meta charset="'utf-8'"></span> 优先使用 IE 最新版本和 Chrome <span style="font-size: 14px;"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- 关于X-UA-Compatible --><meta http-equiv="X-UA-Compatible" content="IE=6"> <!-- 使用IE6 --><meta http-equiv="X-UA-Compatible" content="IE=7"> <!-- 使用IE7 --><meta http-equiv="X-UA-Compatible" content="IE=8"> <!-- 使用IE8 --></span> 浏览器内核控制：国内浏览器很多都是双内核（webkit和Trident），webkit内核高速浏览，IE内核兼容网页和旧版网站。而添加meta标签的网站可以控制浏览器选择何种内核渲染。参考文档 <span style="font-size: 14px;"> <meta name="renderer" content="webkit\|ie-comp\|ie-stand"></span> 国内双核浏览器默认内核模式如下： 1. 搜狗高速浏览器、QQ浏览器：IE内核（兼容模式） 2. 360极速浏览器、遨游浏览器：Webkit内核（极速模式）禁止浏览器从本地计算机的缓存中访问页面内容：这样设定，访问者将无法脱机浏览。 <span style="font-size: 14px;"><meta http-equiv="Pragma" content="no-cache"></span> Windows 8 <span style="font-size: 14px;"><meta name="msapplication-TileColor" content="#000"> <!-- Windows 8 磁贴颜色 --><meta name="msapplication-TileImage" content="icon.png"> <!-- Windows 8 磁贴图标 --></span> 站点适配：主要用于PC-手机页的对应关系。 <span style="font-size: 14px;"><meta name="mobile-agent" content="format=[wml\|xhtml\|html5]; url=url"> <!--<br/>[wml\|xhtml\|html5]根据手机页的协议语言，选择其中一种；<br/>url="url" 后者代表当前PC页所对应的手机页URL，两者必须是一一对应关系。<br/> --></span> 转码申明：用百度打开网页可能会对其进行转码（比如贴广告），避免转码可添加如下meta <span style="font-size: 14px;"><meta http-equiv="Cache-Control" content="no-siteapp"></span> 相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！推荐阅读： H5+Canvas使用案例详解怎样使用javascript Date Format方法

Properties

Value

Description

##content-type / expire / refresh / set-cookie

Associate the content attribute to the HTTP header.

##author / description / keywords / generator / revised / others

Associate the content attribute to a name.

some text

Definition is used to translate content The format of the attribute value.

SEO Optimization

Reference Document

Page keywords, each web page should have a description A unique set of keywords for the content of this web page.
Use descriptive and representative keywords and phrases that people are likely to search for, and accurately describe the information provided on the web page. Mark content that is too short and search engines may not consider it relevant. Also tags should not exceed 874 characters.

<span style="font-size: 14px;"><meta name="keywords" content="your tags"></span>

Page description, each web page should have a description tag that is no longer than 150 characters and accurately reflects the content of the web page.

<span style="font-size: 14px;"><meta name="description" content="150 words"></span>

Search engine indexing method, robotterms is a set of values separated by commas (,), and usually has the following values : none, noindex, nofollow, all, index and follow. Make sure you use the nofollow and noindex attribute values correctly.

<span style="font-size: 14px;"><meta name="robots" content="index,follow">
<!--<br/>    all：文件将被检索，且页面上的链接可以被查询；<br/>    none：文件将不被检索，且页面上的链接不可以被查询；<br/>    index：文件将被检索；<br/>    follow：页面上的链接可以被查询；<br/>    noindex：文件将不被检索；<br/>    nofollow：页面上的链接不可以被查询。<br/> --></span>

Page redirection and refresh: The number in the content represents the time (seconds), that is, how long it takes to refresh. If you add a URL, it will redirect to the specified web page (search engines can automatically detect it, and it can easily be regarded as misleading by the engine and punished).

<span style="font-size: 14px;"><pre class="brush:html;toolbar:false"><meta http-equiv="refresh" content="0;url=">

Other

<span style="font-size: 14px;"><meta name="author" content="author name"> <!-- 定义网页作者 --><meta name="google" content="index,follow">
<meta name="googlebot" content="index,follow">
<meta name="verify" content="index,follow"></span>

Mobile Device

#viewport: can optimize the display of mobile browsers. If the website is not responsive, do not use initial-scale or disable scaling.
The viewport width of most 4.7-5-inch devices is set to 360px; the 5.5-inch device is set to 400px; the iphone6 is set to 375px; the iphone6 plus is set to 414px.

<span style="font-size: 14px;"><meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边  --></span>

width: width (number/device-width) (range 200 to 10,000, default 980 pixels)
height: height (number/device-height) (range from 223 to 10,000)
initial-scale: initial scaling (ranging from >0 to 10)
minimum-scale：允许用户缩放到的最小比例
maximum-scale：允许用户缩放到的最大比例
user-scalable：用户是否可以手动缩 (no,yes)
minimal-ui：可以在页面加载时最小化上下状态栏。（已弃用）

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

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

<span style="font-size: 14px;"><meta name="apple-mobile-web-app-capable" content="yes"> <!-- 启用 WebApp 全屏模式 --></span>

隐藏状态栏/设置状态栏颜色：只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent 。

<span style="font-size: 14px;"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"></span>

添加到主屏后的标题

<span style="font-size: 14px;"><meta name="apple-mobile-web-app-title" content="标题"></span>

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

<span style="font-size: 14px;"><meta content="telephone=no" name="format-detection"> </span>

忽略识别邮箱

<span style="font-size: 14px;"><meta content="email=no" name="format-detection"></span>

添加智能 App 广告条 Smart App Banner：告诉浏览器这个网站对应的app，并在页面上显示下载banner

<span style="font-size: 14px;"><meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> </span>

其他参考文档

<span style="font-size: 14px;"><!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 --><meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 --><meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 --><meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 --><meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 --><meta name="full-screen" content="yes">
<!-- QQ强制全屏 --><meta name="x5-fullscreen" content="true">
<!-- UC应用模式 --><meta name="browsermode" content="application">
<!-- QQ应用模式 --><meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 --><meta name="msapplication-tap-highlight" content="no"></span>

网页相关

申明编码

<span style="font-size: 14px;"><meta charset="'utf-8'"></span>

优先使用 IE 最新版本和 Chrome

<span style="font-size: 14px;"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 关于X-UA-Compatible --><meta http-equiv="X-UA-Compatible" content="IE=6">
<!-- 使用IE6 --><meta http-equiv="X-UA-Compatible" content="IE=7">
<!-- 使用IE7 --><meta http-equiv="X-UA-Compatible" content="IE=8">
<!-- 使用IE8 --></span>

浏览器内核控制：国内浏览器很多都是双内核（webkit和Trident），webkit内核高速浏览，IE内核兼容网页和旧版网站。而添加meta标签的网站可以控制浏览器选择何种内核渲染。参考文档

<span style="font-size: 14px;"> <meta name="renderer" content="webkit|ie-comp|ie-stand"></span>

国内双核浏览器默认内核模式如下：
1. 搜狗高速浏览器、QQ浏览器：IE内核（兼容模式）
2. 360极速浏览器、遨游浏览器：Webkit内核（极速模式）

禁止浏览器从本地计算机的缓存中访问页面内容：这样设定，访问者将无法脱机浏览。

<span style="font-size: 14px;"><meta http-equiv="Pragma" content="no-cache"></span>

Windows 8

<span style="font-size: 14px;"><meta name="msapplication-TileColor" content="#000"> <!-- Windows 8 磁贴颜色 --><meta name="msapplication-TileImage" content="icon.png"> <!-- Windows 8 磁贴图标 --></span>

站点适配：主要用于PC-手机页的对应关系。

<span style="font-size: 14px;"><meta name="mobile-agent" content="format=[wml|xhtml|html5]; url=url">
<!--<br/>[wml|xhtml|html5]根据手机页的协议语言，选择其中一种；<br/>url="url" 后者代表当前PC页所对应的手机页URL，两者必须是一一对应关系。<br/> --></span>

转码申明：用百度打开网页可能会对其进行转码（比如贴广告），避免转码可添加如下meta

<span style="font-size: 14px;"><meta http-equiv="Cache-Control" content="no-siteapp"></span>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

H5+Canvas使用案例详解

怎样使用javascript Date Format方法

The above is the detailed content of Summary of commonly used codes. For more information, please follow other related articles on the PHP Chinese website!

Statement

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

H5: The Evolution of Web Standards and TechnologiesApr 15, 2025 am 12:12 AM

Web standards and technologies have evolved from HTML4, CSS2 and simple JavaScript to date and have undergone significant developments. 1) HTML5 introduces APIs such as Canvas and WebStorage, which enhances the complexity and interactivity of web applications. 2) CSS3 adds animation and transition functions to make the page more effective. 3) JavaScript improves development efficiency and code readability through modern syntax of Node.js and ES6, such as arrow functions and classes. These changes have promoted the development of performance optimization and best practices of web applications.

Is H5 a Shorthand for HTML5? Exploring the DetailsApr 14, 2025 am 12:05 AM

H5 is not just the abbreviation of HTML5, it represents a wider modern web development technology ecosystem: 1. H5 includes HTML5, CSS3, JavaScript and related APIs and technologies; 2. It provides a richer, interactive and smooth user experience, and can run seamlessly on multiple devices; 3. Using the H5 technology stack, you can create responsive web pages and complex interactive functions.

H5 and HTML5: Commonly Used Terms in Web DevelopmentApr 13, 2025 am 12:01 AM

H5 and HTML5 refer to the same thing, namely HTML5. HTML5 is the fifth version of HTML, bringing new features such as semantic tags, multimedia support, canvas and graphics, offline storage and local storage, improving the expressiveness and interactivity of web pages.

What Does H5 Refer To? Exploring the ContextApr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5: Tools, Frameworks, and Best PracticesApr 11, 2025 am 12:11 AM

The tools and frameworks that need to be mastered in H5 development include Vue.js, React and Webpack. 1.Vue.js is suitable for building user interfaces and supports component development. 2.React optimizes page rendering through virtual DOM, suitable for complex applications. 3.Webpack is used for module packaging and optimize resource loading.

The Legacy of HTML5: Understanding H5 in the PresentApr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee

H5 Code: Accessibility and Semantic HTMLApr 09, 2025 am 12:05 AM

H5 improves web page accessibility and SEO effects through semantic elements and ARIA attributes. 1. Use, etc. to organize the content structure and improve SEO. 2. ARIA attributes such as aria-label enhance accessibility, and assistive technology users can use web pages smoothly.

Is h5 same as HTML5?Apr 08, 2025 am 12:16 AM

"h5" and "HTML5" are the same in most cases, but they may have different meanings in certain specific scenarios. 1. "HTML5" is a W3C-defined standard that contains new tags and APIs. 2. "h5" is usually the abbreviation of HTML5, but in mobile development, it may refer to a framework based on HTML5. Understanding these differences helps to use these terms accurately in your project.

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks agoByDDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: How To Unlock Everything In MyRise

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

Dreamweaver CS6

Visual web development tools

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

Hot Topics

Where is the login entrance for gmail email?

7504

CakePHP Tutorial

1378

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers