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将你的设计带入下个高度
Aug 08 HTML / CSS
CSS实现的一闪而过的图片闪光效果
Apr 23 HTML / CSS
css3 伪元素和伪类选择器详解
Sep 04 HTML / CSS
一款纯css3实现的动画加载导航
Oct 08 HTML / CSS
支持IE8的纯css3开发的响应式设计动画菜单教程
Nov 05 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 HTML / CSS
css3 pointer-events 介绍详解
Sep 18 HTML / CSS
10分钟入门CSS3 Animation
Dec 25 HTML / CSS
HTML5 WebGL 实现民航客机飞行监控系统
Jul 25 HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
Jan 02 HTML / CSS
使用canvas绘制超炫时钟
Dec 17 HTML / CSS
HTML 里 img 元素的 src 和 srcset 属性的区别详解
May 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
咖啡的传说和历史
2021/03/03 新手入门
php适配器模式介绍
2012/08/14 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
PHP Redis扩展无法加载的问题解决方法
2019/08/22 PHP
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
JS实现QQ图片一闪一闪的效果小例子
2013/07/31 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
js实现遮罩层弹出框的方法
2015/01/15 Javascript
谈谈javascript中使用连等赋值操作带来的问题
2015/11/26 Javascript
js简单设置与使用cookie的方法
2016/01/22 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
关于List.ToArray()方法的效率测试
2016/09/30 Javascript
svg动画之动态描边效果
2017/02/22 Javascript
AngularJS 最常用的八种功能(基础知识)
2017/06/26 Javascript
NodeJs入门教程之定时器和队列
2019/03/08 NodeJs
js实现3D照片墙效果
2019/10/28 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
python使用SMTP发送qq或sina邮件
2017/10/21 Python
Python 中Pickle库的使用详解
2018/02/24 Python
tensorflow实现简单逻辑回归
2018/09/07 Python
python实现反转部分单向链表
2018/09/27 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
户外用品商店创业计划书
2014/01/29 职场文书
学校十一活动方案
2014/02/01 职场文书
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
销售人员职业生涯规划范文
2014/03/01 职场文书
大学军训感言1500字
2014/03/09 职场文书
优秀员工推荐信
2014/05/10 职场文书
2014领导班子四风剖析对照检查材料思想汇报
2014/09/20 职场文书
辩护词范文大全
2015/05/21 职场文书
小学运动会加油稿
2015/07/22 职场文书
详解Java实践之建造者模式
2021/06/18 Java/Android
mysql数据库如何转移到oracle
2022/12/24 MySQL