Atom是一款流行的文本編輯器，在開發(fā)web頁面時可以非常方便地自動補全HTML代碼。Atom自動補全的功能是通過插件和快捷鍵來實現(xiàn)的。

首先，在Atom中安裝“autocomplete-html”插件。這個插件可以自動補全HTML標簽和屬性。安裝完成后，打開一個HTML文件，輸入一個標簽名，例如：<div>，然后按下“Tab”鍵，Atom會自動補全標簽，并且將光標定位在標簽內(nèi)部。如果需要添加屬性，可以繼續(xù)輸入屬性名，Atom會建議可能的屬性名和值，以及自動完成雙引號，例如：class=""。

<div class=""></div>

此外，Atom也支持自動補全CSS代碼。安裝“autocomplete-css”插件后，輸入“.”或“#”符號時，Atom會自動列出已定義的類或ID。選擇一個類或ID后，輸入一個空格或“{”，將會自動補全相應(yīng)的CSS代碼塊。

.class {
/* CSS code here */
}
#id {
/* CSS code here */
}

如果需要自定義自動補全的代碼片段，可以使用“snippets”插件。選擇“File ->Snippets”菜單，打開“snippets.cson”文件。在里面編輯相應(yīng)的代碼片段，例如：

'.source.html':
'BootStrap 4.0':
'prefix': 'bs-40'
'body': '<link rel="stylesheet" >
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>'

這個代碼片段將會自動補全Bootstrap 4.0的CSS和JS鏈接。在HTML文件中輸入“bs-40”，然后按下“Tab”鍵，就會自動補全代碼片段。如果需要增加其他自定義的代碼片段，也可以在這個文件中編輯。

綜上，Atom自動補全HTML和CSS代碼非常方便實用，可以大大提高開發(fā)效率。只要安裝插件和快捷鍵，就可以輕松實現(xiàn)自動補全的功能。