原文地址：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. MFC多线程

    当前流行的Windows操作系统能同时运行几个程序(独立运行的程序又称之为进程),对于同一个程序,它又可以分成若干个独立的执行流,我们称之为线程,线程提供了多任务处理的能力.用进程和线程的观点来研究软 ...

  2. c++DLL编程详解

    DLL(Dynamic Link Library)的概念,你可以简单的把DLL看成一种仓库,它提供给你一些可以直接拿来用的变量.函数或类.在仓库的发展史上经历了“无库-静态链接库-动态链接库”的时代. ...

  3. PHP 完整表单实例

    PHP - 在表单中确保输入值 在用户点击提交按钮后,为确保字段值是否输入正确,我们在HTML的input元素中插添加PHP脚本, 各字段名为: name, email, 和 website. 在评论 ...

  4. RDO Stack: Failed connect to server

    Issue: When you create an instance, but cannot connect to the VNC Server because of the error messag ...

  5. iOS中的颜色

    最近在改Bug的时候,才注意到iOS 中的颜色竟然也大有文章,特来记录一下. 先说一下问题,因为某界面中有用xib实现的一个view,而这个view 只在UIColletionView的layout ...

  6. iOS 应用提交到iTunes Connect，显示"正在处理"后消失不见

    打包上传iTunes Connect 成功后,进入iTunes Connect 会看到如下的构建信息: 可是,过一会再刷新该页面,构建的版本就消失了. 出现如上所述的情况,主要目前已知的有两种原因: ...

  7. springMVC源码分析--ControllerBeanNameHandlerMapping（八）

    在上一篇博客springMVC源码分析--AbstractControllerUrlHandlerMapping(六)中我们介绍到AbstractControllerUrlHandlerMapping ...

  8. springMVC源码分析--SimpleUrlHandlerMapping（四）

    上一篇博客springMVC源码分析--AbstractUrlHandlerMapping(三)中我们介绍了AbstractUrlHandlerMapping,主要介绍了一个handlerMap的ur ...

  9. Java异常处理-----非运行时异常(受检异常)

    非运行时异常(受检异常) 如果出现了非运行时异常必须进行处理throw或者try{}catch(){}处理,否则编译器报错. 1:IOException 使用要导入包import java.io.IO ...

  10. android 网络获取json并且显示（2）

    1.将要的取得的json数据格式如下: 我们封装之前的类用google提供的JSONArray和JSONObject类对json字符串进行解析. 对于姚明显示每一条数据,我们封装了一个类如下: pub ...