原文地址：HTML5: Wrap Block-Level Elements with A’s

原文日期： 2010年06月26日

翻译日期： 2013年08月22日

对比起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>之类的)

HTML5 在<a>标签内放置块级元素的更多相关文章

  1. web兼容学习分析笔记--块级、内联、内联块级元素

    一.块级.内联.内联块级元素 (1)块级元素:block **独占一行 **可设置width,height,margin,padding **内部可包含块级或内联元素 (3)内联(行内)元素:inli ...

  2. html元素类型 块级元素、内联元素(又叫行内元素)和内联块级元素。

    html中的标签元素大体被分为三种不同的类型:块级元素.内联元素(又叫行内元素)和内联块级元素. 块级元素特点: 1.每个块级元素都从新的一行开始,并且其后的元素也另起一行.(霸道,一个块级元素独占一 ...

  3. 内联/块级元素的宽高及margin/padding的说明 |||||| 为何img、input等内联元素可以设置宽、高

    1,内联非替换元素设置宽高是无效的,设置margin时,左右有效,上下无效.设置padding时,左右有效,而上下padding比较奇葩,内联非替换元素的上下padding会在元素内容盒不动的情况下上 ...

  4. html的块级、内联、内联块级元素基础

    概念 块级:block 内联:inline 内联块级:inline-block 在html元素中,元素会有display属性 display属性默认值是block,那么该元素是块级元素. displa ...

  5. #HTML 块级、内联、内联块级元素

    [常用的块级元素] div,form,p,table,h1~h6,hr,dl,ol,ul,pre等 [常用的内联元素] a,img,input,span,br,select,strong,em,tex ...

  6. img、input到底是行内还是块级元素？

    一.img.input属于行内替换元素.height/width/padding/margin均可用.效果等于块元素.      行内非替换元素,例如, height/width/padding to ...

  7. HTML（二）HTML元素（整体结构，块级元素，内联元素，结构元素，交互元素，元素嵌套规则）

    HTML整体结构解释 <!DOCTYPE html> // 文件应以"<!DOCTYPE ......>"首行顶格开始,推荐使用"<!DOC ...

  8. Html：行级元素和块级元素标签列表

    块级元素 div p h1-h6 form ul ol dl dt dd li table tr td th hr blockquote address table menu pre HTML5: h ...

  9. Code笔记之：CSS块级元素、内联元素概念

    文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...

随机推荐

  1. Gradle入门--基本配置

    Gradle配置: Gradle构建脚本 build.gradle Gradle属性文件 gradle.properties Gradle设置文件 settings.gradle build.grad ...

  2. 在OpenCV3.1.0中使用SIFT，SURF算法

    写在前边: 1.我使用的是python2.7 + OpenCV3.1.0 2.OpenCV3.0.0+的文档有很大问题,很多文档写的还是OpenCV2.0+, OpenCV3.0+根本用不了,其中有一 ...

  3. 判断当前设备是移动端或者PC端

    <script> function browserRedirect() { var sUserAgent = navigator.userAgent.toLowerCase(); var ...

  4. Vue2.0搭建脚手架流程

    介绍 Vue.js是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 安装node.js ...

  5. JAVA Eclipse使用Maven构建web项目详解(SSM框架)

    tips: 启动项目后,welcome-file的链接即为测试用例 部署maven web项目 Eclipse使用Maven构建web项目详解 pom.xml添加webapp依赖: <depen ...

  6. Touch 方法&属性 映射工具

    Touch 方法&属性 映射工具(0.5 版本) 标签 : github 线上后门与接口调试: 原先需要测试一个接口(如Dubbo.DAO), 或为线上留后门, 需要写大量的Web层(Api. ...

  7. Android N（7.0） 被美翻的新特性!

    Tamic 专注移动开发!更多文章请关注 Csdn: http://blog.csdn.net/sk719887916/article/details/52612444 $ http://www.ji ...

  8. 从1....n中随机输出m个不重复的数

    void knuth(int n, int m) { srand((unsigned) time( NULL)); for (int i = 0; i < n && m; i++ ...

  9. Java进阶(四十六)简述ArrayList、Vector与LinkedList的异同点

    简述ArrayList.Vector与LinkedList的异同点   Collection类的继承图如下:   从图中可以看出,LinkedList与ArrayList.ArrayDeque这三者都 ...

  10. iOS9中如何注册远程通知

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 在以往的版本中,我们可以通过: [[UIApplication ...