原文地址：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. 各种电子面单Api接口免费对接-快宝开放平台

    1.什么是电子面单? 快递公司联合向商家提供的一种通过热敏纸打印输出纸质物流面单的物流服务,并且承载分单自动化算法等数据服务,是快递行业赋能的基础产品和服务. 2.电子面单长什么样? 各快递公司有自己 ...

  2. Day 2 Python数值计算

    一.数值数据类型 在Python中,数值数据类型有以下两种: 整数 整数用"int"数据类型表示.int类型的数据可以是正数也可以是负数,Python可以处理任意大小的整数. 浮点 ...

  3. salesforce lightning零基础学习(三) 表达式的！(绑定表达式)与 #(非绑定表达式)

    在salesforce的classic中,我们使用{!expresion}在前台页面展示信息,在lightning中,上一篇我们也提及了,如果展示attribute的值,可以使用{!v.expresi ...

  4. 硬盘存储计量单位KB、MB、GB大小换算

    一. 预备知识 1. bit与byte 1. bit(简记为 b) 1 bit = 0 or 1 = one binary 2. byte(简记为 B) 1 byte = 8 bits 1字节,8个二 ...

  5. Java内存泄漏分析系列之一：使用jstack定位线程堆栈信息

    原文地址:http://www.javatang.com 前一段时间上线的系统升级之后,出现了严重的高CPU的问题,于是开始了一系列的优化处理之中,现在将这个过程做成一个系列的文章. 基本概念 在对J ...

  6. 操作系统内核Hack：(一)实验环境搭建

    操作系统内核Hack:(一)实验环境搭建 三四年前,心血来潮,入手<Orange's:一个操作系统的实现>学习操作系统内核,还配套买了王爽的<汇编语言(第二版)>和<80 ...

  7. hive中的NULL(hive空值处理)

    HIVE表中默认将NULL存为\N,可查看表的源文件(hadoop fs -cat或者hadoop fs -text),文件中存储大量\N, 这样造成浪费大量空间.而且用java.python直接进入 ...

  8. DB 查询分析器7.01 新增的保存执行结果到多个文件功能

        1      引言   中国本土程序员马根峰(CSDN专访马根峰:海量数据处理与分析大师的中国本土程序员)推出的个人作品----万能数据库查询分析器,中文版本DB 查询分析器.英文版本< ...

  9. 高端技巧：如何使用#define定义变量

    Introduction 想在源文件中定义一个跟行号有关的变量,每次都手动输入实在是太慢了,本文介绍如何使用宏定义来定义与行号有关的变量. 例如:我们想在源代码的第10行定义A_10这样的一个整形变量 ...

  10. Xcode 8新功能介绍

    概述 Xcode 8正式版在9月13日已经推送给开发者下载,下载之后就出现了很多编译错误,之前的插件也不能用了,但是发现Xcode8把好多不错的插件功能整合到自身了,感觉这点也挺不错. 结合自己遇到的 ...