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使用技巧5个
Apr 02 HTML / CSS
CSS3 制作旋转的大风车(充满童年回忆)
Jan 30 HTML / CSS
一款利用html5和css3实现的3D滚动特效的教程
Jan 04 HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
Dec 30 HTML / CSS
CSS3打造百度贴吧的3D翻牌效果示例
Jan 04 HTML / CSS
详解css3 Transition属性(平滑过渡菜单栏案例)
Sep 05 HTML / CSS
基于 HTML5 Canvas实现 的交互式地铁线路图
Mar 05 HTML / CSS
html5构建触屏网站之网站尺寸探讨
Jan 07 HTML / CSS
HTML5 Canvas基本线条绘制的实例教程
Mar 17 HTML / CSS
详解HTML5 录音的踩坑之旅
Dec 26 HTML / CSS
canvas 阴影和图形变换的示例代码
Jan 02 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
Mar 02 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
将数字格式的计算结果转为汉字格式
2006/10/09 PHP
一步一步学习PHP(6) 面向对象
2010/02/16 PHP
ThinkPHP实现事务回滚示例代码
2014/06/23 PHP
PHP中抽象类、接口的区别与选择分析
2016/03/29 PHP
php、java、android、ios通用的3des方法(推荐)
2016/09/09 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
JQuery为textarea添加maxlength属性的代码
2010/04/07 Javascript
加速IE的Javascript document输出的方法
2010/12/02 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
2013/11/13 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
22点关于jquery性能优化的建议
2014/05/28 Javascript
jQuery实现自动调用和触发某个事件的方法
2016/11/18 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
echarts学习笔记之图表自适应问题详解
2017/11/22 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
2019/01/15 Javascript
微信小程序使用npm包的方法步骤
2019/08/13 Javascript
HTML+JavaScript实现扫雷小游戏
2019/09/30 Javascript
python 七种邮件内容发送方法实例
2014/04/22 Python
TensorFlow实现卷积神经网络CNN
2018/03/09 Python
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
使用Python轻松完成垃圾分类(基于图像识别)
2019/07/09 Python
解决Python列表字符不区分大小写的问题
2019/12/19 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
HTML5边玩边学(3)像素和颜色
2010/09/21 HTML / CSS
设计师珠宝:Ylang 23
2018/05/11 全球购物
酒店执行总经理岗位职责
2013/12/15 职场文书
试用期转正鉴定评语
2014/01/27 职场文书
家长通知书教师评语
2014/04/17 职场文书
有关爱国演讲稿
2014/05/07 职场文书
幼儿园中班区域活动总结
2014/07/09 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
生日赠语
2015/06/23 职场文书
2016年元旦寄语
2015/08/17 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书