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 18 HTML / CSS
canvas之万花筒效果的简单实现(推荐)
Aug 16 HTML / CSS
CSS3 仿微信聊天小气泡实例代码
Apr 05 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
Jun 04 HTML / CSS
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
Jan 09 HTML / CSS
html5画布旋转效果示例
Jan 27 HTML / CSS
HTML5中原生的右键菜单创建方法
Jun 28 HTML / CSS
canvas线条的属性详解
Mar 27 HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 HTML / CSS
CSS实现多个元素在盒子内两端对齐效果
Mar 30 HTML / CSS
几款流行的HTML5 UI框架比较(小结)
Apr 08 HTML / CSS
CSS三大特性继承性、层叠性和优先级详解
Jan 18 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获取某个目录大小的代码
2008/09/10 PHP
php str_pad 函数使用详解
2009/01/13 PHP
PHP教程 变量定义
2009/10/23 PHP
php 计算两个时间戳相隔的时间的函数(小时)
2009/12/18 PHP
php设计模式之命令模式使用示例
2014/03/02 PHP
destoon后台网站设置变成空白的解决方法
2014/06/21 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
PHP微信PC二维码登陆的实现思路
2017/07/13 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
jquery.validate分组验证代码
2011/03/17 Javascript
jquery仿百度百科底部浮动导航特效
2015/08/08 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
浅谈javascript中replace()方法
2015/11/10 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
Javascript创建类和对象详解
2017/05/31 Javascript
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
微信小程序实现红包功能(后端PHP实现逻辑)
2018/07/11 Javascript
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
基于原生JS封装的Modal对话框插件的示例代码
2020/09/09 Javascript
python控制台中实现进度条功能
2015/11/10 Python
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
Python3自定义http/https请求拦截mitmproxy脚本实例
2020/05/11 Python
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
可持续木材、生态和铝制太阳镜:Proof Eyewear
2019/07/24 全球购物
创业计划书如何吸引他人眼球
2014/01/10 职场文书
厨师长岗位职责
2014/03/02 职场文书
岗位廉洁从业承诺书
2014/03/28 职场文书
网站文案策划岗位职责
2015/04/14 职场文书
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫