Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > body text

Detailed introduction to the application of head tags in HTML

零下一度
Release： 2017-05-10 13:57:19
Original
1561 people have browsed it

HTML head There are many tags and elements in the head part, which involve the browser's rendering of web pages, SEO, etc., and each browser kernel and each domestic browser manufacturer have their own tag element, which creates a lot of differences. In the era of mobile Internet, the head structure and meta elements of mobile terminals are even more important. Understanding the meaning of each tag and writing a head tag that meets your own needs is the purpose of this article. This article is based on Yishi's article and provides an expanded summary to introduce the meaning and usage scenarios of each tag and element in commonly used heads.

DOCTYPE

DOCTYPE (Document Type), this declaration is located at the frontmost position in the document, before the html tag. This tag tells the browser what kind of HTML the document uses. Or the XHTML specification.
DTD (Document Type Definition) declaration starts with , it is not case-sensitive, and there is no content in front. If there is other content (except spaces), the browser will turn on quirks mode under IE. Render the web page. Public DTD, the name format is registration // organization // type tag // language, registration refers to whether the organization is registered by the International Organization for Standardization (ISO), + means yes, - means no. Organization is the name of the organization, such as: W3C. The type is usually DTD. A tag specifies a description of the public text, that is, a unique descriptive name for the referenced public text, which can be followed by a version number. The final language is the ISO 639 language identifier of the DTD language, such as: EN for English, ZH for Chinese. XHTML 1.0 can declare three DTD types. Represents strict version, transitional version, and frame-based HTML document respectively.

  • HTML 4.01 strict

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "www.w3.org/TR/html4/strict.dtd">
    Copy after login

  • HTML 4.01 Transitional

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "www.w3.org/TR/html4/loose.dtd">
    Copy after login

  • HTML 4.01 Frame set

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "www.w3.org/TR/html4/frameset.dtd">
    Copy after login

  • LatestHTML5 introduces more concise writing, which is forward and backward compatible, and is recommended for use. 

    <!doctype html>
    Copy after login

    In HTML doctype has two main purposes.

  • Verify the validity of the document.
    It tells the user agent and validator what DTD this document is written according to. This action is passive. Every time the page is loaded, the browser does not download the DTD and check the validity. It is only enabled when the page is manually verified.

  • Determine the browser's rendering mode
    For actual operations, inform the browser which parsing algorithm to use when reading the document. If it is not written, the browser will parse the code according to its own rules, which may seriously affect the html layout. Browsers have three ways to parse HTML documents. Non-weird (standard) mode Weird mode* Some weird (almost standard) modes About IE browser's document mode, browser mode, strict mode, weird mode, DOCTYPE tag, can Detailed reading mode? standard! Content.

charset

  • Declare the character encoding used in the document

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

  • html5 previous web page It will be written like this: 

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

    These two are equivalent, you can read it step by step: vs , so it is recommended to use shorter ones that are easier to remember.

##langAttributes

    ##简体中文
  • <html lang="zh-cmn-Hans">
    Copy after login

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

    Why is lang="zh-cmn-Hans" instead of the lang="zh-CN" we usually write? Please read further: The statement at the head of the page should be lang="zh" or lang="zh-cn".

    • Prioritize to use the latest version of IE and Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
Copy after login

360 Use Google Chrome Frame

<meta name="renderer" content="webkit">
Copy after login

    360 The browser will be in After reading this tag, immediately switch the corresponding ultra-fast core. In addition, for the sake of insurance, add 
  • <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    Copy after login

    The effect that can be achieved by writing this way is that if

    installed

    Google Chrome Frame, GCF will be used to render the page. If GCF is not installed, the highest version will be used. IE kernel for rendering. Related links: Browser kernel control Meta tag documentation

    • Baidu prohibits transcoding

When you open a webpage through Baidu mobile phone, Baidu may modify your webpage Transcode, take off your clothes, and put an advertisement for dog skin plaster on your body. For this purpose, you can add 
<meta http-equiv="Cache-Control" content="no-siteapp" />
Copy after login

in the head. Related links: SiteApp Transcoding Statement

SEO Optimization Section

    Page title tag (head header is required)<li><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><title>your title</title></pre><div class="contentsignin">Copy after login</div></div><p></p></li>Page keywords<li>key<p> w<a href="http://www.php.cn/wiki/1051.html" target="_blank">ord</a>s<a href="http://www.php.cn/wiki/1360.html" target="_blank"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><meta name="keywords" content="your keywords"></pre><div class="contentsignin">Copy after login</div></div></a></p></li>Page description content description<li><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><meta name="description" content="your description"></pre><div class="contentsignin">Copy after login</div></div></li><li><p>定义网页作者 author</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><meta name="author" content="author,email address"></pre><div class="contentsignin">Copy after login</div></div></li><li><p>定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><meta name="robots" content="index,follow"></pre><div class="contentsignin">Copy after login</div></div><p>相关链接：WEB1038 - 标记包含无效的值</p></li></ul><h2>viewport</h2><hr/><ul class=" list-paddingleft-2"><li><p>viewport可以让布局在移动浏览器上显示的更好。 通常会写</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false;"><meta name="viewport" content="width=device-width, initial-scale=1.0"></pre><div class="contentsignin">Copy after login</div></div></li><li><p>width=device-width会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://bigc.at/ios-webapp-viewport-meta.orz)<br/>content 参数：<br/>(1) width viewport 宽度(数值/device-width)<br/>(2)<a href="http://www.php.cn/wiki/836.html" target="_blank">height</a> viewport 高度(数值/device-height)<br/>(3)initial-scale 初始缩放比例<br/>(4)maximum-scale 最大缩放比例<br/>(5)minimum-scale 最小缩放比例<br/>(6)user-scalable 是否允许用户缩放(yes/no)<br/>(7)minimal-ui iOS 7.1 beta 2 中新增属性，可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui"></pre><div class="contentsignin">Copy after login</div></div></li><li><p>而如果你的网站不是响应式的，请不要使用 initial-scale 或者禁用缩放。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><p style="margin-top: 7px;"><meta name="viewport" content="width=device-width,user-scalable=yes"><br/></p></pre><div class="contentsignin">Copy after login</div></div><p>相关链接：非响应式设计的viewport<br/>适配 iPhone 6 和 iPhone 6plus 则需要写：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><meta name="viewport" content="width=375"> <meta name="viewport" content="width=414"></pre><div class="contentsignin">Copy after login</div></div><p>大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px，iPhone 6 上却是 375px，大部分 5.5 寸安卓机器（比如说三星 Note）的 viewport 宽为 400，iPhone 6 plus 上是 414px。</p></li></ul><h2>ios 设备</h2><hr/><ul class=" list-paddingleft-2"><li><p>添加到主屏后的标题（iOS 6 新增）</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><meta name="apple-mobile-web-app-title" content="标题"> <!-- 添加到主屏后的标题（iOS 6 新增） --></pre><div class="contentsignin">Copy after login</div></div></li><li><p>是否启用 WebApp 全屏模式</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 是否启用 WebApp 全屏模式 --></pre><div class="contentsignin">Copy after login</div></div></li><li><p>设置状态栏的背景颜色</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- 设置状态栏的背景颜色，只有在 `"apple-mobile-web-app-capable" content="yes"` 时生效 --></pre><div class="contentsignin">Copy after login</div></div><p>只有在 “apple-mobile-web-app-capable” content=”yes” 时生效</p></li><li><p>content 参数：<br/>(1) default 默认值。<br/>(2) black 状态栏背景是黑色。<br/>(3) black-translucent 状态栏背景是黑色半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。 如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。</p></li><li><p>禁止数字识自动别为电话号码</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false;"><meta name="format-detection" content="telephone=no" /> <!-- 禁止数字识自动别为电话号码 --></pre><div class="contentsignin">Copy after login</div></div><h2>iOS 图标</h2></li><li><p>rel 参数： apple-touch-icon <a href="http://www.php.cn/css/css-rwd-images.html" target="_blank">图片</a>自动处理成圆角和高光等效果。 apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。 iPhone 和 iTouch，默认 57x57 像素，必须有</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /> <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 --></pre><div class="contentsignin">Copy after login</div></div></li><li><p>iPad，72x72 像素，可以没有，但推荐有</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" /> <!-- iPad，72x72 像素，可以没有，但推荐有 --></pre><div class="contentsignin">Copy after login</div></div></li><li><p>Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 --></pre><div class="contentsignin">Copy after login</div></div></li><li><p>Retina iPad，144x144 像素，可以没有，但推荐有</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" /> <!-- Retina iPad，144x144 像素，可以没有，但推荐有 --></pre><div class="contentsignin">Copy after login</div></div></li><li><p>IOS 图标大小在iPhone 6 plus上是180×180，iPhone 6 是120x120。 适配iPhone 6 plus，则需要在<head>中加上这段</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><link rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png"></pre><div class="contentsignin">Copy after login</div></div><p><strong><em>iPad 的启动画面是不包括状态栏区域的。</em></strong><br/></p></li></ul><h2>iPad</h2><hr/><ul class=" list-paddingleft-2"><li><p>iPad 竖屏 768 x 1004（标准分辨率）</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" /> <!-- iPad 竖屏 768 x 1004（标准分辨率） --></pre><div class="contentsignin">Copy after login</div></div></li><li><p>iPad 竖屏 1536x2008（Retina）</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" /> <!-- iPad 竖屏 1536x2008（Retina） --></pre><div class="contentsignin">Copy after login</div></div></li><li><p>iPad 横屏 1024x748（标准分辨率）</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" /> <!-- iPad 横屏 1024x748（标准分辨率） --></pre><div class="contentsignin">Copy after login</div></div></li><li><p>iPad 横屏 2048x1496（Retina）</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /> <!-- iPad 横屏 2048x1496（Retina） --></pre><div class="contentsignin">Copy after login</div></div><p><strong><em>iPhone 和 iPod touch 的启动画面是包含状态栏区域的。</em></strong><br/>iPhone/iPod Touch 竖屏 320x480 (标准分辨率)</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" /> <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) --></pre><div class="contentsignin">Copy after login</div></div><p>iPhone/iPod Touch 竖屏 640x960 (Retina)</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" /> <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) --></pre><div class="contentsignin">Copy after login</div></div><p>iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" /> <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) --></pre><div class="contentsignin">Copy after login</div></div><p>添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） --></pre><div class="contentsignin">Copy after login</div></div><p>iPhone 6对应的图片大小是750×1294，iPhone 6 Plus 对应的是1242×2148 。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><link rel="apple-touch-startup-image" href="launch6.png" media="(device-width: 375px)"><link rel="apple-touch-startup-image" href="launch6plus.png" media="(device-width: 414px)"></pre><div class="contentsignin">Copy after login</div></div><h2>Windows 8</h2></li></ul><hr/><ul class=" list-paddingleft-2"><li><p>Windows 8 磁贴颜色</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:java;toolbar:false;"><meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 --></pre><div class="contentsignin">Copy after login</div></div></li><li><p>Windows 8 磁贴图标</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 --></pre><div class="contentsignin">Copy after login</div></div><h2>rss订阅</h2><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /> <!-- 添加 RSS 订阅 --></pre><div class="contentsignin">Copy after login</div></div><h2>favicon icon</h2><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> <!-- 添加 favicon icon --></pre><div class="contentsignin">Copy after login</div></div><p>比较详细的 favicon 介绍可参考github.com/audreyr/favicon-cheat-sheet</p></li></ul><h2>移动端的meta</h2><hr/><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /><meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="format-detection"content="telephone=no, email=no" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /><meta name="apple-mobile-web-app-capable" content="yes" /><!-- 删除苹果默认的工具栏和菜单栏 --> <meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 设置苹果工具栏颜色 --> <meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略页面中的数字识别为电话，忽略email识别 --><!-- 启用360浏览器的极速模式(webkit) --> <meta name="renderer" content="webkit"><!-- 避免IE使用兼容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 针对手持设备优化，主要是针对一些老的不识别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"><!-- 适应移动端end --></pre><div class="contentsignin">Copy after login</div></div><p>【相关推荐】</p> <p>1. <a href="http://www.php.cn/course/list/11.html" target="_self">免费html在线视频教程</a></p> <p>2. <a href="http://www.php.cn/course/27.html" target="_self">html开发手册</a></p> <p>3. <a href="http://www.php.cn/course/372.html" target="_self">php.cn原创html5视频教程</a></p> </li></ul><p>The above is the detailed content of Detailed introduction to the application of head tags in HTML. For more information, please follow other related articles on the PHP Chinese website!</p> </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="http://www.php.cn/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="http://www.php.cn/faq/361897.html" title="Relevant introduction to plug-in functions in HTML"> <span>Previous article：Relevant introduction to plug-in functions in HTML</span> </a> <a href="http://www.php.cn/faq/361958.html" title="How to display JSON in html?"> <span>Next article：How to display JSON in html?</span> </a> </div> <div class="wzconShengming"> <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="http://www.php.cn/faq/370272.html">Example tutorial on passing parameters using NameValuePair method</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/faq/370950.html">Use dom4j to parse xml document example</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/faq/367928.html">Catalog Service - Analysis of Microsoft microservice architecture example code</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/faq/367910.html">Detailed explanation of getting started with .net Elasticsearch examples</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/faq/367667.html">Detailed introduction to Spring boot adding jsp support configuration examples</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/faq/370887.html">How does JS detect whether the window opened by window.open is closed?</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/faq/361869.html">Share a garbled problem in sqlyog connecting to the database and its solution</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/faq/368866.html">Examples of using variable length parameters in Java</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/faq/371694.html">The latest Amap API WEB development example tutorial</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/faq/373276.html">Advantages and Disadvantages of AJAX</a> </div> <div>1970-01-01 08:00:00</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="http://www.php.cn/wenda/176396.html" target="_blank" title="The page suddenly cannot pull css or bootstrap" class="wdcdcTitle">The page suddenly cannot pull css or bootstrap</a> <a href="http://www.php.cn/wenda/176396.html" class="wdcdcCons">So I'm developing a page, I did part of it yesterday and it worked great, and today I cont...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2024-04-06 21:58:04</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>800</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/wenda/176380.html" target="_blank" title="SQL Count() also requires 0" class="wdcdcTitle">SQL Count() also requires 0</a> <a href="http://www.php.cn/wenda/176380.html" class="wdcdcCons">I have only one table and I want to count each entry of a tag that starts with 0. Now I tr...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2024-04-06 19:48:53</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>449</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/wenda/176360.html" target="_blank" title="CSS styles not applied to site" class="wdcdcTitle">CSS styles not applied to site</a> <a href="http://www.php.cn/wenda/176360.html" class="wdcdcCons">I'm making a website using Bootstrap5 but the index.css properties are not being applied t...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2024-04-06 17:12:23</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>336</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/wenda/176352.html" target="_blank" title="Why is my hr tag translucent when it is set to a solid color of white?" class="wdcdcTitle">Why is my hr tag translucent when it is set to a solid color of white?</a> <a href="http://www.php.cn/wenda/176352.html" class="wdcdcCons">I have a html (with bootstrap) and a css, in my html I have a <hr> tag which has a c...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2024-04-06 16:13:26</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>500</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/wenda/176347.html" target="_blank" title="JavaScript hover events on vendor-specific pseudo-elements" class="wdcdcTitle">JavaScript hover events on vendor-specific pseudo-elements</a> <a href="http://www.php.cn/wenda/176347.html" class="wdcdcCons">I have the following htmlinput tag. $("input[type='range']::-webkit-slider-thumb"...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2024-04-06 15:35:24</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>274</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="http://www.php.cn/faq/zt" target="_blank">More> </a> </div> <div class="wzcttlist"> <ul> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/faq/htmlbq"><img src="https://img.php.cn/upload/subject/202407/22/2024072214431586789.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="html copyright symbol" /> </a> <a target="_blank" href="http://www.php.cn/faq/htmlbq" class="title-a-spanl" title="html copyright symbol"><span>html copyright symbol</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/faq/htmlzxbjq"><img src="https://img.php.cn/upload/subject/202407/22/2024072214403473154.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="html online editor" /> </a> <a target="_blank" href="http://www.php.cn/faq/htmlzxbjq" class="title-a-spanl" title="html online editor"><span>html online editor</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/faq/htmlwyzz"><img src="https://img.php.cn/upload/subject/202407/22/2024072214275948120.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="html web page production" /> </a> <a target="_blank" href="http://www.php.cn/faq/htmlwyzz" class="title-a-spanl" title="html web page production"><span>html web page production</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/faq/htmlkg"><img src="https://img.php.cn/upload/subject/202407/22/2024072214273274014.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="html space" /> </a> <a target="_blank" href="http://www.php.cn/faq/htmlkg" class="title-a-spanl" title="html space"><span>html space</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/faq/htmlssm"><img src="https://img.php.cn/upload/subject/202407/22/2024072214210727109.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="what is html" /> </a> <a target="_blank" href="http://www.php.cn/faq/htmlssm" class="title-a-spanl" title="what is html"><span>what is html</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/faq/htmlztdxzmsz"><img src="https://img.php.cn/upload/subject/202407/22/2024072214205132478.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="How to set html font size" /> </a> <a target="_blank" href="http://www.php.cn/faq/htmlztdxzmsz" class="title-a-spanl" title="How to set html font size"><span>How to set html font size</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/faq/htmlztxt"><img src="https://img.php.cn/upload/subject/202407/22/2024072214125629445.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="html to txt" /> </a> <a target="_blank" href="http://www.php.cn/faq/htmlztxt" class="title-a-spanl" title="html to txt"><span>html to txt</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/faq/htmlwbkdmzmx"><img src="https://img.php.cn/upload/subject/202407/22/2024072214120496282.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="How to write html text box code" /> </a> <a target="_blank" href="http://www.php.cn/faq/htmlwbkdmzmx" class="title-a-spanl" title="How to write html text box code"><span>How to write html text box code</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="http://www.php.cn/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="http://www.php.cn/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="How to change image size" href="http://www.php.cn/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="How to make font bold in HTML" href="http://www.php.cn/faq/414520.html">How to make font bold in HTML</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="How to set the size of html images" href="http://www.php.cn/faq/475145.html">How to set the size of html images</a> </div> </li> </ul> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="wzrThree"> <div class="wzrthree-title"> <div>Popular Tutorials</div> <a target="_blank" href="http://www.php.cn/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="http://www.php.cn/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="http://www.php.cn/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>1418354 <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="http://www.php.cn/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="http://www.php.cn/course/74.html">PHP introductory tutorial one: Learn PHP in one week</a> <div class="wzrthreerb"> <div>4259764 <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="http://www.php.cn/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="http://www.php.cn/course/286.html">JAVA Beginner's Video Tutorial</a> <div class="wzrthreerb"> <div>2493481 <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="http://www.php.cn/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="http://www.php.cn/course/504.html">Little Turtle's zero-based introduction to learning Python video tutorial</a> <div class="wzrthreerb"> <div>504660 <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="http://www.php.cn/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="http://www.php.cn/course/2.html">PHP zero-based introductory tutorial</a> <div class="wzrthreerb"> <div>859238 <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="http://www.php.cn/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="http://www.php.cn/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 >1418354 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="http://www.php.cn/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="http://www.php.cn/course/286.html">JAVA Beginner's Video Tutorial</a> <div class="wzrthreerb"> <div >2493481 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="http://www.php.cn/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="http://www.php.cn/course/504.html">Little Turtle's zero-based introduction to learning Python video tutorial</a> <div class="wzrthreerb"> <div >504660 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="http://www.php.cn/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="http://www.php.cn/course/901.html">Quick introduction to web front-end development</a> <div class="wzrthreerb"> <div >215406 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="http://www.php.cn/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="http://www.php.cn/course/234.html">Master PS video tutorials from scratch</a> <div class="wzrthreerb"> <div >881244 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="http://www.php.cn/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="http://www.php.cn/course/1648.html">[Web front-end] Node.js quick start</a> <div class="wzrthreerb"> <div >6697 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="http://www.php.cn/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="http://www.php.cn/course/1647.html">Complete collection of foreign web development full-stack courses</a> <div class="wzrthreerb"> <div >5203 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="http://www.php.cn/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="http://www.php.cn/course/1646.html">Go language practical GraphQL</a> <div class="wzrthreerb"> <div >4357 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="http://www.php.cn/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="http://www.php.cn/course/1645.html">550W fan master learns JavaScript from scratch step by step</a> <div class="wzrthreerb"> <div >642 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="http://www.php.cn/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="http://www.php.cn/course/1644.html">Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours</a> <div class="wzrthreerb"> <div >22186 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="http://www.php.cn/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="http://www.php.cn/toolset/js-special-effects/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="http://www.php.cn/toolset/js-special-effects/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="http://www.php.cn/toolset/js-special-effects/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="http://www.php.cn/toolset/js-special-effects/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="http://www.php.cn/toolset/js-special-effects/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="http://www.php.cn/toolset/js-special-effects/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="http://www.php.cn/toolset/js-special-effects/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="http://www.php.cn/toolset/js-special-effects/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="http://www.php.cn/toolset/website-source-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="http://www.php.cn/toolset/website-source-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="http://www.php.cn/toolset/website-source-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="http://www.php.cn/toolset/website-source-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="http://www.php.cn/toolset/website-source-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="http://www.php.cn/toolset/website-source-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="http://www.php.cn/toolset/website-source-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="http://www.php.cn/toolset/website-source-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="http://www.php.cn/toolset/website-materials/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="http://www.php.cn/toolset/website-materials/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="http://www.php.cn/toolset/website-materials/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="http://www.php.cn/toolset/website-materials/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="http://www.php.cn/toolset/website-materials/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="http://www.php.cn/toolset/website-materials/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="http://www.php.cn/toolset/website-materials/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="http://www.php.cn/toolset/website-materials/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="http://www.php.cn/toolset/website-source-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="http://www.php.cn/toolset/website-source-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="http://www.php.cn/toolset/website-source-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="http://www.php.cn/toolset/website-source-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="http://www.php.cn/toolset/website-source-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="http://www.php.cn/toolset/website-source-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="http://www.php.cn/toolset/website-source-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="http://www.php.cn/toolset/website-source-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> <footer> <div class="footer"> <div class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>Public welfare online PHP training，Help PHP learners grow quickly！</p> </div> <div class="footermid"> <a href="http://www.php.cn/about/us.html">About us</a> <a href="http://www.php.cn/about/disclaimer.html">Disclaimer</a> <a href="http://www.php.cn/update/article_0_1.html">Sitemap</a> </div> <div class="footerbottom"> <p> © php.cn All rights reserved </p> </div> </div> </footer> <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?1731798546"></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>