HTML5在a标签内放置块级元素示例代码
发布时间：2013-08-23 18:32:40 作者：佚名 
我要评论
我要评论你没看错:用一个A标签包裹块级元素，在HTML5以前，a标签属于行内元素，而div,h1,p 等为块级元素，如果强行包裹，可能会被强行截断为多个a标签，感兴趣的朋友可以了解些
对比起XHTML来说，HTML5通过更简单的元素引起了一系列的思考，坦诚地讲,这真的是急需的简化。这些简化之一就是能够通过<a>标签包装像div,h标签(h1...h6),和段落标记P 这些块级元素。你没看错:用一个A标签包裹块级元素(译者注: 在HTML5以前，a标签属于行内元素，而div,h1,p 等为块级元素，如果强行包裹，可能会被强行截断为多个a标签。当然，都是浏览器的事啦。).
示例代码：
<body>
<a href="/about-page.php">
<div class="article">
<h1>关于 David Walsh</h1>
<p>
原文作者是27岁的 Web Developer, 并且是jQuery & MooTools方面的专家级顾问,地址为 Madison, Wisconsin. 同时也是Wynq Web 实验室的创始人兼主程 . 格言：“我并不设计网站,只是让他们跑起来.”
</p>
</div>
</a>
</body>
就是这样，一个A标签包裹着div,p,h1这样的元素，需要注意的是，你不能在一个A标签内包含另一个A标签，否则发生什么事，可能是各个浏览器不一致的。
你如何看待？
对于用A标签包含着块级元素我很矛盾,快速查看时感觉就像一堆垃圾代码。另一方面，为了回避这种方式，我们一直使用JavaScript来处理。可点击元素的目的就是为了完成任务和功能，而使用原生HTML来完成这种功能比起JS来说更自然，有时候肯定会很方便。我想问的是：对于这个实践你如何看待？你能立即使用吗？请分享您的观点！
(译者注：在译者的项目里，一个组员就使用了这个功能。在MyEclipse里面看着很难过，因为是一堆的黄色警告。但是客观来说，有时候有些代码确实很有效，比如什么<red>之类的)
示例代码：
复制代码
代码如下:<body>
<a href="/about-page.php">
<div class="article">
<h1>关于 David Walsh</h1>
<p>
原文作者是27岁的 Web Developer, 并且是jQuery & MooTools方面的专家级顾问,地址为 Madison, Wisconsin. 同时也是Wynq Web 实验室的创始人兼主程 . 格言：“我并不设计网站,只是让他们跑起来.”
</p>
</div>
</a>
</body>
就是这样，一个A标签包裹着div,p,h1这样的元素，需要注意的是，你不能在一个A标签内包含另一个A标签，否则发生什么事，可能是各个浏览器不一致的。
你如何看待？
对于用A标签包含着块级元素我很矛盾,快速查看时感觉就像一堆垃圾代码。另一方面，为了回避这种方式，我们一直使用JavaScript来处理。可点击元素的目的就是为了完成任务和功能，而使用原生HTML来完成这种功能比起JS来说更自然，有时候肯定会很方便。我想问的是：对于这个实践你如何看待？你能立即使用吗？请分享您的观点！
(译者注：在译者的项目里，一个组员就使用了这个功能。在MyEclipse里面看着很难过，因为是一堆的黄色警告。但是客观来说，有时候有些代码确实很有效，比如什么<red>之类的)
相关文章
- html中 img标签显示图片中心的方法目前知道三种，下面小编把他分享到脚本之家平台，需要的朋友参考下2017-04-13
- 这篇文章给大家整理了html5新增的九个标签，非常不错，需要的朋友参考下2017-04-13
本文档主要讲述的是Html Mate 标签使用详解；meta是html语言head区的一个辅助性标签。meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参2017-03-19- 本文给大家介绍了html5中各种头部meta标签功能小结，非常不错，具有参考借鉴价值，需要的的朋友参考下2017-03-13
- HTML5规范毕竟是刚刚才定义完成的规范，还有一些浏览器并不能支持其中的新标签和新属性，尤其是IE8及以下版本浏览器。下面给大家介绍处理HTML5新标签的浏览器兼容版问题，2017-03-13
本文档主要讲述的是HTML中的base标签；希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看2017-02-17- 行内块(inline-block)是非常有用的特别是想要不用'block'和'float'来控制这些行内元素的margin,padding之时，行内元素之间的空白有时候显示在屏幕上那是相当的讨厌2013-08-28
- html标签分为两种，内联元素和块级元素，块级元素：一般是其它元素的容器；内联元素：只能容纳文本或者其他内联元素；首先我们先了解一下内联元素和块级元素的概念2013-11-18
- 块级元素(block)特性:总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;内联元素(inline)特性:和相邻的内联元素在同一行，接下来为大家详细介绍下，感2013-03-25
- HTML5还增加了一些纯语义性的块级元素： aside figure dialog 我在文章和书中一直使用前两个元素。第三个元素我不经常用，它主要用于书面文本。 aside2008-10-17
最新评论