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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 3067 天前的主题，其中的信息可能已经有所发展或是发生改变。

今天写页面写着写着，脑海中突然冒出这个问题。

我们习惯于用 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

2015-12-17 10:46:36 +08:00

确实有一些标签默认有 href 属性，可能有冲突，不过思路不变哈，改个别的关键字

sox

2015-12-17 10:47:45 +08:00

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

Non-Standard

learnshare

2015-12-17 10:48:46 +08:00

尽量不通过 JS 实现打开 URL 的动作，否则当 JS 无法运行的时候，页面就死掉了

jin5354

2015-12-17 10:50:36 +08:00

@learnshare 不讨论现在是否能实现，只是说这种思路是否比 A 标签要先进。

jin5354

2015-12-17 10:51:56 +08:00

@sox 这种情况下应该如何处理才符合标准？

我看了淘宝天猫等主页面， a 标签里面也是一堆乱七八糟的，求更好解决方法

Zzzzzzzzz

2015-12-17 11:04:05 +08:00

我没记错 xhtml 2.0 允许各种 tags 都拥有 href, 然而众所周知 xhtml 死掉了嘛.......@laogui

要实现类似需要而又不考虑搜索引擎的话用事件委托嘛.

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

2015-12-17 11:04:54 +08:00

单纯用 JS 有些事情做不到。
比如要能 focus 需要加 tabindex=0 ，还要增加:focus 的样式。

TakanashiAzusa

2015-12-17 11:08:34 +08:00

再说用 js 来的话还不如 a 标签扩展下，毕竟还是有些人用 noscript 的。。感觉这种时候没必要太纠结标准本身

jin5354

2015-12-17 11:12:10 +08:00

现在情况下只能用 js 去绑事件，感觉有点笨，可行性不高，如楼上各位所说，我自己也不会去用

如果浏览器原生能支持就好了，最好收入 HTML6 （妄想）
这样 HTML 代码能干净很多

jin5354

2015-12-17 11:15:04 +08:00

@TakanashiAzusa 我从来没想过用 js 去实现，只是提一下

我的愿望是这个能被浏览器原生支持，只是不知道取消 a 会不会有副作用，来 v2 问一下（意淫一下哈哈）

Sivan

2015-12-17 11:15:05 +08:00

<a> 里套 block 元素是 HTML5 才允许的，早期浏览器会解析成多个元素断开。

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

如果按你所说，那么最简单的文字链是没法省标签的，只能换成 span 套一个 href 。开发者如果用不好造成带 href 属性的标签大量嵌套，也会引起歧义和更多问题，谁知道点击事件冒起泡来到底应该跳去哪？

jin5354

2015-12-17 11:19:55 +08:00

@Sivan
对的，最基础的文字链接会被替换为加 href 的 span 。
不过应该不会出现最后一段的问题，正如同我们现在写时不会出现<a>里套<a>，交互稿正常的话也不会出现 href 标签套 href 标签的。

learnshare

2015-12-17 12:56:23 +08:00

a 里面可以放大部分内容，这个是大家都在用的。

如果跳出标准来看，其实应该搞一套非现有 Web 技术 /标准的东西，现有的不是很复杂了么。