HTML ul li清單樣式是網頁很重要的元素，將多個項目資料條列式的呈現。本文介紹如何設定參數或者利用CSS方式的7個技巧，為這些自訂項目設定不同外觀。
一、ul清單標籤效果
首先，這裡的範例使用了一個簡單的無序清單，從截圖可以看到HTML ul標籤的預設效果，包含自動換行縮排並且加上實心原點的清單符號。
二、特殊項目符號
HTML文字項目除了最常見的無序跟有序清單之外，其實還有一些其他特殊類型的清單，只不過比較少用。在此配合論語電子書的範例，補充一個類似註解或字典的清單標籤，如同這裡所看到的，它是由三組互相搭配的標籤所組成，包括「dl」代表清單，「dt」表示字詞，「dd」則是註解或是定義，參考右邊的預覽效果應該就可以瞭解相關的作用。
三、單行多行註解
隨著HTML網頁內容越來越多，很多時候會需要使用註解，它是以「!」驚嘆號和「–」兩個橫線所組成的，由「<!–」開始，並以「–>」結束。同樣方式可用於單行註解，也可以是多行註解，這些說明在瀏覽器並不會顯示，主要作為HTML網頁原始碼在開發和設計的參考說明。
四、HTML li不要點
ul li清單可以用參數設定HTML符號的形狀，但是沒有辦法直接取消顯示清單編號，必須利用CSS樣式進行設定。例如直接在head頁首部分添加一個整體的樣式標籤「style」，其中的程式碼「list-style-type: none」會將頁面中ul無序標籤的清單樣式形態設定為無，在右側的網頁預覽效果中，可以看到三個項目前面都沒有任何清單符號了。
五、CSS註解應用
上個步驟的CSS style本身也是標籤，因此也能在HTML註解中使用，可以看到加上註解之後，右側HTML網頁預覽畫面又有清單列表的符號了。
六、list-style-type
先前第四步驟是在頁首進行統一的樣式設計，亦即針對頁面上全部的無序清單設定樣式。另外還可以像這裡所看到的，是在頁面上某個特定的無序標籤加上「ul style=”list-style-type: none”」，設定其屬性值是不需要樣式。
七、日文數字編號
瞭解了如何使用樣式屬性設定個別清單元素後，最後再做個補充。這裡的範例使用四個不一樣的日文清單樣式，看一下右側的預覽效果，它就是以日文平假名跟片假名等不同的方式進行清單編號的呈現。讀者跟贊贊小屋一樣有過打電動學日文的經歷，看到這個會覺得有些親切。
HTML ul li清單樣式與CSS
這篇HTML教學文章除了HTML標籤之外，使用到了另一個在網頁設計重要的工具：CSS。從文章的簡單範例操作就會瞭解到，雖然HTML可以利用本身所提供的標籤屬性進行樣式設定，可是遠不及於CSS能實現的豐富功能。這是因為兩者的本身定位不同，HTML主要是網頁整體架構和資料內容，CSS從開始便是在處理網頁樣式和呈現方式，所以實務上幾乎都不只是單純的HTML網頁，而是HTML負責內容內容，CSS處理外觀樣式，兩者互相搭配。關於這部分如何設計操作，贊贊小屋後續還會有相關的介紹分享。
本文章講解影片：
歡迎加入Line社群，口袋裡的VBA小教室！
學習目前最熱門的程式，歡迎報名Python課程：
