Home > Web Front-end > HTML Tutorial > Detailed introduction to html paragraph

tag

Detailed introduction to html paragraph

tag

黄舟
Release: 2017-07-03 11:46:26
Original
6249 people have browsed it

Tags define paragraphs.

p elements automatically create some whitespace before and after them. The browser adds these spaces automatically, or you can specify them in your stylesheet.

The paragraph spacing
IE defaults to 19px, through the margin-top attribute of p Set
FF to 1.12em by default, set p through the
margin-bottom attribute of p to block display by default, and clear the paragraph spacing , generally you can set

p {
   margin-top:0;
   margin-bottom:0;
}
Copy after login


## Further reading: Allowed paragraph usage

Paragraphs can be specified only within blocks, or they can be used with other paragraphs, lists, forms, and pre-formatted text. In general, this means that paragraphs can appear anywhere there is appropriate text flow, such as in the body of the document, within list elements, etc.

From a technical point of view, paragraphs cannot appear in headers, anchors, or other places that strictly require content to be text only. In fact, most browsers ignore this restriction and format paragraphs as part of the content of the containing element.

<html>
<body>
<p>这是段落。</p>
<p>这是段落。</p>
<p>这是段落。</p>
<p>段落元素由 p 标签定义。</p> 
</body>
</html>
Copy after login

In HTML, the P tag cannot contain the p tag

Deep study:

##Let’s first understand in-lineInline elements and block-line block elements, because HTML Almost all elements in it are either inline elements or block elements.

The word in-line has many interpretations: inline, inline, inline, line level, etc., but they all mean the same thing means, here we choose the customary name - inline.

You can understand the difference between the two by looking at the following example:

##

Test the block element and

Differences between inline elements

##

Test it

Block elements< ;/p>

The difference between inline elements

The effect is as follows:

##In the above example,

will generate a new line by itself, while does not wrap. This is without CSS rendering. That's it. Similarly, we can also define p as an inline element and span as a block element through CSS. However, we cannot convert them arbitrarily in HTML. Block elements can contain inline elements or certain block elements ( The above example is actually a wrong use --->I put

inside

), But inline elements cannot contain block elements, they can only contain other inline elements. Element

, look at this again:

<h2>我喜欢在
<a href="
http://bbs.blueidea.com/
 " >经典论坛</a>
讨论Web标准的原因。</h2>
Copy after login

# where

is a block element , and is an inline element. It is not wrong for

to contain . Similarly,

can contain

, and it is also correct for

to contain Yes, but if it is like this, it is wrong because inline elements should not contain block elements:


# #There are also situations where some block elements cannot contain other block elements. For example:

<p>测试文字
     < ul>
          <li>现阶段是不能这样用的,要等到XHTML 2.0才可以这样用。</li>
      </ul>
       测试文字
    </p>
Copy after login

而这样又是可以的。

  <ul>
         <li><p>这样是可以的</p></li>
    </ul>
Copy after login


为什么呢?因为我们使用的DTD中规定了块级元素是不能放在

里面的,再加上一些浏览器纵容这样的写法:

 <p>这是一个段落的开始
     <p>这是另一个段落的开始
Copy after login


当一个

签还没结束时,遇到下一个块元素就会把自己结束掉,其实浏览器是把它们处理成这样:

 <p>这是一个段落的开始</p>
    <p>这是另一个段落的开始</p>
Copy after login


所以刚才那样的写法会变成这样:

<p>测试文字</p>
    <ul>
         <li>现阶段是不能这样用的,要等到XHTML 2.0才可以这样用。</li>
    </ul>
测试文字<p></p>
Copy after login


这也是跟刚才说第一个例子中

里面放

不合理是同一个道理。

那哪些块元素里面不能放哪些块元素呢?我知道你有这个疑问,也知道我仅仅列一张清单你不好记住它们。我们可以先把所有的块元素再次划分成几个级别的,我们已经知道是在最外层,下一级里面只会有、、、,而我们已经知道了可视的元素只会出现在<body>里,所以我们把<body>划在第一个级里面,接着,把不可以自由嵌套的元素划在第三个级,其他的就归进第二个级。</span></p><p><span style="font-size: 13px; color: #000000;"> </span><span style="font-size: 13px; color: #ff00ff;">所谓的不可自由嵌套的元素就是里面只能放内联元素的,它们包括有:标题标记的<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<caption>;段落标记的<p>;分隔线<hr>和一个特别的元素<dt>(它只存在于列表元素<dl>的子一级)。</span></p><p><span style="font-size: 13px; color: #000000;"> 为什么说第二级的元素可以自由嵌套呢?我们可以把它们看成是一些容器(或者说是盒子), 这些容器的大小可以自由变化,例如我们可以把<ul>嵌在<p>里面,也可以把<p>嵌在<li>里面。</span></p><p><span style="font-size: 13px; color: #ff00ff;"> 在HTML里有几个元素是比较特别的:<ul>、<ol>、<dl>、<table>,它们的子一层必须是指定元素,<ul>、<ol>的子一级必须是<li>;<dl>的子一级必须是<dt>或者<dd>;<table>的子一层必须是<caption> 或<thead>、<tfoot>、<tbody>等,而再子一层必须是<tr> (<tr>只存在于<thead>、<tfoot>、<tbody>中),之后才是可放内容的<td>或者<th>。</span></p><p><span style="font-size: 13px; color: #000000;"> 很多人在W3C校验无法通过也是这个原因-->错误的元素嵌套,然而把提示错误的标签改成<p>或者<span>就可以通过,但是我们不能这样盲目的为了校验而校验,<p>也不是神,<p>代替不了语义化的标签。</span></p><p><span style="font-size: 13px; color: #3366ff;">下面有一张关于(X)HTML Strict下嵌套规则的图,可以参考:</span></p><p><span style="font-size: 13px; color: #3366ff;"><img src="https://img.php.cn/upload/article/000/000/194/dcdc175b325f9938b05ae8b1a8720602-1.jpg" alt=""/></span></p><p> </p><p><span style="max-width:90%">其实在内联元素中,还是可以再区分一下的,有几个元素(<img>、<input>等)比较特别,它们可以定义宽高。虽然在IE 浏览器里,所有的元素都可以定义宽高,但这是IE自己的标准,并非所有浏览器都支持,W3C称它们为replaced元素,我也找不到适合翻译的词,它们在属于in-line的情况下同样具有block-line的一些特性,在"dasplay:inline-block的应用"中所说的inline-block其实就是让其他元素也模拟成replaced元素,你暂时也不用过多了解,等到后面再学习它。</span></p><p><span style="font-size: 15px;"><strong><p> 标签支持 HTML 中的<a href="http://www.php.cn/code/5845.html" target="_blank">全局属性</a>。</strong></span></p><p><span style="font-size: 15px;"><span style="background-color: #ff0000;"> <span style="color: #ffffff;">5</span> </span>= HTML5 中添加的属性。</span></p><table style="width: 1259px; height: 2161px;" border="1" align="left"><tbody><tr class="firstRow"><td style="text-align: left;"><span style="font-size: 13px;">属性</span></td><td style="text-align: left;"><span style="font-size: 13px;">值</span></td><td><span style="font-size: 13px;">描述</span></td><td><span style="font-size: 13px;">例子</span></td><td><span style="font-size: 13px;">浏览器支持</span></td></tr><tr><td><span style="font-size: 13px;">class</span></td><td><span style="color: #ff00ff; font-size: 13px;">classname</span></td><td><span style="font-size: 13px;">规定元素的一个或多个类名(引用样式表中的类)</span></td><td><span style="font-size: 13px;"><p <span style="color: #ff00ff;">class="ab"</span>></p></span></td><td><span style="font-size: 13px;">所有浏览器都支持。</span></td></tr><tr style="background-color: #f4f4f4;"><td><span style="font-size: 13px;">contenteditable <span style="background-color: #ff0000;"> <strong><span style="color: #ffffff;">5</span></strong> </span></span></td><td><p><span style="font-size: 13px;"><span style="color: #ff00ff;">true</span>(可编辑)</span></p><p><span style="font-size: 13px;"><span style="color: #ff00ff;">false</span>(不可编辑)</span></p></td><td><span style="font-size: 13px;">规定元素内容是否可编辑</span></td><td><span style="font-size: 13px;"><p <span style="color: #ff00ff;">contenteditable="true"</span>>这是一个可编辑的段落。</p></span></td><td><span style="font-size: 13px;">所有主流浏览器都支持。</span></td></tr><tr><td><span style="font-size: 13px;">contextmenu <span style="background-color: #ff0000;"> <span style="color: #ffffff;">5 </span></span></span></td><td><span style="font-size: 13px;"><span style="color: #ff00ff;">menu_id</span>(要打开的 <menu> 元素的 id。)</span></td><td><span style="font-size: 13px;">规定元素的上下文菜单。上下文菜单在用户点击元素时显示。</span></td><td><p><span style="font-size: 13px;"><p <span style="color: #ff00ff;">contextmenu="supermenu"</span>>本段落拥有一个名为 "supermenu" 的上下文菜单。这个菜单会在用户右键单击该段落时出现。</p></span></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">&lt;menu id=&quot;supermenu&quot;&gt; &lt;command label=&quot;Step 1: Write Tutorial&quot; onclick=&quot;doSomething()&quot;&gt; &lt;command label=&quot;Step 2: Edit Tutorial&quot; onclick=&quot;doSomethingElse()&quot;&gt; &lt;/menu&gt;</pre><div class="contentsignin">Copy after login</div></div><p><span style="font-size: 13px;"></span><br/></p></td><td><span style="font-size: 13px;">目前只有 Firefox 支持 contextmenu 属性。</span></td></tr><tr style="background-color: #f4f4f4;"><td><span style="font-size: 13px;">data-* <span style="background-color: #ff0000;"> <span style="color: #ffffff;">5 </span></span></span></td><td><span style="font-size: 13px;"><span style="color: #ff00ff;">somevalue</span> (规定属性的值(以字符串)。)</span></td><td><p><span style="font-size: 13px;">data-* 属性用于存储页面或应用程序的私有自定义数据。</span></p><p><span style="font-size: 13px;">data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。</span></p><p><span style="font-size: 13px;">存储的(自定义)数据能够被页面的 JavaScript 中利用,以创建更好的用户体验(不进行 Ajax 调用或服务器端数据库查询)。</span></p><p><span style="font-size: 13px;">data-* 属性包括两部分:</span></p><ul class=" list-paddingleft-2"><li><p><span style="font-size: 13px;">属性名不应该包含任何大写字母,并且在前缀 "data-" 之后必须有至少一个字符</span></p></li><li><p><span style="font-size: 13px;">属性值可以是任意字符串</span></p></li></ul><p class="note"><span style="font-size: 13px;">注释:用户代理会完全忽略前缀为 "data-" 的自定义属性。</span></p></td><td><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;">&lt;p id=&quot;test&quot; data-age=&quot;24&quot;&gt; Click Here &lt;/p&gt;</pre><div class="contentsignin">Copy after login</div></div></td><td><span style="font-size: 13px;">所有主流浏览器都支持 data-* 属性。</span></td></tr><tr><td><span style="font-size: 13px;">dir</span></td><td><p><span style="font-size: 13px;"><span style="color: #ff00ff;">ltr</span> (默认。从左向右 的文本方向。</span></p><p><span style="font-size: 13px;"><span style="color: #ff00ff;">rtl</span> (从右到左的文本方向。)</span></p></td><td><span style="font-size: 13px;">规定元素中内容的文本方向。</span></td><td><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">&lt;p dir=&quot;rtl&quot; &gt;Write this text right-to-left!&lt;/p&gt;</pre><div class="contentsignin">Copy after login</div></div><span style="font-size: 13px;"></span></td><td><span style="font-size: 13px;">所有浏览器均支持 dir 属性。</span></td></tr><tr style="background-color: #f4f4f4;"><td><span style="font-size: 13px;">draggable <span style="background-color: #ff0000;"><span style="color: #ffffff;"> 5</span> </span></span></td><td><p><span style="font-size: 13px;"><span style="color: #ff00ff;">true</span> (规定元素的可拖动的。)</span></p><p><span style="font-size: 13px;"><span style="color: #ff00ff;">false</span> (规定元素不可拖动。)</span></p><p><span style="font-size: 13px;"><span style="color: #ff00ff;">auto</span> (使用浏览器的默认行为。)</span></p></td><td><p><span style="font-size: 13px;">draggable 属性规定元素是否可拖动。</span></p><p class="tip"><span style="font-size: 13px;"><span style="color: #ff0000;">提示:</span>链接和图像默认是可拖动的。</span></p></td><td><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;">&lt;p draggable=&quot;true&quot;&gt;这是一个可拖动的段落。&lt;/p&gt;</pre><div class="contentsignin">Copy after login</div></div></td><td><p><span style="font-size: 13px;">Internet Explorer 9+, Firefox, Opera, Chrome, and Safari 支持 draggable 属性。</span></p><p><span style="font-size: 13px;"><strong>注释:</strong>Internet Explorer 8 以及更早的版本,不支持 draggable 属性。</span></p></td></tr><tr><td><span style="font-size: 13px;">dropzone <span style="background-color: #ff0000;"> <span style="color: #ffffff;">5</span> </span></span></td><td><p><span style="font-size: 13px;"><span style="color: #ff00ff;">copy</span> (拖动数据会产生被拖动数据的副本。)</span></p><p><span style="font-size: 13px;"><span style="color: #ff00ff;">move</span> (拖动数据会导致被拖动数据被移动到新位置。)</span></p><p><span style="font-size: 13px;"><span style="color: #ff00ff;">link</span> (拖动数据会产生指向原始数据的链接。) </span></p></td><td><span style="font-size: 13px;">dropzone 属性规定在元素上拖动数据时,是否拷贝、移动或链接被拖动数据。</span></td><td><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;">&lt;p dropzone=&quot;copy&quot;&gt;&lt;/p&gt;</pre><div class="contentsignin">Copy after login</div></div></td><td><span style="font-size: 13px;">目前所有主流浏览器都不支持 contenteditable 属性。</span></td></tr><tr style="background-color: #f4f4f4;"><td><span style="font-size: 13px;">hidden <span style="color: #ffffff; background-color: #ff0000;"> 5 </span></span></td><td><span style="font-size: 13px;"> </span></td><td><p><span style="font-size: 13px;">hidden 属性是布尔属性。</span></p><p><span style="font-size: 13px;">如果设置该属性,它规定元素仍未或不再相关。</span></p><p><span style="font-size: 13px;">浏览器不应显示已规定 hidden 属性的元素。</span></p><p><span style="font-size: 13px;">hidden 属性也可用于防止用户查看元素,直到匹配某些条件(比如选择了某个复选框)。然后,JavaScript 可以删除 hidden 属性,以使此元素可见。</span></p></td><td><span style="font-size: 13px;"><p <span style="color: #ff00ff;">hidden="hidden"</span>>这是一段隐藏的段落。</p></span></td><td><span style="font-size: 13px;">所有主流浏览器都支持 hidden 属性,除了 Internet Explorer。</span></td></tr><tr><td><span style="font-size: 13px;">id</span></td><td><span style="color: #ff00ff; font-size: 13px;">idname</span></td><td><p><span style="font-size: 13px;">id 属性规定 HTML 元素的唯一的 id。</span></p><p><span style="font-size: 13px;">id 在 HTML 文档中必须是唯一的。</span></p><p><span style="font-size: 13px;">id 属性可用作链接锚(link anchor),通过 JavaScript(HTML DOM)或通过 CSS 为带有指定 id 的元素改变或添加样式。</span></p></td><td><span style="font-size: 13px;"><p <span style="color: #ff00ff;">id="ab"</span>></p></span></td><td><span style="font-size: 13px;">所有浏览器都支持。</span></td></tr><tr style="background-color: #f4f4f4;"><td><span style="font-size: 13px;">lang</span></td><td><span style="font-size: 13px;"><span style="color: #ff00ff;">language_code</span> (规定元素内容的语言代码。)</span></td><td><span style="font-size: 13px;">lang 属性规定元素内容的语言。</span></td><td><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;">&lt;p lang=&quot;fr&quot;&gt;Ceci est un paragraphe.&lt;/p&gt;</pre><div class="contentsignin">Copy after login</div></div></td><td><span style="font-size: 13px;">所有浏览器均支持 lang 属性。</span></td></tr><tr><td><span style="font-size: 13px;">spellcheck <span style="color: #ffffff; background-color: #ff0000;"> 5 </span></span></td><td><p><span style="font-size: 13px;"><span style="color: #ff00ff;">true</span> (对元素进行拼写和语法检查.)</span></p><p><span style="font-size: 13px;"><span style="color: #ff00ff;">false</span> (不检查元素。)</span></p></td><td><p><span style="font-size: 13px;">spellcheck 属性规定是否对元素进行拼写和语法检查。</span></p><p><span style="font-size: 13px;">可以对以下内容进行拼写检查:</span></p><ul class=" list-paddingleft-2"><li><p><span style="font-size: 13px;">input 元素中的文本值(非密码)</span></p></li><li><p><span style="font-size: 13px;"><textarea> 元素中的文本</span></p></li><li><p><span style="font-size: 13px;">可编辑元素中的文本</span></p></li></ul></td><td><h2><span style="font-size: 13px;">实例</span></h2><p><span style="font-size: 13px;">进行拼写检查的可编辑段落:</span></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;">&lt;p contenteditable=&quot;true&quot; spellcheck=&quot;true&quot;&gt;这是一个段落。&lt;/p&gt;</pre><div class="contentsignin">Copy after login</div></div></td><td><span style="font-size: 13px;"> </span><p><span style="font-size: 13px;">Internet Explorer 10, Firefox, Opera, Chrome 以及 Safari 支持 spellcheck 属性。</span></p><p class="note"><span style="font-size: 13px;"><strong>注释:</strong>Internet Explorer 9 以及更早的版本不支持 spellcheck 属性。</span></p></td></tr><tr style="background-color: #f4f4f4;"><td><span style="font-size: 13px;"> style</span></td><td><span style="font-size: 13px;"> <span style="color: #ff00ff;">style_definition</span> (一个或多个由分号分隔的 CSS 属性和值。)</span></td><td><span style="font-size: 13px;"> </span><p><span style="font-size: 13px;">style 属性规定元素的行内样式(inline style)</span></p><p><span style="font-size: 13px;">style 属性将覆盖任何全局的样式设定,例如在 <style> 标签或在外部样式表中规定的样式。</span></p></td><td><span style="font-size: 13px;"> </span><h2><span style="font-size: 13px;">实例</span></h2><p><span style="font-size: 13px;">在 HTML 文档中使用 style 属性:</span></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;">&lt;p style=&quot;color:red&quot;&gt;This is a paragraph.&lt;/p&gt;</pre><div class="contentsignin">Copy after login</div></div></td><td><span style="font-size: 13px;"> 所有浏览器都支持。</span></td></tr><tr><td><span style="font-size: 13px;"> title</span></td><td><span style="font-size: 13px;"> <span style="color: #ff00ff;">text</span> (规定元素的<a href="http://www.php.cn/code/6156.html" target="_blank">工具提示</a>文本(tooltip text)。)</span></td><td><span style="font-size: 13px;"> </span><p><span style="font-size: 13px;">title 属性规定关于元素的额外信息。</span></p><p><span style="font-size: 13px;">这些信息通常会在鼠标移到元素上时显示一段工具提示文本(tooltip text)。</span></p><p class="tip"><span style="font-size: 13px;"><strong>提示:</strong>title 属性常与 form 以及 a 元素一同使用,以提供关于输入格式和链接目标的信息。同时它也是 abbr 和 acronym 元素的必需属性。</span></p></td><td><span style="font-size: 13px;"> </span><h2><span style="font-size: 13px;">实例</span></h2><p><span style="font-size: 13px;">在 HTML 文档中使用 title 属性:</span></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;">&lt;p title=&quot;Free Web tutorials&quot;&gt;W3School.com.cn&lt;/p&gt;</pre><div class="contentsignin">Copy after login</div></div></td><td><span style="font-size: 13px;"> 所有浏览器都支持。</span></td></tr><tr style="background-color: #f4f4f4;"><td><span style="font-size: 13px;"> translate <span style="color: #ffffff;"> <span style="background-color: #ff0000;">5 </span></span></span></td><td><p><span style="font-size: 13px;"> <span style="color: #ff00ff;">yes</span> (规定应该翻译元素内容。)</span></p><p><span style="font-size: 13px;"> <span style="color: #ff00ff;">no</span> (规定不应翻译元素内容。)</span></p></td><td><span style="font-size: 13px;"> </span><p><span style="font-size: 13px;">translate 规定是否应该翻译元素内容。</span></p><p class="tip"><span style="font-size: 13px;"><strong>提示:</strong>请使用 class="notranslate" 替代。</span></p></td><td><span style="font-size: 13px;"> </span><h2><span style="font-size: 13px;">实例</span></h2><p><span style="font-size: 13px;">规定不应翻译某些元素:</span></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;">&lt;p translate=&quot;no&quot;&gt;请勿翻译本段。&lt;/p&gt; &lt;p&gt;本段可被译为任意语言。&lt;/p&gt;</pre><div class="contentsignin">Copy after login</div></div><td><span style="font-size: 13px;"> 所有主流浏览器都无法正确地支持 translate 属性。</span></td> <p style="text-align: left;"><br></p><p>The above is the detailed content of Detailed introduction to html paragraph <p> tag. 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=html" target="_blank">html</a> <a onclick="hits_log(2,'www',this);" href-data="https://www.php.cn/search?word=introduce" target="_blank">introduce</a> <a onclick="hits_log(2,'www',this);" href-data="https://www.php.cn/search?word=detailed" target="_blank">detailed</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/372303.html" title="Why can't DIV tags be included in the P tag in html?"> <span>Previous article:Why can't DIV tags be included in the P tag in html?</span> </a> <a href="https://www.php.cn/faq/372307.html" title="Adjustment of spacing distance between P tag paragraph and CSS paragraph in html"> <span>Next article:Adjustment of spacing distance between P tag paragraph and CSS paragraph 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> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <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/377601.html">Video material on building your own PHP framework from scratch</a> </div> <div>2023-03-15 16:54:01</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/faq/377137.html">Example analysis of how PHPMailer uses QQ mailbox to complete the email sending function</a> </div> <div>2023-03-15 12:26:02</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/faq/376186.html">Introduction to how to receive emails in IMAP in php</a> </div> <div>2023-03-14 18:58:01</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/faq/375194.html">Example of how to quickly implement array deduplication in PHP</a> </div> <div>2023-03-14 11:30:01</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/faq/369412.html">Summary of the use of all attributes of the <a> tag in html</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="https://www.php.cn/faq/379971.html">Summary of basic knowledge of PHP (necessary for beginners to get started)</a> </div> <div>2023-03-16 15:20:01</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/faq/381607.html">Introduction to the use of typeof in JavaScript</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="https://www.php.cn/faq/382066.html">Introduction to the use of confirm() method in JavaScript</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="https://www.php.cn/faq/357705.html">A detailed introduction to the HTML5 Placeholder attribute</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="https://www.php.cn/faq/380149.html">How to implement single-select, multiple-select and reverse-select in forms in ReactJS</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="https://www.php.cn/wenda/176403.html" target="_blank" title="PX automatic conversion to REM error" class="wdcdcTitle">PX automatic conversion to REM error</a> <a href="https://www.php.cn/wenda/176403.html" class="wdcdcCons">&nbsp;&lt;style&gt;html {&nbsp;&nbsp; font-size: calc(100vw / 3.75);&nbsp; &nbsp; &nbsp; }...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2024-04-16 09:34:16</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>0</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>4687</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/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="https://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="https://www.php.cn/wenda/176386.html" target="_blank" title="How to solve the mysterious white space at the bottom of the page in CSS" class="wdcdcTitle">How to solve the mysterious white space at the bottom of the page in CSS</a> <a href="https://www.php.cn/wenda/176386.html" class="wdcdcCons">I'm trying to build a simple webpage using Bootstrap and D3, but I don't know how to get r...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2024-04-06 20:22:15</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>454</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/176383.html" target="_blank" title="How to use laravel components with livewire lazy placeholder" class="wdcdcTitle">How to use laravel components with livewire lazy placeholder</a> <a href="https://www.php.cn/wenda/176383.html" class="wdcdcCons">I want to add the skeleton of my laravel component inside a livewire3 placeholder What I h...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2024-04-06 20:02:10</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>2</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>543</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/176364.html" target="_blank" title="Top-level method to replace a string with HTML code (generated from an array)" class="wdcdcTitle">Top-level method to replace a string with HTML code (generated from an array)</a> <a href="https://www.php.cn/wenda/176364.html" class="wdcdcCons">Given a string like this...$htmlPattern=&quot;Usernameis:#name#andusercompanyis#company#&q...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2024-04-06 17:40:41</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>2</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>410</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/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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <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/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>1421588 <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="https://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="https://www.php.cn/course/74.html">PHP introductory tutorial one: Learn PHP in one week</a> <div class="wzrthreerb"> <div>4265804 <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="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>2518003 <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="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>506405 <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="https://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="https://www.php.cn/course/2.html">PHP zero-based introductory tutorial</a> <div class="wzrthreerb"> <div>861535 <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="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 >1421588 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 >2518003 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 >506405 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 >215642 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 >886664 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 >7248 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 >5637 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 >4744 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 >675 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 >23919 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?1733168150"></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>