社区
学习
工具库
AI工具
休闲
搜索
简体中文
首页 > web前端 > html教程 > 1、HTML基础学习 第一天_html/css_WEB-ITnose

1、HTML基础学习 第一天_html/css_WEB-ITnose

WBOY
发布： 2016-06-24 11:24:11
原创
1126 人浏览过

1、基本标签属性

 1 <html> 2 <!--属性和属性值对大小写不敏感。 3 不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。 4 而新版本的 (X)HTML 要求使用小写属性。 5  --> 6  7 <body> 8  9 <!-- hello this is a comment-->10 11 <h1 align="left">This is heading 1</h1>12 <h2 align="center">This is heading 2</h2>13 <h3 align="right">This is heading 3</h3>14 <h4>This is heading 4</h4>15 <h5>This is heading 5</h5>16 <h6>This is heading 6</h6>17 18 <hr><!--绘制水平线-->19 20 <a href="http://www.baidu.com"> link_baidu </a>21 22 <br>23 <body bgcolor="#e6e6e6">24 25 26 <p> this is paragraph 1 </p>27 <p> this is paragraph 2 </p>28 <p> this is paragraph 3 </p>29 30 <img  src="/i/eg_w3school.gif"/ alt="1、HTML基础学习 第一天_html/css_WEB-ITnose" >31 <img  src="/i/eg_w3school.gif"    style="max-width:90%"  style="max-width:90%" / alt="1、HTML基础学习 第一天_html/css_WEB-ITnose" >32 <br/>33 <br/>34 <br/>35 36 37 normal38 <br/>39 <b> bold </b>40 <br/>41 <strong> strong </strong>42 <br/>43 <big> big font </big>44 <br/>45 <small> small font </small>46 <br/>47 <i> italic font </i>48 <br/>49 what's the  <sub> fuck </sub>50 <br/>51 what's the  <sup> fuck </sup>52 <br/>53 <i> what's the  <sup> fuck </sup> </i>54 55 <p>pre 标签很适合显示计算机代码：</p>56 57 <pre class="brush:php;toolbar:false">58 for i = 1 to 1059      print i60 next i61
登录后复制
62 63 64

2、始终为属性值加引号

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号

3、h标签只用于标题

请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。

搜索引擎使用标题为您的网页的结构和内容编制索引。

4、HTML 折行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用
标签

5、
还是

您也许发现
与
很相似。

在 XHTML、XML 以及未来的 HTML 版本中，不允许使用没有结束标签（闭合标签）的 HTML 元素。

即使
在所有浏览器中的显示都没有问题，使用
也是更长远的保障。

6、计算机输出标签

 1 <br /> 2 <code>Computer code </code> 3 <br /> 4 <kbd>Keyboard input </kbd> 5 <br /> 6 <tt>Teletype text </tt> 7 <br /> 8 <samp>Sample text</samp> 9 <br />10 <var>Computer variable</var>11 <br />
登录后复制

7、地址输入

1 <address>2 Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> 3 Visit us at:<br>4 Example.com<br>5 Box 564, Disneyland<br>6 USA7 </address>
登录后复制

8、文字方向

<p>如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；</p><bdo dir="rtl">Here is some Hebrew text</bdo>
登录后复制

9、块引用

 1 这是长的引用： 2 <blockquote> 3 这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。 4 </blockquote> 5  6 这是短的引用： 7 <q> 8 这是短的引用。 9 </q>10 11 <p>12 使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。13 </p>
登录后复制

 

10、格式化总结

 

文本格式化标签

标签

描述

定义粗体文本。

定义大号字。

定义着重文字。

定义斜体字。

定义小号字。

定义加重语气。

定义下标字。

定义上标字。

定义插入字。

定义删除字。

不赞成使用。使用 代替。

不赞成使用。使用 代替。

不赞成使用。使用样式（style）代替。

“计算机输出”标签

标签

描述

定义计算机代码。

定义键盘码。

定义计算机代码样本。

定义打字机代码。

定义变量。

 

登录后复制

      
定义预格式文本。
     
     
           



      

不赞成使用。使用 


 代替。
登录后复制
登录后复制
登录后复制

     
     
           
</plaintext></p></td>      <td>
<p>不赞成使用。使用 </p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> 代替。</pre><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div>
</td>     </tr>     <tr>           <td>
<p></p>
<xmp></xmp>
</td>      <td>
<p>不赞成使用。使用 </p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> 代替。</pre><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div>
</td>     </tr>     </table>    <p>引用、引用和术语定义</p>    <table>          <tr>           <td><p><strong>标签</strong></p></td>      <td><p><strong>描述</strong></p></td>     </tr>     <tr>           <td><p><abbr></abbr></p></td>      <td><p>定义缩写。</p></td>     </tr>     <tr>           <td><p><acronym></acronym></p></td>      <td><p>定义首字母缩写。</p></td>     </tr>     <tr>           <td>
<p></p>
<address></address>
</td>      <td><p>定义地址。</p></td>     </tr>     <tr>           <td><p><bdo></bdo></p></td>      <td><p>定义文字方向。</p></td>     </tr>     <tr>           <td>
<p></p>
<blockquote></blockquote>
</td>      <td><p>定义长的引用。</p></td>     </tr>     <tr>           <td><p><q></q></p></td>      <td><p>定义短的引用语。</p></td>     </tr>     <tr>           <td><p><cite></cite></p></td>      <td><p>定义引用、引证。</p></td>     </tr>     <tr>           <td><p><dfn></dfn></p></td>      <td><p>定义一个定义项目。</p></td>     </tr>     </table>      <p class="sycode"></p>   <p class="sycode"></p>   <p class="sycode">       </p>
<p class="sycode"></p>    <p class="sycode"></p>    <p class="sycode">        </p>    <p class="sycode"></p>    <p class="sycode"></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/search?word=1、html基础学习第一天" target="_blank">1、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/faq/269410.html" title="DIV+CSS 网页布局之：两列布局_html/css_WEB-ITnose">
                        <span>上一篇：DIV+CSS 网页布局之：两列布局_html/css_WEB-ITnose</span>
                    </a>
                                    <a href="https://www.php.cn/zh/faq/269412.html"  title="DIV+CSS 网页布局之：三列布局_html/css_WEB-ITnose">
                        <span>下一篇：DIV+CSS 网页布局之：三列布局_html/css_WEB-ITnose</span>
                    </a>
                            </div>
            <div class="wzconShengming">
       
                <div class="bzsmdiv">本站声明</div>
                <div>本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系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">作者最新文章</div>
                <ul>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/zh/faq/1796639331.html">什么是 NullPointerException，如何修复它？</a>
                            </div>
                            <div>2024-10-22 09:46:29</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/zh/faq/1796629482.html">从新手到程序员：您的旅程从 C 基础知识开始</a>
                            </div>
                            <div>2024-10-13 13:53:41</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/zh/faq/1796628545.html">使用PHP解锁网络开发：初学者指南</a>
                            </div>
                            <div>2024-10-12 12:15:51</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/zh/faq/1796627928.html">揭秘 C：为新程序员提供一条清晰简单的道路</a>
                            </div>
                            <div>2024-10-11 22:47:31</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/zh/faq/1796627806.html">释放您的编码潜力：绝对初学者的 C 编程</a>
                            </div>
                            <div>2024-10-11 19:36:51</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/zh/faq/1796627670.html">释放你内心的程序员：C 绝对初学者</a>
                            </div>
                            <div>2024-10-11 15:50:41</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/zh/faq/1796627643.html">使用 C 自动化您的生活：适合初学者的脚本和工具</a>
                            </div>
                            <div>2024-10-11 15:07:41</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/zh/faq/1796627620.html">PHP 变得简单：Web 开发的第一步</a>
                            </div>
                            <div>2024-10-11 14:21:21</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/zh/faq/1796627574.html">使用 Python 构建任何东西：释放创造力的初学者指南</a>
                            </div>
                            <div>2024-10-11 12:59:11</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/zh/faq/1796627539.html">编码的关键：为初学者释放 Python 的力量</a>
                            </div>
                            <div>2024-10-11 12:17:31</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/wenda/175845.html"  target="_blank" title="按钮激活导致悬停效果故障" class="wdcdcTitle">按钮激活导致悬停效果故障</a>
                            <a href="https://www.php.cn/zh/wenda/175845.html" class="wdcdcCons">我一直在努力学习网络开发的基础知识（HTML、CSS和JS），所以我一直在尝试制作一个可用的苹果计算器。一切都工作正常，直到我注意到一个小错误。一开始，操作按钮上的悬停效果效果很好...</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> 来自于 2024-04-01 21:51:26</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <div class="wdcdcirdz flexRow ira">  <b class="wdcdcirdzi"></b>0 </div>
                                    <div class="wdcdcirpl flexRow ira"><b  class="wdcdcirpli"></b>1</div>
                                    <div class="wdcdcirwatch flexRow ira"><b  class="wdcdcirwatchi"></b>396</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/faq/zt" target="_blank">更多>
                    </a>
                </div>
                <div class="wzcttlist">
                    <ul>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/zh/faq/esdssmwj"><img src="https://img.php.cn/upload/subject/202407/22/2024072214114576965.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="ESD是什么文件" /> </a>
                            <a target="_blank" href="https://www.php.cn/zh/faq/esdssmwj" class="title-a-spanl" title="ESD是什么文件"><span>ESD是什么文件</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/zh/faq/articlebqyldy"><img src="https://img.php.cn/upload/subject/202407/22/2024072213322159054.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="article标签用来定义什么" /> </a>
                            <a target="_blank" href="https://www.php.cn/zh/faq/articlebqyldy" class="title-a-spanl" title="article标签用来定义什么"><span>article标签用来定义什么</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/zh/faq/parsererror"><img src="https://img.php.cn/upload/subject/202407/22/2024072213370949121.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="parsererror错误怎么解决" /> </a>
                            <a target="_blank" href="https://www.php.cn/zh/faq/parsererror" class="title-a-spanl" title="parsererror错误怎么解决"><span>parsererror错误怎么解决</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/zh/faq/dnkjhhpjrzm"><img src="https://img.php.cn/upload/subject/202407/22/2024072213325612805.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="电脑开机后黑屏进入不了桌面怎么解决" /> </a>
                            <a target="_blank" href="https://www.php.cn/zh/faq/dnkjhhpjrzm" class="title-a-spanl" title="电脑开机后黑屏进入不了桌面怎么解决"><span>电脑开机后黑屏进入不了桌面怎么解决</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/zh/faq/jspxnkjzmpz"><img src="https://img.php.cn/upload/subject/202407/22/2024072213493813349.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="jsp虚拟空间怎么配置" /> </a>
                            <a target="_blank" href="https://www.php.cn/zh/faq/jspxnkjzmpz" class="title-a-spanl" title="jsp虚拟空间怎么配置"><span>jsp虚拟空间怎么配置</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/zh/faq/sqlcxyjdq"><img src="https://img.php.cn/upload/subject/202407/22/2024072213461414126.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="SQL查询语句大全" /> </a>
                            <a target="_blank" href="https://www.php.cn/zh/faq/sqlcxyjdq" class="title-a-spanl" title="SQL查询语句大全"><span>SQL查询语句大全</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/zh/faq/smscss"><img src="https://img.php.cn/upload/subject/202407/22/2024072214211465937.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="什么是css" /> </a>
                            <a target="_blank" href="https://www.php.cn/zh/faq/smscss" class="title-a-spanl" title="什么是css"><span>什么是css</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/zh/faq/afpssm"><img src="https://img.php.cn/upload/subject/202407/22/2024072214305473305.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="adobe flash player是什么" /> </a>
                            <a target="_blank" href="https://www.php.cn/zh/faq/afpssm" class="title-a-spanl" title="adobe flash player是什么"><span>adobe flash player是什么</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">热门推荐</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/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/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/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/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/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/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/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/course/812.html">最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)</a>
                                    <div class="wzrthreerb">
                                        <div>1427222 <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/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/course/74.html">php入门教程之一周学会PHP</a>
                                    <div class="wzrthreerb">
                                        <div>4277043 <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/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/course/286.html">JAVA 初级入门视频教程</a>
                                    <div class="wzrthreerb">
                                        <div>2576407 <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/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/course/504.html">小甲鱼零基础入门学习Python视频教程</a>
                                    <div class="wzrthreerb">
                                        <div>509981 <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/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/course/2.html">PHP 零基础入门教程</a>
                                    <div class="wzrthreerb">
                                        <div>867069 <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/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/course/812.html">最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)</a>
                                <div class="wzrthreerb">
                                    <div >1427222次学习</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/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/course/286.html">JAVA 初级入门视频教程</a>
                                <div class="wzrthreerb">
                                    <div >2576407次学习</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/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/course/504.html">小甲鱼零基础入门学习Python视频教程</a>
                                <div class="wzrthreerb">
                                    <div >509981次学习</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/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/course/901.html">Web前端开发极速入门</a>
                                <div class="wzrthreerb">
                                    <div >216235次学习</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/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/course/234.html">零基础精通 PS 视频教程</a>
                                <div class="wzrthreerb">
                                    <div >898630次学习</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/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/course/1648.html">【web前端】Node.js快速入门</a>
                                <div class="wzrthreerb">
                                    <div >8185次学习</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/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/course/1647.html">国外Web开发全栈课程全集</a>
                                <div class="wzrthreerb">
                                    <div >6501次学习</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/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/course/1646.html">Go语言实战之 GraphQL</a>
                                <div class="wzrthreerb">
                                    <div >5391次学习</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/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/course/1645.html">550W粉丝大佬手把手从零学JavaScript</a>
                                <div class="wzrthreerb">
                                    <div >739次学习</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/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/course/1644.html">python大神Mosh，零基础小白6小时完全入门</a>
                                <div class="wzrthreerb">
                                    <div >27482次学习</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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/about/us.html">关于我们</a>
            <a href="https://www.php.cn/zh/about/disclaimer.html">免责声明</a>
            <a href="https://www.php.cn/zh/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?1736513603"></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>


<!-- Matomo -->
<script>
  var _paq = window._paq = window._paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="https://tongji.php.cn/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', '9']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<!-- End Matomo Code -->
</body>
</html>