One article explains HTML tags and attributes in detail (a brief analysis of the main structure)-HTML Tutorial-php.cn

This article will take you through HTML tags and attributes, and talk about the main structure and related tags of HTML documents. I hope it will be helpful to you!

One article explains HTML tags and attributes in detail (a brief analysis of the main structure)

The main structure of HTML

The basic structure of the HTML page is as follows, which includes various A variety of tags required to create web pages (such as doctype, html, head and body, etc.).

<!--这是html的注释信息-->

<!DOCTYPE html> <!--这是DOCTYPE声明-->

<html> <!--这是根-->

<head> <!--这是头-->

    <meta charset = "UTF-8"> <!--  描述性标签  -->
    
     <title>Hello</title> <!--标题栏-->
</head>

    <body> <!--网页体-->
    
    <!--这里的内容显示到网页上-->
    这是我的第一个HTML页面
    
    </body>
</html>

Copy after login

Top declaration<!DOCTYPE html>
- ##The declaration is the first component of the document , located at the very top of the document.
- This tag tells the browser the HTML specification used.
, ends with </html>, and contains the head tag in the middle And the body tag

The syntax format of HTML tagGenerally, an HTML tag consists of a start tag, attributes , content and end tag. The name of the tag is not case-sensitive, but the values of most attributes need to be case-sensitive, as shown below:

	  属性
	   ↓
<div class="foo">PHP中文网</div>
 ↑            ↑           ↑
开始标签        内容   结束标签

Copy after login

In addition to the class attribute, the start tag can also contain other attributes. Information, such as id, title, etc., we will explain these later.

Note that although HTML tags are not case-sensitive in syntax, for the sake of standardization and professionalism, it is strongly recommended to always use lowercase when defining tags.

When using a browser to open the HTML document we wrote, the browser will read the content in the document from top to bottom, and render the content in the tag in the browser based on the HTML tags and attributes. in the vessel.

An HTML document must have some basic tags so that the browser can distinguish between ordinary text and HTML documents. You can use any number of tags depending on the effect you want to achieve, but there are a few things to note:

Self-closing and tags

Some HTML tags do not have a separate closing tag, but add / in the opening tag to close it. Such labels are called autistic and labelling. Please see the following example:

<img src="./logo.png" alt="C语言中文网Logo" />  <!-- 图像 -->
<hr />  <!-- 分割线 -->
<br />  <!-- 文本换行 -->
<input type="text" placeholder="请输入内容" />  <!-- 文本输入框 -->

Copy after login

The closing tag does not need to surround the content, so there is no need for a separate closing tag. Only a small number of HTML tags are self-closing.

Represents HTML comments, used to explain HTML code. The browser will ignore the comment content, so users cannot see the comments on the web page

The concept and use of HTML attributes

What are attributes

Attributes can be provided for HTML tags Some additional information, or modifications to HTML tags. Attributes need to be added in the start tag, and the syntax format is:

attr="value"

Copy after login

attr

represents the attribute name, value represents the attribute value. Attribute values must be surrounded by double quotes "" or single quotes ''.

Note that although both double quotes and single quotes can surround attribute values, for the sake of standardization and professionalism, please use double quotes as much as possible.

A tag can have no attributes, or it can have one or more attributes.

Examples of using HTML attributes:

<p id="user-info" class="color-red">
欢迎 <font color="red" size="3">Tom</font> 来到PHP中文网。
<p>

Copy after login

Special properties

There are many HTML attributes, which can be roughly divided into two categories:

Some attributes apply to most or all HTML tags, we call these attributes universal attributes;

Some attributes only apply to one or a few specific HTML tags, we call these attributes special attributes.

The One article explains HTML tags and attributes in detail (a brief analysis of the main structure) tag in HTML has two special attributes, src and alt. The tag also has two special attributes, href and target, as shown in the following example:

<img src="./logo.png" alt="PHP中文网Logo" width="100"    style="max-width:90%">
<a href="http://c.biancheng.net/" target="_blank">PHP中文网</a>

Copy after login

Description of the code:

One article explains HTML tags and attributes in detail (a brief analysis of the main structure)

The src attribute in the tag is used to define the path of the image, and the alt attribute is used to define the description information of the image. When the image is abnormal, it cannot be displayed normally. The information in alt will be displayed.

The href attribute of the tag is used to define the address of the link, and the target attribute is used to define how the new page is opened in the browser.

Custom attributes

In addition to its own attributes, HTML also allows us to customize attributes. Although these attributes can be recognized by the browser, But it will not add any special effects. We need to use CSS and JavaScript to process custom attributes and add specified styles or behaviors to HTML tags. The

data-*

attribute is used to store custom data applied behind a private page. It is a new attribute in HTML5. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><element data-*="somevalue"></pre><div class="contentsignin">Copy after login</div></div>

data-* 属性可以在所有的 HTML 元素中嵌入数据。

自定义的数据可以让页面拥有更好的交互体验（不需要使用 Ajax 或去服务端查询数据）。

data-* 属性由以下两部分组成：

属性名不要包含大写字母，在 data- 后必须至少有一个字符。
属性值，该属性值可以是任何字符串

注意：自定义属性前缀 "data-" 会被客户端忽略。

利用dataset可以获取data-属性构造的对象，该方法目前只能在Chrome 、Opera等部分浏览器中实现，其他浏览器如需获取其属性值需要使用getAttribute和setAttribute来操作。

只要在标签里面以”data-”为前缀定义我们的自定义属性就可以用来进行一些数据的存放。

<div id="myDiv" data-attribute="value">在标签里设置H5新增的自定义属性</div>

Copy after login

这个data属性还可以应用在CSS中，前提是你的浏览器支持after伪类，以及content的attr属性（低版本的IE不支持）：

<div id="myDiv" data-attribute="属性值">data属性应用于CSS中</div>

Copy after login

#myDiv{
  position: ralative;
}
 
#myDiv:hover:after{
  position: absolute;
  top: 0px;
  left: 0px;
  content: attr(data-attribute);
  color: red;
}

Copy after login

如何获取data属性的值？

<div id="myDiv" data-attribute="value">在标签里设置H5新增的自定义属性</div>

Copy after login

1、使用getAttribute来获取

var myDiv = document.getElementById("myDiv");
var theValue = myDiv.getAttribute("user-defined-attribute");

Copy after login

2、使用Html5自定义属性对象Dataset来获取

var myDiv = document.getElementById("myDiv");
 
var theValue = myDiv.dataset.attribute;

Copy after login

注意：带连字符连接的名称在使用的时候需要命名驼峰化，即大小写组合书写，这与应用元素的style对象类似，dom.style.borderColor。例如data属性为data-other-attribute，则我们要获取相应的值可以使用：myp.dataset.otherAttribute

如果Html元素定义了多个自定义属性，如何获取？

<div id="myDiv" data-attribute1="value" data-attribute2="value2" data-attribute3="value3">在标签里设置多个自定义属性</div>

Copy after login

1、使用循环遍历

 var myDiv = document.getElementById("myDiv");
var attrs = myDiv.attributes,
var expense = {}, i, j;  
for (i = 0, j = attrs.length; i < j; i++) {
  if(attrs[i].name.substring(0, 5) == &#39;data-&#39;) {
    expense[attrs[i].name.substring(5)] = attrs[i].value;
  }
}

Copy after login

2、使用dataset属性

var expense = document.getElementById(&#39;myDiv&#39;).dataset;

Copy after login

注：dataset并不是典型意义上的JavaScript对象，而是个DOMStringMap对象，DOMStringMap是HTML5一种新的含有多个名-值对的交互变量

1）、让所有的自定义的属性值塞到一个数组中

var chartInput = [];
 
for (var item in expense) {
  chartInput.push(expense[item]);
}

Copy after login

2）、删掉一个data属性

delete myDiv.dataset.attribute;

Copy after login

3、增加一个data属性

myDiv.dataset.attribute4 = &#39;value4&#39;;

Copy after login

dataset的兼容性处理

如果浏览器不支持dataset，有必要做一下兼容处理：

if(myDiv.dataset) {
  myDiv.dataset.attribute = "valueXX"; // 设置自定义属性
  var theValue = myDiv.dataset.attribute; // 获取自定义属性
} else {
  myDiv.setAttribute("data-attribute", "valueXX"); // 设置自定义属性
  var theValue = myDiv.getAttribute("data-attribute"); // 获取自定义属性
}

Copy after login

结语：

使用dataset操作data 要比使用getAttribute速度稍微慢些，虽然使用dataset不能提高代码的性能，但是对于简洁代码，提高代码的可读性和可维护性是很有帮助的。

通用属性介绍

HTML 标签中有一些通用的属性，如 id、title、class、style 等，这些通用属性可以在大多数 HTML 标签中使用，下面来简单介绍一下它们的用法。

1) id

id 属性用来赋予某个标签唯一的名称（标识符），当我们使用 CSS 或者 JavaScript 来操作这个标签时，就可以通过 id 属性来找到这个标签。

为标签定义 id 属性可以给我们提供很多便利，比如：

如果标签中带有 id 属性作为唯一标识符，通过 id 属性可以很方便的定位到该标签；

如果 HTML 文档中包含多个同名的标签，利用 id 属性的唯一性，可以很方便的区分它们。

注意：在一个 HTML 文档中 id 属性的值必须是唯一的。

示例代码如下所示：

<input type="text" id="username" />
<div id="content">PHP中文网</div>
<p id="url">https://www.php.cn/</p>

Copy after login

2) class

与 id 属性类似，class 属性也可以为标签定义名称（标识符），不同的是 class 属性在整个 HTML 文档中不必是唯一的，我们可以为多个标签定义相同的 class 属性值。另外，还可以为一个 HTML 标签定义多个 class 属性值，如下所示：

<div class="className1 className2 className3"></div>
<p>PHP中文网</p>
<div>https://www.php.cn/</div>

Copy after login

当使用 CSS 或者 JavaScript 来操作 HTML 标签时，同样可以使用 class 属性来找到对应的 HTML 标签。由于 class 属性不是唯一的，所以通过 CSS 或 JavaScript 对 HTML 标签的操作会应用于所有具有同名 class 属性的标签中。

3) title

title 属性用来对标签内容进行描述说明，当鼠标移动到该标签上方时会显示出 title 属性的值，如下例所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>演示文档</title>
</head>
<body>
    <a href="https://www.php.cn/" title="HTML教程">HTML教程</a>
</body>
</html>

Copy after login

运行结果如下图所示：

One article explains HTML tags and attributes in detail (a brief analysis of the main structure)

将鼠标在链接处悬停片刻才能看到提示框。

4) style

使用 style 属性我们可以在 HTML 标签内部为标签定义 CSS 样式，例如设置文本的颜色、字体等，如下例所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>演示文档</title>
</head>
<body>
    <p style="color:red;">https://www.php.cn/</p>
    <img src="./logo.png"   style="max-width:90%" alt="PHP中文网LOGO">
    <div style="padding:10px;border:2px solid #999;text-align:center;">PHP中文网</div>
</body>
</html>

Copy after login

运行结果如下图所示：

One article explains HTML tags and attributes in detail (a brief analysis of the main structure)

标签中常用的标签

1、标签</strong></p><p><title> 标签用来定义 HTML 文档的标题，只有包含 <title> 标签的文档才算是一个有效的 HTML 文档。另外，一个 HTML 文档中仅允许存在一个 <title> 标签，并且 <title> 标签必须放置在 <head> 标签中。</p><p><strong>2、<base> 标签</strong></p><p><base> 标签用于为页面中所有相对链接指定一个基本链接，当您设置了基本链接后，当前页面中的所有相对链接都会使用这个基本链接作为前缀，如下例所示：</p><p><strong>3、<link> 标签</strong></p><p><link> 标签经常用于引用外部 CSS 样式表，<link> 标签中包含两个主要的属性，分别是 rel 和 href。rel 属性用来指示引用文件的类型，href 属性用来设置外部文件的路径。示例代码如下：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><link rel="stylesheet" href="common.css"></pre><div class="contentsignin">Copy after login</div></div><p><strong>4、<style>标签</strong></p><p>使用 <style> 标签可以在 HTML 文档中嵌入 CSS 样式，需要注意的是在 <style> 标签中定义的样式仅对当前 HTML 文档有效。示例代码如下：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><style> body { background-color: YellowGreen; } h1 { color: red; } </style></pre><div class="contentsignin">Copy after login</div></div><p><strong>5、<meta> 标签</strong></p><p><meta> 标签用于提供有关 HTML 文档的元数据，例如页面有效期、页面作者、关键字列表、页面描述等信息。<meta> 标签定义的数据并不会显示在页面上，但却会被浏览器解析。</p><p><strong>6、<script> 标签</strong></p><p><script> 标签用于定义 JavaScript 脚本，示例代码如下：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><script> document.write("PHP中文网") </script></pre><div class="contentsignin">Copy after login</div></div><p><strong>7、<noscript> 标签</strong></p><p>当用户的浏览器不支持 JavaScript 脚本或者禁用 JavaScript 脚本时，可以在 <noscript> 标签中定义一些内容来替代不能运行的 JavaScript 脚本或者给用户一些提示。除了 <script> 标签外，在 <noscript> 标签中可以包含任何 HTML 元素</p><p><strong><span style="font-size: 18px;">HTML注释标签<code></code></span></strong></p><p>在 HTML 中您可以使用<code></code>在代码中添加注释，<code></code>之间的所有内容都会被视为注释。示例代码如下：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><!DOCTYPE html> <html>  <head> <meta charset="UTF-8">  <title>HTML注释的写法</title> </head>   <body>  <p>欢迎来到PHP中文网</p> </body>  </html></pre><div class="contentsignin">Copy after login</div></div><p><img src="https://img.php.cn/upload/image/659/984/226/1659436774839636.png" title="1659436774839636.png" alt="One article explains HTML tags and attributes in detail (a brief analysis of the main structure)"></p> <p>注释可以出现在 HTML 文档的任意位置，包括文档开头、文档末尾、文档中间、标签外部、标签内容中等。</p> <p>相关推荐：《<a href="http://www.php.cn/course/list/11.html" target="_blank" textvalue="html视频教程">html视频教程</a>》</p><p>The above is the detailed content of One article explains HTML tags and attributes in detail (a brief analysis of the main structure). 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="https://www.php.cn/search?word=html5" target="_blank">html5</a> </div> </div> <div style="display: inline-flex;float: right; color:#333333;">source：php.cn</div> </div> <div class="wzconOtherwz"> <a href="https://www.php.cn/faq/494577.html" title="HTML Hypertext Markup Language - Where is the hyper? (document analysis)"> <span>Previous article：HTML Hypertext Markup Language - Where is the hyper? (document analysis)</span> </a> <a href="https://www.php.cn/faq/494583.html" title="A detailed explanation of HTML comments and colors (color names, hexadecimal values)"> <span>Next article：A detailed explanation of HTML comments and colors (color names, hexadecimal values)</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="https://www.php.cn/faq/529366.html">Understand the sentinel in Redis in depth</a> </div> <div>2023-04-26 17:59:18</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/faq/529362.html">[Organization and sharing] 7 popular React state management tools</a> </div> <div>2023-04-26 17:47:48</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/faq/529360.html">An article discusses the difference between key in Vue2 and key in Vue3</a> </div> <div>2023-04-26 17:41:42</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/faq/529358.html">An article about memory control in Node</a> </div> <div>2023-04-26 17:37:05</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/faq/529356.html">Sharing practical Excel skills: 4 tips for deleting duplicate values!</a> </div> <div>2023-04-26 17:31:25</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/faq/529350.html">Sharing practical Word skills: The Simplified to Traditional conversion function can be used in this way!</a> </div> <div>2023-04-26 17:27:32</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/faq/528167.html">How to solve cross-domain issues? A brief analysis of common solutions</a> </div> <div>2023-04-25 19:57:58</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/faq/528165.html">One article to understand the singleton pattern in JavaScript</a> </div> <div>2023-04-25 19:53:11</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/faq/528163.html">Learn more about Buffers in Node</a> </div> <div>2023-04-25 19:49:11</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/faq/528161.html">Explore how to write unit tests in Vue3</a> </div> <div>2023-04-25 19:41:54</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="https://www.php.cn/wenda/176344.html" target="_blank" title="How do I get my image to appear on the page's main display?" class="wdcdcTitle">How do I get my image to appear on the page's main display?</a> <a href="https://www.php.cn/wenda/176344.html" class="wdcdcCons">What I want to do is receive some photos using NASAAPI. These photos are then displayed on...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2024-04-06 15:33:12</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>433</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/wenda/176282.html" target="_blank" title="Can PDF files run HTML5 and Javascript?" class="wdcdcTitle">Can PDF files run HTML5 and Javascript?</a> <a href="https://www.php.cn/wenda/176282.html" class="wdcdcCons">I have a stupid idea to try and make a program that won't be blocked on any computer since...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2024-04-05 12:57:00</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>456</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/wenda/175892.html" target="_blank" title="What is the difference between enctype and formenctype in HTML5?" class="wdcdcTitle">What is the difference between enctype and formenctype in HTML5?</a> <a href="https://www.php.cn/wenda/175892.html" class="wdcdcCons">I'm just wondering what's the difference between the attributes enctype and formenctype in...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2024-04-02 11:47:56</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>275</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/wenda/175834.html" target="_blank" title="Make the page mobile-friendly?" class="wdcdcTitle">Make the page mobile-friendly?</a> <a href="https://www.php.cn/wenda/175834.html" class="wdcdcCons">I have many web pages and some websites. The thing is, I'm a beginner. I'm using basic htm...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2024-04-01 20:42:38</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>259</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="https://www.php.cn/faq/zt" target="_blank">More> </a> </div> <div class="wzcttlist"> <ul> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/faq/html5dhzzynxz"><img src="https://img.php.cn/upload/subject/202407/22/2024072213560284279.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="What are the production methods of html5 animation production?" /> </a> <a target="_blank" href="https://www.php.cn/faq/html5dhzzynxz" class="title-a-spanl" title="What are the production methods of html5 animation production?"><span>What are the production methods of html5 animation production?</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/faq/htmlyhtmldeqb"><img src="https://img.php.cn/upload/subject/202407/22/2024072212284445490.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="The difference between HTML and HTML5" /> </a> <a target="_blank" href="https://www.php.cn/faq/htmlyhtmldeqb" class="title-a-spanl" title="The difference between HTML and HTML5"><span>The difference between HTML and HTML5</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/faq/hsdfhzssm"><img src="https://img.php.cn/upload/subject/202407/22/2024072214050569257.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="What is the return value of the function" /> </a> <a target="_blank" href="https://www.php.cn/faq/hsdfhzssm" class="title-a-spanl" title="What is the return value of the function"><span>What is the return value of the function</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/faq/busyboxvbnkj"><img src="https://img.php.cn/upload/subject/202407/22/2024072213321341757.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="busyboxv1.30.1 cannot boot" /> </a> <a target="_blank" href="https://www.php.cn/faq/busyboxvbnkj" class="title-a-spanl" title="busyboxv1.30.1 cannot boot"><span>busyboxv1.30.1 cannot boot</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/faq/tplinklyqszwz"><img src="https://img.php.cn/upload/subject/202407/22/2024072212283896398.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="How to set the URL of tplink router" /> </a> <a target="_blank" href="https://www.php.cn/faq/tplinklyqszwz" class="title-a-spanl" title="How to set the URL of tplink router"><span>How to set the URL of tplink router</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/faq/mysqlzdalter"><img src="https://img.php.cn/upload/subject/202407/22/2024072213363655361.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="A complete list of alter commands in Mysql" /> </a> <a target="_blank" href="https://www.php.cn/faq/mysqlzdalter" class="title-a-spanl" title="A complete list of alter commands in Mysql"><span>A complete list of alter commands in Mysql</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/faq/romhramqb"><img src="https://img.php.cn/upload/subject/202407/22/2024072214374916278.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="The difference between rom and ram" /> </a> <a target="_blank" href="https://www.php.cn/faq/romhramqb" class="title-a-spanl" title="The difference between rom and ram"><span>The difference between rom and ram</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/faq/phpzcydbds"><img src="https://img.php.cn/upload/subject/202407/22/2024072211492852931.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Commonly used expressions in php" /> </a> <a target="_blank" href="https://www.php.cn/faq/phpzcydbds" class="title-a-spanl" title="Commonly used expressions in php"><span>Commonly used expressions in php</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="https://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="https://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="https://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="https://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="https://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="https://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="https://www.php.cn/course/1406.html" title="Front-end basic HTML5+CSS3 from entry to proficiency (full version)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6242c6e19bf70362.png" alt="Front-end basic HTML5+CSS3 from entry to proficiency (full version)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Front-end basic HTML5+CSS3 from entry to proficiency (full version)" href="https://www.php.cn/course/1406.html">Front-end basic HTML5+CSS3 from entry to proficiency (full version)</a> <div class="wzrthreerb"> <div>296488 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="1406"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/course/1439.html" title="Front-end HTML5+CSS3 (goddess version)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62ce7dc353d67580.png" alt="Front-end HTML5+CSS3 (goddess version)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Front-end HTML5+CSS3 (goddess version)" href="https://www.php.cn/course/1439.html">Front-end HTML5+CSS3 (goddess version)</a> <div class="wzrthreerb"> <div>218398 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="1439"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/course/1239.html" title="HTML5 front-end interview questions" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/015/611cb718840ae378.jpg" alt="HTML5 front-end interview questions"/> </a> <div class="wzrthree-right"> <a target="_blank" title="HTML5 front-end interview questions" href="https://www.php.cn/course/1239.html">HTML5 front-end interview questions</a> <div class="wzrthreerb"> <div>25621 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="1239"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/course/1006.html" title="HTML5 development practice: front-end production of Baidu takeout mobile website" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/625d1f32b94f2989.jpg" alt="HTML5 development practice: front-end production of Baidu takeout mobile website"/> </a> <div class="wzrthree-right"> <a target="_blank" title="HTML5 development practice: front-end production of Baidu takeout mobile website" href="https://www.php.cn/course/1006.html">HTML5 development practice: front-end production of Baidu takeout mobile website</a> <div class="wzrthreerb"> <div>64398 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="1006"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/course/1277.html" title="The most easy-to-understand HTML+CSS course in 9 days" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/015/6135e057b3c0f181.jpg" alt="The most easy-to-understand HTML+CSS course in 9 days"/> </a> <div class="wzrthree-right"> <a target="_blank" title="The most easy-to-understand HTML+CSS course in 9 days" href="https://www.php.cn/course/1277.html">The most easy-to-understand HTML+CSS course in 9 days</a> <div class="wzrthreerb"> <div>44020 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="1277"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/course/1022.html" title="HTML+CSS web page basics" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6256990bbf04e971.png" alt="HTML+CSS web page basics"/> </a> <div class="wzrthree-right"> <a target="_blank" title="HTML+CSS web page basics" href="https://www.php.cn/course/1022.html">HTML+CSS web page basics</a> <div class="wzrthreerb"> <div>50525 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="1022"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="two" style="display: none;"> <li> <a target="_blank" href="https://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="https://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 >1419979 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="https://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="https://www.php.cn/course/286.html">JAVA Beginner's Video Tutorial</a> <div class="wzrthreerb"> <div >2504301 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="https://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="https://www.php.cn/course/504.html">Little Turtle's zero-based introduction to learning Python video tutorial</a> <div class="wzrthreerb"> <div >505370 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="https://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="https://www.php.cn/course/901.html">Quick introduction to web front-end development</a> <div class="wzrthreerb"> <div >215507 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="https://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="https://www.php.cn/course/234.html">Master PS video tutorials from scratch</a> <div class="wzrthreerb"> <div >883764 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="https://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="https://www.php.cn/course/1648.html">[Web front-end] Node.js quick start</a> <div class="wzrthreerb"> <div >6973 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="https://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="https://www.php.cn/course/1647.html">Complete collection of foreign web development full-stack courses</a> <div class="wzrthreerb"> <div >5416 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="https://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="https://www.php.cn/course/1646.html">Go language practical GraphQL</a> <div class="wzrthreerb"> <div >4561 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="https://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="https://www.php.cn/course/1645.html">550W fan master learns JavaScript from scratch step by step</a> <div class="wzrthreerb"> <div >659 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="https://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="https://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 >23087 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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://www.php.cn/about/us.html">About us</a> <a href="https://www.php.cn/about/disclaimer.html">Disclaimer</a> <a href="https://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?1732264760"></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>