精华内容
下载资源
问答
  • html定义列表标记有:1、无序列表标记“”,每个列表项始于“”标签;2、有序列表“”,每个列表项始于“”标签;3、自定义列表“”,列表项以“”开始,列表项的定义以“”开始。本教程操作环境:windows7系统、...

    html定义列表标记有:1、无序列表标记“

    • ”,每个列表项始于“
    • ”标签;2、有序列表“
      1. ”,每个列表项始于“
      2. ”标签;3、自定义列表“
        ”开始,列表项的定义以“
        ”开始。

        7afbe80802aa8b0b26ee7c9f480abcb8.png

        本教程操作环境:windows7系统、HTML5版、Dell G3电脑。

        HTML无序列表

        无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

        无序列表使用

        • 标签
          • Coffee
          • Milk

        浏览器显示如下:

        62f358b6cb5fd7894a679f3f9b423b01.png

        HTML 有序列表

        同样,有序列表也是一列项目,列表项目使用数字进行标记。 有序列表始于

    1. 标签。每个列表项始于
    2. 标签。【相关推荐:HTML视频教程】

      列表项使用数字来标记。

      1. Coffee
      2. Milk

      浏览器中显示如下:

      6ea519dc70e967fc6be8f6c28d3b82f8.png

      HTML 自定义列表

      自定义列表不仅仅是一列项目,而是项目及其注释的组合。

      自定义列表以

      开始。每个自定义列表项的定义以
      开始。
      Coffee
      -Black hot drink
      Milk
      -White cold drink

      浏览器中显示如下:

      c9f9c8a1f50859b23cf5d6a5e6ef52f5.png

      更多编程相关知识,请访问:编程视频!!

    展开全文
  • CSS 列表模型之marker标记

    千次阅读 2020-07-22 22:35:54
    CSS 列表模型之marker标记 本文主要对::master伪元素、list-...::marker一个标记伪元素,能够定义内容填充在list-item上代表列表项的标志,先附上一个例子,就能很清楚地看出它的作用。 <style> li::marker {

    CSS 列表模型之marker标记

    本文主要对::master伪元素、list-item下的list-style-imagelist-style-type样式属性进行介绍,并介绍了在实际中如何使用。list-item下还有其他不常用的样式属性这里不做介绍。感兴趣的可以自行移步CSS 标准文档

    ::marker 是什么

    ::marker是一个标记伪元素,能够定义内容填充在list-item上代表列表项的标志,先附上一个例子,就能很清楚地看出它的作用。

    <style>
    li::marker { content: "(" counter(list-item) ")"; }
    li { display: list-item; }
    </style>
    
    <ul>
      <li>zhaodao88.com 找商机</li>
      <li>zhaodao88.com 找人脉</li>
      <li>zhaodao88.com 找采购</li>
    </ul>
    

    效果图:
    marker效果图 marker
    在这里,marker为元素定义的是每一项列表项前面的标记符,在伪元素内的content的内容就是要在列表项前面所填充的内容。

    使用::marker填充标记内容

    需要注意的是,普通元素要想使用marker,必须将元素定义成display: list-itemlist-items在创建的时候会自动生成markercounter

    标记的样式可以使用list-style-typelist-style-image属性或者直接使用::marker伪元素进行样式编写。下面展示一个例子。

    • ::marker伪元素对标记进行控制,伪元素内content的内容就是标记符的内容
    <style>
      p { margin-left: 12 em; }
      p.note {
        display: list-item;
        counter-increment: note-counter;
      }
      p.note::marker {
        content: "Note " counter(note-counter) ":";
        color: blue;
        font-weight: bold;
      }
    </style>
    <p>zhaodao88.com 找商机</p>
    <p class="note">zhaodao88.com 找采购</p>
    <p>zhaodao88.com 找人脉</p>
    

    效果如图:
    marker效果图 marker
    当然也可以为标记设置字体样式、颜色等属性,类似上面效果li::marker { color: blue; font-weight:bold; }

    值得注意的是:目前只有以下属性能够作用于marker伪元素上

    • 所有的字体样式:font相关
    • white-space属性
    • color属性
    • text-combine-upright, unicode-bidi, direction属性
    • content属性
    • 所有的animationtransition属性

    issue提出,在标记使用white-space: pre可能不会有很好的效果,可以尝试text-space-collapse: preserve-spacestext-space-trim: discard-after一起使用,更能达到想要的效果,感兴趣的请移步 issue 4448issue 4891

    使用list-style-image图像填充标记内容

    指定标记图像,当列表项内容正常时,用指定图像填充列表项的标记。

    list-style-image 正常取值 <image> | none,未定义情况下是 none,作用在列表项list-items下。其中<image>用于指定标记图像的url参考链接移步

    下面是使用例子,将会为<li>标签的标记块填充上指定链接的ellipse.png图像

    li { list-style-image: url("http://www.example.com/ellipse.png") }
    

    使用list-style-type文本类型填充标记内容

    指定标记字符串,当列表项内容正常时,用指定字符串填充列表项的标记。

    list-style-type 正常取值 <counter-style> | <string> | none,未定义情况下是 disc(圆形标记符),作用在列表项list-items下。参考链接移步

    <counter-style>是CSS 定义的计数器样式,允许开发者自定义counter的样式。比如:

    @counter-style thumbs {
     system: cyclic;
     symbols: "\1F44D";
     suffix: " ";
    }
    
    ul {
      list-style-type: thumbs;
    }
    

    具体<counter-style>定义规则参考

    下面是关于list-style-type的使用例子(如果作用元素不是列表元素,则元素的display必须设置为list-item)

    ul { list-style-type: "★"; } // 使用"★"作为标记符
    
    p.note { // 如果作用元素不是列表元素,则元素的display必须设置为list-item
      display: list-item;
      list-style-type: "Note: ";
      list-style-position: inside;
    }
    
    ol { list-style-type: upper-roman; } // 定义为罗马数字的大写形式
    
    ul { list-style-type: symbols(cyclic '○' '●'); } // 标记符在'○'和'●'之间切换
    
    ul { list-style-type: none; } // 不显示标记
    

    注意

    ::marker伪元素标记不是所有浏览器都支持,包括chrome也只是在80以上版本通过启用experimental Web Platform才支持,如果你想要测试效果,请前往chrome://flags启用experimental Web Platform。并不推荐在实际项目去使用这条规则,更推荐使用常规的做法去设置标记块样式。

    总结

    列表在前端项目中很常见,应用场景也十分广泛。个人觉得,::marker伪元素是对list-style-imagelist-style-text的补充,三者都是定义标记块的填充内容,image注重图像,text注重字符串,::marker则可以定fontcolor等样式,各具特色。

    参考

    https://www.w3.org/TR/2020/WD-css-lists-3-20200709
    https://developer.mozilla.org/en-US/docs/Web/CSS/::marker

    展开全文
  • 什么是列表,列表分为几种 顾名思义,HTML列表就是显示列表使用的。 列表分为无序列表,有序列表和定义列表3种。 无序列表 无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。 无序列表...
  • ::marker一个标记伪元素,能够定义内容填充在list-item上代表列表项的标志,先附上一个例子,就能很清楚地看出它的作用。 <style> li::marker { content: "(" counter(list-item) ")"; } li { display: ...
  • HTML当中的列表(清单标记)

    千次阅读 2018-03-13 16:55:40
    在HTML中,清单标记也可以称为...顾名思义,就是你写的这些列表项是没有顺序的,也就是说没有编号的。它的基本结构为:&lt;ul type="属性值"&gt; &lt;li&gt;列表一&lt;/li&gt; ...

    在HTML中,清单标记也可以称为列表,列表分为三种:

    第一种:无序列表(无序清单),为什么会被称为无序列表呢?顾名思义,就是你写的这些列表项是没有顺序的,也就是说没有编号的。它的基本结构为:<ul type="属性值">

                                                   <li>列表一</li>

                                                    <li>列表二</li>

                                                       .......

                                        </ul>

    无序列表只有一个属性,那就是type,这个type只有三种值:disc(实心圆),circle(空心圆),square(正方形),其中默认的值是disc

    第二种:有序列表(顺序清单),有序列表是值列表项有编号的,编号可以分为好多种,这些种类都是type的属性值。

    它的基本结构为:<ol type="属性值" start="一个具体的值">

                                        <li>列表项</li>

                                           <li>列表项</li>

                                            .........

                                </ol>

    有序列表有两个属性:type属性中有:

    1arabic numbers1, 2, 3, ...
    alower alphaa, b, c, ...
    Aupper alphaA, B, C, ...
    ilower romani, ii, iii, ...
    Iupper romanI, II, III, ...

    还有另外一个属性是start,start表示从第几个开始,比如start="5",则从5开始往后算起

    最后一种列表是自定义列表(定义清单):它的基本结构是:<dl>

                                                                                                <dt>标题1</dt>

                                                                                                        <dd>列表项</dd>

                                                                                                        <dd>列表项</dd>

                                                                                                          ......

                                                                                                    

                                                                                                <dt>标题2</dt>

                                                                                                        <dd>列表项</dd>

                                                                                                        <dd>列表项</dd>

                                                                                                          ......    

                                                                                        </dl>

    展开全文
  • 在css中,“list-style:none”样式表示设置列表项标记的类型为空,即列表项前无标记。list-style属性默认列表项标记的类型为实心圆,如果属性值设置为none,则可以去掉列表项标记。 “list-style:none”样式表示设置...

    在css中,“list-style:none”样式表示设置列表项标记的类型为空,即列表项前无标记。list-style属性默认列表项标记的类型为实心圆,如果属性值设置为none,则可以去掉列表项标记。



    “list-style:none”样式表示设置列表项标记的类型为空,即列表项前无标记。

    (推荐教程:CSS视频教程)

    list-style 简写属性在一个声明中设置所有的列表属性。

    该属性是一个简写属性,涵盖了所有其他列表样式属性。由于它应用到所有 display 为 list-item 的元素,所以在普通的 HTML 和 XHTML 中只能用于 li 元素,不过实际上它可以应用到任何元素,并由 list-item 元素继承。

    可以设置的属性(按顺序): list-style-type, list-style-position, list-style-image。

    其中list-style-type属性:可以设置列表项标记的类型。

    其属性值:

    none 无标记。

    disc 默认。标记是实心圆。

    circle 标记是空心圆。

    square 标记是实心方块。

    decimal 标记是数字。

    decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)

    lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)

    upper-roman 大写罗马数字(I, II, III, IV, V, 等。)

    lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)

    upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)

    lower-greek 小写希腊字母(alpha, beta, gamma, 等。)

    lower-latin 小写拉丁字母(a, b, c, d, e, 等。)

    upper-latin 大写拉丁字母(A, B, C, D, E, 等。)

    hebrew 传统的希伯来编号方式

    armenian 传统的亚美尼亚编号方式

    georgian 传统的乔治亚编号方式(an, ban, gan, 等。)

    cjk-ideographic 简单的表意数字

    hiragana 标记是:a, i, u, e, o, ka, ki, 等。(日文平假名字符)

    katakana 标记是:A, I, U, E, O, KA, KI, 等。(日文片假名字符)

    hiragana-iroha 标记是:i, ro, ha, ni, ho, he, to, 等。(日文平假名序号)

    katakana-iroha 标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名序号)

    示例:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19









     


     




    •  
    • 咖啡




       



    •  
    • 可口可乐




       





     



    效果图:

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 15
收藏数 284
精华内容 113
关键字:

列表项标记是什么