在如今的数字时代，网页已经成为我们生活中不可分割的一部分。每个人都可以通过在线网站搭建工具，轻松地创建一个个性化的网站。然而，在这个数字时代之前，网页编写是非常复杂的过程，需要掌握 HTML、CSS、JavaScript 等编程语言的知识。本文将会给您介绍 HTML 的制作。HTML 是网页开发的基础，它告诉浏览器如何显示网页内容。
步骤一：打开文本编辑器
可以使用各种文本编辑器来编写 HTML 文件，如记事本、Sublime Text 或者 Atom。打开喜欢的文本编辑器，开始编写新的 HTML 文件。
步骤二：编写 HTML 代码
HTML 代码是由标签和内容组成的。标签告诉浏览器如何显示内容，内容则是您想要显示的文本、图像或其他内容。以下是一个基本的 HTML 模板，可以复制粘贴使用：
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
</body>
</html>
这个模板创建了一个基本的 HTML 文件。在
标签中，
标签指定了网页的标题，这个标题将会出现在浏览器的标签页上。在 <body> 标签中，您可以添加任何文本或图片等内容来展示在网页上。</p>
<p>步骤三：添加标签和内容</p>
<p>在 <body> 标签中，您可以添加任何您想要展示的内容。下面是一些常用的 HTML 标签和它们的用途：</p>
<ul>
<li>
<code><h1> </h1></code> – 大标题</li>
<li>
<code><p> </p></code> – 段落</li>
<li>
<code><a href="链接"> </a></code> – 链接</li>
<li>
<code><img src="图片链接"></code> – 图片</li>
</ul>
<p>例如，以下是一个包含大标题，段落，链接和图片的 HTML 代码：</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是一段关于我的网页的介绍。</p>
<a href="https://www.example.com/">点击查看示例</a>
<img src="https://www.example.com/images/示例.jpg">
</body>
</html></pre>
<p>步骤四：保存 HTML 文件</p>
<p>HTML 文件可以使用 .html 或者 .htm 扩展名保存。建议将文件名命名为简短有意义的名字，以便日后易于维护。</p>
<p>步骤五：在浏览器中查看 HTML 文件</p>
<p>最后一步，您需要在浏览器中查看网页。打开浏览器，点击菜单栏中的文件 -> 打开文件，选择保存在计算机中的 HTML 文件。该文件应该会在浏览器中打开并显示您刚才编写的 HTML 代码。</p>
<p>总结</p>
<p>HTML 是网页开发的基础，简单易学，您只需掌握一些常见的标签和它们的用途就可以开始编写自己的网页。在此过程中，文本编辑器、浏览器和网络是必不可少的工具。希望这篇介绍 HTML 制作的文章能够让您快速开始创作自己的网页。</p><p>以上是怎么制作html文件（步骤）的详细内容。更多信息请关注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/1796803959.html" title="反应的局限性是什么？" 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/174611677290888.jpg?x-oss-process=image/resize,p_40" alt="反应的局限性是什么？" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/zh/faq/1796803959.html" title="反应的局限性是什么？" class="phphistorical_Version2_mids_title">反应的局限性是什么？</a><span class="Articlelist_txts_time">May 02, 2025 am 12:26 AM</span><p class="Articlelist_txts_p">Include：1）AsteeplearningCurvedUetoItsVasteCosystem，2）SeochallengesWithClient-SiderEndering，3）潜在的PersperformanceissuesInsuesInlArgeApplications，4）ComplexStateStateManagementAsappsgrow和5）TheneedtokeEedtokeEedtokeEppwithitsrapideDrapidevoltolution.thereedtokeEppectortorservolution.thereedthersrapidevolution.ththesefactorsshesssheou</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/zh/faq/1796803954.html" title="React的学习曲线：新开发人员的挑战" 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/174611666261658.jpg?x-oss-process=image/resize,p_40" alt="React的学习曲线：新开发人员的挑战" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/zh/faq/1796803954.html" title="React的学习曲线：新开发人员的挑战" class="phphistorical_Version2_mids_title">React的学习曲线：新开发人员的挑战</a><span class="Articlelist_txts_time">May 02, 2025 am 12:24 AM</span><p class="Articlelist_txts_p">reactischallengingforbeginnersduetoitssteplearningcurveandparadigmshifttocoment oparchitecent.1）startwithofficialdocumentationforasolidFoundation.2）了解jsxandhowtoembedjavascriptwithinit.3）</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/zh/faq/1796803949.html" title="为React中的动态列表生成稳定且独特的键" 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/174611654224853.jpg?x-oss-process=image/resize,p_40" alt="为React中的动态列表生成稳定且独特的键" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/zh/faq/1796803949.html" title="为React中的动态列表生成稳定且独特的键" class="phphistorical_Version2_mids_title">为React中的动态列表生成稳定且独特的键</a><span class="Articlelist_txts_time">May 02, 2025 am 12:22 AM</span><p class="Articlelist_txts_p">ThecorechallengeingeneratingstableanduniquekeysfordynamiclistsinReactisensuringconsistentidentifiersacrossre-rendersforefficientDOMupdates.1)Usenaturalkeyswhenpossible,astheyarereliableifuniqueandstable.2)Generatesynthetickeysbasedonmultipleattribute</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/zh/faq/1796803939.html" title="JavaScript疲劳：与React及其工具保持最新" 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/174611635250030.jpg?x-oss-process=image/resize,p_40" alt="JavaScript疲劳：与React及其工具保持最新" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/zh/faq/1796803939.html" title="JavaScript疲劳：与React及其工具保持最新" class="phphistorical_Version2_mids_title">JavaScript疲劳：与React及其工具保持最新</a><span class="Articlelist_txts_time">May 02, 2025 am 12:19 AM</span><p class="Articlelist_txts_p">javascriptfatigueinrectismanagbaiblewithstrategiesLike just just in-timelearninganning and CuratedInformationsources.1）学习whatyouneedwhenyouneedit</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/zh/faq/1796803921.html" title="使用USESTATE（）挂钩的测试组件" 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/174611598214339.jpg?x-oss-process=image/resize,p_40" alt="使用USESTATE（）挂钩的测试组件" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/zh/faq/1796803921.html" title="使用USESTATE（）挂钩的测试组件" class="phphistorical_Version2_mids_title">使用USESTATE（）挂钩的测试组件</a><span class="Articlelist_txts_time">May 02, 2025 am 12:13 AM</span><p class="Articlelist_txts_p">totlecteactComponents通过theusestatehook，使用jestandReaCtteTingLibraryToSigulation Interactions andverifyStatAtaTeChangesInTheUI.1）renderthecomponentAndComponentAndComponentAndCheckInitialState.2）模拟useclicklicksorformsormissionsions.3）</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/zh/faq/1796803711.html" title="React中的钥匙：深入研究性能优化技术" 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/174603035281308.jpg?x-oss-process=image/resize,p_40" alt="React中的钥匙：深入研究性能优化技术" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/zh/faq/1796803711.html" title="React中的钥匙：深入研究性能优化技术" class="phphistorical_Version2_mids_title">React中的钥匙：深入研究性能优化技术</a><span class="Articlelist_txts_time">May 01, 2025 am 12:25 AM</span><p class="Articlelist_txts_p">KeysinreactarecrucialforopTimizingPerformanceByingIneFefitedListupDates.1）useKeyStoIndentifyAndTrackListelements.2）避免使用ArrayIndicesasKeystopreventperformansissues.3）ChooSestableIdentifierslikeIdentifierSlikeItem.idtomaintainAinainCommaintOnconMaintOmentStateAteanDimpperperFermerfermperfermerformperfermerformfermerformfermerformfermerment.ChosestopReventPerformissues.3）</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/zh/faq/1796803710.html" title="反应中的键是什么？" 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/174603032244994.jpg?x-oss-process=image/resize,p_40" alt="反应中的键是什么？" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/zh/faq/1796803710.html" title="反应中的键是什么？" class="phphistorical_Version2_mids_title">反应中的键是什么？</a><span class="Articlelist_txts_time">May 01, 2025 am 12:25 AM</span><p class="Articlelist_txts_p">ReactKeySareUniqueIdentifiers usedwhenrenderingListstoimprovereConciliation效率。1）heelPreactrackChangesInListItems，2）使用StableanDuniqueIdentifiersLikeItifiersLikeItemidSisRecumended，3）避免使用ArrayIndicesaskeyindicesaskeystopreventopReventOpReventSissUseSuseSuseWithReRefers和4）</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/zh/faq/1796803694.html" title="反应中独特键的重要性：避免常见的陷阱" 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/174602999255180.jpg?x-oss-process=image/resize,p_40" alt="反应中独特键的重要性：避免常见的陷阱" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/zh/faq/1796803694.html" title="反应中独特键的重要性：避免常见的陷阱" class="phphistorical_Version2_mids_title">反应中独特键的重要性：避免常见的陷阱</a><span class="Articlelist_txts_time">May 01, 2025 am 12:19 AM</span><p class="Articlelist_txts_p">独特的keysarecrucialinreactforoptimizingRendering和MaintainingComponentStateTegrity.1）useanaturalAlaluniqueIdentifierFromyourDataiFabable.2）ifnonaturalalientedifierexistsistsists，generateauniqueKeyniqueKeyKeyLiquekeyperaliqeyAliqueLiqueAlighatiSaliqueLiberaryLlikikeuuId.3）deversearrayIndiceSaskeyseSecialIndiceSeasseAsialIndiceAseAsialIndiceAsiall</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>1 个月前</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/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/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/1579" title="SecLists" 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/008/169442209227215.jpg" src="/static/imghw/default1.png" alt="SecLists" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/zh/toolset/development-tools/1579" title="SecLists" class="phpmain_tab2_mids_title"><h3>SecLists</h3></a><p>SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合，这些列表在安全评估过程中经常使用，都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表，帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上，他就可以访问到所需的每种类型的列表。</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/toolset/development-tools/93" title="SublimeText3汉化版" 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/58ab97a3baad9677.jpg" src="/static/imghw/default1.png" alt="SublimeText3汉化版" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/zh/toolset/development-tools/93" title="SublimeText3汉化版" class="phpmain_tab2_mids_title"><h3>SublimeText3汉化版</h3></a><p>中文版，非常好用</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/toolset/development-tools/505" title="Dreamweaver 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/58d36dab93a95387.png" src="/static/imghw/default1.png" alt="Dreamweaver Mac版" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/zh/toolset/development-tools/505" title="Dreamweaver Mac版" class="phpmain_tab2_mids_title"><h3>Dreamweaver Mac版</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/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>7889</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>1650</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>1411</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>1302</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>1248</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>
