当前位置:清晨 » 站长笔记 » html等网页代码源换行美化问题

html等网页代码源换行美化问题

发布日期:2012年4月25日 11:04:25 点击量: 2,084

宝塔服务器面板,一键全能部署及管理,送你¥3188礼包,点我领取,简单好用的 Linux/Windows 面板

 

 

平时修改源代码的机会比较多,偶而会遇到代码混乱的问题,特别是ftp上传下载修改代码的时候.
后来查了许多知识,都没有好的解决方法.
记得大学时,上网页设计时用过dw,有个格式化代码的功能,就是处理这个问题,今天就处理了下,真的可行

如图所示

html等网页代码源换行美化问题

打开代码后,点击下这个工具按钮即可.

当然,也有其他很好的工具可以使用,个人选择.

效果:

<div class="header">  <div class="top">    <div class="title">      <h1><a href="/" title="韦莱国际英语培训学校"></a></h1>    </div>    <!-- /title -->    <div class="nav">      <div id="home">        <ul>        <li><a href="/html/weilaizixun/">资讯</a></li>		<li><a href="{dede:global.cfg_cmsurl/html/kechengshezhi/}/">课程</a></li>        </ul>      </div>      <div class="u3">        <ul>          <li class="n1"><a href="/html/shaoeryingyu/">少儿</a></li>          <li><a href="/html/dong_hua_pian/">动画</a></li>          <li><a href="/html/gushiyouxi/">故事</a></li>          <li><a href="/html/jiaocaiziliao/">教材</a></li>        </ul>        <ul>          <li class="n1"><a href="/html/zhongxueyingyu/">中学</a></li>          <li><a href="/html/zhongxueyingyu/">初中</a></li>          <li><a href="/html/zhongxueyingyu/">高中</a></li>          <li><a href="/html/gaokaoshijuan/">高考</a></li>        </ul>      </div>      <div>        <ul>          <li class="n1"><a href="/html/daxueyingyu/">大学</a></li>          <li><a href="/html/si_liu_ji/">四级</a></li>          <li><a href="/html/si_liu_ji/">六级</a></li>          <li><a href="/html/kaoyanyingyu/">考研</a></li>        </ul>        <ul>          <li class="n1"><a href="/html/shiyongyingyu/">实用</a></li>          <li><a href="/html/shangwuyingyu/">商务</a></li>          <li><a href="/html/shangwuyingyu/">职场</a></li>          <li><a href="/html/chuguoliuxue/">留学</a></li>        </ul>      </div>      <div style="border-right:none;">        <ul>          <li class="n1"><a href="/html/yingyukaoshi/">考试</a></li>          <li><a href="/html/zhichenyingyu/">职称</a></li>          <li><a href="/html/yasituofu/">雅思</a></li>          <li><a href="/html/kaoshizixun/">时间</a></li>        </ul>        <ul>          <li class="n1"><a href="/html/yingyuxuexi/">学习</a></li>          <li><a href="/html/yingyukouyu/">口语</a></li>          <li><a href="/html/yingyutingli/">听力</a></li>          <li><a href="/html/weilaiyingyu/">韦莱</a></li>        </ul>      </div>    </div>  </div>  <!-- /nav -->  <!-- /banner --></div><!-- /top --></div></div><!-- /search --></div><!-- /header --><!-- /header -->


dw格式化后:
 

<div class="header">
  <div class="top">
    <div class="title">
      <h1><a href="/" title="韦莱国际英语培训学校"></a></h1>
    </div>
    <!-- /title -->
    <div class="nav">
      <div id="home">
        <ul>
          <li><a href="/html/weilaizixun/">资讯</a></li>
          <li><a href="{dede:global.cfg_cmsurl/html/kechengshezhi/}/">课程</a></li>
        </ul>
      </div>
      <div class="u3">
        <ul>
          <li class="n1"><a href="/html/shaoeryingyu/">少儿</a></li>
          <li><a href="/html/dong_hua_pian/">动画</a></li>
          <li><a href="/html/gushiyouxi/">故事</a></li>
          <li><a href="/html/jiaocaiziliao/">教材</a></li>
        </ul>
        <ul>
          <li class="n1"><a href="/html/zhongxueyingyu/">中学</a></li>
          <li><a href="/html/zhongxueyingyu/">初中</a></li>
          <li><a href="/html/zhongxueyingyu/">高中</a></li>
          <li><a href="/html/gaokaoshijuan/">高考</a></li>
        </ul>
      </div>
      <div>
        <ul>
          <li class="n1"><a href="/html/daxueyingyu/">大学</a></li>
          <li><a href="/html/si_liu_ji/">四级</a></li>
          <li><a href="/html/si_liu_ji/">六级</a></li>
          <li><a href="/html/kaoyanyingyu/">考研</a></li>
        </ul>
        <ul>
          <li class="n1"><a href="/html/shiyongyingyu/">实用</a></li>
          <li><a href="/html/shangwuyingyu/">商务</a></li>
          <li><a href="/html/shangwuyingyu/">职场</a></li>
          <li><a href="/html/chuguoliuxue/">留学</a></li>
        </ul>
      </div>
      <div style="border-right:none;">
        <ul>
          <li class="n1"><a href="/html/yingyukaoshi/">考试</a></li>
          <li><a href="/html/zhichenyingyu/">职称</a></li>
          <li><a href="/html/yasituofu/">雅思</a></li>
          <li><a href="/html/kaoshizixun/">时间</a></li>
        </ul>
        <ul>
          <li class="n1"><a href="/html/yingyuxuexi/">学习</a></li>
          <li><a href="/html/yingyukouyu/">口语</a></li>
          <li><a href="/html/yingyutingli/">听力</a></li>
          <li><a href="/html/weilaiyingyu/">韦莱</a></li>
        </ul>
      </div>
    </div>
  </div>
  <!-- /nav -->
  <!-- /banner -->
</div>
<!-- /top -->
</div>
</div>
<!-- /search -->
</div>
<!-- /header -->
<!-- /header -->

 


关键词:

本文网址:https://www.menglei.info/81/,转载请以链接形式注明出处,谢谢合作!

老薛主机专属优惠码: PT ,有需要购买的同学可以使用.可享受30%的优惠.

联系站长: shadoweb@qq.com QQ: 925474725

发表评论

电子邮件地址不会被公开。 必填项已用*标注