SilentDepth
V2EX  ›  HTML

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

  •  
  •   SilentDepth · Jan 1, 2016 · 5955 views
    This topic created in 3958 days ago, the information mentioned may be changed or developed.

    看到很多页码翻页组件都是用<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>
    
    Supplement 1  ·  Jan 1, 2016

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

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

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

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