在我们可以使用::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"。选项一，把这行复制一下，可以看多选框也输入完了。点击多选框，可以看到它是可以同时选择多个项目的，这就是多选框。