在我們可以使用::marker偽元素來定制列表前綴。像下面這樣：

主流瀏覽器中只有Safari不是完全支持，不過估計也馬上會跟上來了。

::marker CSS 偽元素選擇列表項的標記框，通常包含項目符號或數字。 它適用于要顯示的任何元素或偽元素集：列表項，例如 <li> 和 <summary> 元素。

讓我們看個具體的例子：

默認顯示效果如下，瀏覽器會自動畫一個小點在每個列表項前：

創建marker

::marker 偽元素標記框在每個列表項元素內自動生成，位于實際內容和 ::before 偽元素之前。

通常，列表項是 <li> HTML 元素，但其他元素也可以成為具有 display:list-item 的列表項。

給marker添加樣式

在 ::marker 出現之前，可以使用 list-style-type 和 list-style-image 設置列表樣式。這很方便，但我們需要更多。 改變顏色、大小、間距等，這就是 ::marker 出現的原因。 它允許從 CSS 中單獨和全局定位這些偽元素：

list-style-type 屬性提供了非常有限的樣式。 ::marker 偽元素意味著您可以定位標記本身并將樣式直接應用于它。

在這個示例中，第一項使用 list-style-type 設置樣式，第二項使用 ::marker 設置樣式。 第一種情況下的屬性適用于整個列表項，而不僅僅是標記，這意味著文本和標記一樣具有動畫效果。 使用 ::marker 時，我們可以只定位標記(::marker)而不是文本。

改變Marker的方法，兩種方式，效果一樣：

使用SVG：

使用數字列表：

默認情況下，有序列表項OL上的標記是數字而不是項目符號。 在 CSS 中，這些被稱為計數器，它們非常強大。 它們甚至具有設置和重置數字開始和結束位置的屬性，或者將它們切換為羅馬數字。 我們可以直接使用::marker來做，

更多使用方法，大家可以查看MDN，感謝閱讀！

們在上網的時候，經常有一些登錄界面進行輸入賬號和密碼，以及我們在網上填一些信息，這些功能的實現都是通過表單來完成的，今天我們就來講講表單。

表單不是指一個標簽，而是指一類標簽。

我們表單里所有的內容都要寫在<form></form>標簽中 form的action屬性是將表單所填的內容發送到想要發送的后臺，而method屬性有兩個值，分別是get和post。get和post的主要區別是get表單所傳的內容會在地址欄里顯示出來，并且有長度限制，而post表單所傳的內容不會在地址欄顯示出來，并且可以視為沒有長度限制。一般系統默認get。當然get和post的細區別還是有的，在這里我就不贅述了。

其中最重要的是<input>標簽，input標簽也是單標簽。input標簽的type屬性值不同，其產生的作用也不同：如：<input type="text">產生的是文本框，一般都是我們登錄時輸入的賬號那樣的文本框。<input type="password">,產生的是密碼框，一般都是我們登錄時輸入密碼的那個框框。<input type="submit">產生的是提交框，一般是我們登錄的那個按鈕。這些標簽都有value屬性，但只有提交框用最合適用，因為文本框和密碼框雖然也會展示出來，但效果卻差強人意，我們一般都用placeholder屬性替代它。

不知大家有沒有在網上做過選擇題，作者是做過的。網頁中的選擇題也是用的input。

input的type屬性值還有radio，是單選框，有幾個選項就寫幾個input，但要注意每一個input里都要寫相同的name屬性和屬性值，這樣的話瀏覽器才會知道這些是同一道題。

既然有單選題那一定也有多選題了，type的checked屬性是多選框，其和單選的用法一樣，也都要注意name一樣的為一道題，還有一個屬性是checked=“checked”，這個可以設定默認選擇的選項。

我們也一定遇到過選擇文字就能勾選而不用非得去點選框的情況，其實input選擇框只有被點擊的時候才能選中，但有的時候太小不容易點擊甚至有的根本沒有顯示出來，這樣的話用戶體驗就會非常的差，所以我們引進了一個標簽：<label></label>標簽，這個標簽可以實現點擊文字就進行選擇的功能，用法就是將input標簽和文字寫在同一個label標簽中，注意每一個選項寫一起。

我們來看一下代碼和結果：

作者已經盡量去說清楚了，歡迎大家批評指教，希望多多關注[送心]

eb前端開發課程：html表單-單選框多選框。

講課人：波波老師。

radio單選框、checkbox多選框，這兩個只需要選擇不需要輸入。現在來看一下單選框和多選框的演示。

·首先是單選框，輸入一個inputradio，可以看到默認給了兩個屬性：name和id。把name="radio"，id="radio1"。當然光一個單選框也沒有用，還需要給它加一個label，for-"radio1"，這個4abel for="">。這里要放上前面這個(單選框的id)"radio1"，代表著這是它的label。

·這里輸入一個單選選項一，可以看到點擊單選選項一，同時也可以把radio選中，這就是label的作用。多復制幾個，可以看到選擇"選項一"它被選中了，選擇選項二，選項二被選中的時候，選項一的選中狀態就被去掉了，它們三個只能選中一個，這就叫單選框。它們是以什么為同組標準的？就是以name為同組標準。

·假設現在再建一個單選框<input>，選擇name="radioradio"，id"radio4"，label for="radio4"。單選選項4，選擇1234，選4的時候對前面三個選項不產生影響，這就是單選框。

·接著再來看多選框，多選框，input：checkbox，4abel for="checkbox1"。選項一，把這行復制一下，可以看多選框也輸入完了。點擊多選框，可以看到它是可以同時選擇多個項目的，這就是多選框。