V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Dive into HTML5
http://diveintohtml5.org/
SilentDepth
V2EX  ›  HTML

为什么翻页组件大多用<ul>实现?<ul>的优势是什么?

  •  
  •   SilentDepth · 2016-01-01 11:55:35 +08:00 · 4593 次点击
    这是一个创建于 3283 天前的主题,其中的信息可能已经有所发展或是发生改变。

    看到很多页码翻页组件都是用<ul>实现的,不明白这有什么特殊的用意。用<div>或者<span>不好吗?比如这样:

    <!-- 仅作示意 -->
    <div class="pager">
      <span class="prev">Prev</span>
      <span class="curr">1</span>
      <span>2</span>
      <span class="next">Next</span>
    </div>
    
    第 1 条附言  ·  2016-01-01 20:47:31 +08:00

    可能有些人误会了。我想过语义化,但并不觉得在翻页这个功能上语义化有多大意义。如果使用<ul>就是为了语义化的话,那我就没什么问题了。

    20 条回复    2016-01-02 09:35:46 +08:00
    XianZaiZhuCe
        1
    XianZaiZhuCe  
       2016-01-01 11:57:05 +08:00 via Android
    表示这是列表
    Jaylee
        2
    Jaylee  
       2016-01-01 11:58:37 +08:00
    语义化
    FrankFang128
        3
    FrankFang128  
       2016-01-01 12:00:14 +08:00 via Android
    ol 才对。
    SilentDepth
        4
    SilentDepth  
    OP
       2016-01-01 12:03:46 +08:00
    @Jaylee 如果是带有更复杂交互的翻页组件,比如接受用户输入页码什么的,写成列表也体现不出语义化啊

    ``` html
    <li class="prev">Prev</li>
    <li class="curr"><input type="text"></li>
    <li class="next">Next</li>
    ```

    诸如此类的
    jin5354
        5
    jin5354  
       2016-01-01 12:03:52 +08:00
    语义化。虽然没啥卵用
    luoway
        6
    luoway  
       2016-01-01 13:22:41 +08:00
    这样的话, HTML 的 body 子元素只需要两种: div 和 span ,还学那么多标签做啥?
    语义化不是没卵用,是没有 css 也能清晰地组织 HTML 文档
    babyhome
        7
    babyhome  
       2016-01-01 13:53:36 +08:00
    很多问题都有多种解,选择自己认为正确的即可。
    subpo
        9
    subpo  
       2016-01-01 15:16:34 +08:00
    @luoway 还需要 span 干嘛, div 就够了
    herozzm
        10
    herozzm  
       2016-01-01 16:08:43 +08:00 via Android
    不用, div 中用 span 和 a 足够
    imn1
        11
    imn1  
       2016-01-01 17:34:47 +08:00
    li 是可省略后标签元素
    DaPanda
        12
    DaPanda  
       2016-01-01 17:36:47 +08:00
    语义化
    相对来说 ol 应该是最符合的
    BOYPT
        13
    BOYPT  
       2016-01-01 17:40:48 +08:00
    按楼主的说法,那基本所有 html 节点都是多余的,只要一种就够了是吧。
    Sivan
        14
    Sivan  
       2016-01-01 18:05:58 +08:00 via iPhone
    @DaPanda
    @FrankFang128
    常见的完整翻页导航用语义化 ol 也是不太合适的,因为翻页导航除了页码 123 还有 Prev 和 Next 和…,这些根本不跟 12345 构成序列关系。
    chemzqm
        15
    chemzqm  
       2016-01-01 20:03:45 +08:00
    ul 表示列表啊,而且只需要敲两个字符,而且用 emmet 之类的 ul>li*3 这样的方式方便啊,
    说到底您爱怎么写怎么写
    FrankFang128
        16
    FrankFang128  
       2016-01-01 23:31:47 +08:00
    <nav><button>prev</button><ol><li>... </ol> <button> next </button></nav>
    pynix
        17
    pynix  
       2016-01-01 23:53:02 +08:00
    爱怎么写怎么写
    yangweijie
        18
    yangweijie  
       2016-01-02 00:08:37 +08:00
    @DaPanda ol 是有序的,但是分页很多 还自带标签也就是上一页 、下一页、最末页,这又是无序的了。所以用 li
    Phariel
        19
    Phariel  
       2016-01-02 01:41:38 +08:00 via iPhone
    照你这么说 HTML 只需要 div 和 input 讲真
    learnshare
        20
    learnshare  
       2016-01-02 09:35:46 +08:00
    简单来说,当你移除 CSS 的时候,还能够看出来这是什么功能
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   933 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 21:16 · PVG 05:16 · LAX 13:16 · JFK 16:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.