首页 > web前端 > H5教程 > 正文

浅谈HTML5新增及移除的元素

巴扎黑
发布: 2017-05-21 14:39:46
原创
1580 人浏览过

下面小编就为大家带来一篇浅谈HTML5新增及移除的元素。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

HTML经过10多年的发展,其元素经历了废弃与不断重新定义的过程。为了更好的处理现在的互联网应用,HTML5新增了图形绘制、多媒体播放、页面结构、应用程序存储、网络工作等新元素。

图形绘制新元素

标签 描述
标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API

新多媒体元素

标签 描述
定义音频内容
定义视频内容
定义多媒体资源(audio或vedio)
定义嵌入的内容,比如插件
为如video和 audio元素之类的媒介规定外部文本轨道

新表单元素

标签 描述
定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。
规定用于表单的密钥对生成器字段。
定义不同类型的输出,比如脚本的输出。

新的语义和结构元素

HTML5提供了新的元素来创建更加适用的的页面。

标签 描述
定义页面独立的内容区域。
定义页面的侧边栏内容。 何问起
允许您设置一段文本,使其脱离其父元素的文本方向设置。
定义命令按钮,比如单选按钮、复选框或按钮。
用于描述文档或文档某个部分的细节。
定义对话框,比如提示框。
标签包含 details 元素的标题。
规定独立的流内容(图像、图表、照片、代码等等)。
定义 figure元素的标题。
定义 section 或 document 的页脚。
定义了文档的头部区域。
定义带有记号的文本。
定义度量衡。仅用于已知最大和最小值的度量。
定义导航链接的部分。
定义任何类型的任务的进度。
定义 ruby 注释(中文注音或字符)。
定义字符(中文注音或字符)的解释或发音。
在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。
定义文档中的节(section、区段)。
定义日期或时间。
规定在文本中的何处适合添加换行符。

已移除的元素

以下的 HTML 4.01 元素在HTML5中已经被删除:

标签
</td></tr> <tr><td><strike></td></tr> <tr><td style="word-break: break-all;"><tt></td></tr> </tbody> </table><p>以上是浅谈HTML5新增及移除的元素的详细内容。更多信息请关注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="http://www.php.cn/zh/search?word=html5" target="_blank">html5</a> <a onclick="hits_log(2,'www',this);" href-data="http://www.php.cn/zh/search?word=元素" target="_blank">元素</a> <a onclick="hits_log(2,'www',this);" href-data="http://www.php.cn/zh/search?word=移除" target="_blank">移除</a> </div> </div> <div style="display: inline-flex;float: right; color:#333333;">来源:php.cn</div> </div> <div class="wzconOtherwz"> <a href="http://www.php.cn/zh/faq/362856.html" title="使用phonegap实现播放音频的方法示例分享"> <span>上一篇:使用phonegap实现播放音频的方法示例分享</span> </a> <a href="http://www.php.cn/zh/faq/362858.html" title="HTML5 canvas基本绘图之绘制矩形"> <span>下一篇:HTML5 canvas基本绘图之绘制矩形</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="http://www.php.cn/zh/faq/375959.html">如何给php数组添加元素</a> </div> <div>2023-03-14 15:58:02</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/zh/faq/377752.html">实例展示JS实现简单的选择题测评系统</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/zh/faq/376780.html">PHP限制相同IP多次提交的解决办法</a> </div> <div>2023-03-15 07:38:01</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/zh/faq/362217.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="http://www.php.cn/zh/faq/379000.html">有关JavaScript严格模式下this的指向问题详解</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/zh/faq/377851.html">Java构建树形菜单(包括多级菜单)的实例代码</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/zh/faq/376633.html">CSS3实现hover离开时平滑过渡的实例详解</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/zh/faq/370599.html">Swiper轮播图源码分享解析</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/zh/faq/378766.html">总结整理VsCode插件</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/zh/faq/373935.html">HttpUtils请求工具类的代码</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="http://www.php.cn/zh/wenda/176344.html" target="_blank" title="如何让我的图像显示在页面的主显示屏上?" class="wdcdcTitle">如何让我的图像显示在页面的主显示屏上?</a> <a href="http://www.php.cn/zh/wenda/176344.html" class="wdcdcCons">我想做的是使用NASAAPI接收一些照片。然后在我的网页的缩略图和主显示屏上显示这些照片。我只是弄清楚为什么代码不从缩略图中获取图像并将其显示在页面上。我还使用HTML5及以上版本...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> 来自于 2024-04-06 15:33:12</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>433</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/zh/wenda/176282.html" target="_blank" title="PDF文件能够运行HTML5和Javascript吗?" class="wdcdcTitle">PDF文件能够运行HTML5和Javascript吗?</a> <a href="http://www.php.cn/zh/wenda/176282.html" class="wdcdcCons">我有一个愚蠢的想法,想尝试制作一个在任何计算机上都不会被阻止的程序,因为它将嵌入在PDF中(我听说Javascript可以在PDF中运行)。它将在PDF文件中运行HTML5和Jav...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> 来自于 2024-04-05 12:57:00</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>456</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/zh/wenda/175892.html" target="_blank" title="HTML5中的enctype和formenctype有什么区别?" class="wdcdcTitle">HTML5中的enctype和formenctype有什么区别?</a> <a href="http://www.php.cn/zh/wenda/175892.html" class="wdcdcCons">我只是想知道HTMLLivingStandard(又名新的HTML5规范)中的属性enctype和formenctype之间有什么区别?我一直在阅读《面向开发人员的HTML标准》,...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> 来自于 2024-04-02 11:47:56</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>275</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/zh/wenda/175834.html" target="_blank" title="使页面适合移动设备吗?" class="wdcdcTitle">使页面适合移动设备吗?</a> <a href="http://www.php.cn/zh/wenda/175834.html" class="wdcdcCons">我有很多网页和一些网站。问题是,我是一个初学者。我使用基本的html5和css3,但我不知道如何使它们放大、缩小并且适合移动设备。例如,这是我的页面之一和我的网站之一,您可以在其中...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> 来自于 2024-04-01 20:42:38</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>259</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> </div> </div> <div class="wzconZt" > <div class="wzczt-title"> <div>相关专题</div> <a href="http://www.php.cn/zh/faq/zt" target="_blank">更多> </a> </div> <div class="wzcttlist"> <ul> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/zh/faq/javazmqsz"><img src="https://img.php.cn/upload/subject/202407/22/2024072214024260202.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Java怎么求数组元素的最大和最小值" /> </a> <a target="_blank" href="http://www.php.cn/zh/faq/javazmqsz" class="title-a-spanl" title="Java怎么求数组元素的最大和最小值"><span>Java怎么求数组元素的最大和最小值</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/zh/faq/html5dhzzynxz"><img src="https://img.php.cn/upload/subject/202407/22/2024072213560284279.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="html5动画制作有哪些制作方法" /> </a> <a target="_blank" href="http://www.php.cn/zh/faq/html5dhzzynxz" class="title-a-spanl" title="html5动画制作有哪些制作方法"><span>html5动画制作有哪些制作方法</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/zh/faq/htmlyhtmldeqb"><img src="https://img.php.cn/upload/subject/202407/22/2024072212284445490.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="HTML与HTML5的区别" /> </a> <a target="_blank" href="http://www.php.cn/zh/faq/htmlyhtmldeqb" class="title-a-spanl" title="HTML与HTML5的区别"><span>HTML与HTML5的区别</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/zh/faq/androidxt"><img src="https://img.php.cn/upload/subject/202407/22/2024072214170522770.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="android是什么系统" /> </a> <a target="_blank" href="http://www.php.cn/zh/faq/androidxt" class="title-a-spanl" title="android是什么系统"><span>android是什么系统</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/zh/faq/apezmzwav"><img src="https://img.php.cn/upload/subject/202407/22/2024072213453378223.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="ape怎么转wav" /> </a> <a target="_blank" href="http://www.php.cn/zh/faq/apezmzwav" class="title-a-spanl" title="ape怎么转wav"><span>ape怎么转wav</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/zh/faq/kb4012212gx"><img src="https://img.php.cn/upload/subject/202407/22/2024072213574843582.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="kb4012212 更新失败怎么办" /> </a> <a target="_blank" href="http://www.php.cn/zh/faq/kb4012212gx" class="title-a-spanl" title="kb4012212 更新失败怎么办"><span>kb4012212 更新失败怎么办</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/zh/faq/pptbjtpzmsz"><img src="https://img.php.cn/upload/subject/202407/22/2024072212182824262.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="ppt背景图片怎么设置" /> </a> <a target="_blank" href="http://www.php.cn/zh/faq/pptbjtpzmsz" class="title-a-spanl" title="ppt背景图片怎么设置"><span>ppt背景图片怎么设置</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/zh/faq/zwymdzy"><img src="https://img.php.cn/upload/subject/202407/22/2024072213335321451.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="子网掩码的作用" /> </a> <a target="_blank" href="http://www.php.cn/zh/faq/zwymdzy" class="title-a-spanl" title="子网掩码的作用"><span>子网掩码的作用</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="h5是什么" href="http://www.php.cn/zh/faq/414835.html">h5是什么</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="不懂代码怎么制作h5页面?H5页面制作平台推荐" href="http://www.php.cn/zh/faq/417718.html">不懂代码怎么制作h5页面?H5页面制作平台推荐</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="html5的新特性有哪些" href="http://www.php.cn/zh/faq/473125.html">html5的新特性有哪些</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="什么是h5页面制作" href="http://www.php.cn/zh/faq/468382.html">什么是h5页面制作</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="h5和小程序有什么区别" href="http://www.php.cn/zh/faq/463311.html">h5和小程序有什么区别</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="http://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="http://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="http://www.php.cn/zh/course/812.html">最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)</a> <div class="wzrthreerb"> <div>1414829 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/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="http://www.php.cn/zh/course/74.html">php入门教程之一周学会PHP</a> <div class="wzrthreerb"> <div>4252921 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="74"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/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="http://www.php.cn/zh/course/286.html">JAVA 初级入门视频教程</a> <div class="wzrthreerb"> <div>2460665 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/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="http://www.php.cn/zh/course/504.html">小甲鱼零基础入门学习Python视频教程</a> <div class="wzrthreerb"> <div>502520 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/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="http://www.php.cn/zh/course/2.html">PHP 零基础入门教程</a> <div class="wzrthreerb"> <div>842591 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="2"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="two" style="display: none;"> <li> <a target="_blank" href="http://www.php.cn/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="http://www.php.cn/zh/course/812.html">最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)</a> <div class="wzrthreerb"> <div >1414829次学习</div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/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="http://www.php.cn/zh/course/286.html">JAVA 初级入门视频教程</a> <div class="wzrthreerb"> <div >2460665次学习</div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/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="http://www.php.cn/zh/course/504.html">小甲鱼零基础入门学习Python视频教程</a> <div class="wzrthreerb"> <div >502520次学习</div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/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="http://www.php.cn/zh/course/901.html">Web前端开发极速入门</a> <div class="wzrthreerb"> <div >215149次学习</div> <div class="courseICollection" data-id="901"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/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="http://www.php.cn/zh/course/234.html">零基础精通 PS 视频教程</a> <div class="wzrthreerb"> <div >872862次学习</div> <div class="courseICollection" data-id="234"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="three" style="display: none;"> <li> <a target="_blank" href="http://www.php.cn/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="http://www.php.cn/zh/course/1648.html">【web前端】Node.js快速入门</a> <div class="wzrthreerb"> <div >6087次学习</div> <div class="courseICollection" data-id="1648"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/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="http://www.php.cn/zh/course/1647.html">国外Web开发全栈课程全集</a> <div class="wzrthreerb"> <div >4637次学习</div> <div class="courseICollection" data-id="1647"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/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="http://www.php.cn/zh/course/1646.html">Go语言实战之 GraphQL</a> <div class="wzrthreerb"> <div >3998次学习</div> <div class="courseICollection" data-id="1646"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/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="http://www.php.cn/zh/course/1645.html">550W粉丝大佬手把手从零学JavaScript</a> <div class="wzrthreerb"> <div >595次学习</div> <div class="courseICollection" data-id="1645"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/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="http://www.php.cn/zh/course/1644.html">python大神Mosh,零基础小白6小时完全入门</a> <div class="wzrthreerb"> <div >20379次学习</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="http://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="http://www.php.cn/zh/xiazai/js/8071">[表单按钮] jQuery企业留言表单联系代码</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5 MP3音乐盒播放特效" href="http://www.php.cn/zh/xiazai/js/8070">[播放器特效] HTML5 MP3音乐盒播放特效</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5炫酷粒子动画导航菜单特效" href="http://www.php.cn/zh/xiazai/js/8069">[菜单导航] HTML5炫酷粒子动画导航菜单特效</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery可视化表单拖拽编辑代码" href="http://www.php.cn/zh/xiazai/js/8068">[表单按钮] jQuery可视化表单拖拽编辑代码</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="VUE.JS仿酷狗音乐播放器代码" href="http://www.php.cn/zh/xiazai/js/8067">[播放器特效] VUE.JS仿酷狗音乐播放器代码</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="经典html5推箱子小游戏" href="http://www.php.cn/zh/xiazai/js/8066">[html5特效] 经典html5推箱子小游戏</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery滚动添加或减少图片特效" href="http://www.php.cn/zh/xiazai/js/8065">[图片特效] jQuery滚动添加或减少图片特效</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="CSS3个人相册封面悬停放大特效" href="http://www.php.cn/zh/xiazai/js/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="http://www.php.cn/zh/xiazai/code/8328" title="家居装潢清洁维修服务公司网站模板" target="_blank">[前端模板] 家居装潢清洁维修服务公司网站模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/zh/xiazai/code/8327" title="清新配色个人求职简历引导页模板" target="_blank">[前端模板] 清新配色个人求职简历引导页模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/zh/xiazai/code/8326" title="设计师创意求职简历网页模板" target="_blank">[前端模板] 设计师创意求职简历网页模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/zh/xiazai/code/8325" title="现代工程建筑公司网站模板" target="_blank">[前端模板] 现代工程建筑公司网站模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/zh/xiazai/code/8324" title="教育服务机构响应式HTML5模板" target="_blank">[前端模板] 教育服务机构响应式HTML5模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/zh/xiazai/code/8323" title="网上电子书店商城网站模板" target="_blank">[前端模板] 网上电子书店商城网站模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/zh/xiazai/code/8322" title="IT技术解决互联网公司网站模板" target="_blank">[前端模板] IT技术解决互联网公司网站模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/zh/xiazai/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="http://www.php.cn/zh/xiazai/sucai/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="http://www.php.cn/zh/xiazai/sucai/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="http://www.php.cn/zh/xiazai/sucai/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="http://www.php.cn/zh/xiazai/sucai/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="http://www.php.cn/zh/xiazai/sucai/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="http://www.php.cn/zh/xiazai/sucai/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="http://www.php.cn/zh/xiazai/sucai/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="http://www.php.cn/zh/xiazai/sucai/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="http://www.php.cn/zh/xiazai/code/8328" target="_blank" title="家居装潢清洁维修服务公司网站模板">[前端模板] 家居装潢清洁维修服务公司网站模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/zh/xiazai/code/8327" target="_blank" title="清新配色个人求职简历引导页模板">[前端模板] 清新配色个人求职简历引导页模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/zh/xiazai/code/8326" target="_blank" title="设计师创意求职简历网页模板">[前端模板] 设计师创意求职简历网页模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/zh/xiazai/code/8325" target="_blank" title="现代工程建筑公司网站模板">[前端模板] 现代工程建筑公司网站模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/zh/xiazai/code/8324" target="_blank" title="教育服务机构响应式HTML5模板">[前端模板] 教育服务机构响应式HTML5模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/zh/xiazai/code/8323" target="_blank" title="网上电子书店商城网站模板">[前端模板] 网上电子书店商城网站模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/zh/xiazai/code/8322" target="_blank" title="IT技术解决互联网公司网站模板">[前端模板] IT技术解决互联网公司网站模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/zh/xiazai/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> <div class="phpFoot"> <div class="phpFootIn"> <div class="phpFootCont"> <div class="phpFootLeft"> <dl> <dt> <a href="http://www.php.cn/zh/about/xieyi.html" rel="nofollow" target="_blank" title="关于我们" class="cBlack">关于我们</a> <a href="http://www.php.cn/zh/about/yinsi.html" rel="nofollow" target="_blank" title="免责声明" class="cBlack">免责声明</a> <a href="http://www.php.cn/zh/update/article_0_1.html" target="_blank" title="Sitemap" class="cBlack">Sitemap</a> <div class="clear"></div> </dt> <dd class="cont1">PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!</dd> </dl> </div> </div> </div> </div> <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?1729650364"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all'/> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> </body> </html>