在html頁面中，加入盒子模型使用div元素標簽就行了，div就是一個很好的盒子容器。

1、新建一個txt文檔，將文檔修改為“demo.html”的html文件，如下圖所示。

2、用Sublime編輯器將html文件打開，完善html5標準化代碼，如下圖所示。

3、在body標簽內，編寫一套ul li無序列表標簽，代碼如下圖所示。

4、用瀏覽器打開html頁面，可以看到li標簽默認情況是豎排顯示（li為塊級元素），如下圖所示。

5、我們可以通過為ul標簽下所有li標簽設定樣式“display: inline-block”的方式，讓多個li標簽橫排顯示。

6、刷新界面后，可以發現li標簽變成橫排顯示。

HTML常用標簽有列表形快速布局、標題型、獨立內容、段落標簽

1.列表形快速布局

當我們想要列表型布局網站的時候，這時候我們就要使用ul和li標簽，一些文章的列表和欄目的列表，都是可以使用ul和li標簽布局，當然我們也要配合css去實現效果，可以實現循環的效果。

2.標題型

我們在做網站的時候，總會遇到文章的標題，不同的程序員會使用不同的標簽去實現，有人習慣用h1，有人習慣用h2，h1和h2兩種標簽效果也是不一樣的。

3.獨立內容

在內容中，如果我們想把幾個文字單獨設置顏色，這時候我們就可以需要span標簽，對字體單獨設置樣式。

4.段落標簽

段落的標簽我們可以使用p標簽，在段落的開始加一個<p>,就可以實現段落的分明。