HTML5在a标签内放置块级元素示例代码


Posted in HTML / CSS onAugust 23, 2013

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

HTML / CSS 相关文章推荐
CSS3 倾斜的网页图片库实例教程
Nov 14 HTML / CSS
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
Feb 04 HTML / CSS
CSS3区域模块region相关编写示例
Aug 28 HTML / CSS
CSS3 mask 遮罩的具体使用方法
Nov 03 HTML / CSS
html+css3实现的登录界面
Dec 09 HTML / CSS
Html5实现单张、多张图片上传功能
Apr 28 HTML / CSS
html5时钟实现代码
Oct 22 HTML / CSS
Html5实现文件异步上传功能
May 19 HTML / CSS
关于canvas绘制模糊问题的解决方法
Sep 24 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
Jun 11 HTML / CSS
Canvas波浪花环的示例代码
Aug 21 HTML / CSS
HTML5 script元素async、defer异步加载使用介绍
Aug 23 #HTML / CSS
html5基础教程常用技巧整理
Aug 20 #HTML / CSS
HTML5中div、article、section的区别及使用介绍
Aug 14 #HTML / CSS
用html5的canvas画布绘制贝塞尔曲线完整代码
Aug 14 #HTML / CSS
HTML5 embed 标签使用方法介绍
Aug 13 #HTML / CSS
HTML5 input元素类型:email及url介绍
Aug 13 #HTML / CSS
HTML5 预加载让页面得以快速呈现
Aug 13 #HTML / CSS
You might like
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
php7基于递归实现删除空文件夹的方法示例
2017/06/15 PHP
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
Jquery遍历节点的方法小集
2014/01/22 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
2015/09/11 Javascript
JS随机打乱数组的方法小结
2016/06/22 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
2018/01/08 Javascript
vue实现自定义多选与单选的答题功能
2018/07/05 Javascript
vue+webpack模拟后台数据的示例代码
2018/07/26 Javascript
ztree加载完成后显示勾选节点的实现代码
2018/10/22 Javascript
JS实现查找数组中对象的属性值是否存在示例
2019/05/24 Javascript
jQuery实现tab栏切换效果
2020/12/22 jQuery
[23:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
python调用cmd命令行制作刷博器
2014/01/13 Python
python3实现ftp服务功能(服务端 For Linux)
2017/03/24 Python
Python AES加密模块用法分析
2017/05/22 Python
浅谈python内置变量-reversed(seq)
2017/06/21 Python
Python绘制股票移动均线的实例
2019/08/24 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
用python-webdriver实现自动填表的示例代码
2021/01/13 Python
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
婴儿地球:Baby Earth
2018/12/25 全球购物
若干个Java基础面试题
2015/05/19 面试题
中学教师教育感言
2014/02/21 职场文书
临时租车协议范本
2014/09/23 职场文书
2014年评职称工作总结
2014/11/20 职场文书
工程部经理岗位职责
2015/02/02 职场文书
python使用BeautifulSoup 解析HTML
2022/04/24 Python
详解Redis的三种常用的缓存读写策略步骤
2022/05/06 Redis