【前端】HTML的使用方法-html教學-PHP中文網

编程语言：解释型和编译型

WEB前端：HTML+CSS+JavaScript

一、 HTML介绍:

---------------------------------------

1. 什么是HTML？

超文本标记语言, <标签名>--标记（标签、节点）

2. HTML是由：标签和内容构成

3. 程序语言有两种：解释性语言（HTML、PHP、Javascript）和编译型语言（C、C++、Java

4. HTML的标签组成部分、属性、实体

HTML的实体： <:< >:> 空格:

5. HTML中注释：

注释的目的：1. 辅助说明 2.代码调试

6. HTML标签（标记）的语法：标签是由"<"和">"括起来

双标签：<标签名>....

单标签：<标签名/>

7. HTML中的颜色：可以是颜色单词：red/blue/green/yellow...

还可以是：#000000 --- #ffffff

十六进制：0123456789abcdef

其中前两位表示红色，中间两位绿色，后两位表示蓝色。

二、 HTML中HEAD头部设置

----------------------------------------

设置网页编码：

关键字：

描述：

网页标题：本网页标题

导入CSS文件：

CSS代码：

JS文件或代码：

... ...

三、 HTML中的文本标签、格式化标签

----------------------------------------

文本标签：

1. *
换行

2. *

...

换段

3. ... 斜体

4. ... 强调斜体

5. ... 加粗

6. *... 强调加粗

7. *... 其中n为1--6的值。标题标签（加粗、独立行）

8. 引用

9. _... ^...

10.* 删除线

....

格式化标签：

1. *
换行

2. *

...

换段

3. 列表：

dl> 自訂清單

自訂清單頭

<> 自訂清單頭

## 4.

四、*HTML中的超級連結A

-------------- ----------------------------------

* 超級連結標籤

屬性：href必須，指的是連結跳到位址

target: 表示連結的開啟方式：

# _blank 新視窗

_parent 父視窗

_self 本視窗（預設）

_top 頂層視窗

framename 視窗名稱

title：文字提示屬性（詳情）

錨點連結：

# 定義一個錨點：先前使用的是< ;a name="a1">

使用錨點：跳到a1處

#五、 *圖片標籤img

-------------------------------- -------

在網頁中插入一張圖片

屬性：src：圖片名稱及url位址

alt: 圖片載入失敗時的提示訊息

title：文字提示屬性

width：圖片寬度

height：圖片高度

border：邊框線粗細

六、多媒體標籤（熟悉）

--------------------- ---------------

你的瀏覽器不支援播放

# 你的瀏覽器不支援播放

< source src="./images/fun.mp4" type="video/mp4" />

你的瀏覽器不支援影片播放

< source src="movie.webm" type="video/webm">

# < source src="movie.mp4" type="video/mp4">

您的破瀏覽器該丟了，不支援影片標籤

七、 *表格標籤

------------------------------ ------

*table 表格標籤

caption 表格標題

# *tr 行標籤

*th 列頭標籤

*td 列標籤

與印表機有關，並使用錶頭和錶尾寫在表體前，有助於檢視程式碼

*thead 表頭

* tbody 表體

tfoot 表尾

八、**form表單標籤

------------------- --------------------------------------

--表單標籤

form標籤常用屬性：

*action屬性:提交的目標位址(URL)

## * method屬性:提交方式:get(預設)和post

get方式是URL網址列可見,長度受限(IE2k 火狐8k),相對不安全.

post方式是URL位址不可見,長度不受限制,相對安全.

enctype:提交類型

target: 在何處開啟目標URL。

name:屬性為表單取個名字.

HTML5不支援。用 id 代替。

2. 表單項目標籤input定義輸入字段，使用者可在其中輸入資料。在 HTML 5 中，type 屬性有許多新的值。

具體在下面有詳解：

如：

3. 標籤中使用的;

*value屬性:下拉項目的值

*selected屬性:預設下拉指定項目.

4. *

多行的文字輸入區域<p style="text-align: left;"></p>  *name :定義名稱,用於儲存文字區域中的值。 <p style="text-align: left;"></p>  *cols ：規定文字區內可見的列數。 <p style="text-align: left;"></p>  *rows ：規定文字區內可見的行數。 <p style="text-align: left;"></p>  disabled：是否停用<p style="text-align: left;"></p>  readonly：只讀<p style="text-align: left;"></p>  ...<p style="text-align: left;">##  預設值是在兩個標籤之間</p>
<p style="text-align: left;"> 5. *<button> 標籤定義</p>按鈕<p style="text-align: left;">。 <a href="http://www.php.cn/code/5991.html" target="_blank"></a> 您可以在 button 元素中放置內容，例如文件或圖像。這是該元素與由 input 元素創建的按鈕的不同之處。 </p>
<p style="text-align: left;"> 6. <fieldset> html5標籤--fieldset 元素可將表單內的相關元素</p>分組<p style="text-align: left;">。 <a href="http://www.php.cn/code/10425.html" target="_blank"></a> disabled屬性：定義 fieldset 是否可見。 </p>
<p style="text-align: left;"> form屬性： 定義該 fieldset 所屬的一個或多個表單。 </p>
<p style="text-align: left;"> 7. <legend> html5標籤--<legend> 標籤為 <fieldset>、<figure> 以及 <details> 元素定義標題。 </p>
<p style="text-align: left;"> <form></p>
<p style="text-align: left;">   <fieldset></p>
<p style="text-align: left;"> <legend>健康資訊：</legend></p>
<p style="text-align: left;"> 身高：<input type ="text" /><br/></p>
<p style="text-align: left;"> 體重：<input type="text" /><br/></p>
<p style="text-align: left;">   </fieldset></p>
<p style="text-align: left;"> </form></p>
<p style="text-align: left;">  8. <optgroup> html5標籤--<optgroup> 標籤定義選項組。此元素允許您組合選項</p>
<p style="text-align: left;"> 範例：</p>
<p style="text-align: left;"> <select></p>
<p style="text-align: left;">   <optgroup label="Swedish Cars"></p>
<p style="text-align: left;"> < option value="volvo">Volvo</option></p>
<p style="text-align: left;">				<option value="saab">Saab</option></p>
<p style="text-align: left;">			  </optgroup></p>
<p style="text-align: left;">   <optgroup label="German Cars"></p>
<p style="text-align: left;"> <option value="mercedes">Mercedes</option></p>
<p style="text-align: left;"> <option value="audi">Audi<</p>
<p style="text-align: left;"> <option value="audi">Audi<</p>
<p style="text-align: left;"> <option value="audi">Audi<</p>
<p style="text-align: left;"> <option value="audi">Audi<</p>
<p style="text-align: left;"> <option value="audi">Audi<</p>
<p style="text-align: left;"> <option value="audi">Audi<</p>
<p style="text-align: left;"> <option value="audi">阿;/option></p>
<p style="text-align: left;">   </optgroup></p>
<p style="text-align: left;"> </select></p>
<p style="text-align: left;"> 9. <datalist> html5標籤--<datalist> 標籤定義可選數據的列表。與 input 元素搭配使用，就可以製作出輸入值的下拉清單。 </p>
<p style="text-align: left;"> 範例：</p>
<p style="text-align: left;"> <form action="demo_form.php" method="get"></p>
<p style="text-align: left;"> <input list="browsers" name="browser "></p>
<p style="text-align: left;"> <datalist id="browsers"></p>
<p style="text-align: left;"> <option value="Internet Explorer"></p>
<p style="text-align: left;"> <option value="Firefox" ></p>
<p style="text-align: left;"> <option value="Chrome"></p>
<p style="text-align: left;"> <option value="Opera"></p>
<p style="text-align: left;"> <option value="Safari"> </p>
<p style="text-align: left;"> </datalist></p>
<p style="text-align: left;"> <input type="submit"></p>
<p style="text-align: left;"> </form></p>
<p style="text-align: left;"> 10. **< input/>  表單項目中的屬性，可以提供<a href="http://www.php.cn/wiki/1313.html" target="_blank"></a>    *type屬性:表示表單項目的類型:值如下:<a href="http://www.php.cn/code/8549.html" target="_blank"></a> text:單行文字方塊</p>
<p style="text-align: left;"> password:密碼輸入框</p>
<p style="text-align: left;"> checkbox:多選框注意要提供value值</p>
<p style="text-align: left;"> radio:單選框  注意要提供value值</p>
<p style="text-align: left;"> <a href="http://www.php.cn/wiki/1081.html" target="_blank">file</a>:</p>檔案上傳<p style="text-align: left;">選擇框</p>
<p style="text-align: left;"> button:普通按鈕 </p>
<p style="text-align: left;"> submit:提交按鈕</p>
<p style="text-align: left;"># image:圖片提交按鈕</p>
<p style="text-align: left;">##reset </p>:重置按鈕, 還原到開始(第一次開啟時)的效果<p style="text-align: left;"></p> hidden:主表單隱藏網域,要是和表單一塊提交的資訊,但是不需要使用者修改<p style="text-align: left;"></p> *name屬性:表單項目名稱,用於儲存內容值的<p style="text-align: left;"></p> *value屬性:輸入的值(預設指定值)<p style="text-align: left;"></p># size屬性:輸入框的寬度值<p style="text-align: left;"></p> maxlength屬性:輸入框的輸入內容的最大長度<p style="text-align: left;"></p> readonly屬性:對輸入框只讀屬性<p style="text-align: left;"><a href="http://www.php.cn/code/8243.html" target="_blank"> *disabled屬性:停用屬性</a></p># *checked屬性:對選擇框指定預設選項<p style="text-align: left;"></p> accesskey屬性:指定快速鍵(不常用) (IE:alt+鍵 火狐:alt+shift+鍵)###### tabindex屬性:透過數字指定tab鍵的切換順序(不常用)###### src和alt是圖片按鈕設定的###### 注意：reset重置按鈕是將表單資料恢復到第一次開啟時的###狀態###，並不是清空######       image圖片按鈕，預設具有提交表單功能。 ###<p>以上是【前端】HTML的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！</p>                </div>
            </div>
            <div style="height: 25px;">
                                <div class="wzconBq" style="display: inline-flex;">
                    <span>相關標籤：</span>
                    <div class="wzcbqd">
                        <a onclick="hits_log(2,'www',this);" href-data="https://www.php.cn/zh-tw/search?word=html" target="_blank">html</a>                    </div>
                </div>
                                <div style="display: inline-flex;float: right; color:#333333;">來源：php.cn</div>
                            </div>
            <div class="wzconOtherwz">
                                    <a href="https://www.php.cn/zh-tw/faq/358137.html" title="解析html使用方法">
                        <span>上一篇：解析html使用方法</span>
                    </a>
                                    <a href="https://www.php.cn/zh-tw/faq/358141.html"  title="詳解在HTML中實作動畫的方法程式碼">
                        <span>下一篇：詳解在HTML中實作動畫的方法程式碼</span>
                    </a>
                            </div>
            <div class="wzconShengming">
       
                <div class="bzsmdiv">本網站聲明</div>
                <div>本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡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">作者最新文章</div>
                <ul>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/zh-tw/faq/354750.html">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/zh-tw/faq/338018.html">實作一個 Java 版的 Redis</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/zh-tw/faq/353509.html">最簡單的微信小程式Demo</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/zh-tw/faq/356272.html">python中pandas.DataFrame（建立、索引、增加與刪除）的簡單操作方法介紹</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/zh-tw/faq/354839.html">微信小程式：如何實作tabs選項卡效果範例</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/zh-tw/faq/354423.html">Python建構自訂方法來美化字典結構輸出</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/zh-tw/faq/350853.html">HTML5:使用Canvas即時處理Video</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/zh-tw/faq/346502.html">Asp.net使用SignalR實作傳送圖片</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/zh-tw/faq/354842.html">微信小程式開發教程-App()和Page()函數概述</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/zh-tw/faq/356574.html">詳解python redis使用方法</a>
                            </div>
                            <div>1970-01-01 08:00:00</div>
                        </li>
                                    </ul>
            </div>
            <div class="wzconZzwz">
                <div class="wzconZzwztitle">最新問題</div>
                <div class="wdsyContent">
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a href="https://www.php.cn/zh-tw/wenda/176403.html"  target="_blank" title="PX自動轉換為REM錯誤" class="wdcdcTitle">PX自動轉換為REM錯誤</a>
                            <a href="https://www.php.cn/zh-tw/wenda/176403.html" class="wdcdcCons"><style>html {   字體大小：calc(100vw / 3.75); }body {    字體大小：0.16rem； }</style><...</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> 來自於 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/zh-tw/wenda/176396.html"  target="_blank" title="頁面突然無法拉動 css 或 bootstrap" class="wdcdcTitle">頁面突然無法拉動 css 或 bootstrap</a>
                            <a href="https://www.php.cn/zh-tw/wenda/176396.html" class="wdcdcCons">所以我正在開發一個頁面，我昨天做了一部分，效果很好，今天我繼續做剩下的部分，一切都很好。當我嘗試將其作為普通html頁面打開時，CSS或BOOTSTRAP不起作用，僅顯示頁面文本，...</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> 來自於 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/zh-tw/wenda/176386.html"  target="_blank" title="解決CSS中頁面底部神秘空白的方法" class="wdcdcTitle">解決CSS中頁面底部神秘空白的方法</a>
                            <a href="https://www.php.cn/zh-tw/wenda/176386.html" class="wdcdcCons">我正在嘗試使用Bootstrap和D3建立一個簡單的網頁，但我不知道如何消除底部的所有空白。我想擺脫它。我嘗試將body和html的min-height設定為100%，但沒有任何作...</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> 來自於 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/zh-tw/wenda/176383.html"  target="_blank" title="如何在 livewire 惰性佔位符中使用 laravel 元件" class="wdcdcTitle">如何在 livewire 惰性佔位符中使用 laravel 元件</a>
                            <a href="https://www.php.cn/zh-tw/wenda/176383.html" class="wdcdcCons">我想在livewire3佔位符內添加我的laravel組件的骨架到目前為止我已經嘗試過：通過包含Laravel組件來實現Livewire類：publicfunctionplaceh...</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> 來自於 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/zh-tw/wenda/176364.html"  target="_blank" title="用 HTML 程式碼（從陣列產生）取代字串的頂級方法" class="wdcdcTitle">用 HTML 程式碼（從陣列產生）取代字串的頂級方法</a>
                            <a href="https://www.php.cn/zh-tw/wenda/176364.html" class="wdcdcCons">給定一個像這樣的字串...$htmlPattern="Usernameis:#name#andusercompanyis#company#";如何將子字串#na...</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> 來自於 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>相關專題</div>
                    <a href="https://www.php.cn/zh-tw/faq/zt" target="_blank">更多>
                    </a>
                </div>
                <div class="wzcttlist">
                    <ul>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/zh-tw/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版權符號" /> </a>
                            <a target="_blank" href="https://www.php.cn/zh-tw/faq/htmlbq" class="title-a-spanl" title="html版權符號"><span>html版權符號</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/zh-tw/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線上編輯器" /> </a>
                            <a target="_blank" href="https://www.php.cn/zh-tw/faq/htmlzxbjq" class="title-a-spanl" title="html線上編輯器"><span>html線上編輯器</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/zh-tw/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網頁製作" /> </a>
                            <a target="_blank" href="https://www.php.cn/zh-tw/faq/htmlwyzz" class="title-a-spanl" title="html網頁製作"><span>html網頁製作</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/zh-tw/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空格" /> </a>
                            <a target="_blank" href="https://www.php.cn/zh-tw/faq/htmlkg" class="title-a-spanl" title="html空格"><span>html空格</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/zh-tw/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="html是什麼" /> </a>
                            <a target="_blank" href="https://www.php.cn/zh-tw/faq/htmlssm" class="title-a-spanl" title="html是什麼"><span>html是什麼</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/zh-tw/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="html字體大小怎麼設定" /> </a>
                            <a target="_blank" href="https://www.php.cn/zh-tw/faq/htmlztdxzmsz" class="title-a-spanl" title="html字體大小怎麼設定"><span>html字體大小怎麼設定</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/zh-tw/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轉txt" /> </a>
                            <a target="_blank" href="https://www.php.cn/zh-tw/faq/htmlztxt" class="title-a-spanl" title="html轉txt"><span>html轉txt</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/zh-tw/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="html文字框程式碼怎麼寫" /> </a>
                            <a target="_blank" href="https://www.php.cn/zh-tw/faq/htmlwbkdmzmx" class="title-a-spanl" title="html文字框程式碼怎麼寫"><span>html文字框程式碼怎麼寫</span> </a>
                        </li>
                                            </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="phpwzright">
        <div class="wzrOne">
            <div class="wzroTitle">熱門推薦</div>
            <div class="wzroList">
                <ul>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="url是什麼意思？" href="https://www.php.cn/zh-tw/faq/418772.html">url是什麼意思？</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="DOM是什麼意思" href="https://www.php.cn/zh-tw/faq/414303.html">DOM是什麼意思</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="如何改變圖片大小" href="https://www.php.cn/zh-tw/faq/414252.html">如何改變圖片大小</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="HTML中如何將字型加粗" href="https://www.php.cn/zh-tw/faq/414520.html">HTML中如何將字型加粗</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="html圖片大小如何設定" href="https://www.php.cn/zh-tw/faq/475145.html">html圖片大小如何設定</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>熱門教學</div>
                <a target="_blank" href="https://www.php.cn/zh-tw/course.html">更多>
                </a>
            </div>
            <div class="wzrthreelist swiper2">
                <div class="wzrthreeTab  swiper-wrapper">
                    <div class="check tabdiv swiper-slide" data-id="one">相關教學 <div></div></div>
                    <div class="tabdiv swiper-slide" data-id="two">熱門推薦<div></div></div>
                    <div class="tabdiv swiper-slide" data-id="three">最新課程<div></div></div>
                </div>
                <ul class="one">
                                                <li>
                                <a target="_blank" href="https://www.php.cn/zh-tw/course/812.html" title="最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)" href="https://www.php.cn/zh-tw/course/812.html">最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)</a>
                                    <div class="wzrthreerb">
                                        <div>1420482 <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/zh-tw/course/74.html" title="php入門教程之一週學會PHP" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/068/6253d1e28ef5c345.png" alt="php入門教程之一週學會PHP"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="php入門教程之一週學會PHP" href="https://www.php.cn/zh-tw/course/74.html">php入門教程之一週學會PHP</a>
                                    <div class="wzrthreerb">
                                        <div>4263691 <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/zh-tw/course/286.html" title="JAVA 初級入門影片教學" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA 初級入門影片教學"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="JAVA 初級入門影片教學" href="https://www.php.cn/zh-tw/course/286.html">JAVA 初級入門影片教學</a>
                                    <div class="wzrthreerb">
                                        <div>2507853 <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/zh-tw/course/504.html" title="小甲魚零基礎入門學習Python影片教學" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="小甲魚零基礎入門學習Python影片教學"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="小甲魚零基礎入門學習Python影片教學" href="https://www.php.cn/zh-tw/course/504.html">小甲魚零基礎入門學習Python影片教學</a>
                                    <div class="wzrthreerb">
                                        <div>505646 <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/zh-tw/course/2.html" title="PHP 零基礎入門教學" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/068/6253de27bc161468.png" alt="PHP 零基礎入門教學"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="PHP 零基礎入門教學" href="https://www.php.cn/zh-tw/course/2.html">PHP 零基礎入門教學</a>
                                    <div class="wzrthreerb">
                                        <div>860720 <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/zh-tw/course/812.html" title="最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)" href="https://www.php.cn/zh-tw/course/812.html">最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)</a>
                                <div class="wzrthreerb">
                                    <div >1420482次學習</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/zh-tw/course/286.html" title="JAVA 初級入門影片教學" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA 初級入門影片教學"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="JAVA 初級入門影片教學" href="https://www.php.cn/zh-tw/course/286.html">JAVA 初級入門影片教學</a>
                                <div class="wzrthreerb">
                                    <div >2507853次學習</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/zh-tw/course/504.html" title="小甲魚零基礎入門學習Python影片教學" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="小甲魚零基礎入門學習Python影片教學"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="小甲魚零基礎入門學習Python影片教學" href="https://www.php.cn/zh-tw/course/504.html">小甲魚零基礎入門學習Python影片教學</a>
                                <div class="wzrthreerb">
                                    <div >505646次學習</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/zh-tw/course/901.html" title="Web前端開發極速入門" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="Web前端開發極速入門"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Web前端開發極速入門" href="https://www.php.cn/zh-tw/course/901.html">Web前端開發極速入門</a>
                                <div class="wzrthreerb">
                                    <div >215558次學習</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/zh-tw/course/234.html" title="零基礎精通 PS 影片教學" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="零基礎精通 PS 影片教學"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="零基礎精通 PS 影片教學" href="https://www.php.cn/zh-tw/course/234.html">零基礎精通 PS 影片教學</a>
                                <div class="wzrthreerb">
                                    <div >884786次學習</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/zh-tw/course/1648.html" title="【web前端】Node.js快速入門" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="【web前端】Node.js快速入門"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="【web前端】Node.js快速入門" href="https://www.php.cn/zh-tw/course/1648.html">【web前端】Node.js快速入門</a>
                                <div class="wzrthreerb">
                                    <div >7074次學習</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/zh-tw/course/1647.html" title="國外Web開發全端課程全集" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="國外Web開發全端課程全集"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="國外Web開發全端課程全集" href="https://www.php.cn/zh-tw/course/1647.html">國外Web開發全端課程全集</a>
                                <div class="wzrthreerb">
                                    <div >5487次學習</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/zh-tw/course/1646.html" title="Go語言實戰之 GraphQL" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Go語言實戰之 GraphQL"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Go語言實戰之 GraphQL" href="https://www.php.cn/zh-tw/course/1646.html">Go語言實戰之 GraphQL</a>
                                <div class="wzrthreerb">
                                    <div >4628次學習</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/zh-tw/course/1645.html" title="550W粉絲大佬手把手從零學JavaScript" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="550W粉絲大佬手把手從零學JavaScript"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="550W粉絲大佬手把手從零學JavaScript" href="https://www.php.cn/zh-tw/course/1645.html">550W粉絲大佬手把手從零學JavaScript</a>
                                <div class="wzrthreerb">
                                    <div >665次學習</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/zh-tw/course/1644.html" title="python大神Mosh，零基礎小白6小時完全入門" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="python大神Mosh，零基礎小白6小時完全入門"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="python大神Mosh，零基礎小白6小時完全入門" href="https://www.php.cn/zh-tw/course/1644.html">python大神Mosh，零基礎小白6小時完全入門</a>
                                <div class="wzrthreerb">
                                    <div >23376次學習</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>最新下載</div>
                <a href="https://www.php.cn/zh-tw/xiazai">更多>
                </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">網站特效 <div></div></div>
                    <div class="swiper-slide" data-id="twof">網站源碼<div></div></div>
                    <div class="swiper-slide" data-id="threef">網站素材<div></div></div>
                    <div class="swiper-slide" data-id="fourf">前端模板<div></div></div>
                </div>
                <ul class="onef">
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="jQuery企業留言表單聯絡程式碼" href="https://www.php.cn/zh-tw/toolset/js-special-effects/8071">[表單按鈕] jQuery企業留言表單聯絡程式碼</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="HTML5 MP3音樂盒播放特效" href="https://www.php.cn/zh-tw/toolset/js-special-effects/8070">[播放器特效] HTML5 MP3音樂盒播放特效</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="HTML5酷炫粒子動畫導覽選單特效" href="https://www.php.cn/zh-tw/toolset/js-special-effects/8069">[選單導航] HTML5酷炫粒子動畫導覽選單特效</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="jQuery可視化表單拖曳編輯程式碼" href="https://www.php.cn/zh-tw/toolset/js-special-effects/8068">[表單按鈕] jQuery可視化表單拖曳編輯程式碼</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="VUE.JS仿酷狗音樂播放器代碼" href="https://www.php.cn/zh-tw/toolset/js-special-effects/8067">[播放器特效] VUE.JS仿酷狗音樂播放器代碼</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="經典html5推箱子小遊戲" href="https://www.php.cn/zh-tw/toolset/js-special-effects/8066">[html5特效] 經典html5推箱子小遊戲</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="jQuery滾動添加或減少圖片特效" href="https://www.php.cn/zh-tw/toolset/js-special-effects/8065">[圖片特效] jQuery滾動添加或減少圖片特效</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="CSS3個人相簿封面懸停放大特效" href="https://www.php.cn/zh-tw/toolset/js-special-effects/8064">[相簿特效] CSS3個人相簿封面懸停放大特效</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/zh-tw/toolset/website-source-code/8328" title="家居裝潢清潔維修服務公司網站模板" target="_blank">[前端模板] 家居裝潢清潔維修服務公司網站模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/zh-tw/toolset/website-source-code/8327" title="清新配色個人求職履歷引導頁模板" target="_blank">[前端模板] 清新配色個人求職履歷引導頁模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/zh-tw/toolset/website-source-code/8326" title="設計師創意求職履歷網頁模板" target="_blank">[前端模板] 設計師創意求職履歷網頁模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/zh-tw/toolset/website-source-code/8325" title="現代工程建築公司網站模板" target="_blank">[前端模板] 現代工程建築公司網站模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/zh-tw/toolset/website-source-code/8324" title="教育服務機構響應式HTML5模板" target="_blank">[前端模板] 教育服務機構響應式HTML5模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/zh-tw/toolset/website-source-code/8323" title="網上電子書店商城網站模板" target="_blank">[前端模板] 網上電子書店商城網站模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/zh-tw/toolset/website-source-code/8322" title="IT技術解決互聯網公司網站模板" target="_blank">[前端模板] IT技術解決互聯網公司網站模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/zh-tw/toolset/website-source-code/8321" title="紫色風格外匯交易服務網站模板" target="_blank">[前端模板] 紫色風格外匯交易服務網站模板</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/zh-tw/toolset/website-materials/3078"  target="_blank"  title="可愛的夏天元素向量素材(EPS+PNG)">[PNG素材] 可愛的夏天元素向量素材(EPS+PNG)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/zh-tw/toolset/website-materials/3077"  target="_blank"  title="四個紅色的 2023 畢業徽章的向量素材(AI+EPS+PNG)">[PNG素材] 四個紅色的 2023 畢業徽章的向量素材(AI+EPS+PNG)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/zh-tw/toolset/website-materials/3076"  target="_blank"  title="唱歌的小鳥和裝滿花朵的推車設計春天banner向量素材(AI+EPS)">[banner圖] 唱歌的小鳥和裝滿花朵的推車設計春天banner向量素材(AI+EPS)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/zh-tw/toolset/website-materials/3075"  target="_blank"  title="金色的畢業帽向量素材(EPS+PNG)">[PNG素材] 金色的畢業帽向量素材(EPS+PNG)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/zh-tw/toolset/website-materials/3074"  target="_blank"  title="黑白風格的山脈圖示向量素材(EPS+PNG)">[PNG素材] 黑白風格的山脈圖示向量素材(EPS+PNG)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/zh-tw/toolset/website-materials/3073"  target="_blank"  title="不同顏色披風和不同姿勢的超級英雄剪影向量素材(EPS+PNG)">[PNG素材] 不同顏色披風和不同姿勢的超級英雄剪影向量素材(EPS+PNG)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/zh-tw/toolset/website-materials/3072"  target="_blank"  title="扁平風格的植樹節banner向量素材(AI+EPS)">[banner圖] 扁平風格的植樹節banner向量素材(AI+EPS)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/zh-tw/toolset/website-materials/3071"  target="_blank"  title="九種漫畫風格的爆炸聊天氣泡向量素材(EPS+PNG)">[PNG素材] 九種漫畫風格的爆炸聊天氣泡向量素材(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/zh-tw/toolset/website-source-code/8328"  target="_blank" title="家居裝潢清潔維修服務公司網站模板">[前端模板] 家居裝潢清潔維修服務公司網站模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/zh-tw/toolset/website-source-code/8327"  target="_blank" title="清新配色個人求職履歷引導頁模板">[前端模板] 清新配色個人求職履歷引導頁模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/zh-tw/toolset/website-source-code/8326"  target="_blank" title="設計師創意求職履歷網頁模板">[前端模板] 設計師創意求職履歷網頁模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/zh-tw/toolset/website-source-code/8325"  target="_blank" title="現代工程建築公司網站模板">[前端模板] 現代工程建築公司網站模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/zh-tw/toolset/website-source-code/8324"  target="_blank" title="教育服務機構響應式HTML5模板">[前端模板] 教育服務機構響應式HTML5模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/zh-tw/toolset/website-source-code/8323"  target="_blank" title="網上電子書店商城網站模板">[前端模板] 網上電子書店商城網站模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/zh-tw/toolset/website-source-code/8322"  target="_blank" title="IT技術解決互聯網公司網站模板">[前端模板] IT技術解決互聯網公司網站模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/zh-tw/toolset/website-source-code/8321"  target="_blank" title="紫色風格外匯交易服務網站模板">[前端模板] 紫色風格外匯交易服務網站模板</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>公益線上PHP培訓，幫助PHP學習者快速成長！</p>
        </div>
        <div class="footermid">
            <a href="https://www.php.cn/zh-tw/about/us.html">關於我們</a>
            <a href="https://www.php.cn/zh-tw/about/disclaimer.html">免責聲明</a>
            <a href="https://www.php.cn/zh-tw/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>