写HTML代码时，缩进选用一个Tab键还是4个空格？

html-css016

写HTML代码时，缩进选用一个Tab键还是4个空格？,第1张

业内有过缩进选用Tab还是空格的争论。在缩进方面，Tab键和空格这两种方法的特点并不相同。

1、        Tab键与空格缩进的特点

Tab键：在书写代码时会很方便，但是在不同编辑器当中，距离大小有可能不同。在编辑器当中，一个Tab键的长度大小存在一个默认值，这个默认值可以是两个空格长度，也可以是4个，还可以是8个。由于团队开发当中，每个人的编辑器默认情况下可能不一致，从而有可能造成A的代码放到B的编辑器中时，缩进的长度发生变化。

4个空格：在每个编辑器中，空格大小一致，其不足之处在于：代码书写时会比较麻烦，需要按多次空格键。

2、        如何选择缩进方式

其实并不需要纠结这个问题，各个编辑器都提供了“空格”和Tab键的相互转换。因此，完全可以使用Tab键进行书写，在书写完毕之后，将Tab键转换为空格，之后生成最终文件即可。当然，有些公司并不要求使用空格，那开发工程师就更方便了。

最终文件采用哪种方式，需要根据公司要求而定。如果公司没有硬性要求，那么自己的代码一定要保持一致性，不要出现“10个文件中，3个使用的是空格进行缩进，7个使用的是Tab键进行缩进”这种现象。

如图所示，在Sublime编辑器中，可以进行选项卡宽度的设定，也可以实现空格与Tab键的互相转换。

资料来源：《HTML5布局之路》

方法/步骤

准备一张图片，新建一个空白html文件

其中html文件内容如下图所示，html中包含了一张图片，及对应的描述段落

给html添加head标签，在标签中定义样式。

<style>

p {border:1px solid red}

img {float:leftmargin:0 5px 5px 0}

</style>

用chrome浏览器打开上面的html文件，可以看到文字绕排效果，如下图所示

由于在引入图片时我们用到的语句是<img src="Penguins.jpg" style="width: 50%height:auto"/>，这表明图片的大小是会随着浏览器窗口的大小调整而自动调整的。所以当放大或缩小浏览器窗口时，环绕效果会跟随着变化。

如果要清除文字绕排效果，只需将float: letf样式定义删除即可。