V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
jin5354
V2EX  ›  问与答

<a>标签是否可以取消,扩展 href 属性至其他标签?

  •  1
     
  •   jin5354 · 2015-12-17 10:45:58 +08:00 · 2630 次点击
    这是一个创建于 3264 天前的主题,其中的信息可能已经有所发展或是发生改变。
    今天写页面写着写着,脑海中突然冒出这个问题。

    我们习惯于用 a 处理所有需要链接引用的地方。经常有下面这种情况:(情况很多,仅举出常见的 3 种)

    1. 能点击的图片, img 外面裹个 a

    <a><img ...></a>

    2. 多项菜单

    <ul>
    <li><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li><a href="">5</a></li>
    </ul>

    3. 几个元素成组,需要链接

    <section>
    <a class="notify">
    <img class="version-logo">
    <span>text</span>
    </a>
    </section>

    写布局的时候越来越觉得<a>标签破坏了布局的纯洁性。
    我认为 A 标签的语义化应该仅是添加超链接,然而实际中为了布局,总是要给 A 应用大量样式。

    所以能不能这样:取消 A 标签,扩展 href 属性至其他标签,加 href 属性后自动变为可点击元素:
    <img href="">...
    <li href=""></li>
    <section href=""></section>

    现在要实现这种做法只能靠 JS 绑定事件,不过我这只是个提议。
    大家觉得这样子优缺点怎么样,会不会更先进一点呢?
    17 条回复    2015-12-17 14:34:12 +08:00
    jin5354
        1
    jin5354  
    OP
       2015-12-17 10:46:36 +08:00
    确实有一些标签默认有 href 属性,可能有冲突,不过思路不变哈,改个别的关键字
    sox
        2
    sox  
       2015-12-17 10:47:45 +08:00
    <a class="notify">
    <img class="version-logo">
    <span>text</span>
    </a>

    Non-Standard
    learnshare
        3
    learnshare  
       2015-12-17 10:48:46 +08:00
    尽量不通过 JS 实现打开 URL 的动作,否则当 JS 无法运行的时候,页面就死掉了
    jin5354
        4
    jin5354  
    OP
       2015-12-17 10:50:36 +08:00
    @learnshare 不讨论现在是否能实现,只是说这种思路是否比 A 标签要先进。
    jin5354
        5
    jin5354  
    OP
       2015-12-17 10:51:56 +08:00
    @sox 这种情况下应该如何处理才符合标准?

    我看了淘宝天猫等主页面, a 标签里面也是一堆乱七八糟的,求更好解决方法
    Zzzzzzzzz
        6
    Zzzzzzzzz  
       2015-12-17 11:04:05 +08:00
    我没记错 xhtml 2.0 允许各种 tags 都拥有 href, 然而众所周知 xhtml 死掉了嘛.......@laogui

    要实现类似需要而又不考虑搜索引擎的话用事件委托嘛.
    TakanashiAzusa
        7
    TakanashiAzusa  
       2015-12-17 11:04:12 +08:00
    理论上 a 标签内不应该插入别的,不过在一整个 block 都要能点击的情况下,给 a 加些其他块级元素也未尝不可。 W3C 的示例里就是这么做的


    http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element
    YuJianrong
        8
    YuJianrong  
       2015-12-17 11:04:54 +08:00
    单纯用 JS 有些事情做不到。
    比如要能 focus 需要加 tabindex=0 ,还要增加:focus 的样式。
    TakanashiAzusa
        9
    TakanashiAzusa  
       2015-12-17 11:08:34 +08:00
    再说用 js 来的话还不如 a 标签扩展下,毕竟还是有些人用 noscript 的。。感觉这种时候没必要太纠结标准本身
    jin5354
        10
    jin5354  
    OP
       2015-12-17 11:12:10 +08:00
    现在情况下 只能用 js 去绑事件,感觉有点笨,可行性不高,如楼上各位所说,我自己也不会去用

    如果浏览器原生能支持就好了,最好收入 HTML6 (妄想)
    这样 HTML 代码能干净很多
    jin5354
        11
    jin5354  
    OP
       2015-12-17 11:15:04 +08:00
    @TakanashiAzusa 我从来没想过用 js 去实现,只是提一下

    我的愿望是这个能被浏览器原生支持,只是不知道取消 a 会不会有副作用,来 v2 问一下(意淫一下哈哈)
    Sivan
        12
    Sivan  
       2015-12-17 11:15:05 +08:00
    <a> 里套 block 元素是 HTML5 才允许的,早期浏览器会解析成多个元素断开。

    其实楼主把标签的作用淡化掉,用纯 class 的思路考虑布局会简单很多。因为页面布局的样式放在 a 里本来就不对, a 里的 class 只应该承受作为链接或按钮的样式,所以你把它类比成 button 或者 span 一样的东西就行了。

    如果按你所说,那么最简单的文字链是没法省标签的,只能换成 span 套一个 href 。开发者如果用不好造成带 href 属性的标签大量嵌套,也会引起歧义和更多问题,谁知道点击事件冒起泡来到底应该跳去哪?
    jin5354
        13
    jin5354  
    OP
       2015-12-17 11:19:55 +08:00
    @Sivan
    对的,最基础的文字链接会被替换为加 href 的 span 。
    不过应该不会出现最后一段的问题,正如同我们现在写时不会出现<a>里套<a>,交互稿正常的话也不会出现 href 标签套 href 标签的。
    learnshare
        14
    learnshare  
       2015-12-17 12:56:23 +08:00
    a 里面可以放大部分内容,这个是大家都在用的。

    如果跳出标准来看,其实应该搞一套非现有 Web 技术 /标准的东西,现有的不是很复杂了么。
    bk201
        15
    bk201  
       2015-12-17 13:32:37 +08:00
    你给每个标签加 href 属性,你考虑过不支持的浏览器的感受吗,难道还要额外判断加上 a 标签,更改整个结构。如果你加个标签,老浏览器不支持倒是好处理。
    然后就是 href 还真很少用到。
    loading
        16
    loading  
       2015-12-17 13:37:55 +08:00 via Android
    可用 data-href
    xujif
        17
    xujif  
       2015-12-17 14:34:12 +08:00
    你们难道都不考虑 seo 的吗
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   925 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 22:31 · PVG 06:31 · LAX 14:31 · JFK 17:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.