前端面试题小结

前面我们和大家分享了几十道css面试题目，本文我们接着和大家分享前端面试题小结，希望能帮助到大家。

HTML

1.html5新增了哪些内容或api，使用过哪些？

• HTML5新增input输入类型：

• email类型

• url类型

• number类型提供选择数字的功能，其中min属性设定最小值，max属性设定最大值，value属性设置当前值，step属性设定每次增长值。

• range类型，表示限制数字输入的范围域

• 日期和时间类型:date,month,week,time,datetime,datetime-local

• search类型

• tel类型

• color类型

• HTML5新增表单元素

• datalist 规定输入域的选项列表

• keygen提供一种可靠方法来验证用户

• output用于不同类型的输出

• 还有更多细节内容不列在这里啦。请看这篇博客

---

2.input和textarea的区别?

• 是单行文本框。是多行文本框。</span></p></li></ul> <hr> <p><span style="font-size: 14px;">3.用一个p模拟textarea的实现？</span></p> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 14px;">首先我们需要知道p是高度自适应的，高度会随着内容的增加而增加。而textarea有着固定的大小，高度超过规定高度就会出现滚动条。</span></p></li> <li><p><span style="font-size: 14px;">p有一个属性叫做contenteditable，设置contenteditable属性为true就可以实现，p内容可编辑。</span></p></li> <li><p><span style="font-size: 14px;">实现了内容可编辑以后，在css中设置好规定的高度，设置overflow－y属性为auto,即可实现滚动条。</span></p></li> </ul> <hr> <p><span style="font-size: 14px;">4.移动设备忽略将页面中的数字识别为电话号码的方法?</span></p> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 14px;">移动设备中经常会出现将一串数字识别为电话的情况，数字的颜色和样式都会变化，点击可以直接拨打。</span></p></li> <li><p><span style="font-size: 14px;">添加如下代码可以关闭识别。</span></p></li> </ul> <pre class="brush:php;toolbar:false"><span style="font-size: 14px;">   <meta name = "format-detection" content = "telephone=no">  <br></span></pre> <hr> <h2 id="span-style-font-size-px-CSS-span"><span style="font-size: 14px;">CSS</span></h2> <p><span style="font-size: 14px;">1.左右布局：左边定宽、右边自适应，不少于3种方法</span></p> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 14px;">方法一：左边模块设置左浮动，右边模块宽度设置100%</span></p></li> <li><p><span style="font-size: 14px;">方法二：父容器设置display：flex；right部分设置flex：1。display：flex设置为弹性盒子，其子元素可以设置flex的数值来控制其所占空间的比例。</span></p></li> <li><p><span style="font-size: 14px;">方法三：使用负margin。设置左部分和右部分左浮动，并为right部分设置宽度100%。设置左部分左外边距为负100%。为了避免右部分的内容被覆盖，再为右部分设置添加左边距（左部分的宽度）。</span></p></li> </ul> <hr> <p><span style="font-size: 14px;">2.CSS3有哪些新特性?</span></p> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 14px;">CSS3的选择器</span></p></li> <ul class=" list-paddingleft-2" style="list-style-type: square;"><li><p><span style="font-size: 14px;">E:last-child / E :nth-child(n) / E : nth-last-child(n) 倒数第n个元素</span></p></li></ul> <li><p><span style="font-size: 14px;">@Font-face特性用来加载字体样式，可以加载服务器端的字体，显示到客户端，即使客户端并没有安装该字体</span></p></li> <li><p><span style="font-size: 14px;">圆角:border-radius</span></p></li> <li><p><span style="font-size: 14px;">弹性盒子模式display：flex。 等等属性</span></p></li> </ul> <hr> <p><span style="font-size: 14px;">3.BFC与IFC</span></p> <p><span style="font-size: 14px;">相关推荐：</span></p> <p><span style="font-size: 14px;"><a href="http://www.php.cn/js-tutorial-370735.html" target="_self">最新的百度前端面试题分享</a></span></p> <p><a href="http://www.php.cn/div-tutorial-359954.html" target="_self">Web前端面试题第八道—绝对定位与相对定位</a></p> <p><a href="http://www.php.cn/div-tutorial-370734.html" target="_self">分享一些前端面试题实例</a></p> <p class="article fmt article__content"><br></p> <p class="comments-box-content"><br></p><p>以上是前端面试题小结的详细内容。更多信息请关注PHP中文网其他相关文章！</p></div><div class="wzconShengming_sp"><div class="bzsmdiv_sp">声明</div><div>本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn</div></div></div><div class="phpgenera_Details_mainL4"><div class="phpmain1_2_top"><a href="javascript:void(0);" class="phpmain1_2_top_title">相关文章<img class="lazy" data-src="/static/imghwm/index2_title2.png" src="/static/imghw/default1.png" alt="" /></a></div><div class="phpgenera_Details_mainL4_info"><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/zh/faq/1796803649.html" title="JavaScript，C和浏览器之间的关系" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174602919145241.jpg?x-oss-process=image/resize,p_40" alt="JavaScript，C和浏览器之间的关系" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/zh/faq/1796803649.html" title="JavaScript，C和浏览器之间的关系" class="phphistorical_Version2_mids_title">JavaScript，C和浏览器之间的关系</a><span class="Articlelist_txts_time">May 01, 2025 am 12:06 AM</span><p class="Articlelist_txts_p">引言我知道你可能会觉得奇怪，JavaScript、C 和浏览器之间到底有什么关系？它们之间看似毫无关联，但实际上，它们在现代网络开发中扮演着非常重要的角色。今天我们就来深入探讨一下这三者之间的紧密联系。通过这篇文章，你将了解到JavaScript如何在浏览器中运行，C 在浏览器引擎中的作用，以及它们如何共同推动网页的渲染和交互。JavaScript与浏览器的关系我们都知道，JavaScript是前端开发的核心语言，它直接在浏览器中运行，让网页变得生动有趣。你是否曾经想过，为什么JavaScr</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/zh/faq/1796803261.html" title="node.js流带打字稿" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174597253128081.jpg?x-oss-process=image/resize,p_40" alt="node.js流带打字稿" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/zh/faq/1796803261.html" title="node.js流带打字稿" class="phphistorical_Version2_mids_title">node.js流带打字稿</a><span class="Articlelist_txts_time">Apr 30, 2025 am 08:22 AM</span><p class="Articlelist_txts_p">Node.js擅长于高效I/O，这在很大程度上要归功于流。 流媒体汇总处理数据，避免内存过载 - 大型文件，网络任务和实时应用程序的理想。将流与打字稿的类型安全结合起来创建POWE</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/zh/faq/1796803151.html" title="Python vs. JavaScript：性能和效率注意事项" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174594291130088.jpg?x-oss-process=image/resize,p_40" alt="Python vs. JavaScript：性能和效率注意事项" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/zh/faq/1796803151.html" title="Python vs. JavaScript：性能和效率注意事项" class="phphistorical_Version2_mids_title">Python vs. JavaScript：性能和效率注意事项</a><span class="Articlelist_txts_time">Apr 30, 2025 am 12:08 AM</span><p class="Articlelist_txts_p">Python和JavaScript在性能和效率方面的差异主要体现在：1)Python作为解释型语言，运行速度较慢，但开发效率高，适合快速原型开发；2)JavaScript在浏览器中受限于单线程，但在Node.js中可利用多线程和异步I/O提升性能，两者在实际项目中各有优势。</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/zh/faq/1796802897.html" title="JavaScript的起源：探索其实施语言" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174585910045072.jpg?x-oss-process=image/resize,p_40" alt="JavaScript的起源：探索其实施语言" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/zh/faq/1796802897.html" title="JavaScript的起源：探索其实施语言" class="phphistorical_Version2_mids_title">JavaScript的起源：探索其实施语言</a><span class="Articlelist_txts_time">Apr 29, 2025 am 12:51 AM</span><p class="Articlelist_txts_p">JavaScript起源于1995年，由布兰登·艾克创造，实现语言为C语言。1.C语言为JavaScript提供了高性能和系统级编程能力。2.JavaScript的内存管理和性能优化依赖于C语言。3.C语言的跨平台特性帮助JavaScript在不同操作系统上高效运行。</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/zh/faq/1796802243.html" title="幕后：什么语言能力JavaScript？" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174576967289548.jpg?x-oss-process=image/resize,p_40" alt="幕后：什么语言能力JavaScript？" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/zh/faq/1796802243.html" title="幕后：什么语言能力JavaScript？" class="phphistorical_Version2_mids_title">幕后：什么语言能力JavaScript？</a><span class="Articlelist_txts_time">Apr 28, 2025 am 12:01 AM</span><p class="Articlelist_txts_p">JavaScript在浏览器和Node.js环境中运行，依赖JavaScript引擎解析和执行代码。1）解析阶段生成抽象语法树（AST）；2）编译阶段将AST转换为字节码或机器码；3）执行阶段执行编译后的代码。</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/zh/faq/1796801996.html" title="Python和JavaScript的未来：趋势和预测" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174568451076471.jpg?x-oss-process=image/resize,p_40" alt="Python和JavaScript的未来：趋势和预测" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/zh/faq/1796801996.html" title="Python和JavaScript的未来：趋势和预测" class="phphistorical_Version2_mids_title">Python和JavaScript的未来：趋势和预测</a><span class="Articlelist_txts_time">Apr 27, 2025 am 12:21 AM</span><p class="Articlelist_txts_p">Python和JavaScript的未来趋势包括：1.Python将巩固在科学计算和AI领域的地位，2.JavaScript将推动Web技术发展，3.跨平台开发将成为热门，4.性能优化将是重点。两者都将继续在各自领域扩展应用场景，并在性能上有更多突破。</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/zh/faq/1796801667.html" title="Python vs. JavaScript：开发环境和工具" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174559739183083.jpg?x-oss-process=image/resize,p_40" alt="Python vs. JavaScript：开发环境和工具" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/zh/faq/1796801667.html" title="Python vs. JavaScript：开发环境和工具" class="phphistorical_Version2_mids_title">Python vs. JavaScript：开发环境和工具</a><span class="Articlelist_txts_time">Apr 26, 2025 am 12:09 AM</span><p class="Articlelist_txts_p">Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda，适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack，适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/zh/faq/1796801343.html" title="JavaScript是用C编写的吗？检查证据" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174551132128899.jpg?x-oss-process=image/resize,p_40" alt="JavaScript是用C编写的吗？检查证据" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/zh/faq/1796801343.html" title="JavaScript是用C编写的吗？检查证据" class="phphistorical_Version2_mids_title">JavaScript是用C编写的吗？检查证据</a><span class="Articlelist_txts_time">Apr 25, 2025 am 12:15 AM</span><p class="Articlelist_txts_p">是的，JavaScript的引擎核心是用C语言编写的。1）C语言提供了高效性能和底层控制，适合JavaScript引擎的开发。2）以V8引擎为例，其核心用C 编写，结合了C的效率和面向对象特性。3）JavaScript引擎的工作原理包括解析、编译和执行，C语言在这些过程中发挥关键作用。</p></div></div><a href="https://m.php.cn/zh/web-designer.html" class="phpgenera_Details_mainL4_botton"><span>See all articles</span><img class="lazy" data-src="/static/imghwm/down_right.png" src="/static/imghw/default1.png" alt="" /></a></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><div class="AI_ToolDetails_main4sR"><div class="phpgenera_Details_mainR3"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hottools2.png" src="/static/imghw/default1.png" alt="" /><h2>热AI工具</h2></div><div class="phpgenera_Details_mainR3_bottom"><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/zh/ai/undresserai-undress" title="Undresser.AI Undress"class="phpmain_tab2_mids_title"><h3>Undresser.AI Undress</h3></a><p>人工智能驱动的应用程序，用于创建逼真的裸体照片</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/zh/ai/ai-clothes-remover" title="AI Clothes Remover"class="phpmain_tab2_mids_title"><h3>AI Clothes Remover</h3></a><p>用于从照片中去除衣服的在线人工智能工具。</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/zh/ai/undress-ai-tool" title="Undress AI Tool"class="phpmain_tab2_mids_title"><h3>Undress AI Tool</h3></a><p>免费脱衣服图片</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/zh/ai/clothoffio" title="Clothoff.io"class="phpmain_tab2_mids_title"><h3>Clothoff.io</h3></a><p>AI脱衣机</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/zh/ai/video-swap" title="Video Face Swap"class="phpmain_tab2_mids_title"><h3>Video Face Swap</h3></a><p>使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！</p></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/zh/ai">显示更多</a></div></div></div><div class="phpgenera_Details_mainR4"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hotarticle2.png" src="/static/imghw/default1.png" alt="" /><h2>热门文章</h2></div><div class="phpgenera_Details_mainR4_bottom"><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/zh/faq/1796789525.html" title="Windows 11 KB5054979中的新功能以及如何解决更新问题" class="phpgenera_Details_mainR4_bottom_title">Windows 11 KB5054979中的新功能以及如何解决更新问题</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>4 周前</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/zh/faq/1796793874.html" title="如何修复KB5055523无法在Windows 11中安装？" class="phpgenera_Details_mainR4_bottom_title">如何修复KB5055523无法在Windows 11中安装？</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>3 周前</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/zh/faq/1796787760.html" title="Inzoi：如何申请学校和大学" class="phpgenera_Details_mainR4_bottom_title">Inzoi：如何申请学校和大学</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>4 周前</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/zh/faq/1796793871.html" title="如何修复KB5055518无法在Windows 10中安装？" class="phpgenera_Details_mainR4_bottom_title">如何修复KB5055518无法在Windows 10中安装？</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>3 周前</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/zh/faq/1796788723.html" title="在哪里可以找到Atomfall中的站点办公室钥匙" class="phpgenera_Details_mainR4_bottom_title">在哪里可以找到Atomfall中的站点办公室钥匙</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>4 周前</span><span>ByDDD</span></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/zh/article.html">显示更多</a></div></div></div><div class="phpgenera_Details_mainR3"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hottools2.png" src="/static/imghw/default1.png" alt="" /><h2>热工具</h2></div><div class="phpgenera_Details_mainR3_bottom"><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png" src="/static/imghw/default1.png" alt="SublimeText3 Mac版" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/zh/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_title"><h3>SublimeText3 Mac版</h3></a><p>神级代码编辑软件(SublimeText3)</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg" src="/static/imghw/default1.png" alt="Dreamweaver CS6" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/zh/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title"><h3>Dreamweaver CS6</h3></a><p>视觉化网页开发工具</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/toolset/development-tools/92" title="记事本++7.3.1" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg" src="/static/imghw/default1.png" alt="记事本++7.3.1" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/zh/toolset/development-tools/92" title="记事本++7.3.1" class="phpmain_tab2_mids_title"><h3>记事本++7.3.1</h3></a><p>好用且免费的代码编辑器</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/toolset/development-tools/660" title="Atom编辑器mac版下载" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ed8cfa94c1a582.jpg" src="/static/imghw/default1.png" alt="Atom编辑器mac版下载" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/zh/toolset/development-tools/660" title="Atom编辑器mac版下载" class="phpmain_tab2_mids_title"><h3>Atom编辑器mac版下载</h3></a><p>最流行的的开源编辑器</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/toolset/development-tools/1527" title="VSCode Windows 64位 下载" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/5e2151b57e8e3927.png" src="/static/imghw/default1.png" alt="VSCode Windows 64位 下载" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/zh/toolset/development-tools/1527" title="VSCode Windows 64位 下载" class="phpmain_tab2_mids_title"><h3>VSCode Windows 64位 下载</h3></a><p>微软推出的免费、功能强大的一款IDE编辑器</p></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/zh/ai">显示更多</a></div></div></div><div class="phpgenera_Details_mainR4"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hotarticle2.png" src="/static/imghw/default1.png" alt="" /><h2>热门话题</h2></div><div class="phpgenera_Details_mainR4_bottom"><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/zh/faq/gmailyxdlrkzn" title="gmail邮箱登陆入口在哪里" class="phpgenera_Details_mainR4_bottom_title">gmail邮箱登陆入口在哪里</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>7879</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>15</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/zh/faq/java-tutorial" title="Java教程" class="phpgenera_Details_mainR4_bottom_title">Java教程</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>1649</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>14</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/zh/faq/cakephp-tutor" title="CakePHP 教程" class="phpgenera_Details_mainR4_bottom_title">CakePHP 教程</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>1410</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>52</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/zh/faq/laravel-tutori" title="Laravel 教程" class="phpgenera_Details_mainR4_bottom_title">Laravel 教程</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>1301</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>25</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/zh/faq/php-tutorial" title="PHP教程" class="phpgenera_Details_mainR4_bottom_title">PHP教程</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>1245</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>29</span></div></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/zh/faq/zt">显示更多</a></div></div></div></div></main><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>公益在线PHP培训，帮助PHP学习者快速成长！</p></div><div class="footermid"><a href="https://m.php.cn/zh/about/us.html">关于我们</a><a href="https://m.php.cn/zh/about/disclaimer.html">免责声明</a><a href="https://m.php.cn/zh/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></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' 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> 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><script> jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script><script>// 通用函数，用于显示或隐藏元素 function toggleElementsDisplay(className, show) { const elements = document.getElementsByClassName(className); for (let i = 0; i < elements.length; i++) { elements[i].style.display = show ? "block" : "none"; } } // 页面加载完成后执行的主函数 document.addEventListener("DOMContentLoaded", () => { // 1. 绑定菜单按钮事件 const bindMenuEvents = () => { const toggleDisplay = (className, show, eventId) => { const element = document.getElementById(eventId); if (element) { element.addEventListener("click", (event) => { event.preventDefault(); toggleElementsDisplay(className, show); }); } }; toggleDisplay("m_editormain12main", true, "fixed_tab_img"); toggleDisplay("m_editormain12main", false, "fixed_tab_topi"); toggleDisplay("m_editormain12main", false, "fixed_tab_close"); toggleDisplay("m_menu", true, "lan1sp"); toggleDisplay("m_menu", false, "m_editormain12main_topi_sp"); toggleDisplay("m_menu_lang", true, "lan1"); toggleDisplay("m_menu_lang", false, "m_editormain12main_topi_lan"); }; // 2. 绑定滚动链接事件 const bindScrollLinks = () => { const titleList = document.getElementById("fixed_tab_titlelist"); const menuMain = document.getElementsByClassName("m_editormain12main")[0]; const links = document.querySelectorAll('.fixed_tab_a'); links.forEach(linkElement => { if (linkElement) { linkElement.addEventListener("click", async (e) => { e.preventDefault(); e.stopPropagation(); // 先隐藏菜单 if (menuMain) menuMain.style.display = "none"; if (titleList) titleList.style.display = "none"; // 获取目标元素的 ID const targetId = linkElement.getAttribute('href').substring(1); const targetElement = document.getElementById(targetId); // 等待 DOM 更新 await new Promise(resolve => requestAnimationFrame(resolve)); // 滚动到目标位置 if (targetElement) { targetElement.scrollIntoView({ behavior: "smooth", block: "start" }); } }); } }); }; // 3. 绑定关闭按钮事件 const bindCloseButton = () => { const closeButton = document.querySelector(".phpgenera_Details_mainR1_close"); const container = document.querySelector(".phpgenera_Details_mainR1"); if (closeButton && container) { closeButton.addEventListener("click", (event) => { event.preventDefault(); container.style.display = "none"; }); } }; // 4. 初始化菜单交互功能 const initMenuInteraction = () => { const menuGroupElements = document.querySelectorAll('.layui-menu-item-group'); menuGroupElements.forEach(menuItem => { menuItem.addEventListener('click', function(event) { if (event.target.closest('.m_menusnames')) { return; } this.classList.toggle('layui-menu-item-down'); this.classList.toggle('layui-menu-item-up'); const subMenuContainer = this.querySelector('.m_menusnames'); const icon = this.querySelector('.layui-icon'); if (subMenuContainer && icon) { if (this.classList.contains('layui-menu-item-down')) { subMenuContainer.style.display = 'block'; icon.classList.remove('layui-icon-down'); icon.classList.add('layui-icon-up'); } else { subMenuContainer.style.display = 'none'; icon.classList.remove('layui-icon-up'); icon.classList.add('layui-icon-down'); } } }); }); }; // 5. 初始化 layui 功能 const initLayui = () => { if (typeof layui !== 'undefined') { layui.use(function () { var util = layui.util; if (util && util.fixbar) { util.fixbar({ on: { mouseenter: function (type) { if (layer && layer.tips) { layer.tips(type, this, { tips: 4, fixed: true, }); } }, mouseleave: function (type) { if (layer && layer.closeAll) { layer.closeAll("tips"); } }, }, }); } }); } }; // 执行所有初始化函数 bindMenuEvents(); bindScrollLinks(); bindCloseButton(); initMenuInteraction(); initLayui(); }); </script></body></html>