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实现背景模糊的三种方式
Mar 09 HTML / CSS
CSS3中:nth-child和:nth-of-type的区别深入理解
Mar 10 HTML / CSS
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
Apr 26 HTML / CSS
CSS3实现div从下往上滑入滑出效果示例
Apr 28 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
May 02 HTML / CSS
HTML5验证以及日期显示的实现详解
Jul 05 HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
Oct 14 HTML / CSS
html5 css3网站菜单实现代码
Dec 23 HTML / CSS
HTML5 audio标签使用js进行播放控制实例
Apr 24 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
Jun 25 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
Jul 11 HTML / CSS
html+css实现赛博朋克风格按钮
May 26 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的库,结果发现很多东西
2006/12/31 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
phpmailer在服务器上不能正常发送邮件的解决办法
2014/07/08 PHP
php生成QRcode实例
2014/09/22 PHP
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
JAVASCRIPT函数作用域和提前声明 分享
2013/08/22 Javascript
Webwork 实现文件上传下载代码详解
2016/02/02 Javascript
JavaScript的函数式编程基础指南
2016/03/19 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
smartupload实现文件上传时获取表单数据(推荐)
2016/12/12 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
angular2中使用第三方js库的实例
2018/02/26 Javascript
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
vue 实现走马灯效果
2019/10/28 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
修改Vue打包后的默认文件名操作
2020/08/12 Javascript
python实现在pickling的时候压缩的方法
2014/09/25 Python
Python内置函数——__import__ 的使用方法
2017/11/24 Python
想学python 这5本书籍你必看!
2018/12/11 Python
Python完成毫秒级抢淘宝大单功能
2019/06/06 Python
python通过文本在一个图中画多条线的实例
2020/02/21 Python
python 对xml解析的示例
2021/02/27 Python
canvas实现飞机打怪兽射击小游戏的示例代码
2018/07/09 HTML / CSS
汉语言文学毕业生求职信
2013/10/01 职场文书
致铅球运动员广播稿精选
2014/01/12 职场文书
集中整治工作方案
2014/05/01 职场文书
情况说明书格式范文
2014/05/06 职场文书
语文课外活动总结
2014/08/27 职场文书
乡镇组织委员个人整改措施
2014/09/16 职场文书
2015年安全月活动总结
2015/03/26 职场文书
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python