编辑HTML文件时有什么好的方法使代码整齐缩进？结构一清二楚
来源：2-10 作业题
慕粉1940476211
2019-08-13 19:08:09
<!DOCTYPE html>
<html>
<head>
<title>css基础</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<!--顶部-->
<div class="header">
<!--顶部左边logo标志-->
<div class="logo"><a href="#"><img src="images/logo.png"></a></div>
<!--顶部右边nav导航栏-->
<div class="nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">FACULTY</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
<!--banner图-->
<div class="banner">
<img src="images/banner3.jpg">
<div class="banner-layer"></div>
<form>
<table>
<tr>
<td><input type="text" name="name" placeholder="your Name" size="80px"></td>
</tr>
<tr>
<td><input type="text" name="phone" placeholder="your Phone"></td>
</tr>
<tr>
<td><input type="text" name="email" placeholder="your Email"></td>
</tr>
<tr>
<td><textarea name="Comment" placeholder="Where Your Comment Here" rows="3" cols="40"></textarea></td>
</tr>
<tr>
<td align="center"><button>SEND MESSAGE</button></td>
</tr>
</table>
</form>
</div>
<!--ABOUT区-->
<div class="ABOUT">
<!--about区顶部标题段落-->
<div class="about-top">
<div class="title-one">ABOUT</div>
<hr/>
<pre>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</pre>
</div>
<!--about中间图文混排-->
<div class="about-middle">
<!--左侧-->
<div class="about-middle-left">
<div class="left-word">A WORD<br>ABOUT US</div>
<div class="left-layer"></div>
<div class="left-layer-top">
<p>Praesent dignissim viverra est,sed<br>
bibendum ligula congue non.Sed ac nisl<br>
et felis gravida commodo?Suspendisse<br>
eget ullamcorper ipsum.Suspendisse<br>
diam amet.</p>
<div class="explore">EXPLORE</div>
</div>
</div>
<!--中心图片-->
<div class="about-middle-mid">
<img src="images/bb3.jpg">
</div>
<!--右侧-->
<div class="about-middle-right">
<div>
<p class="shuzi">70000</p>
<hr>
<p class="word">Students</p>
</div>
<div>
<p class="shuzi">600</p>
<hr>
<p class="word">Faculty</p>
</div>
</div>
<!--about区底部图文混排-->
<div class="about-bottom">
<div class="one"><img src="images/b1.jpg"></div>
<div class="one">
<div class="word-1">Library</div>
<div class="word-2">LOREM ipsum is simply dummy text of the peinting and typesetting industry</div>
<div class="word-3">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div class="explore">EXPLOR</div>
</div>
<div class="one"><img src="images/b2.jpg"></div>
<div class="one">
<div class="word-1">Computer Lab</div>
<div class="word-2">LOREM ipsum is simply dummy text of the peinting and typesetting industry</div>
<div class="word-3">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer too a galley of type and scrambled it to make a type specimen book.</div>
<div class="explore">EXPLOR</div>
</div>
<div class="one">
<div class="word-1">Conference Hall</div>
<div class="word-2">LOREM ipsum is simply dummy text of the peinting and typesetting industry</div>
<div class="word-3">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div class="explore">EXPLOR</div>
</div>
<div class="one"><img src="images/b3.jpg"></div>
<div class="one">
<div class="word-1">Play Ground</div>
<div class="word-2">LOREM ipsum is simply dummy text of the peinting and typesetting industry</div>
<div class="word-3">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div class="explore">EXPLOR</div>
</div>
<div class="one"><img src="images/b4.jpg"></div>
<div class="arrow">ddddddddddddddddd</div>
</div>
</div>
<!--GALLERY区-->
<div class="GALLERY"></div>
<!--页脚区-->
<div class="footer"></div>
</body>
</html>
1回答
-
同学你好！
如果想要美观代码，还可以借助插件。但是不知道同学用的是什么编辑器，如果是sublime，最近它的官网出了一些限制，插件可能安装不了，安装了后插件功能也不能使用。可以换一个编辑器，比如说vscode，格式化代码的快捷键是Shift + Alt + F。它的功能很强大，可以使用很多插件，比如说美化代码Beautify ：我们有它的免费课教程，可以去详细了解一下。https://www.imooc.com/learn/1106
如果帮助到了你 欢迎采纳 祝学习愉快~
0
相似问题